Crafting Wordpress Themes

A 5 days workshop for absolute beginners.

Transcript

1. CRAFTING WORDPRESS THEMES - A 5 DAYS WORKSHOP FOR ABSOLUTE BEGINNERS - Valentina Rachiele | January 2012
2. ORGANIZZAZIONE DEL WORKSHOP Valentina Rachiele | January 2012 1
3. ★ Gruppi ★ Gruppo “speciale” (design responsivo) ORGANIZZAZIONE DELLA SETTIMANA preparazione contenuti e tema layout codice php grafica 1 grafica 2 quel che resta
4. CASSETTA DEGLI ATTREZZI Valentina Rachiele | January 2012 2
5. BROWSERS ★ Google Chrome ★ Safari ★ Firefox ★ Opera ★ ...
6. CHROME ★ MeasureIt ★ WebDeveloper Toolbar ★ Eyedropper ★ Resolution test ★ Click destro > Ispeziona elemento
7. BROWSER TESTING ★ Adobe Browser Lab ★ Browsershot
8. SOFTWARE UTILE ★ ResizeMe ★ DigitalColor Meter (di default tra le utilities del Mac) ★ Righello
9. EDITOR DI CODICE ★ Coda ★ Espresso ★ Textmate ★ Textwrangler ★ Chocolate ★ Mou
10. EDITOR DI CODICE: FLUSSO DI LAVORO
11. FTP: FLUSSO DI LAVORO
12. OPERAZIONI PRELIMINARI Valentina Rachiele | January 2012 3
13. OPERAZIONI PRELIMINARI ★ Ultima versione di Wordpress installata (in locale o remoto) ★ Una chiara idea del layout del sito
14. LAYOUT DEL SITO
15. LAYOUT DEL SITO
16. OPERAZIONI PRELIMINARI ★ Verificare eventuali aggiornamenti ★ Attivare Akismet
17. OPERAZIONI PRELIMINARI Impostare i Settings di Wordpress per preparare l'installazione al meglio: ★ controllare titolo e sottotitolo del sito ★ impostare la data e il fuso orario giusti ★ impostare il tipo di homepage desiderata (ultimi post scritti o homepage statica) ★ sistemare le impostazioni relative ai commenti ★ impostare le dimensioni di default delle immagini
18. OPERAZIONI PRELIMINARI Sistemare la nuova installazione di Wordpress a livello dei contenuti: ★ homepage (pagina statica?) ★ elementi della navigazione ★ altre pagine e/o post ★ categorie e/o tag ★ eventuali widget
19. OPERAZIONI PRELIMINARI ★ Ordinare le voci di menu ★ Controllare i commenti a pagine e post ★ Aggiungere link interni ed eventuali immagini ★ Sidebar?
20. CONTENUTI Cos’è questo?
21. PREPARARE IL TEMA Valentina Rachiele | January 2012 4
22. BONES Useremo Bones: ★ HTML5/CSS3 ★ 960.gs ★ gusto responsivo DOWNLOAD
23. PREPARARE IL PROPRIO TEMA ★ Modificare il file style.css ★ Preparare uno screenshot (300x225px) e inserirlo nella cartella del tema ★ Cambiare il nome della cartella del tema ★ Installare il tema
24. INSTALLARE IL TEMA cartella tema zippata > amministrazione wp > installa tema cartella tema non zippata > cartella wordpress > wp_content > themes
25. ANATOMIA DI UN TEMA Valentina Rachiele | January 2012 5
26. ANATOMIA DELLA CARTELLA WP core di Wordpress tutti i file di amministrazione - ad esempio contiene la dashboard e il login screen (back end) contiene le funzioni che riguardano il funzionamento della “macchina” Wordpress (come le cose vengono renderizzate) tutto il contenuto inserito dall’utente (post, pagine, immagini, etc...). Contiene temi e plugin
27. header.php footer.php index.php sidebar.php ANATOMIA DELLA CARTELLA DEL TEMA
28. header.php footer.php page.php single.php archive.php category.php tag.php search.php 404.php sidebar.php
29. functions.php permette di aggiungere funzionalità al tema (e.g. post thumbnails)
30. <?php get_header(); ?> <?php get_template_part( 'loop', 'index' ); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
31. ESERCIZIO #1 Nel file index.php provare a spostare la riga di codice <?php get_footer(); ?> sotto alla riga di codice <?php get_header(); ?>
32. QUANDO SI LAVORA COL CODICE... ★ Usare tanto i commenti per non perdersi nel labirinto dei codice e ricordarsi quanto si è fatto ★ Commentare, non cancellare ★ Tenere in ordine le cartelle ★ Non buttare nulla, casomai cambiare il nome ai file
33. ESERCIZIO #2 Nel file sidebar.php provare a commentare la riga di codice <?php get_search_form(); ?> e verificare cosa succede
34. CODICE Valentina Rachiele | January 2012 6
35. CONSIGLI UTILI GENERALI ★ Usare tanto i commenti per non perdersi nel labirinto dei codice e ricordarsi quanto si è fatto ★ Commentare, non cancellare ★ Tenere in ordine le cartelle ★ Non buttare nulla, casomai cambiare il nome ai file
36. TEMPLATE TAGS <a href="<?php echo home_url(); ?>" rel="nofollow"> </a> <?php bloginfo( 'name' ); ?> apertura e chiusura del tag php funzione di Wordpress parametro opzionale header.php
37. TEMPLATE TAGS Servono per eseguire determinate azioni oppure per visualizzare determinate informazioni. Il comando php viene elaborato dal server che lo trasforma in html e genera le porzioni dinamiche del sito. Titolo del mio sito <?php bloginfo( 'name' ); ?> <a href="<?php echo home_url(); ?>"> <?php bloginfo( 'name' ); ?> </a> <a href="http://urldelmiosito">Titolo del mio sito</a>
38. TEMPLATE TAGS <a href="<?php echo home_url(); ?>"> <?php bloginfo( 'name' ); ?> </a> <a href="http://urldelmiosito">Titolo del mio sito</a> html generato
39. TEMPLATE TAGS Possono essere incluse in tag HTML... <h1><?php bloginfo( 'name' ); ?></h1> ... e quindi anche modificate tramite CSS h1 { color: brown; font-style: italic;} ClasVEM 2012 ClasVEM 2012
40. TEMPLATE TAGS http://codex.wordpress.org/Template_Tags
41. LOOP ★ Il loop viene usato da Wordpress per mostrare i post all’interno della pagina ★ Il numero, il tipo e le caratteristiche dei post possono essere modificati usando tag particolari ★ L’aspetto dei post può essere modificato usando HTML e CSS
42. LOOP APERTURA <?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> Ci sono post? Se sì, utilizza un loop while PHP - ovvero, finché ci sono post da mostrare, mostrali. index.php
43. LOOP TITOLO, DATA ED AUTORE <h1 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <p class="meta"><?php _e("Posted", "bonestheme"); ?> <time datetime="<? php echo the_time('Y-m-j'); ?>" pubdate><?php the_time('F jS, Y'); ?></ time> <?php _e("by", "bonestheme"); ?> <?php the_author_posts_link(); ? > <span class="amp">&</span> <?php _e("filed under", "bonestheme"); ?> <?php the_category(', '); ?>.</p> <h1 class="h2"><a href="http://localhost:8888/home/?p=1" rel="bookmark" title="Hello world!">Hello world!</a></h1> <p class="meta">Posted <time datetime="2012-01-8" pubdate>January 8th, 2012</time> by <a href="http://localhost:8888/home/?author=1" title="Posts by admin" rel="author">admin</a> <span class="amp">&</span> filed under <a href="http://localhost:8888/home/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>.</p> Hello world! Posted January 8th, 2012 by admin & filed under Uncategorized index.php
44. LOOP POST <section class="post_content clearfix"> <?php the_content(_e('<span class="read-more">Read more on "'.the_title('', '', false).'" &raquo;</span>', "bonestheme")); ?> </section> <section class="post_content clearfix"> <span class="read-more">Read more on "Hello world!" &raquo;</ span><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> </section> Hello world! Posted January 8th, 2012 by admin & filed under Uncategorized Read more on "Hello world!" » Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
45. LOOP CHIUSURA <?php endwhile; ?> Questo chiude il loop. Tutto quello che vogliamo modificare nel loop, perciò, va inserito sempre prima di questa riga di codice.
46. LOOP QUERY Modificando il loop possiamo cambiare quali post sono visualizzati e come. Le modifiche vanno sempre messe prima dell’apertura del loop. <?php query_posts("cat=-4");?>
47. LOOP QUERY <?php query_posts("cat=-4");?> Esclude dalla visualizzazione i post della categoria 4. <?php query_posts("cat=4");?> Mostra solo i post della categoria 4. <?php query_posts("cat=4&year=2009");?> Mostra solo i post della categoria 4 e pubblicati nel 2009.
48. POST FORMAT Il Post Format è un pezzo di meta informazione che può servire ad attribuire diverse caratteristiche ai post.
49. POST FORMAT È un po’ come Tumblr: citazioni, video, immagini, link, sono formattati visivamente in modo diverso. html generato
50. POST FORMAT Ai post viene automaticamente attribuita una classe: format-aside format-gallery format-link format-image format-quote ... style.css
51. POST FORMAT Quindi con i CSS possiamo cambiare le caratteristiche dei vari tipi di post: .format-aside { background-color: rgba(233,35,46,0.5); } style.css
52. TAG CONDIZIONALI <?php if ( is_active_sidebar( 'sidebar1' ) ) : ?> <?php dynamic_sidebar( 'sidebar1' ); ?> <?php else : ?> <!--This content shows up if there are no widgets defined in the backend--> <div class="help"> <p>Please activate some Widgets.</p> </div> <?php endif; ?> sidebar.php Le tag condizionali permettono di decidere cosa e come viene mostrato, a seconda delle condizioni che si verificano. SIAMO ARRIVATI QUI!
53. TAG CONDIZIONALI “Se la sidebar è attiva (ci sono widget dentro), allora mostrala. Altrimenti, mostra questo testo.”
54. TAG CONDIZIONALI Possiamo usare i tag condizionali per modificare cosa viene visualizzato nelle pagine e come.
55. TAG CONDIZIONALI <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php if ( in_category(‘4’) ) { ?> <div class="cat4"> <?php } else { ?> <div class="post"> <?php } ?> index.php
56. ESERCIZIO #3 PARTE I Nel file index.php provare a inserire la riga di codice <?php if ( in_category(‘4’) ) { ?> <div class="cat4"> <?php } else { ?> <div class="post"> <?php } ?> Attenzione! Verificare il numero della vostra categoria!
57. ESERCIZIO #3 PARTE II Modificare il file style.css in modo da cambiare il colore di sfondo dei post della categoria di cui sopra .cat4 { background-color: #FF0000; }
58. TAG CONDIZIONALI Oppure possiamo inserire un paragrafo di testo che compaia soltanto nella homepage. Se impostato correttamente, il testo non comparirà nelle altre pagine.
59. TAG CONDIZIONALI <?php if(is_front_page()) {?> <p>Benvenuti nella homepage</p> <?php } ?> index.php
60. ESERCIZIO #4 Nel file page.php provare a inserire la riga di codice <?php if(is_page(11)) {?> <p>Benvenuti nella mia pagina</p> <?php } ?> e verificare cosa succede Attenzione! Verificare il numero della vostra pagina!
61. TAG CONDIZIONALI http://codex.wordpress.org/Conditional_Tags
62. QUANDO IL GIOCO SI FA DURO... Valentina Rachiele | January 2012 7
63. NEWS & AVVISI IN HOMEPAGE Vogliamo che il loop funzioni diversamente in homepage.
64. NEWS & AVVISI IN HOMEPAGE Abbiamo bisogno di due colonne che mostrino due categorie.
65. NEWS & AVVISI IN HOMEPAGE Useremo 4 ingredienti: 1. Custom page 2. Il file functions.php 3. Plugin 4. Widgets
66. PAGE TEMPLATE Poi si cambia il template della pagina nell’amministrazione di WP: Page > Edit > Page template <?php /* Template Name: Nome della pagina */ ?> page-custom.php
67. FUNCTIONS.PHP functions.php
68. NEWS & AVVISI IN HOMEPAGE Plugin Category posts
69. NEWS & AVVISI IN HOMEPAGE Inserire il plugin nei widgets.
70. COME LAVOREREMO Valentina Rachiele | January 2012 8
71. COME LAVOREREMO Non avete una grafica pronta!
72. COME LAVOREREMO
73. COME LAVOREREMO ★ Differente text-rendering tra Photoshop e i browser ★ Il cliente forma delle aspettative che verranno ingannate ★ Un layout fluido non può essere reso ★ Non c’è interazione (:hover, Javascript, etc...) ★ Cosa succede se cambio la grandezza dei font? Cosa succede al font stack?
74. COME LAVOREREMO Non c’è più bisogno di usare Photoshop per usare ★ bordi arrotondati ★ ombre ★ font particolari Possiamo usare CSS3
75. COME LAVOREREMO Lavoreremo disegnando nel browser
76. COME LAVOREREMO Il contenuto ce lo dà Wordpress (HTML + PHP)
77. COME LAVOREREMO 1. Layout - posizionamento degli elementi nella pagina 2. Griglia - uso di 960.gs (grid overlay bookmark) 3.Presentazione - rgba, font, shadow, rounded corners, etc...
78. LAYOUT Valentina Rachiele | January 2012 9
79. LAYOUT Tutto quello che ci serve è dentro al file style.css
80. LAYOUT - CONTENITORI body container header content main sidebar article footer nav
81. LAYOUT Layout a 12 colonne dal sito 960.gs 960 è divisibile per 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
82. CODICE LAYOUT 8 colonne 3 colonne .col620 { width: 65.957447%; } /*width 620px/grid_8*/ .col220 { width: 23.404255%; } /*width 220px/grid_3*/
83. LAYOUT Nel file index.php <div id="main" class="col620 left first clearfix" role="main"> Nel file sidebar.php <div id="sidebar1" class="sidebar right col220 last clearfix" role="complementary">
84. ESERCIZIO #5 Nel file index.php provare a modificare la riga di codice <div id="main" class="col620 left first clearfix" role="main"> con altri valori di “col620” e verificare cosa succede
85. FONT 1em = 16px = 100% (ad esempio: 2.5em = 40px) http://pxtoem.com/
86. ESERCIZIO #6 Nel file style.css settare il font per il sito, nel selettore body body { font: 100%/130% Arial, ‘Helvetica Neue’, sans-serif; } style.css
87. FONT font-family: Arial, ‘Helvetica Neue’, sans-serif; http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ font stack
88. DAL CODICE ALLA GRAFICA Valentina Rachiele | January 2012 10
89. COME PROCEDERE Come sapere dove mettere le mani?
90. COME PROCEDERE ★ Individuare nel file PHP la zona interessata ★ Controllare il relativo codice HTML generato ★ Modificare il codice CSS relativo
91. ESEMPIO <nav role="navigation"> <?php bones_main_nav();?> </nav> <nav role="navigation"> <div class="menu clearfix"> <ul id="menu-menu" class="menu"> <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a href="http://localhost:8888/ home/?page_id=2">Sample Page</a></li> <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://localhost:8888/ home/?page_id=11">Test page</a></li> </ul> </div> </nav> header.php
92. FAVICON Le favicons ★aiutano chi naviga a identificare le diverse pagine tra i vari tab aperti ★aiutano ad identificare visualmente i segnalibri Bisogna cercare di usare immagini che siano ben distinguibili anche a piccolissime dimensioni.
93. FAVICON 1. http://tools.dynamicdrive.com/favicon/ 2.Scaricare la propria favicon e inserirla nella cartella del tema 3.Inserire nella HEAD del documento il codice per richiamare la favicon: <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
94. grazie Valentina Rachiele | January 2012