come creare una galleria fotografica con wordpress 2.5

17
Benvenuto Wordpress 2.5. Caro Flickr addio... ovvero come crearsi una galleria fotografica sfruttando le nuove funzionalità di Wordpress 2.5 Davide Salerno [ [email protected] ] iWordCamp -10 Maggio 2008 - Milano 1

Upload: davide-salerno

Post on 18-Dec-2014

8.294 views

Category:

Technology


2 download

DESCRIPTION

Presentazione iWordCamp 2008 -Milano su Come creare una galleria fotografica con Wordpress 2.5

TRANSCRIPT

Page 1: Come creare una galleria fotografica con Wordpress 2.5

Benvenuto Wordpress 2.5. Caro Flickr addio...ovvero

come crearsi una galleria fotografica sfruttando le nuove funzionalità di Wordpress 2.5

Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

1

Page 2: Come creare una galleria fotografica con Wordpress 2.5

Instant Bio

• Davide Salerno

• 23 anni

• Studio Ingegneria Informatica al Politecnico di Torino

• Sviluppatore Web (PHP/MySQL)

• Arbitro di calcio

• Continua... (http://www.davidesalerno.net/info/)

2 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 3: Come creare una galleria fotografica con Wordpress 2.5

Vantaggi di una galleria fotografica con WP

• Non affiderete le vostre foto a terzi

• Avrete più contenuti sul vostro sito

• I motori di ricerca vi porteranno più visitatori

• Avrete più link al vostro sito

• Non avrete rallentamenti dovuti a plugin pesanti(se Matt ha caricato più di 1200 foto vuol dire che è una soluzione affidabile anche per grandi quantità di immagini...)

• Sfrutterete lo spazio illimitato del vostro hosting

• Non dovrete pagare più nessun abbonamento

3 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 4: Come creare una galleria fotografica con Wordpress 2.5

• E’ meno “sociale”

• Non avrete alcune funzioni “avanzate” (Picnic, Geotagging, Flickr Uploadr....)

Svantaggi di una galleria fotografica con WP

4 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 5: Come creare una galleria fotografica con Wordpress 2.5

• Creamoci una categoria “Foto”

• Nascondiamola dal loop dei post

• Aggiustiamo il tema

• Creamoci una pagina dove mostrare i nostri album/set

• Cariachiamo le nostre foto

Cosa bisogna fare? Panoramica

5 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 6: Come creare una galleria fotografica con Wordpress 2.5

Cosa bisogna fare? Creazione categoria

E’ banale... Segnatevi però l’ID della nuova categoria perchè ci servirà più avanti

6 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 7: Come creare una galleria fotografica con Wordpress 2.5

Cosa bisogna fare? Nascondiamo la categoriaAndate a modificare tutti i file del vostro tema che contengono un loop con i post andando ad escludere la categoria che avete appena creato.

Solitamente il loop si trova nei file:

• index.php

• archive.php

• search.php

• the_loop.php

Subito dopo il seguente frammento di codice:

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

! !

Andate ad inserire:

<?php if (in_category('ID') ) continue; ?>

Ovviamente al posto di ID sostituite l’ID della vostra categoria. 7 Davide Salerno [ [email protected] ]

iWordCamp -10 Maggio 2008 - Milano

Page 8: Come creare una galleria fotografica con Wordpress 2.5

Cosa bisogna fare? Nascondiamo la categoria

Se avete delle pagine di archivio o mostrate l’elenco delle categorie sulla barra laterale nascondete anche lì la vostra categoria “segreta”Solitamente i file da modificare sono:

• archives.php

• sidebar.php

Trovate il seguente frammento di codice:

<?php wp_list_cats(); ?>

! !

e modificatelo così:

<?php wp_list_cats('exclude=ID'); ?>

Ovviamente al posto di ID sostituite l’ID della vostra categoria.

8 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 9: Come creare una galleria fotografica con Wordpress 2.5

Creamoci un template per pagine all’interno del quale visualizzeremo l’elenco dei nostri album/set*

Cosa bisogna fare? Aggiustiamo il tema

<?php /* Template Name: Galleria fotografica */ ?>

<?php get_header(); ?> <?php // Which page of the blog are we on?$paged = get_query_var(‘paged’);if($paged==’’){$paged=1;}query_posts(‘cat=ID&paged=’.$paged); //gets all posts ?>

<?php $x=0; if (have_posts()) : ?>

<?php $post = $posts[0]; // Hack. Setta la variabile $post in modo che la funzione the_date() venga eseguita correttamente. ?> <div class=”post” id=”post”>! ! <h2 class=”storytitle” style=”margin:5px 0”><a href=”http://www.vostrodominio.com“ rel=”bookmark” title=”Permalink a Foto”>Foto</a></h2>! ! ! ! <?php while (have_posts()) : the_post(); ?> ! ! <?php global $wpdb;! ! ! ! $attachment_id = $wpdb->get_var(“SELECT ID FROM $wpdb->posts WHERE post_parent = ‘$post->ID’ AND post_status = ‘inherit’ AND post_type=’attachment’ ORDER BY post_date ASC LIMIT 1”); ?>! ! ! ! <div class=”photo-content”>! ! ! ! <div class=”photo-thumb” style=”width:30%;float:left;”><a href=”<?php the_permalink() ?>” title=”Guarda la galleria <?php the_title(); ?>” rel=”bookmark”><?php echo get_attachment_icon($attachment_id); ?></a></div>! ! ! ! <div class=”photo-desc” style=”width:70%;float:right;”>! ! ! ! <h3 class=”storytitle”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permalink a <?php the_title(); ?>”><?php the_title(); ?></a></h3>! ! ! ! <div class=”meta”><span class=”tags”>Questo album contiene <?php $attachments = get_children(array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’)); if ( ! is_array($attachments) ){ echo “0”;}else{ $count = count($attachments); echo $count;}?> foto</span> <?php edit_post_link(‘(modifica)’,’’,’’); ?></div>! ! ! ! </div></div>! ! ! ! <?php endwhile; ?>! ! ! ! </div><hr />! ! ! <div class=”navigation”> <?php next_posts_link(‘<span>&laquo;</span> Gallerie Precedenti’) ?>

<?php previous_posts_link(‘Gallerie Successive <span>&raquo;</span>’) ?>! ! ! </div>! ! <?php endif; ?><?php get_footer(); ?>

*Prendete spunto dalla pagina page.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template

9 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 10: Come creare una galleria fotografica con Wordpress 2.5

Creamoci un template per le pagine dei singoli album/post*

Cosa bisogna fare? Aggiustiamo il tema

<?php get_header(); ?><?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID(); ?>”>! ! !! ! ! ! <h2 class=”storytitle”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permalink a <?php the_title(); ?>”><?php the_title(); ?></a></h2>! ! ! ! <div class=”meta”><span class=”tags”>Questo album contiene <?php $attachments = get_children(array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’)); if ( ! is_array($attachments) ){ echo “0”;}else{ $count = count($attachments); echo $count;}?> foto</span> <?php edit_post_link(‘(modifica)’,’’,’’); ?></div>! ! ! ! ! <div class=”storycontent”>! ! ! ! ! <?php the_content(‘Continua a leggere &raquo;’); ?>!! ! ! ! </div>! ! ! ! !! ! ! <div class=”respond”>! ! ! ! <p></p>! ! ! !! </div></div>! !! ! <div class=”navigation”><div class=”left”><?php previous_post_link(‘&laquo; %link’,’%title’,TRUE) ?></div><div class=”right”><?php next_post_link(‘%link &raquo;’,’%title’,TRUE) ?></div></div>

! <?php comments_template(); ?>

! <?php endwhile; else: ?>

! <h2 class=”center”>Non trovato</h2>! ! ! <p align=”center”>Spiacente nessun articolo corrisponde alla tua ricerca</p>!! <?php endif; ?>!<?php get_footer(); ?>

*Prendete spunto dalla pagina single.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template

10 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 11: Come creare una galleria fotografica con Wordpress 2.5

Andiamo a modificare il template dei singoli post (single.php)

In cima come prima riga inseriamo

<?php if(!in_category(‘ID’)){?>

Al posto di ID inserite l’ID della categoria che conterrà la galleria fotografica.

Alla fine del file come ultima riga inseriamo

<?php }else{load_template(TEMPLATEPATH . ‘/photos.php‘);}?>

Al posto di photos.php inserite in questa riga il nome del template file creato alla slide 10

Cosa bisogna fare? Aggiustiamo il tema

11 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 12: Come creare una galleria fotografica con Wordpress 2.5

Creamoci un template per le pagine delle singole foto*

Cosa bisogna fare? Aggiustiamo il tema

<?php get_header(); ?><?php if (have_posts()) : while (have_posts()) : the_post(); ?>

! ! <div class=”post” id=”post-<?php the_ID(); ?>”>! ! ! ! ! ! ! <h2 class=”storytitle”><a href=”<?php echo get_permalink($post->post_parent); ?>“ rev=”attachment”><?php echo get_the_title($post->post_parent); ?></a> &raquo; <?php the_title(); ?></h2>! ! ! ! ! <div class=”storycontent”>! ! ! ! ! <div class=”attachment” ><a href=”<?php echo wp_get_attachment_url($post->ID); ?>“><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?></a></div> ! ! ! ! ! <div class=”caption”><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?></div>! ! ! ! ! <?php the_content(‘Continua a leggere &raquo;’); ?>!! ! ! ! </div>! ! ! ! !! ! ! <div class=”respond”>! ! ! ! <p></p>! ! ! !! </div>! <div>Vedi l’immagine alla <a href=”<?php echo wp_get_attachment_url($post->ID); ?>” tile=”Fullsize”>dimensione massima</a></div></div>! !! ! <div class=”navigation” id=”navigation”><div class=”left”><div class=”photo-thumb”><?php previous_image_link() ?></div></div><div class=”right”><div class=”photo-thumb”><?php next_image_link() ?></div></div></div>

! <?php comments_template(); ?>

! <?php endwhile; else: ?>

! <h2 class=”center”>Non trovato</h2>! ! ! <p align=”center”>Spiacente nessun articolo corrisponde alla tua ricerca</p>!! <?php endif; ?><?php get_footer(); ?>

*Prendete spunto dalla pagina single.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template

12 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 13: Come creare una galleria fotografica con Wordpress 2.5

Creiamo una nuova pagina dalla dashboard di Wordpress e assegnamogli come template pagina quello creato alla slide 9

Cosa bisogna fare? Creiamo una nuova pagina

13Davide Salerno [ [email protected] ]

iWordCamp -10 Maggio 2008 - Milano

Page 14: Come creare una galleria fotografica con Wordpress 2.5

Creiamo un nuovo album/set semplicemente creando un nuovo post.

Carichiamo le nostre foto in tutta comodità con il nuovo sistema di upload di Wordpress 2.5 ed inseriamole nel nostro post

Selezioniamo come categoria per il post quella che abbiamo appositamente creato all’inzio

Cosa bisogna fare? Creiamo un nuovo album

14 Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano

Page 15: Come creare una galleria fotografica con Wordpress 2.5

Ecco il risultato...

...allora cosa state aspettando?15 Davide Salerno [ [email protected] ]

iWordCamp -10 Maggio 2008 - Milano

Page 17: Come creare una galleria fotografica con Wordpress 2.5

Note

17

Quest’opera è rilasciata con Licenza Creative Commons Attributions Share-Alike.

Per leggere copia della licenza visitare il sito:

http://creativecommons.org/licenses/by-nc-nd/2.5/it/

o spedisci una lettera a:

Creative Commons559 Nathan Abbott Way, StanfordCalifornia,94305, USA

Davide Salerno [ [email protected] ]iWordCamp -10 Maggio 2008 - Milano