Come usare un differente layout per una determinata pagina in Thematic per WordPress

Creare un layout differenteVediamo come creare la nostra home page usando un layout a tre colonne fisse e tutte le altre pagine usandone uno a due colonne usando Thematic.This post is an Italian translation of the original article How to use a different layout for a certain page. Il requisito principale: un child theme! Iniziamo con il nostro file style.css come base per il layout a due colonne. Dovrebbe contenere il seguente codice:

/*Valori di default del browser azzerati */
@import url('../thematic/library/styles/reset.css');
/* Stili tipografici di base */
@import url('../thematic/library/styles/typography.css');
/* Layout di base*/
@import url('../thematic/library/layouts/2c-r-fixed.css');
/* Stili di abse per le immagini*/
@import url('../thematic/library/styles/images.css');
/*Stili di base dei colori */
@import url('../thematic/library/styles/default.css');
/* Prepariamo il tema per i plugin */
@import url('../thematic/library/styles/plugins.css');

Assicuriamoci di non importare il file style.css originale di Thematic Framework per WordPress. Adesso dobbiamo scrivere il nostro file style-home.css (questo nome non e’ obbligatorio mentre style.css si). Copiamo style.css in style-home.css. Una volta fatto andiamo a cambiare la linea di codice responsabile del layout. Cambiamola da 2c-r-fixed a 3c-fixed. Il nostro file style-home.css dovrebbe ora contenere il seguente codice:

/*Valori di default del browser azzerati */
@import url('../thematic/library/styles/reset.css');
/* Stili tipografici di base */
@import url('../thematic/library/styles/typography.css');
/* Layout di base*/
@import url('../thematic/library/layouts/3c-r-fixed.css');
/* Stili di abse per le immagini*/
@import url('../thematic/library/styles/images.css');
/*Stili di base dei colori */
@import url('../thematic/library/styles/default.css');
/* Prepariamo il tema per i plugin */
@import url('../thematic/library/styles/plugins.css');

Ora che abbiamo definito i due differenti layout, dobbiamo andare a modificare gli stili usati. Per raggiungere questo obiettivo dobbiamo modificare il file functions.php nella cartella del nostro child theme aggiungendo questo codice:

// filtriamo thematic_create_stylesheet per implementare il nostro foglio di stile (quello che verrà caricato come file di default nella nostra prima pagina):
function my_stylesheet($content) {
// controlliamo che sia la nostra home page
if (is_home() || is_front_page()) {
// si, carica il layout a 3 colonne
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_directory') . "/style-home.css";
$content .= "\" />";
$content .= "\n\n";
} else {
// no, non lo e'. Carica quello a due colonne
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_directory') . "/style.css";
$content .= "\" />";
$content .= "\n\n";
}
return $content;
}
// aggiungiamo il filtro a thematic_create_stylesheet
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

Fatto: adesso il nostro blog utilizza due layout differenti. Scarica il codice di esempio Un’ ultima nota a proposito di ulteriori modifiche ai nostri fogli di stile. Le modifiche relative al layout a due colonne (la larghezza della sidebar per sempio) vanno fatte nel file style.css mentre per quello a tre in style-home.css. non modifichiamo i file nella cartella originale di Thematic. Le modifiche relative ad ambedue gli stili (colore del testo per esempio) vanno effettuate sia in style.css che in style-home.css. Possiamo modificare le condizioni in my_stylesheet() per le nostre esigenze. Maggiori dettagli leggendo Conditional Tags. Provato su Thematic Framework per WordPress e un child theme base. Per ulteriori domande lasciare un commento o visitare il Forum di Thematic

.


How to use a different layout for a certain page, articolo originariamente scitto da Chris Gossmann su Die Welt der WupperPiraten. Tradotto con l' aiuto dell' autore, danke Chris!

Termini collegati: , , Scrivi il tuo commento all'articolo

Scrivi un Commento

Il tuo indirizzo Email non verra' mai pubblicato e/o condiviso. I Campi obbligatori sono contrassegnati con *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="">