Quello che segue sono alcuni appunti di uno sviluppo fatto per personalizzare una pagina su un blog wordpress, rispettando la modalità responsive del tema.

L’esigenza era quella di nascondere alcune parti dalla pagina, erogate dal tema installato sul sito, come i menu e l’header in testa alla pagina. Oltre a questo era necessario restringere la larghezza della colonna che presentava il testo. Questo per far assomigliare la pagina ad una squiz page.

Da un lato sarebbe stato semplice intervenire creando una pagina statica con dentro solo il codice html semplice e poco altro.

Questo però rendeva la manutenzione del testo della pagina complicata per chi non ha esperienza di html. L’abituale autore degli articoli del blog non avrebbe più potuto intervenire direttamente nel testo della pagina in modo autonomo.

La prima versione

Il primo approccio è stato semplice, un pezzo di codice css inserito nella pagina, direttamente in testa,

<style type="text/css">
   .navbar, .page-title-section {
       display: none;
    }

    .container {
       width: 800px;
    }
</style>

Per trovare i nomi delle classi da utilizzare nel css ho utilizzato l’inspection element di firebug.

Questo ha risolto in parte i problemi, creandone altri.

Il primo problema è che il codice inserito in pagina, spariva quando in edit della pagina si passava dalla modalità testo a quella visuale. Questo costituiva un problema, perché era facile che ci si dimenticasse di reinserire il pezzo di codice se spariva, e occorreva averne sempre una copia a portata di mano per chiunque dovesse modificare la pagina. Poco pratico. Nella prima giornata di vita della pagina dove avevo inserito la prima versione ho dovuto ripristinarlo una decina di volte.

Il secondo problema è generato dal restringimento della larghezza del box container. Fatto in questo modo si compromette il carattere responsive della pagina, rendendola inutilizzabile sopratutto nei device mobili. E questo era un grosso problema, perché la maggior parte del traffico del sito era proveniente dal mondo mobile.

Quindi ho tolto la seconda parte, lasciando solo il seguente codice in attesa di realizzare una seconda versione che risolvesse il problema:

<style type="text/css">    
    .navbar, .page-title-section {  
        display: none;
    }
</style>

La seconda versione

Il tema responsive usa il costrutto @media per gestire una serie di variazioni della pagina sulla base della larghezza della finestra del browser che visualizza l’articolo. Questo per rendere coerente la visualizzazione della pagina su dispositivi diversi.

Il tema che installato utilizzava il booster twitter come base per il responsive, quindi ho trovato una buona documentazione in merito.

Quello che mi serviva era fare in modo che solamente per le finestre molto ampie la larghezza venisse ridotta. Ecco che la soluzione era di intervenire solo quando la dimensione in pixel della finestra superava le dimensioni minime di 1200 pixel. Ho aggiornato il codice CSS  precedente inserendo il seguente, questo sovrascrive per la pagina le impostazioni originali del tema, restringendo la larghezza della colonna di testo a 800 px quando la finestra è molto ampia. Negli altri casi, tablet, cellulare, rimangono le impostazioni standard del tema.

@media (min-width: 1200px) {
  .container {
      width: 800px;
   }
}

Rimane ancora da risolvere il problema del codice che sparisce editando l’articolo.

La terza versione

Realizzare la terza versione è stato un poco problematico, non conoscevo in dettaglio il codice che gestiva il tema per poterlo modificare e non volevo nemmeno farlo per evitare di perdermi pezzi durante gli aggiornamenti.

Ho fatto diverse prove ed alla fine sono arrivato al punto di costruire una funzione in php da inserire nella raccolta di funzioni del tema in uso.

La funzione quando viene richiamata, controlla  la pagina che la sta chiamando è in una lista, se è cosi allora attiva il codice css che avevo preparato con la seconda versione.

Ho cercato di descriverlo in modo elegante senza entrare nel merito del codice, ma forse qualche delucidazione serve. Ogni articolo o pagina creata in wordpress ha un ID, un numero progressivo che lo identifica. Questo codice viene restituito dalla funzione di wordpress get_the_ID() che memorizzo nella fantasiosa variabile $current_post.
Verifico se è presente in una lista di pagine a cui voglio applicare lo stile speciale. Ho un array che in questo caso contiene un unico elemento. Ho preferito preparare direttamente la possibilità di applicare questo stratagemma ad una lista di pagine, piuttosto che limitarmi ad un confronto diretto con un unico ID.

Ho inserito queste righe di codice in coda alla raccolta di funzioni del tema in uso, nel file functions.php

<? if(!function_exists('xno_post_layout_css')) : 
function xno_post_layout_css(){ 
   $current_post = get_the_ID(); 
   if(in_array($current_post, array(976,)) ){ 
?>

<style type="text/css">
@media (min-width: 1200px) {
  .container {
    width: 900px;
  }
}
.navbar, .page-title-section {
display: none;
}
</style>

<? 
   } 
} 
endif;
?>

Ora non rimane che scegliere il punto in cui inserire la chiamata alla mia funzione. Ho scelto di metterlo direttamente nel file header.php del tema, questo viene incluso in tutte le pagine del sito, e il codice speciale viene attivato solo per la pagina specifica. Ho inserito la mia chiamata alla funzione subito dopo l’apertura del tag body della pagina vera e propria.

<body <?php body_class(); ?> >

<!-- XNO personalizzazione -->
<?php xno_post_layout_css(); ?>

Quarta versione

Non esiste ancora, ma ci sto seriamente pensando.

Il problema che mi si pone è legato al fatto che sono intervenuto nel codice del tema installato. Lasciando scoperta la possibilità che un aggiornamento del tema sovrascriva le mie modifiche.

Ho agito così un poco per pigrizia, un poco perché come succede in questi casi le modifiche fatte oggi erano necessarie ieri.

E’ consuetudine infatti che mi chiedano oggi qualcosa che doveva essere fatto per ieri, ma le specifiche te le mandiamo la settimana prossima.

Se ti interessa rimanere aggiornato sulla nascita della quarta versione iscriviti nella form sottostante, riceverai qualche email con le novità man mano che le scrivo.

Se invece vuoi subito una quarta versione dimmelo, ti mando gli estremi per consentirti di inviare un sostanzioso bonifico.