Giovambattista Fazioli, 10 more things

1,008 views

Published on

Speech WordCamp-KnowCamp, Modena
19 marzo 2011

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

  • Be the first to like this

No Downloads
Views
Total views
1,008
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Giovambattista Fazioli, 10 more things

  1. 1. 10 more thingsDieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali ebasati sul nostro CMS preferito: Wordpress Giovambattista Fazioli CTO & evangelist developer, co-founder - Saidmade Srl
  2. 2. wordpress
  3. 3. il successo di wordpress• LAMP (Linux, Apache, MySQL, PHP)• temi semplici e personalizzabili• vasta libreria di plugins semplici da realizzare• modello di sviluppo lineare PHP• CMS
  4. 4. temi & plugins
  5. 5. 5 cose sui temi
  6. 6. 1. cos’è un tema?è un insieme di file posizionati all’interno di una cartella, a suavolta posizionata nel percorso /wp-content/themeswordpress si aspetta di trovare “almeno” un determinato tipo difile all’interno della cartella del tema, come: /wp-content/themes/ -> miotema/ --> styles.css --> index.php
  7. 7. 1. cos’è un tema? “il tema, nella realizzazione di un sito web con tecnologiawordpress, rappresenta il cuore di tutto il sistema, molto più di una valanga di plugins” • cosa visualizzare • come visualizzarlo
  8. 8. 2. come realizzare un tema“la realizzazione di un tema da parte di un singolo, nella sua semplicità, richiede un concentrato di varie competenze” • gusto gra co • capacità utilizzare strumenti come Adobe Photoshop pensando al codice nale • HTLM e CSS • PHP • struttura e le funzioni di Wordpress
  9. 9. 2. come realizzare un tema1. content design2. prototipo gra co3. scrittura codice (PHP/HTML) per visualizzare i contenuti4. taglio della gra ca e scrittura CSS
  10. 10. ti ps 2. come realizzare un tema content design
  11. 11. ti ps 2. come realizzare un tema prototipo grafico
  12. 12. ti ps 2. come realizzare un tema scrittura codice HTML/PHP
  13. 13. ti ps 2. come realizzare un tema taglio della grafica + CSS
  14. 14. 3. cosa visualizzareWordpress permette sostanzialmente di collezionare contenutitestuali (POST, PAGE, …) emultimediali (immagini, video,documenti PDF, …).Questi contenuti (descritti nel Content Design) possono essereestratti in vari modi: tramite le funzioni – il tema – standard diWordpress, tramite l’uso di Plugin, scrivendo proprie funzioni.Ogni file nel tema di Wordpress svolge una funzione particolare eviene automaticamente richiamato da Wordpress in determinatecircostanze. I file più importanti di un tema (che può esserecomposto anche da numerosi file) sono:
  15. 15. 3. cosa visualizzare /wp-content/themes/ -> miotema/ --> archive.php --> comments.php --> footer.php --> functions.php --> header.php --> index.php --> page.php --> sidebar.php --> single.php --> style.css
  16. 16. ti ps 3. cosa visualizzareIn linea di massima potremmo affermare che tutti i file elencati,determinano il cosa verrà visualizzato, mentre style.css il come.index.php, ad esempio, è il file principale, quello che corrispondealla Home Page.header.php e footer.php contengono il codice HTML e PHPutilizzato rispettivamente nell’header e nel footer.Questa tecnica permette alle altre pagine di occuparsiesclusivamente del contenuto che cambia, normalmente la partecentrale.
  17. 17. ti ps 3. cosa visualizzareA livello logico tutte le pagine di un tema possono esserericondotte a questo schema: <?php get_header(); ?> <div id="content"> ... </div> <?php get_footer(); ?>
  18. 18. ti ps 3. cosa visualizzareWordpress permette varianti e semplificazioni relative al namingdei file del tema.Ad esempio il file archive.php è quello che si occupa dellavisualizzazione degli archivi, cioè la lista dei contenuti (post) percategoria, tag, data, etc…Capita spesso, sopratutto in siti web che non sononecessariamente dei blog, di dover trattare lavisualizzazione di una categoria diversamente da un’altra.
  19. 19. ti ps 3. cosa visualizzareIn prima analisi verrebbe immediatamente spontane inserire unacondizione all’interno del file archive.php del tipo: if( is_category(news) ) {   // Visualizzazione per le News } else {   // Altre visualizzazioni }Nonostante sia corretto, Wordpress fornisce una più semplice edelegante soluzione: basta creare un file composto da category- loslug (abbreviazione) della nostra categoria, tipo: category-news.php.
  20. 20. ti ps 3. cosa visualizzareQuesta caratteristica può essere utilizzata anche per le pagine ele sidebar, ma non per i post. Per le sidebar si nomina un file conuna notazione simile a quella utilizzata per le categorie, tiposidebar-footer.php, ma si usa una funzione per discriminare levarie sidebar: // Carica la sidebar standard: il file sidebar.php get_sidebar(); // Carica la side del file sidebar-footer.php get_sidebar( footer );
  21. 21. ti ps 3. cosa visualizzareUno dei file più potenti e utili, presente nei temi, è functions.php.Questo contiene di solito tutte le funzioni PHP che possonoessere richiamate all’interno di uno qualsiasi dei file del tema. Inquesto file, poi, possono essere eseguite funzioni tali daaggiungere o modificare funzioni presenti nel backend!Tutte le funzioni inserite in questo file saranno disponibiliesattamente come un qualsiasi altra funzione Wordpress. Unqualsiasi file del tema, come single.php ad esempio, potràaccedere a queste funzionalità.
  22. 22. ti ps 4. snippet <body <?php body_class(); ?>>
  23. 23. ti ps 4. snippet /**  * Restituisce il contenuto di una pagina, sia essa pubblica  * che privata  */ function pageBySlug($slug) {   $objectPost = get_page_by_path($slug);   return apply_filters("the_content", $objectPost->post_content); }
  24. 24. 5. amministrazioneAltra importantissima funzionalità è quella di presentare in modopiù “usabile” i campi personalizzati all’utente che operal’inserimento di un post.Questa è un’altro punto a favore di Wordpress, cioè la possibilitàdi alterare la maschera di inserimento di un post/pagina,rendendo il backend estremamente più semplice da utilizzare peril cliente.Normalmente nel backend i campi personalizzati si presentanocome:
  25. 25. 5. amministrazioneNormalmente nel backend i campi personalizzati si presentanocome:
  26. 26. ti ps 5. amministrazioneSfruttando la funzione add_meta_box(), ben documentata sulladocumentazione sul sito Wordpress
  27. 27. 5 cose sui plugin
  28. 28. 1. quando scrivere un plugin
  29. 29. ti ps 2. le funzioni più importantiLe funzioni più potenti presenti in Wordpress, che permettonospesso di risolvere problematiche apparentemente complessesono le “poco documentate” add_filter() e add_action(). function logoCustom() {   echo <style type="text/css">     #header-logo {      background-image: url( . get_bloginfo(template_directory) . / images/logo.png) !important;      }     </style>; } add_action(admin_head, logoCustom);
  30. 30. ti ps 2. le funzioni più importantiCon le ultime versioni di Wordpress, a livello di sistema, azioni efiltri sono la stessa cosa. Tuttavia concettualmente vengono (aragione) distinti. Una action è appunto un’azione, tipo: // Runs when a post or page is about to be deleted. // Action function arguments: post or page ID. function didDeletePost( $pID ) {   // Un post è stato eliminato, $pID indica lID } add_action(delete_post, didDeletePost);
  31. 31. ti ps 2. le funzioni più importantiI filtri, a differenza, vengono usati ad esempio per alterare l’outputo il comportamento di alcune funzioni: function modernContactInfo($contactmethods) {     unset($contactmethods[aim]);     unset($contactmethods[yim]);     unset($contactmethods[jabber]);     $contactmethods[facebook] = Facebook;     $contactmethods[twitter] = Twitter;     $contactmethods[linkedin] = LinkedIn;     return $contactmethods; } add_filter(user_contactmethods, modernContactInfo);
  32. 32. ti ps 2. le funzioni più importantiPer capire come funzionano i filtri, ecco un’estratto del codicesorgente della funzione che usa Wordpress function _wp_get_user_contactmethods() {    $user_contactmethods = array(      aim => __(AIM),      yim => __(Yahoo IM),      jabber => __(Jabber / Google Talk)    );    return apply_filters(user_contactmethods, $user_contactmethods); }
  33. 33. ti ps 3. come scriverlo...Una disamina sulla struttura di un Plugin è disponibile su: Sulla struttura ad oggetti di un Plugin WordPress,dove viene illustrato un possibile scheletro per confezionareadeguatamente un plugin.
  34. 34. ti ps 4. tools
  35. 35. ti ps 4. tools
  36. 36. vi ewp re 5. anteprima MVC
  37. 37. vi ewp re 5. anteprima // Includo il framework Saidmade include ("/libraries/smwordpress-plugins.php"); // Estendo la classe SMWordpressPlugin class MioPlugin extends SMWordpressPlugin {   // ... } #import <UIKit/UIKit.h> @interface myViewController : UIViewController {     }
  38. 38. grazie
  39. 39. 10 more thingsDieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali ebasati sul nostro CMS preferito: Wordpress Giovambattista Fazioli CTO & evangelist developer, co-founder - Saidmade Srl

×