Jetpack Modifica Related Post con Filtri e CSS

Modifichiamo i Related Posts di Jetpack usando i giusti filtri e CSS

Eccomi di nuovo qui, dopo una breve assenza sono tornato con un piccolo tutorial su quella che è, ormai da qualche tempo, una delle mie più forti infatuazioni mai prese per un plugin di WordPress, ovvero Jetpack.

Questo splendido pack ufficiale regalatoci da Automattic ha da poco introdotto alcune feature interessantissime, tra cui proprio i related post.

Chi mi segue ha potuto leggere alcuni articoli a riguardo (QUI e QUI) sul mio blog personale. Purtroppo le impostazioni che Automattic ha pensato di fornirci nel pannello “Impostazioni” -> “Lettura” sono limitate alla scelta di visualizzare o meno l’header con la scritta “Related” e se mostrare solo i titoli o anche le immagini in evidenza.

configure Jetpack related post

Il mio blog aveva bisogno di mantenere una certa coerenza nel’impaginazione e non avrei mai tollerato il non poter almeno scegliere il numero dei post da consigliare, arrivando però da YARPP non volevo tornare ad appesantire il mio database con i dati per relazionare i post che, nel caso di Jetpack, vengono calcolati direttamente da ElasticSearch tramite WordPress.com, risparmiandoci parecchie ottimizzazioni e manutenzioni straordinarie.

Fortunatamente il team di Automattic ci ha messo a disposizione alcuni hook per interagire con questo modulo che possiamo integrare senza problemi nel file functions.php del nostro tema. Andiamo a conoscerli uno per uno e a vedere come ho ottenuto una impaginazione a 4 elementi, responsive, in linea e con un headline accantivante per il mio tema. Jetpack related post customized Il primo hook è anche il più importante, jetpack_relatedposts_filter_options, e ci servirà per abilitare e disabilitare i related post, decidere dove visualizzare il modulo (sopra o sotto il contenuto), per sceglierne il numero e per controllare anche le opzioni già disponibili da pannello; quindi thumbnail e presenza della headline.

Procediamo per passi e vediamo come agire in caso volessimo creare un filtro per aumentare il numero di post da mostrare:

Questo semplice snippet ci mostra subito le potenzialità di questo hook, rispettando le $options che troviamo nella relativa funzione del core di Jetpack possiamo creare funzioni personalizzate per stilare in maniera molto flessibile questo modulo.

Vediamo, ad esempio come spostare i related post in alto, esattamente sopra il contenuto, interagendo con l’opzione show_above_content che di default è settata su false.

Resta un’altra option oltre quelle che possiamo già modificare dal pannello, cioè enabled, che ci permetterà di disabilitare i related post. Possiamo sfruttare i tag condizionali che ci mette a disposizione WordPress per scrivere una semplice funzione in grado di abilitare e disabilitare i related post in determinate pagine o categorie; andiamo a vedere un paio di esempi utili:

Le altre due option controllate anche dal pannello possono comunque tornare utili in situazioni particolari e sono: show_thumbnails, che ci permette di disattivare le immagini in evidenza dei post passandogli il parametro false e show_headline, che funziona allo stesso modo ma disattiva, ovviamente, la headline.

Disattivarla però non era il mio intento iniziale, io volevo cambiarla!

Hai ragione, in effetti dall’immagine che ho postato inizialmente si vede chiaramente una headline modificata. Andiamo a conoscere il secondo hook che ci servirà proprio per scrivere la nostra frase a effetto: jetpack_relatedposts_filter_headline.

Ovviamente anche qui possiamo sbizzarrirci con i condizionali e creare headline diverse per ogni categoria o pagina del nostro sito e, magari, potrete anche sfruttare i prossi hook per filtrare i contenuti, così da fare link builing interno in maniera intelligente e personalizzata.

L’hook jetpack_relatedposts_filter_filters ci permette tre metodi per escludere categorie, tag o tassonomie dai risultati dei related post che sono rispettivamente: category.slug, tag.slug e taxonomy.slug.

Ovviamente ci siamo accorti che così facendo non abbiamo modo di escludere un singolo articolo o articoli diversi ma non filtrabili per tassonomie. Anche per questo abbiamo un hook apposito che filtrerà gli articoli per ID, jetpack_relatedposts_filter_exclude_post_ids.

Notate bene, è la variabile $post_id che ci permette agevolmente di filtrare i risultati per specifici post, senza doverci inventare mirabolanti trucchi con i condizionali. Potete anche non dichiararla se volete applicare il filtro a tutti i post del sito.

Ora abbiamo tutti i filtri per escludere i post in ogni modo ma non abbiamo ancora analizzato le armi a nostra disposizione per “spingere in alto” un post nella classifica delle relazioni, che Jetpack definisce in $hits. Ho usato il termine “spingere” perché nei fatti è proprio questo che faremo, andremo letteralmente a piazzare il post che ci interessa in cima all’array in cui è determinata l’importanza di relazione tra gli elementi e per farlo ci avvarremo della funzione array_unshift() di PHP, che inserisce proprio elementi in testa ad un array, e dell’ennesimo hook, jetpack_relatedposts_filter_hits.

Ora abbiamo il pieno controllo funzionale sul plugin ma ancora non basta, ad esempio nel mio caso aver aumentato il numero di related da 3 a 4 mi ha costretto a confrontarmi anche con la parte grafica del plugin per allineare i box e renderli compatibili con lo stile responsive del mio template.

Andiamo quindi a vedere le classi CSS che questo modulo ci mette a disposizione, ricordandoci però che nel caso della headline, utilizzando il filtro di cui vi ho parlato poco sopra, siamo in grado di aggiungere sia classi che elementi strutturali HTML per stilarla in maniera più avanzata e creare magari un box più ricco.

Queste sono tutte le classi fondamentali per stilare le due modalità proposte nel pannello delle impostazioni, sia quella “solo titoli”, sia quella più completa. Tuttavia c’è una classe speciale che mi ha attirato quando ho iniziato ad ispezionare il codice sorgente del modulo, questa classe la troviamo solo nella visualizzazione “completa”. Andiamo a vedere di cosa si tratta e perché la reputo una scoperta così speciale:

Notate qualcosa di particolare? Già, è proprio quello che state pensando, il riassunto (excerpt per i più tecnici WordPresser) del related post, ben nascosto via CSS. Non mi spiego perché questa cosa non sia chiara o opzionabile, ma credo che dipenda dal fatto che il modulo è relativamente nuovo e sicuramente vedremo novità che vanno verso l’integrazione di un customizer nelle impostazioni più specifico e più potente di quello attuale.

Il risultato, mostrando l’excerpt, sarà più o meno questo; considerando sempre che potrete ulteriormente giocare con gli stili CSS puntando quella classe.

Jetpack related posts excerpt

Vi mostro le mie piccole modifiche per raggiungere l’obbiettivo che mi ero posto all’inizio dell’articolo, con l’aggiunta dell’excerpt, che è stata la mia personale scoperta segreta da diffondere al resto del mondo e che faremo sparire nella versione mobile del sito. 🙂

Dopo aver piazzato nel functions.php la funzione per aumentare il numero dei post da 3 a 4 ho inserito queste poche righe nel mio style.css e il gioco era fatto!

Ci sarebbero altri aspetti da trattare per approfondire ulteriormente la faccenda, ad esempio ci potremmo interfacciare direttamente ai related post per creare uno shortcode o un widget. Considerate che il modulo in teoria permette di esplodere un JSON pieno di dati utili processati e impacchettati per noi da  ElasticSearch quindi perché non sfruttarle l’occasione?

Per ora sappiate che si può fare e se siete abili saprete sicuramente come realizzarlo per vostro conto una volta capiti i concetti base della guida.

Sicuramente in seguito realizzerò una parte pensata appositamente per basarci plugin ma questa vorrei restasse come l’ho pensata e cioè una guida pratica e orientata al design. Anche senza esplorare oltre l’aspetto funzionale, credo traspaia comunque la potenza e la versatilità di questo piccolo ma importante pezzo di codice.

Cosa dire, impossibile non restare ammaliati da questo ulteriore modulo di Jetpack e impossibile anche non notare quanta cura Automattic stia riponendo nei dettagli.

Come al solito mi aspetto molti miglioramenti in futuro e sono certo che avrò modo di aggiornare spesso questa piccola guida perché il fermento che c’è dietro al mondo WordPress.com sta sbarcando a passi lunghi sulle realtà self-hosted tramite Jetpack e il poter usufruire gratuitamente di moltissimi servizi utili come questo o la CDN Photon, per citarne un altro che uso costantemente, è un privilegio che nessun altro CMS al momento riesce a offrire e che attira molti altri contributors al progetto che potete tranquillamente trovare su Git.

Volete segnalarmi altri snippet o funzioni che ritenete utili quando lavorate con Jetpack? Scrivetemelo tra i commenti oppure contattatemi via mail o su Google+ e vedremo di ampliare la guida e trattare nello specifico anche altri moduli.

Ci aggiorniamo alla prossima e ricordatevi di dimostrare tanto <3 per Jetpack!

Lascia il tuo Pensiero