WordCamp Bologna - 24 novembre 2012 1

Creare un tema personalizzato per wordpress

Daniele Balboni

WordCamp Bologna - 24 novembre 2012 2

Struttura standard di un tema

● Style.css ● Homepage

index.php home.php

● Single Post single.php

● Page page.php

● Category category.php archive.php

• Tags tag.php

• Search Results search.php

• 404 404.php

WordCamp Bologna - 24 novembre 2012 3

WordCamp Bologna - 24 novembre 2012 4

Il foglio di stile – style.css

Il tema deve contenere il file style.css con la seguente intestazione: I metadata sono fondamentali per l’installazione corretta del tema

Ovviamente style.css può contenere anche gli stili per il vostro layout

WordCamp Bologna - 24 novembre 2012 5

Functions.php

● E’ il primo file ad essere caricato e si comporta come un plugin.

● Questo file solitamente è utilizzato per personalizzare Il tema: definizione delle widget area, caricamento di css e script, customizzazione di contenuti come excerpt e meta informazioni.

● La logica del tema va inserita in questo file non nei template!

● Se functions.php fa troppe cose meglio riorganizzare il codice con gli includes.

WordCamp Bologna - 24 novembre 2012 6

Setup del tema

WordCamp Bologna - 24 novembre 2012 7

Contenuto dei templates

● Index.php La home page dei contenuti. Di default carica gli ultimi post inseriti, è

possibile usare anche una pagina statica come front page.

● Page.php ● Carica I contenuti definiti come ‘pages’ ● ?page_id=2

● Archive.php Carica I post inseriti in una categoria/tassonomia.

• Categorie • Tags • Autori • Date

● Single.php Carica I contenuti di un singolo post

WordCamp Bologna - 24 novembre 2012 8

L’oggetto bloginfo

● Mostra le informazioni associate al tuo blog, la maggior parte delle quali sono memorizzate nelle opzioni generali che si trovano nel Pannello di Amministrazione. Questo marcatore può essere usato dovunque, all'interno delle pagine di template: <?php bloginfo(‘url'); ?>

● name = Testpilot

● description = Just another WordPress blog

● admin_email = admin@example

● url = http://example/home

● wpurl = http://example/home/wp

● stylesheet_directory = http://example/home/wp/wp-content/themes/child-theme

● stylesheet_url = http://example/home/wp/wp-content/themes/child-theme/style.css

● template_directory = http://example/home/wp/wp-content/themes/parent-theme

● template_url = http://example/home/wp/wp-content/themes/parent-theme

● rss2_url = http://example/home/feed

● rss_url = http://example/home/feed/rss

● pingback_url = http://example/home/wp/xmlrpc.php

● rdf_url = http://example/home/feed/rdf

● comments_rss2_url = http://example/home/comments/feed

● charset = UTF-8

● html_type = text/html

● language = en-US

● text_direction = ltr

● version = 3.1

WordCamp Bologna - 24 novembre 2012 9

Cosa non fare in un template

● Costruire a mano le URL’s ● <a href="'.get_bloginfo('url').'/category/'.$ctBX->category_nicename.‘”> NO ● get_category_link($id) o get_permalink($id) SI

● Non verificare che esista la funzione desiderata ● if(function_exists(‘plugin_function’)):

plugin_function(); endif;

● Non usare le funzioni di wp per sapere dove siamo ● if(isset($_GET[‘s’]) || $_SERVER[‘REQUEST_URI’] == ‘/index.php’) NO ● if(is_search() || is_home()) SI

● Caricare JS o CSS dal template

● ex. Caricando I js e/o I css direttamente dal template rischiamo di caricare lo stesso script più volte oppure rischiamo di creare conflitti.

● Usiamo wp_enqueue_script e wp_enqueue_style in functions.php per caricare I js e I css utili per il nostro tema: http://codex.wordpress.org/Function_Reference/wp_enqueue_script http://codex.wordpress.org/Function_Reference/wp_enqueue_s

● Rimuovere wp_head() o wp_footer() ● Rimuovendo le chiamate alle funzioni wp_head() e wp_footer() rischiamo di non far

caricare correttamente I plugins o di non eseguire le actions sull’header e/o sul footer

WordCamp Bologna - 24 novembre 2012 10

The Loop

Quando viene richiesta una pagina WP esegue una query sul database in base al tipo di template richiesto (archive, single, page). La query di default è accessibile dal Loop

if ( have_posts() ) : while ( have_posts() ) : the_post(); //call our different template tags to retrieve data (title, date, post_content)

endwhile; else: //default if we have no posts in the loop

endif;

Possiamo modificare la query eseguendo la funzione query_posts() prima del loop.

query_posts(‘orderby=title&order=ASC');

query_posts() accetta diversi parametri. http://codex.wordpress.org/Function_Reference/query_posts

10

WordCamp Bologna - 24 novembre 2012 11

Visualizzare I contenuti

● I Template tags sono funzioni da eseguire all’interno del Loop per visualizzare i dati

● the_title() ● the_content() ● the_permalink()

Queste funzioni sono equivalenti alle precedenti ma restituiscono solo il valore (no echo) ● get_title() ● get_permalink()

● $wp_query object (outside the loop or extra data) Utile per eseguire ulteriori query all’interno della pagina

● $post object Tutti I dati del post sono memorizzati in questo oggetto

– $post->comment_count , $post->post_modified, etc

http://codex.wordpress.org/Function_Reference/WP_Query

WordCamp Bologna - 24 novembre 2012 12

Anatomia di una pagina

WordCamp Bologna - 24 novembre 2012 13

Eseguire più query

● Qualche volta abbiamo la necessità di eseguire più query per pagina, ad esempio per visualizzare I post correlati. <?php $related_posts = new WP_Query(‘cat=3&showposts=5'); while ($related_posts->have_posts()) : $related_posts->the_post(); ?> <div class=“related_post"> <h2><?php the_title(); ?></h2> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>”>Learn More</a> </div> <?php endwhile; wp_reset_query(); ?>

● WP_Query accetta gli stessi parametri di query_posts() http://codex.wordpress.org/Function_Reference/query_posts.

● Usiamo wp_reset_query() e wp_reset_postdata() per “ritornare” alla query di default

WordCamp Bologna - 24 novembre 2012 14 14

Gestire templates, css e scripts

a) get_stylesheet_directory()/get_stylesheet_directory_uri() Utilizziamo queste funzioni quando vogliamo rendere i nostri template modificabili e sovrascribili nel child theme b) get_template_directory()/get_template_directory_uri() Utilizziamo queste funzioni quando vogliamo rendere I nostri template non modificabili nel child theme c) Per includere e organizzare meglio il nostro tema ed includere un template in un altro template usiamo get_template_part() or locate_template()

WordCamp Bologna - 24 novembre 2012 15 15

Template personalizzati per contesto

get_template_part( $file, $slug ) Facilita il caricamento di template personalizzati in base al contesto Si basa sulla gerarchia standard dei template: Esempio In single.php: get_header( 'single' ) => header-single.php In page.php: get_template_part( 'loop', 'page' ) => loop-page.php Possiamo personalizzare anche header, footer e sidebar in base al contesto: get_header( $slug ), get_footer( $slug ), get_sidebar( $slug )

WordCamp Bologna - 24 novembre 2012 16 16

Utilizziamo i post format

get_template_part( $file, get_post_format() ) Possiamo personalizzare il contenuto in base al post-format scelto dall'utente. La funzionalità post-format è disponibile da wp 3.1 get_post_format() ritorna null for “standard” Se non è definito un template per il post-format scelto verrà caricato il file di default. Esempio get_template_part( 'entry', get_post_format() ) –entry-aside.php –entry.php

WordCamp Bologna - 24 novembre 2012 17 17

Usiamo le actions per le funzioni

Tutte le funzioni devono essere richiamate da un action Pro: possiamo cancellare la funzione con remove_action Errato Eseguire la funzione direttamente in functions.php

Corretto Richiamare la funzione all'interno di un action

WordCamp Bologna - 24 novembre 2012 18 18

Ridefinire le funzioni in un child theme

In un child theme possiamo ridefinire una funzione presente nel parent theme. Per farlo basta aggiungere un semplice controllo if( !function_exists('function_to_override') ) nel parent theme. Esempio:

WordCamp Bologna - 24 novembre 2012 19

Perchè usare wp_enqueue_style e wp_enqueue_script

19

Enqueueing Stylesheets and Scripts

●Per essere sicuri che le risorse siano caricate nell’ordine corretto (dipendenze); ●Per maggiore compatibilità con le versioni future; ●Per evitare conflitti con altri plugin o con il core; ●Per evitare di caricare la stessa risorsa più volte; ●Per caricare le risorse solo quando servono.

WordCamp Bologna - 24 novembre 2012 20 20

Enqueueing Stylesheets and Scripts

Cerchiamo di usare sempre le versioni incluse degli script es. jQuery and jQuery Plugins ! Sostituiamo gli script inclusi solo se è davvero utile, ad esempio per caricare jquery da CDN, ma solo front-end.

Caricare gli script nel nostro tema ●Hook: wp_enqueue_scripts ●Usiamo il parametro $deps in wp_enqueue_script() per gestire correttamente le dipendenze ●Per sicurezza: if ( ! is_admin() ) ●Usiamo il parametro $ver per indicare il numero di versione da caricare

WordCamp Bologna - 24 novembre 2012 21 21

Enqueueing Stylesheets and Scripts

Caricare i css nel nostro tema ●Hook: wp_enqueue_style ●Usiamo il parametro $deps in wp_enqueue_style() per gestire correttamente le dipendenze ●Per sicurezza: if ( ! is_admin() ) ●Usiamo il parametro $ver per indicare il numero di versione da caricare

WordCamp Bologna - 24 novembre 2012 22

Link utili

Resources ●get_stylesheet_directory(): http://codex.wordpress.org/Function_Reference/get_stylesheet_directory ●get_template_directory(): http://codex.wordpress.org/Function_Reference/get_template_directory ●get_template_part(): http://codex.wordpress.org/Function_Reference/get_template_part ●WordPress Plugin API: http://codex.wordpress.org/Plugin_API http://codex.wordpress.org/Plugin_API/Filter_Reference http://codex.wordpress.org/Plugin_API/Action_Reference ●Template tags: https://codex.wordpress.org/Template_Tags

Script/Stylesheet Enqueueing wp_enqueue_script(): http://codex.wordpress.org/Function_Reference/wp_enqueue_script wp_enqueue_style(): http://codex.wordpress.org/Function_Reference/wp_enqueue_style

WordPress Coding Standards ●WordPress Coding Standards: http://codex.wordpress.org/WordPress_Coding_Standards ●Theme Review Guidelines: http://codex.wordpress.org/Theme_Review ●Theme Unit Tests: http://codex.wordpress.org/Theme_Unit_Test

22