Creare un tema personalizzato per wordpress

35,212 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
35,212
On SlideShare
0
From Embeds
0
Number of Embeds
29,463
Actions
Shares
0
Downloads
43
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Creare un tema personalizzato per wordpress

  1. 1. Creare un tema personalizzato per wordpress Daniele Balboni1 WordCamp Bologna - 24 novembre 2012
  2. 2. Struttura standard di un tema ● Style.css • Tags ● Homepage  tag.php  index.php  home.php • Search Results  search.php ● Single Post  single.php • 404  404.php ● Page  page.php ● Category  category.php  archive.php 2 WordCamp Bologna - 24 novembre 2012
  3. 3. 3 WordCamp Bologna - 24 novembre 2012
  4. 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. 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
  6. 6. Setup del tema 6 WordCamp Bologna - 24 novembre 2012
  7. 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. 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, allinterno 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. 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. 10. The LoopQuando 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. 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. 12. Anatomia di una pagina 12 WordCamp Bologna - 24 novembre 2012
  13. 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. 14. Gestire templates, css e scriptsa) get_stylesheet_directory()/get_stylesheet_directory_uri()Utilizziamo queste funzioni quando vogliamo rendere inostri template modificabili e sovrascribili nel child themeb) get_template_directory()/get_template_directory_uri()Utilizziamo queste funzioni quando vogliamo rendere Inostri template non modificabili nel child themec) Per includere e organizzare meglio il nostro tema edincludere un template in un altro template usiamoget_template_part() or locate_template() 14 WordCamp Bologna - 24 novembre 2012
  15. 15. Template personalizzati per contestoget_template_part( $file, $slug )Facilita il caricamento di template personalizzati in base al contestoSi basa sulla gerarchia standard dei template:EsempioIn single.php: get_header( single ) => header-single.phpIn page.php: get_template_part( loop, page ) => loop-page.phpPossiamo 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. 16. Utilizziamo i post formatget_template_part( $file, get_post_format() )Possiamo personalizzare il contenuto in base al post-format scelto dallutente. Lafunzionalità post-format è disponibile da wp 3.1get_post_format() ritorna null for “standard”Se non è definito un template per il post-format scelto verrà caricato il file di default.Esempioget_template_part( entry, get_post_format() )–entry-aside.php–entry.php 16 WordCamp Bologna - 24 novembre 2012
  17. 17. Usiamo le actions per le funzioniTutte le funzioni devono essere richiamate da un actionPro: possiamo cancellare la funzione con remove_actionErratoEseguire la funzione direttamente in functions.phpCorrettoRichiamare la funzione allinterno di un action 17 WordCamp Bologna - 24 novembre 2012
  18. 18. Ridefinire le funzioni in un child themeIn un child theme possiamo ridefinire una funzione presente nel parenttheme. Per farlo basta aggiungere un semplice controlloif( !function_exists(function_to_override) ) nel parent theme.Esempio: 18 WordCamp Bologna - 24 novembre 2012
  19. 19. Enqueueing Stylesheets and ScriptsPerchè 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. 20. Enqueueing Stylesheets and ScriptsCerchiamo di usare sempre le versioni incluse degli scriptes. jQuery and jQuery Plugins! Sostituiamo gli script inclusi solo se è davvero utile, ad esempio per caricare jquery daCDN, ma solo front-end.Caricare gli script nel nostro temaHook: wp_enqueue_scripts●Usiamo il parametro $deps in wp_enqueue_script() per gestire correttamente le●dipendenzePer sicurezza: if ( ! is_admin() )●Usiamo il parametro $ver per indicare il numero di versione da caricare● 20 WordCamp Bologna - 24 novembre 2012
  21. 21. Enqueueing Stylesheets and ScriptsCaricare i css nel nostro temaHook: wp_enqueue_style●Usiamo il parametro $deps in wp_enqueue_style() per gestire correttamente le●dipendenzePer sicurezza: if ( ! is_admin() )●Usiamo il parametro $ver per indicare il numero di versione da caricare● 21 WordCamp Bologna - 24 novembre 2012
  22. 22. Link utiliResources●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_APIhttp://codex.wordpress.org/Plugin_API/Filter_Referencehttp://codex.wordpress.org/Plugin_API/Action_Reference●Template tags: https://codex.wordpress.org/Template_TagsScript/Stylesheet Enqueueingwp_enqueue_script(): http://codex.wordpress.org/Function_Reference/wp_enqueue_scriptwp_enqueue_style(): http://codex.wordpress.org/Function_Reference/wp_enqueue_styleWordPress 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 WordCamp Bologna - 24 novembre 2012

×