Tutorial: Adeguamento css a WordPress --

Tutorial: Adeguamento css a WordPress --- Gasbarro Margherita
Adeguamento css di DoTemplate a WordPress
La prima operazione da fare, se non vogliamo partire proprio da zero, è quella di cercare fra i temi
free, uno che abbia un layout simile. Tenere presente soprattutto la distinzione tra template a due
colonne o a tre.
Nello svolgimento del mio esercizio ho scelto come template base Default e come css uno scelto
nel sito di DoTemplate. Nella scelta del template base, evitare di usare quelli che prevedono
funzionalità aggiuntive, per esempio il tema Regulus, che pure si poteva prestare nell'adeguamento
del css di DoTemplate, comporta maggior lavoro, questo tema prevede, fra le funzionalità
aggiuntive, la possibilità di cambiare automaticamente, per esempio, la testata. La politica da
seguire nella scelta è sempre quella che è meglio aggiungere le funzionalità, perchè toglierle è
piuttosto macchinoso.
La seconda operazione da fare è portare la cartella di Default in wp-content di WordPress, nel caso
in cui l'avete cancellata e creare una nuova cartella (sempre in wp-content) cui possiamo assegnare
il nome dotemplate, all'interno della quale posizioniamo il css di DoTemplate e le immagini
collegate. Non trasportare il file index.html perchè quello ci fa solo vedere il risultato, ma in
WordPress non ci è utile dal momento che si lavora con file php. DoTemplate posiziona le
immagini allo stesso livello del file CSS, WordPress, generalmente, ha una cartella apposita
denominata "images", così noi creeremo nella cartella dotemplate la cartella images, in cui
metteremo tutte le immagini. Con un editor che consenta la possibilità di cercare parole, come
Dreamweaver, aprire il file css cercare la parola "url(" e sostituirla con l'espressione "url(images/".
A questo punto occorre che vengano selezionati tutti i file di Default tranne il file style.css e
screenshot.jpg (ne creeremo uno apposito alla fine), per essere copiati in dotemplate.
E' da tenere presente che WordPress assegna di default un css di nome "style.css", dunque occorre
rinominare il nostro file css, DoTemplate, infatti, mette a disposizioni css il cui nome è leggermente
diverso "styles.css".
Tutte quelle che abbiamo svolto fino ad ora sono operazioni di preparazione all'adeguamento di un
css per WordPress, ora si entra nel merito delle operazioni più specifiche.
Entrare nel pannello di controllo di WordPress e nell'elenco dei temi a disposizione troverete due
template dal nome Default, uno che presenta lo screenshot ed uno che non presenta lo screenshot,
questo ultimo è il tema su cui andremo a lavorare.
Selezionare come tema per il nostro sito il tema Default senza lo screenshot e vediamo i risultati nel
browser. Nello stesso tempo aprire il file index.html del css di DoTemplate e che non abbiamo
copiato in dotemplate.
Visualizzare il file sorgente sia della index, sia della nostra home del sito.
Leggere le righe di index dopo il body:
<div id="wrap">
<div id="header-wrap">
<div id="header"></div>
</div>
e confrontiamo con quelle che si hanno in corrispondenza nel nostro sito:
<div id="page">
<div id="header">
<div id="headerimg">
Tutorial: Adeguamento css a WordPress --- Gasbarro Margherita
<h1><a href="http://127.0.0.1/wp/">Direzione Didattica &#8220;Cesare
Cabras&#8221;</a></h1>
<div class="description">Scuola Statale Primaria e dell&#8217;infanzia Monserrato (CA)</div>
</div>
</div>
Nel pannello di controllo apro il file header e sovrappongo le righe della index a quelle del mio
sito. Attenzione! Il tema di Default presenta delle righe, nella zona della head, subito dopo
<style type="text/css" media="screen">:
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page
{
background:
url("<?php
bloginfo('stylesheet_directory');
?
>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
che dovranno essere cancellate. Il template che stiamo adeguando, infatti, non prevede la scelta di
avere o meno la sidebar, c'è e stop.
Salviamo il file header con le modifiche e per avere una certa gratificazione si può già osservare,
aggiornando la pagina del nostro sito, che la testata è uguale a quella che volevamo.
Chiudiamo il file sorgente del nostro sito e aggiorniamolo per vedere la prossima operazione da
fare.
Nel file sorgente della index, continuo a leggere:
<div id="container">
<div id="content-wrap">
<div id="nav1">
<ul id="menus">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
Non trovo corrispondenza nel mio sito di queste righe, perchè il tema di Default non prevedeva la
barra di navigazione. Generalmente la barra di navigazione, in WordPress, viene caricata sempre
nella header. Apriamo nuovamente il file header nel pannello di controllo e aggiungiamo queste
righe alla fine, eliminando il tag <hr />.
Tutorial: Adeguamento css a WordPress --- Gasbarro Margherita
Abbiamo imposto con questo copia dei nomi di pagine che non sono le nostre e che tra l'altro non
linkano, visto che non è scritto il percorso, ma un segno di cancelletto.
Occorre che io osservi, però, il nome della classe che viene richiamata per la pagina corrente:
"current". Se avessimo scelto un tema di WordPress che avesse avuto una barra di navigazione
orizzontale, avremmo trovato l'istruzione php che avrebbe consentito il collegamento con il nostro
db. Le righe di codice necessarie a far questo sono le seguenti e non cambiano con il cambiare dei
template, perchè si tratta di un tag proprio del cms WordPress.
Copiare le seguenti righe:
<li <?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or
(is_search())) { echo "class=\"current_page_item\""; } ?> ><a href="<?php echo
get_settings('home'); ?>" ><?php _e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?> e
sostituire "current_page_item" con "current".
Aprire nel pannello di controllo il file page.php e index.php (non il file index.html) e sostituire in
entrambi <div id="content" class="narrowcolumn"> con <div id="main">.
Aprire sempre nel pannello di controllo il file sidebar e sostituire <ul> con <ul class="sidemenu">
Aprire ora il file footer e sostituire <hr /><div id="footer"> con
<div id="footer-wrap">
<div id="footer">&nbsp;</div>
<div id="footer-content">
<p>
Riaprire il file page ed anche index ed inserire dopo <?php get_sidebar(); ?> le seguenti righe:
<div style="clear:both"></div>
</div>
</div>
</div>
Con questa operazione abbiamo finito con l'intervenire nella struttura. Se fate un aggiornamento
della pagina del sito si potrebbe dire che il template è pronto. Si potrebbe dire, perchè in realtà
ancora qualcosa da fare c'è. Occorre eliminare il file function.php, il file header-img.php e le
immagini che non sono di DoTemplate nella cartella images ed eliminare nel file sidebar i
riferimenti a 'kubrick' che è tipico del template Default e che si appoggia al file function.php in cui è
definito.
Cosa resta da fare? Intanto copiare la struttura nei file di secondo livello del template e cioè:
archive.php e archives.php, search.php e searchform.php, 404.php, si tratta in particolare di
inserire il riferimento al “main” e chiudere tutti i div aperti nel file header subito dopo il
caricamento del file sidebar.
Tengo presente che dal lavoro che ho già fatto posso dedurre che il layout della mia pagina è così
composto:
body {wrap [header-wrap (header)][container (container-wrap (nav1) (main) (sidebar))]}
cioè il body contiene tutto, l'header-wrap contiene header solo,
container è la megascatola che contiene container-wrap, che a sua volta contiene nav1, main e
sidebar.
Tutorial: Adeguamento css a WordPress --- Gasbarro Margherita
Ogni apertura di parentesi corrisponde ad un <div id="">, mentre una chiusura di parentesi
corrisponde ad un </div>
Riportiamo così, lavorando ancora con copia-incolla, dal file page, per esempio, ai file nominati, la
struttura studiata.
Non abbiamo proprio trasferito completamente il css in un template, perchè mi rendo conto che la
testata del sito è poco significativa con la dicitura Web Site, your slogan here, noi vogliamo che al
loro posto compaiano le nostre informazioni.
Il css che abbiamo usato prevede quelle informazioni all'interno di una immagine, allora due sono le
possibilità di intervento:
1) lavoro con un editor di immagini per modificare il file header.jpg inserendo le nostre
informazioni.
2) lavoro sempre con un editor di immagini per modificare il file header.jpg eliminando
semplicemente quelle scritte ed agire con il codice per il caricamento automatico delle
nostre info. WordPress prevede dei tag appositi per il richiamo del nome del sito e del suo
slogan.
Generalmente è meglio optare per la scelta verso css che mettono a disposizione una testata senza le
informazioni, così da non gravare su di noi il lavoro non proprio semplice di tipo grafico.
Per sviluppare questo esempio di lavoro, ho preparato un file header.jpg con l'eliminazione delle
info esistenti utilizzando semplicemente il programma Paint ed inserito all'interno del file header le
seguenti righe subito dopo <div id="header">:
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
Si ottimizza il template, creando il file screenshot.png (deve avere dimensione 300 x 225), basta
fare una foto alla vostra home del sito. Si possono poi inserire in capo al file css le proprie
informazioni.
Vi allego la cartella di DoTemplate, la cartella di Default e la cartella dotemplate creata.