Tutorial: Adeguamento css a WordPress --
Transcript
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 “Cesare Cabras”</a></h1> <div class="description">Scuola Statale Primaria e dell’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"> </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.