stampa questo articolo
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.

 

Potrebbe interessarti anche ...

2 Commenti

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here