Create temi WordPress: Parte 3/3, la pagina principale
-->
Buon giorno a tutti, finalmente ho un po’ di tempo per continuare questo tutorial, oggi parleremo della prima pagina di WordPress, quindi vedremo la realizzazione dei file:
- index.php
- header.php
- sidebar.php
- footer.php
- style.css (0vviamente questo verrá aggiornato ogni volta)
Allora visto che vorrei andare dritto al punto vi consiglio di scaricare il Template d’esempio(il template é ottimizzato per Firefox), visto che a questo punto non voglio dilungarmi sulla creazione di un Template per una pagina semplice (XHMTL,CSS), se volete invece imparare questo fate un salto nella sezione Tutorial - CSS 
.
Voilá, se aprite il file del Template potete vedere che abbiamo giá le immagini, il file CSS, ed il file index.html, cosa facciamo a questo punto ? La miglior tecnica per imparare é smontare un pezzo alla volta di un Template classico WordPress e sostituirlo con le nostre cose, quindi partiamo copiando la cartella wp-content/theme/classic e la rinominiamo test !!!
Ora copiate dentro la cartella test le cartelle images del Template d’esempio e il file style.css (vi chiederá di sovrascrivere, yesss).
Fatto questo siamo pronti per iniziare la nostra opera, ricordate che gli atri file dentro all’archivio del Template d’esempio sono la soluzione del tutorial, quindi i codici php giá modificati.
Come abbiamo discusso nell’articolo precedente per realizzare un Template WordPress bisogna creare fondamentalmente 4-5 componenti, se aprite la pagina index.html potete vedere un Template per sito contenente proprio i componenti che ci servono per il nostroBlog, header,content,sidebar,ecc…
Guardate il sorgente html, come vedete, é stato suddiviso per sezione, così da facilitare la suddivisione del codice in diversi file, si potrebbe anche usare solo un file index.php, ma poi sarebbe scomodo se poi dovremmo riutilizzare il codice per creare altre pagine. Quindi per realizzare i nostri moduli non dobbiamo fare altro che introdurre le parti di codice php che ci caricano i post, i menu e le varie informazioni nel index.html e poi separarlo nei diversi “file modulo”. Siccome peró esistono giá i file del Template Classic, faremo il contrario, ovvero modificheremo il codice del Template Classic(rinominato da noi prima test) con il nostro codice.
Il header (header.php):
Aprite il file header.php, come potete vedere contiene la prima parte del codice XHTML/PHP della pagina, quindi include i file degli stili CSS, le meta tag e altre info. Quello che noi andremo a modificare sta dopo il tag <body>.
Infatti quello che nel file originale inizia con il <div id=”rap“> noi lo sostituiremo con li nostro div container e inseriremo il nostro codice:
<div id=”container“>
<div class=”header“>
<div class=”headering“>
<h1><a href=”<?php bloginfo(’url‘); ?>/“><?php bloginfo(’name‘); ?></a></h1>
<p><?php bloginfo(’description‘); ?></p>
</div>
</div>
<div class=”content_up“></div>
<div class=”content“>
Come vedete é un copia incolla della parte header del file index.html con l’aggiunta di 3 funzioni php:
<?php bloginfo(’url‘); ?> : questa funzione restituisce il link alla nostra home page del Blog.
<?php bloginfo(’name‘); ?> : questa invece il titolo(nome) del nostro Blog.
<?php bloginfo(’description‘); ?> quest’ultima la descrizione che abbiamo inserito nel campo description del Blog.
Fatto questo, il nostro primo file é finito, abbiamo fatto in fretta o no ???
Il contenuto (parte di index.php) :
Per questa parte dobbiamo aprire il file index.php, come vedete la prima parte di questo file non fa altro che caricare il codice header.php con la chiamata <?php get_header(); ?>. é come se prendessimo il codice di header e facciamo copia-incolla.
Dopo di questo possiamo vedere parecchio codice php, vediamo a cosa bisogna fare. In generale per non farsi troppi problemi é piú facile lasciare la parte che carica i post cosí com’é, e se vogliamo modificare l’aspetto dei post possiamo creare gli stili, post,storytitle,storycontent,feedback. Fatto questo aggiungete la parte di codice del nostro nuovo Template per completare la sezione contenuto, ovvero:
</div>
<div class=”content_left“></div>
<div class=”content_down“></div>
Questo perché abbiamo “aperto” il <div id=”content“> dentro il file header.php ed ora dobbiamo chiuderlo con le dovute divisioni.
Ecco, a questo punto inseriamo noi un codice php, in quanto nell’esempio classic non c’é, il codice <?php get_sidebar(); ?> che carica il file sidebar.php
In fine per completare il nostro index.php dovremmo inserire <?php get_footer(); ?>, ma visto che c’é giá lo lasciamo cosí com’ é.
La sidebar (sidebar.php)
Giunti a questo modulo non dobbiamo modificare tanto, allora quello che nel codice originale appare con <div id=“menu”> diventerá <div id=“sidebar”> dopodiché vediamo un po’ le prime tre funzioni php,wp_list_pages,wp_list_bookmarks,wp_list_categories.
Queste tre funzioni caricano le pagine i links e le categorie, ma per specificare gli stili é necessario solo passar loro certi parametri, vediamo quali.
Lista parametri :
- ‘orderby’ => ‘name’,
- ‘order’ => ‘ASC’,
- ‘limit’ => -1,
- ‘category’ => ”,
- ‘category_name’ => ”,
- ‘hide_invisible’ => 1,
- ’show_updated’ => 0,
- ‘echo’ => 1,
- ‘categorize’ => 1,
- ‘title_li’ => __(’Bookmarks’),
- ‘title_before’ => ‘<h2>’,
- ‘title_after’ => ‘</h2>’,
- ‘category_orderby’ => ‘name’,
- ‘category_order’ => ‘ASC’,
- ‘class’ => ‘linkcat’,
- ‘category_before’ => ‘<li id=”%id” class=”%class”>’,
- ‘category_after’ => ‘</li>’);
Cosa usiamo noi ?, semplicemente lo stile del titolo:
Per due delle tre le funzioni si puó indicare il titolo e il suo stile usando il parametro
‘title_li= stile ‘ . __(’Titolo‘). ‘chiusura titolo‘ ,
per esempio, <?php wp_list_pages(‘title_li=<h1>’ . __(‘Pages‘). ‘</h1>’); ?>
mentre per la terza cioé wp_list_bookmarks, le cose cambiano un po’, bisogna usare semplicemente
‘title_before=<h1>‘.
Ecco fatto questo, penso che sarebbe opportuno che quando inseriamo i widget gli stili siano uguali ai componenti non widget, per fare questo apriamo il file function.php che definisce i paramentri per i widget( sono gli stessi paramentri elencati sopra di default come after_title,before_title, ecc.) e inseriamo lo stile <h1> in ‘before_title’ => ” e ‘after_title’ => ”, quindi il risultato é :
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’,
));
?>
Il footer (footer.php)
A questo punto terminiamo il nostro lavoro con il footer. Come potete vedere nel footer originale (classic) é presente la chiamata a <?php get_sidebar(); ?> , noi l’abbiamo giá inserito nel index.php, quindi rimuovetelo.
Ora dovreste aver capito come funziona, quindi non mi dilungheró, inserite i vostri commenti nel footer e terminate con un bel </body></html>
A questo punto vi posso dire che la gran parte del lavoro é stato svolto, l’ultima cosa da fare e creare tutti gli stili per i collegamenti (link),titoli,paragrafi, commenti,ecc, infatti se non si fa questa attivitá ci potrebberó essere sforamenti come il form dei commenti e altre situazioni simili.
Questo lavoro é giá stato fatto infatti a questo punto il vostro template dovrebbe essere completo e non avere imprecisioni ma per capire meglio osservate il file style.css e osservate cosa c’é di importante
Ciauuuuuz e buon divertimento
