Home tech Come aggiungere una sidebar a wordpress per rendere un tema widget ready

Come aggiungere una sidebar a wordpress per rendere un tema widget ready

9 min di lettura
2
0
372

Come ho scritto nel mio ultimo post, ho da poco realizzato un PhotoBlog ovvero un blog nel quale è la fotografia (quindi un’immagine) il soggetto “principe” del post.

Per realizzare il PhotoBlog, che ho chiamato Etrusco’s Photo, ho utilizzato la seguente combinazione hardware-software:

> Spazio Linux su provider netsons
> MySql
> WordPress 2.7.1
> Plugin YAPB (per trasformare un blog in photoblog)
> Tema reflection

Dopo molto provare e sperimentare, mi son deciso ed ho scelto il tema reflection, a mio avviso era quello più adatto ad un Blog dedicato alla fotografia; molto semplice, lineare e pulito.

Questo tema, però, è fermo da tempo alla versione 1.0 ed è un pochino “datato” ossia non sfrutta molte delle funzionalità oggi disponibili con wordpress 2.7.1

Sul blog del programmatore (xiloid.org) c’è un post che preannuncia una nuova versione più completa, questa sarà la 1.1a

Questo il post in inglese:

I am still alive! Just a quick update – I plan on writing something more substantial later on.

  1. Reflection 1.1 is almost complete. There are some pretty cool features – better archives (in the same Mosaic style but AJAXified), animation bug fixes, and a lot more customisable features through the admin control panel.
  2. vbLatex will also be updated very soon to fix some issues with the later versions of vBulletin.
  3. I will be posting Iceland pictures shortly.

Talk later!

Tuttavia la mia esigenza era quella di aggiungere al tema una “sidebar” laterale da aggiungere alle pagine informative, ossia una colonna a destra “parametrizzabile” attraverso i widget, scaricabili insieme ai plugin per wordpress.

Mi interessava quindi trasformare un template “NON WIDGET READY” in un template “WIDGET READY” con sidebar laterale

La modifica è stata estremamente semplice, infatti è bastato aggiungere le seguenti pagine nella directory del tema:

1 – sidebar.php

2 – functions.php

reperibili dalla directory del tema classic installato di default solitamente in /wordpress/wp-content/themes/classic/

Una volta copiati questi due file nella directory del tema da modificare è necessario fare ulteriori due modifiche alle pagine, una per visualizzare la sidebar e la seconda per personalizzare lo stile del blog.

1 – Visualizzare la sidebar

Per visualizzare la sidebar è necessario modificare il template php in cui la si vuol mostrare aggiungendo il codice:

<?
get_sidebar();

?>

Ad esempio io volevo mostrare la sidebar solo nelle pagine e non nei post, per cui ho dovuto modificare il template wordpress page.php nel seguente modo:

<?php

/*
* page.php
* ——–
* Standard page template. Really simple.
*/
get_header();
if (have_posts()) : while (have_posts()) : the_post();
?>
<div id=”pagecontent”>
<h2><?php the_title();?></h2>
<?php the_content(‘Read more…’);?>
  <?
get_sidebar();
?>
</div>
<?php
endwhile; endif;
get_footer();
?>

Con questa modifica, però, la sidebar veniva mostrata subito dopo il testo della pagina creando un effetto “ottico” assai bruttino, non da classica sidebar a destra.

Ho quindi dovuto fa una seconda modifica.

2 – Personalizzare lo stile

Personalizzare lo stile significa creare una struttura del bolg/photoblog che sia, ovviamente, un classico due colonne con a sinistra il testo della pagina ed a destra la nostra nuovissima “sidebar widget ready”.

E’ quindi necessario modificare parzialmente il file style.css, aggiungendo delle nuove strutture <div>

Io ho fatto cosi, ma potete creare la struttura come volete basta conoscere un pochino i css:

/* – sidebar – */
#container {width:850px; margin:0 auto; text-align:left; font-family:”Trebuchet MS”;}
#container a {color:#9AB19E;text-decoration: none;}
#container a:hover {text-decoration:underline;}
#col_sx    {width: 70%; float:left; height:200px; color:#bbb;}
#col_sx h3, #col_sx h2    {color:#fff;}
#col_dx { position:relative; margin-left:70%; padding-left:15px; font-size: 9pt; color:#bbb;}
#col_dx h3, #col_dx h2, {color:#fff; font-size: 12pt;}

Una volta aggiunti i seguenti tag sarà necessario rivedere la veste grafica del template delle pagine wordpress (page.php) modificandolo nel seguente modo:

<?php
/*
* page.php
* ——–
* Standard page template. Really simple.
*/
get_header();
if (have_posts()) : while (have_posts()) : the_post();
?>
<div id=”container”>
<div id=”col_sx”>
<h2><?php the_title();?></h2>
<?php the_content(‘Read more…’);?>
</div>
<div id=”col_dx”>
<?
get_sidebar();
?>
</div>
</div>
<?php
endwhile; endif;
get_footer();
?>

In questo modo avremo la struttura:

<div id=”container”> ……… contenitore delle colonne
<div id=”col_sx”> ………………colonna a sinistra nella quale verrà mostrato il testo della pagina
<div id=”col_dx”> ………………colonna a destra nella quale verrà mostrata la sidebar con i vari widget da noi scelti

ossia una classica struttura a due colonne con header iniziale e footer finale, per avere finalmente il risultato desiderato.

Il consiglio:

Prima di fare modifiche al vostro template in linea, lavorate su una copia locale, provate, sperimentate ed alla fine, se siete soddisfatti, fatevi un bel back-up del template originale, poi ricontrollate ed infine, se proprio siete convinti, rilasciate le modifiche.

 

Ti è piaciuto il mio articolo?

Ricevi tutte le novità dell'etrusco direttamente nella tua casella di posta

Non preoccuparti, non faccio spam!

è Solution Architect e Full Stack Developer specializzato nell’analisi, progettazione e realizzazione di sistemi complessi in ambito Transportation. Dal 2007 è anche blogger con il nickname "etrusco" che ha associato alla sua brand identity; cura personalmente i contenuti di molti altri blog, website e forum. Ha inoltre realizzato molte webapp e siti di ecommerce. La passione per internet, per i nuovi media e per la tecnologia in generale gli permettono di stare sempre al passo con i nuovi linguaggi e le più innovative metodologie di programmazione. Adora sua moglie, le sue due figlie, la fotografia analogica e questo blog.

Carica più articoli correlati
Carica più per Alessandro De Marchi
Carica più in tech

2 Commenti

  1. […] un photoblog? Beh, l’ho spiegato nel precedente articolo, è un blog in cui il soggetto principale è una fotografia anzichè un […]

  2. Lara

    27 ottobre 2011 a 20:07

    Un tutorial Fantastico! Ora me li vado a spulciare tutti nel tuo sito! Ciao!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Guarda anche

idee regalo da donna: le migliori occasioni per un natale senza pensieri

Idee regalo da donna: le migliori occasioni per un natale senza pensieri Il Natale si sta …