Template WordPress responsive per il mio blog!

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!

Evitare il caching del css di WordPress

wordpress_logo

In questo brevissimo articolo vi dimostrerò come evitare che il browser degli utenti usi una versione non aggiornata del vostro css di WordPress.

Con questa breve funzione andremo ad inserire un parametro in fondo al richiamo del foglio di stile che inserisca il timestamp dell’ultima modifica del file, in modo che la cache continui a funzionare fino a quando non sarete voi a modificare il file.

<link href="<?php echo get_bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(get_stylesheet_directory().'/style.css'); ?>" rel="stylesheet" media="screen">

Come potete vedere abbiamo applicato il concetto al css principale di wordpress ma si può applicare a qualsiasi file css, js o di immagini. La funzione di php utilizzata è la filemtime.

Eseguire chiamate AJAX con jQuery e JSON in WordPress

Ajax and WordPress

Succede sempre più di frequente di dover effettuare delle chiamate ajax in WordPress. In questo articolo vedremo come effettuare delle chiamate asincrone senza dover creare nuove pagine WordPress ma sfruttando lo script utilizzato dall’interfaccia del wp-admin.
Nell’esempio in questione, la chiamata AJAX restituirà un file JSON formato davvero utile per rappresentare i dati restituiti da una query. Lato javascript useremo la funzione $.getJSON(…) di jQuery mentre lato server scriveremo il nostro script all’interno del file functions.php presente in qualsiasi tema WordPress.

Per prima cosa dobbiamo creare la corrispondenza tra una nuova action e la nostra funzione php:

add_action('wp_ajax_myaction', 'my_function');

Fatto ciò possiamo scrivere la nostra funzione my_function la quale corrisponderà all’azione myaction (il nome è puramente indicativo, potete chiamare l’azione e la funzione come preferite):

function my_function() {
  global $wpdb;
  $id = $_GET['id'];
  $rows = array();
  $q = "SELECT * FROM my_table WHERE id = ".$id;
  $rows['results'] = $wpdb->get_results($q, ARRAY_A);
  if(count($rows) <= 0){
    return false;
  }
  echo json_encode($rows);
  exit();
}

In questo script trovate tutto l’indispensabile per completare la parte lato server. Come si può intuire la query dovrà utilizzare un parametro passato in GET, poi utilizzando la variabile globale wpdb effettueremo la query sul database. La json_encode trasformerà l’array associativo con i record letti tramite la SELECT in una stringa JSON e la stamperemo a video tramite l’echo. Non dimenticate la exit() finale perchè altrimenti verrà stampato uno “0” che vi metterà in difficoltà nel parsificare il JSON.

Un ultimo particolare di cui tenere conto è che la add_action crea un’azione per l’admin-ajax.php che è un file accessibile solo da utenti loggati, quindi per consentire l’esecuzione dell’azione sia da utenti registrati sia da ospiti sarà necessario aggiungere un’ulteriore linea di codice come questa:

add_action('wp_ajax_nopriv_myaction', 'my_function');

Dopo aver completato lo script PHP possiamo passare al lato client, con il codice javascript per la chiamata della funzione:

$jQ.getJSON('<?php echo get_bloginfo('url'); ?>/wp-admin/admin-ajax.php',{action: 'myaction',id: 'tuo_id'}, function(json){...Codice javascript per parsificare il json...}

Ho omesso l’inclusione di jquery in WordPress, ma potete trovare come fare in un mio precedente articolo che trattava l’argomento nello specifico.

A questo punto non vi resta che sbizzarrirvi con le chiamate ajax nel vostro template oppure dai vostri plugin (in quest’ultimo caso basta spostare il codice PHP in un file del vostro plugin).

Commenti annidati in wordpress

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.

Il blog si rifà il look!

Come avrete potuto notare visitando il mio blog, da oggi c’è una nuova grafica ad accogliervi!

Ho lavorato qualche giorno(ma soprattutto qualche notte :-P) per realizzare il nuovo tema wordpress, cercando di seguire le linee guida dettate dal mio amico architetto Ermal Brahimaj.

Discutendo insieme di cosa doveva avere il mio blog, e di come doveva essere realizzato, mi ha dato alcune brillanti idee, analizzando il mio sito sotto il punto di vista di un utente che vede per la prima volta questo spazio. Il design è minimal (spero piacerà anche a @marcoviti ;-) ) e utilizza solamente una scala di grigi. Ho eliminato tutto il superfluo, in modo che il lettore si possa concentrare solamente sul contenuto, il vero “succo” di questo sito. Proprio per accentuare questo concetto, (se provate a spostare il mouse sul testo dell’articolo ne avrete la prova) ho utilizzato jQuery per far “scomparire” il superfluo, ovvero il banner il menu e la ricer ca, così che il lettore non abbia distrazioni. Inoltre non ci sono linee che delimitino lo spazio del sito, proprio dare la sensazione di libertà, di respiro.

Spero piaccia anche a voi questo restyling, in ogni caso ringrazio davvero il mio amico Ermal per le idee che mi ha dato e vi invito, se non lo avete ancora fatto, a visitare il suo sito brahimaj.com e la sezione progetti per dare un’occhiata ai suoi lavori!

Nuovo tema per il blog!

Come (spero) vi siate accorti, sono riuscito finalmente ad ultimare il nuovo tema per il mio blog.

Mi sono sempre promesso che prima o dopo avrei lavorato alla realizzazione di un mio tema, visto che fino ad oggi avevo sempre utilizzato temi scaricati dalla sezione apposita di wordpress e oggi ho finalmente un tema tutto mio.

Ho cercato di renderlo più leggero del precedente, riducendo al minimo il codice javascript, alleggerendo il css ed ispirandomi a design minimalisti, senza troppi fronzoli per rendere il tema intuitivo e cercando di ricordare qualche regola di HCI.

Spero vi piaccia, ma aspetto critiche e suggerimenti e ovviamente se trovate dei bugs, segnalatemeli, thanks!

Includere jQuery nel proprio tema wordpress

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! ;-)

Istruzioni per l’uso…

Da alcuni giorni discuto con alcuni di voi (Denny e Axel), su come avvisarvi ogni volta che qualcuno posta un nuovo commento ad un mio articolo…

In particolare, come diceva Alex sarebbe comodo ricevere una mail per ogni commento su ogni post del blog. Questo avviene per i proprietari di un blog ma non per tutti gli altri. Dopo aver cercato varie soluzioni ho deciso di installare questo plugin Subscribe To Comments.

Sembra il meno “invasivo” di tutti e lascia alla volontà del lettore la decisione di ricevere una mail per ogni commento oppure no…

L’unica cosa da fare è spuntare la voce “Notificami via mail i prossimi commenti a questo post” al momento dell’inserimento del primo commento, e si riceveranno tutti gli aggiornamenti del post.

Spero sia la soluzione più giusta, ma se avete suggerimenti o idee come sempre sono le benvenute…

Tra l’altro ho anche aggiunto un plugin per Google Friend Connect, così potete usare il vostro account google per commentare :-)
[ad]

WordPress come CMS!

Come alcuni di voi già sanno, ultimamente, a lavoro, mi sono dovuto immergere all’interno del codice di wordpress. Bene, devo dire che ero un po’ perplesso, ma ho voluto sperimentare e provare lo stesso…

Al contrario di quanto pensassi, il codice di un tema è molto intuitivo e comprensibile. Basta masticare un po’ di CSS e un po’ di PHP. Se volete provare, potete scaricare questo tema. Io sono partito da qui e ho seguito la guida di worldpress.it.

La cosa più interessante è che wordpress può essere utilizzato anche come Content Mangement System (CMS). Alcuni ne sconsigliano questo tipo di utilizzo, mentre altri lo promuovono… Da parte mia devo dire che ci sono i pro e i contro, e ovviamente vi sconsiglio di utilizzarlo se dovete realizzare un sito complesso, che deve gestire parecchi utenti o situazioni complesse(e-commerce, per fare un esempio). Però wordpress permette di gestire pagine, e con semplici funzioni (le trovate tutte in questa guida ufficiale) potete accedere e personalizzare tutti i vostri contenuti. E allora qual’è il vantaggio nell’usare wordpress? Ovviamente tutta la gestione dei contenuti già fatta(memorizzati su database mysql) e la rapidità di “costruzione” del sito web. Devo ammettere che in 2 giorni si possono realizzare siti web decenti (se non ci si fossilizza troppo sul layout grafico).

Quasi sicuramente lo utilizzerò altre volte, e soprattutto quando si devono realizzare siti standard e pronti “in pochi minuti”, allora potrebbe essere la soluzione giusta, a differenza di Joomla, Drupal o quant’altro che potrebbero risultare un po’ complicati (in fase di personalizzazione del codice). Che dire, se lo provate, buon divertimento!
[ad]

IlFerre 2.0!!!

Wordpress

Rullino i tamburi, squillino le trombe… Udite udite, nasce oggi il mio nuovo blog, IlFerre 2.0!

Costa mi ha messo la pulce nell’orecchio a riguardo di wordpress, così ho voluto provare a cimentarmi anch’io con questo strumento ultra super mega collaudato… Risultato:  mi è piaciuto e ho deciso di installarlo su un sottodominio del mio dominio personale… Tranquilli, non dovete cambiare il segnalibro al blog su blogspot(sempre che abbiate mai avuto il segnalibro al mio blog, non ce l’ho neppure io forse… :P ). Comunque per chi lo volesse, il nuovo indirizzo è ilferre.setupstat.com

L’importazione completa dei vecchi articoli non sono ancora riuscito a farla funzionare, ho solo importato gli articoli presenti nel feed rss di blogspot, in attesa di far funzionare l’importazione “full” (sempre che ci riesca, e inoltre i suggerimenti sono ben accetti ;) )… In ogni caso i vecchi articoli sono disponibili qui (con tanto di commenti)

Ora vi chiederete: perchè tutto questo? Bè perchè wordpress è altamente personalizzabile, sia dal punto di vista dei plugin, sia dal punto di vista “grafico”. Spero di aver fatto la scelta giusta… Inoltre se qualcuno (Costa in primis) ha plugin o sciccherie varie da segnalare, fatevi sotto!
[ad#ad-2]