Wordpress. creare un tema - struttura generale

Transcript

1 Wordpress creare un tema - struttura generale

2 INTRODUZIONE La lezione precedente abbiamo imparato come si installa wordpress sul nostro pc/mac. Per fare funzionare il php si ha bisogno di un server difatti ci siamo appoggiati a mamp (un programma che simula un server collegato al mio sito wordpress). La lezione di oggi sarà dedicata a capire la struttura di wordpress per poi riuscire a customizzarla come meglio crediamo.

3 Tema Il sistema di Temi di WordPress è un metodo per vestire il vostro weblog. Un tema è una collezione di file che lavora assieme per produrre una interfaccia grafica dal design uniforme. Un tema modifica il modo in cui il weblog viene visualizzato senza modificare il software che si trova dietro. I Temi possono includere file di immagine (*.jpg, *.gif, *.png) fogli di stile (*.css) oltre agli indispensabili file di codice (*.php).

4 Tema - la struttura Prima dell avvento dei Temi, WordPress generava il contenuto utilizzando un singolo file: index.php. Si è deciso di creare più files per gestire meglio i contenuti. Quindi possiamo dire che un tema WordPress è composto da diversi files ed una directory per le immagini; I files di base per un tema funzionante sono: header.php footer.php index.php page.php comments.php sidebar.php single.php search.php style.css functions.php

5 Tema - la struttura Le pagine vere e proprie in WordPress sono 4: index.php, page.php, single.php e search.php, gli altri files sono inclusioni di codice che servono a completare la pagina di volta in volta. header.php footer.php comments.php sidebar.php style.css functions.php

6 Tema - la struttura Funzione dei file in dettaglio: header.php/footer.php: testa e piede del sito; index.php: homepage; style.css: sono gli stili che si attribuiscono a tutto il tema; page.php: è il template delle pagine interne del blog (es.about e contact); comments.php: è la porzione di codice relativa ai commenti che viene inclusa all interno dei post; qui vengono inseriti i commenti e il form per inviarli;

7 Tema - la struttura Funzione dei file in dettaglio: sidebar.php: qui abbiamo tutti gli strumenti di navigazione del sito come le categorie, gli archivi dei post o in generale, i widgets per WP; single.php: è la pagina che contiene un singolo post, quella che si apre quando cliccate su un post dalla homepage per intenderci; search.php: è la pagina che si apre quando si effettua una ricerca tramite l apposito widget search; functions.php: serve a dichiarare le funzioni che vogliamo scrivere a mano per il nostro blog; se non vogliamo aggiungere niente di particolare basterà solo il codice di default che rende la nostra sidebar widget ready, ossia pronta a ricevere nuovi widgets dal pannello admin del blog; a riguardo vedere l ultima parte di questo tutorial.

8 Wordpress creare un tema - primi passi

9 Files di partenza 1. Per costruire un tema bisogno partire da un semplice sitoweb implementato con html e css. Questo sarà composto dalla classica cartellina contenente: -index.html -cartella con css -cartella con img -cartella con js

10 Posizionare la cartella 2. La nostra cartella dovrà essere posizionata dove abbiamo installato WP (lezione precendete). Precisamente il percorso sucessivo sarà: wp-content/themes/qui_incollo_la_cartella

11 Cambio nomi 1 3. Nel gestionale di WP viene già visualizzato il nostro tema ma rilevato in modo corrotto. Per farlo funzionare bisogna rinominare: il file index.html in index.php ; il file stile.css in style.css (questo dovrà essere nella root) QUESTI SONO I FILE PRINCIPALI PER IL FUNZIONAMENTO DI WP 4. costruire un immagine con dimensioni 300x225px chiamarla screenshot.png e inserirla nella root 5. inserire all interno di syle.css delle informazioni utili per l identificazione del tema.

12 Cambio nomi 2 /* Theme Name: Nome del tema Theme URI: Description: Tema di prova Author: GabrieleRuscelli Author URI: gabrieleruscelli.com Version: 1.0 Tags: colori, widget, prova, test (facoltativi) License: Tipo di licenza (commerciale, non commerciale, open source, ecc..) License URI: indirizzo della licenza Commenti generali (facoltativo). */

13 Inseriamo i giusti link 6. A questo punto bisogna iniziare a modificare il nostro codice e a trasformarlo da statico a dinamico. Come potrete notare i nostri link non funzionano, per ovviare a ciò abbiamo la necessità di inserire una funzione di WP, questa si chiamerà bloginfo. (qui la lista: andremo a sostituire i link delle immagini con <img src= <?php bloginfo( template_url );?>/immagini/logo.png > andremo a sostituire i link dei css con: <link href= <?php bloginfo( stylesheet_url );?> type= text/css rel= stylesheet > Ora il nostro sito sta prendendo dinamicità e verrà visualizzato correttamente.

14 Navigazione Dinamica 7. Avendo costruito in precedenza la barra di navigazione con <ul> <li> abbiamo la possibilità di inserire un altra funzione di WP wp_list_pages() che ci permetterà di rendere dinamico il nostro menu. Lista normale in HTML <ul> <li>elemento1</li> <li>elemento2</li> <li>elemento3</li> </ul> Lista in WP <ul> <?php wp_list_pages( title_li= );?> </ul> passandogli come parametro title_li= facciamo in modo che vengano generati solo i tag <li> (con i link all interno) quindi la cosa migliore è racchiudere questa funzione all interno di un tag <ul>.

15 Funzione Loop 8. Lavoriamo sui contenuti: nel nostro template abbiamo degli articoli, per farli diventare dinamici abbiamo bisogno della funzione loop. Questa ci permetterà di lasciare nell apposito contenitore (#wrap) tutti gli articoli inseriti direttamente da WP. articoli in HTML <div id= wrap > <article class= beje > ciao</article> <article class= beje > ciao</article> </div> articoli in WP con funzione LOOP <div id= wrap > <?php if ( have_posts() ) : while ( have_posts() ) :the_post();?> <article class= beje > <h3><?php the_title();?></h3> <?php the_content();?> </article> <?php endwhile; else:?> <p>nessun contenuto trovato!</p> <?php endif;?> </div>

16 Rendiamo il titolo linkabile 9. Ora ci troviamo ad avere degli articoli inseriti da WP con un titolo (racchiuso in h3) e il contenuto dell articolo (racchiuso in p). L ultima cosa da fare è rendere cliccabile il titolo per poi renderlo linkabile in diverse parti del website/blog. Per questo abbiamo bisogno della funzione the_permalink() all interno di un tag <a> quindi la riga del titolo verrà modificata in questo modo: <h3><a href= <?php the_permalink();?> ><?php the_title();?></a></h3>

17 Altre informazione 10. inseriamo altre informazioni relative al post: tag, autore e data. <p class= autore >Scritto da: <?php the_author();?></p> <?php the_tags( <p class= tag >Argomenti:,,, </p> );?> <p class= giorno ><?php the_time( d F Y );?></p>

18 Sezionare il nostro TEMA Come avrete notato, tutti i temi di Wordpress sono composti da più file. Partendo dalla nostra index inizieremo a sezionare il tema, per fare ciò copieremo blocchi/pezzi di codice e li andremo a salvare singolarmente.

19 Sezionare il nostro TEMA Iniziamo con: header, footer, sidebar, single <?php get_header( $name );?> <?php get_sidebar( $name );?> <?php get_footer( $name );?>

20 Pagina articolo Per creare la pagina relativa al singolo articolo basta salvare un file con nome: single.php Ricordatevi poi di inserire il link all home page <a href= <?php echo home_url();?> >Home</a>

21 Numero articoli È possibile gestire il numero degli articoli che compaiono all interno della pagina index. Settings --> reading Per far comparire il contatore scaricare il plugin: wp-page-numbers istallarlo e attivarlo Inserire poi il codice qui sotto all interno di index <?php if(function_exists( wp_page_numbers )) { wp_page_numbers(); }?>

22 Sidebar La customizzazione della sidebar può essere molto varia e complessa, i prossimi codici sono un esempio di cosa potremmo inserirci. Cerca <ul> <li> <h2>cerca</h2> <form method= get id= searchform action= <?php bloginfo( url );?>/ > <input type= text name= s id= s value= <?php the_ search_query();?> /> <input type= submit id= searchsubmit value= cerca /> </form> </li> </ul>

23 Sidebar Archivio <ul> <h2>archivio</h2> </ul> <li> <?php wp_get_archives( type=monthly&show_post_count=1 );?> </li>

24 Sidebar Categorie <ul> <h2>categorie</h2> <li> <?php wp_list_categories( title_li=<h2>categorie</h2>&hide_empty=0 );?> </li> </ul>

25 Sidebar Tag cloud <ul> <h2>tag Cloud</h2> <?php wp_tag_cloud( smallest=15&largest=40&number=50&orderby=cou nt );?> </ul>