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
4 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.
5 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
7 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
8 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
9 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
11 WordCamp Bologna - 24 novembre 2012
12. Anatomia di una pagina
12 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
13 WordCamp Bologna - 24 novembre 2012
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()
14 WordCamp Bologna - 24 novembre 2012
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 )
15 WordCamp Bologna - 24 novembre 2012
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
16 WordCamp Bologna - 24 novembre 2012
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
17 WordCamp Bologna - 24 novembre 2012
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:
18 WordCamp Bologna - 24 novembre 2012
19. Enqueueing Stylesheets and Scripts
Perchè usare wp_enqueue_style e wp_enqueue_script
●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.
19 WordCamp Bologna - 24 novembre 2012
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
●
20 WordCamp Bologna - 24 novembre 2012
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
●
21 WordCamp Bologna - 24 novembre 2012
