TEMI - Struttura - Ci sono due possibilità per modificare un tema: - Tramite l editor di amministrazione (AspettoàEditor), che consente di selezionare modificare i file (NOTA: copiare il file prima di ogni modifica!) - Tramite la modifica in locale dei file del tema e il trasferimento sul sito via FTP I file del tema - Tutti i temi gratuiti sono scaricabili da http://wordpress.org/extend/themes. Sono sottoforma di file.zip. Si installano attraverso AspettoàTemi àinstallazione Temi. Possono essere installati direttamente selezionandolo (da Nuovi, Trova Temi) o caricando il file.zip relativo (da Carica Media) - La cartelle di destinazione dei temi è nella directory wp-content/themes/ di Wordpress. - Alcuni file sono dedicati ai contenuti, altri sono relativi a sezioni del sito (barra laterale, testata, ecc.). In ognuno di questi file sono presenti i Template Tag, ossia righe di testo PHP utilizzate per visualizzare i vari contenuti. Per esempio <?php the_autor[];?> visualizza il nome dell autore dell articolo, mentre <?php the_tags[];?> mostra i tag associati a quel determinato articolo. Su http://codex.wordpress.org/template_tags possiamo consultare l elenco dei Template Tag disponibili. - Di seguito i file principali di un tema: - index.php. E il file principale del tema e deve essere sempre presente. Normalmente contiene gli elementi per caricare la testata, il piè di pagina, la barra laterale, l elenco degli articoli. - header.php e footer.php. Rappresentano la testata e il piè di pagina del sito. - style.css. Foglio di stile per definire l spetto del tema (caratteri, colori, dimensioni, ecc.). Alcuni temi hanno più fogli di stile ma questo rimane il principale. - page.php e single.php. Rappresentano la singola pagina e il singolo articolo. Se entrambi o uno di questi file non è/non sono presenti, per la visualizzazione viene usato index.php. Permettono di impostare una diversa visualizzazione del singolo articolo rispetto a quella utilizzata in home page e nelle pagine degli archivi. - slidebar.php. E il file relativo alla barra laterale del blog. E possibile creare più file dedicati a questo scopo. Molti autori, nel caso di barre laterali a due colonne, tengono separate le due colonne in file distinti. Ovviamente in questo caso gli atri file del tema devono essere modificati, dato che di default cercheranno solo il file slidepar.php. - comments.php. Si occupa della sezione dei commenti. Normalmente è richiamato da page.php e single.php. - archive.php. Utilizzato per visualizzare gli archivi mensili delle categorie, page 1 / 8
dei tag e degli autori. E possibile creare file distinti relativi alle diverse tipologie e persino alla singola categoria. Se ad esempio abbiamo il file tag.php, questo si occuperà di visualizzare l archivio degli articoli basato sui tag. - search.php. permette di personalizzare la pagina dei risultati di una ricerca. Se non presente, verrà utilizzato index.php. - 404.php. Personalizza la pagina di errore relativa a quando la pagina richiesta non esiste. Utile per aggiungere ulteriori informazioni all utente al messaggio standard di errore. - functions.php. Non è presente in tutti i temi e raccoglie funzioni per svolgere compiti particolari. E spesso utilizzato per modificare alcuni comportamenti di default di WordPress. Il Loop di WordPress - E il codice che permette a WordPress di visualizzare la lista degli articoli. Per illustrarlo prendiamo il file index.php del tema Default (è il primo in assoluto, basta scaricarlo cercano Default) e illustriamo le parti fondamentali. - La prima parte del loop: <?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> Serve ad interrogare il DB per verificare se sono presenti degli articoli. Se la risposta è positiva per ogni articolo vengono eseguite tutte le istruzioni presenti fino a <?php endwhile;?>. - Analizziamo i singoli elementi: <div <?php post_class();?> id="post-<?php the_id();?>"> page 2 / 8
Permette di creare il DIV che contiene il post. <?php post_class();?> attribuisce al post la classe di stile CSS relativa, mentre <?php the_id();?> permette di attribuire a quel post un ID univoco (basato sull ID dell articolo presente sul DB). <h2><a href="<?php the_permalink()?>" rel="bookmark" title="<?php printf( ('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0'));?>"> <?php the_title();?> </a></h2> Il codice sopra serve a visualizzare il titolo dell articolo (<?php the_title();?>), linkato all URL dell articolo (<?php the_permalink()?>) <small><?php the_time( ('F js, Y', 'kubrick'))?> <!-- by <?php the_author()?> --></small> Questa parte serve a visualizzare la data di pubblicazione del post che in questo caso è nel formato anglosassone (<?php the_time( ('F js, Y', 'kubrick'))?>) e il nome dell autore del post (<?php the_author()?>). Da notare però che quest ultimo essendo tra i tag di commento <!-- -->, non comparirà nell articolo.. Se volessimo quindi ottenere la data nel formato italiano e visualizzare l autore basterà modificare la riga nel seguente modo: <small><?php the_time( ('j F Y', 'kubrick'))?> da <?php the_author()?></small> page 3 / 8
Notare l uso della parola kubrick nel codice. E tipica di questo tema ed è utilizzata per la localizzazione del tema nelle varie lingue. La traduzione del tema in italiano è contenuta nel file it_it.mo presente nella cartella language del tema. <div> <?php the_content( ('Read the rest of this entry»', 'kubrick'));?> </div> Questo codice visualizza il contenuto dell articolo fino al tag <!-more--> utilizzato per spezzare il post in due parti (vedi il capitolo sulla scrittura degli articoli, pag 10.). <p> <?php the_tags( ('Tags:', 'kubrick'). ' ', ', ', '<br />');?> <?php printf( ('Posted in %s', 'kubrick'), get_the_category_list(', '));?> <?php edit_post_link( ('Edit', 'kubrick'), '', ' ');?> <?php comments_popup_link( ('No Comments»', 'kubrick'), ('1 Comment»', 'kubrick'), ('% Comments»', 'kubrick'), '', ('Comments Closed', 'kubrick') );?> </p> Questo codice chiude il loop e serve a visualizzare, al di sotto dell articolo: I tag associati agli articoli, le categorie nelle quali l articolo è stato inserito, il link per modificare l articolo (visibile solo se si è collegati come amministratore o utente autorizzato), il link che punta al modulo dei commenti e che indica anche il numero dei commenti. Header, Sidebar e Footer - All interno dei file del tema si nota la presenza dei tag page 4 / 8
<?php get_header();?> <?php get_sidebar();?> <?php get_footer();?> - Servono a caricare testata, alla barra laterale e al piè di pagina, che corrispondono rispettivamente ai file header.php, sidebar.php e footer.php. - E possibile creare delle varianti per queste tre parti ed è anche possibile creare nuovi file da includere nel tema stesso. Se ad esempio vogliamo creare un piè di pagina differente, da utilizzare solo nella pagina dei singoli articoli ( single.php): duplicare il file footer.php con il nome di footer_single.php; modificare il file footer_single.php per ottenere il nuovo piè di pagina; aprire il file single.php e sostituire in fondo alla pagina la riga <?php get_footer();?>, con <?php include( TEMPLATEPATH. /footer_single.php );?> Esempi di modifiche al foglio di stile - Supponiamo di voler cambiare i caratteri utilizzati per i titoli dei post. Questi sono racchiusi all interno di un tag H2. - Aprire il file style.css e cerchiamo la riga con H2, troveremo questa h1, h2, h3 { font-family: Arial, Helvetica, San-Serif; font-weight: bold; } - Le modifiche che applichiamo qui però sono su tutti gli elementi del blog che utilizzano tali tag. Se però vogliamo fare la modifica solo per gli elementi H2 che si trovano dentro un post, dobbiamo creare un nuovo blocco del tipo: page 5 / 8
.post h2 { font-family: Times, serif; } - In questo modo il nuovo carattere verrà utilizzato solo per quegli elementi H2 all interno di un elemento che utilizza la classe post, ossia il DIV che racchiude il post. - Supponiamo di voler creare un bordo (grigio scuro, con margine interno di 5px) ed uno sfondo (grigio chiaro) alla sezione presente alla fine di ogni post (quella che contiene, tag, categorie e link ai commenti. Queste informazioni si trovano del paragrafo che utilizza la classe postmetadata (vedi ad inizio pagina). - Nel file style.css aggiungiamo il seguente codice:.postmetadata { backgroung-color: #eee; border: 1px solid #999; padding: 5px; } I tag condizionali - Riferimento per saperne di più http://codex.wordpress.org/conditional_tags. - Permettono di svolgere alcune azioni al verificarsi o meno di una determinata condizione. - Supponiamo di voler far apparire un messaggio nella testata o nel piè di pagina solo quando un utente visita la pagina di un singolo articolo. Inserire il seguente codice nel file header.php o footer.php <?php if (is_single()) { echo Questo è un messaggio ; }?> - I tag condizionali consentono di lavorare anche a livello di singolo articolo o singola pagina e permettono di modificare il proprio tema a piacimento senza richiedere la creazione di tanti file differenti. page 6 / 8
I campi personalizzati - L inserimento di un campo personalizzato in un articolo non è sufficiente a renderlo visibile, occorre scegliere nel tema un punto in cui farlo apparire. - Supponiamo di fare vedere il campo valutazione_libro nella pagina del singolo articolo. Aprire il file single.php ed inserire le seguenti istruzioni dopo il contenuto del post. <?php the_meta();?> - Nel tema Default andrà subito dopo al seguente codice <?php wp_link_pages(array('before' => '<p><strong>'. ('Pages:', 'kubrick'). '</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));?> - Così però viene mostrato direttamente il nome del campo ed il valore sotto forma di lista senza lasciarci la possibilità di ulteriori personalizzazioni. Provare a sostituire il tag <?php the_meta();?> con <?php if (get_post_meta($post->id, valutazione_libro,true)) {?> <?php echo "<p><b> Giudizio sul libro</b> ". get_post_meta($post->id, valutazione_libro, true). "</p>"; )?> La prima riga controlla se è presente il campo per quell articolo. Se si, al posto del page 7 / 8
nome viene scritto in grassetto Giudizio sul libro seguito dal valore del campo. - Per altre informazioni sui campi personalizzati andare su http://codex.wordpress.org/custom_fields. page 8 / 8