Template WordPress responsive per il mio blog!

 05/12/2013

responsive

Come avrete potuto sicuramente notare in questi ultimi giorni, ho finalmente pubblicato la nuova versione del template per il mio blog personale! Siamo arrivati alla versione 4!

Ho deciso di sviluppare un tema WordPress totalmente nuovo, partendo da un foglio bianco ed ispirandomi a “cose” viste qua e là.

La mia esigenza era quella di ottenere, con il minimo sforzo, un template ottimizzato per tutti i dispositivi, da quelli con schermi ad alta risoluzione fino ai “mobile”, sempre più in voga negli ultimi tempi. Ho perciò utilizzato lo standard de facto dei framework CSS: Bootstrap 3! Ed ecco il risultato, un template adatto a desktop, tablet e smartphone!

Mi sono servito di una classe walker scritta ad hoc per utilizzare i menu WordPress con Boostrap, in modo da poter sfruttare la navbar fissata in alto. Per il resto la giusta miscela di codice php e html, qualche file css/js ed ecco qua, il nuovo template!

Il font che ho scelto è l’Open Sans, uno dei più utilizzati ultimamente sul web, e mi viene servito direttamente da Google Fonts.

Spero di essere riuscito nell’intento di fornire una navigazione più piacevole e al tempo stesso più completa. Presto cercherò di rendere disponibile gratuitamente e sotto licenza open source questo tema nel repository di WordPress. Nel frattempo se avete domande/curiosità non esitate a commentare l’articolo o a scrivermi tramite la solita pagina dei contatti.

Invece il prossimo passo che ho in mente per il blog sarà qualche cambiamento “sotto il cofano”, ma non voglio svelarvi niente e mi tengo un po’ di tempo per fare ancora qualche test!

A presto!

Commenti annidati in wordpress

 23/10/2011

In questi giorni sono ritornato a lavorare un po’ sul mio amato wordpress.

Oltre a segnalarvi un fantastico restyle grafico del tema di backend per l’amministrazione del blog che potete trovare aggiornando wordpress alla versione 3 oggi voglio parlarvi di come modificare il tema dei commenti.

Questa piccola modifica servirà per visualizzare i commenti annidati, ossia far comparire le risposte ad un commento all’interno del commento stesso, per migliorare la discussione e permettere a chi legge per la prima volta tutti i commenti, chi ha risposto a chi e così via.

WordPress ammette di default una profondità di 5 commenti annidati, ma potete impostarla a piacere tramite il menu “Impostazioni”->”Discussione”.

Se utilizzate uno dei tanti temi scaricati dall’archivio di wordpress verificate solamente che il tema sia aggiornato e di norma dovrebbe già includere questa funzione.

Se invece come me sviluppate spesso temi partendo da zero e partite da un tema semplice e magari non aggiornato alle ultime versioni, dovrete compiere alcuni semplici passi:

  1. Nell’header.php (il file della testata), aggiungete una riga sopra al “wp_head()” con questo codice: 
    <?php if( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
  2. Nel file comments.php dove troverete il tag “ol” con all’interno il tag “li” che ha come classe css “comment” sostituite tutto il blocco con la semplice riga 
    <ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
  3. A questo punto non vi resta che editare il vostro css e inserire uno stile personalizzato per i vari livelli di profondità dei commenti, per selezionare il tag “li” relativo al tag “ul” dei commenti inserite in testa al selettore css la classe “.commentlist” e il gioco è fatto!

In pochi e semplici passi avrete così una più chiara visione dei commenti e soprattutto della discussione.

Da notare è che il requisito minimo per poter sfruttare questa funzionalità è quello di avere wordpress 2.7 o versione superiore.

Includere jQuery nel proprio tema wordpress

 23/04/2010

Il titolo potrebbe farvi pensare che questo post potrebbe essere inutile… Infatti il metodo più semplice per usare jQuery in un tema per wordpress è quello di inserire una nuova sorgente per uno script javascript con il tag:

<script type="text/javascript" src="......./jquery.js"></script>

Inizialmente il tutto potrebbe anche funzionare e non è detto che possa filare tutto liscio senza crearvi nessun fastidio.

I problemi però potrebbero iniziare quando deciderete di includere un plugin nel vostro blog.

Infatti molti plugin di wordpress richiedono un framework javascript (non necessariamente jQuery) per funzionare. WordPress include già il file .js di jQuery e quando un plugin lo richiede, il sistema include già lo script.

Per questo il modo più semplice è sicuro di inserire jQuery nel proprio tema è quello di inserire nel file header.php sopra il richiamo della funzione wp_head():

wp_enqueue_script("jquery");
wp_head();

Ora wordpress includerà il file javascript di jQuery, ma bisogna ancora compiere un passo per poter essere sicuri di aver risolto tutti i problemi. Se fossero necessarie altre librerie javascript diverse da jQuery, quest’ultimo potrebbe andare in conflitto, perciò risolviamo il problema con queste istruzioni javascript:

var $jQ = jQuery.noConflict();

$jQ(document).ready(function(){
       alert("Hello World!");
});

Se avrete fatto tutto come si deve, al caricamento della pagina apparirà una finestra di avviso con scritto Hello World! ;-)