tutorial-2

Come impostare un’immagine di categoria in WordPress

Come impostare un’immagine di categoria in WordPress

Plugin

Spesso mi capita di dover impostare un’immagine di categoria in WordPress. Di base è possibile scegliere il nome, lo slug e la descrizione di una categoria (o di una taxonomy) ma non è possibile associarle un’immagine, che invece spesso può tornare utile per le pagine archivio e non solo.

Per ovviare a questa mancanza ricorro al plugin Taxonomy Images. Da backend l’utilizzo del plugin è facile ed intuitivo e impostare un’immagine per la categoria richiede lo stesso sforzo necessario per impostare l’immagine in evidenza di un articolo.

Dal punto di vista dell’utilizzo nello sviluppo di un tema, Taxonomy Images risulta a volte poco chiaro.

Per ottenere l’ID del media associato alla categoria se ci troviamo in una pagina archivio, bisogna ricorrere a questo filtro:

$image_id = apply_filters( "taxonomy-images-queried-term-image-id", 0 );

Il filtro ottiene l’ID del term della categoria (o della tassonomia) direttamente dalla query di WordPress. Come dicevo questo funziona nelle pagine archivio ma non, ad esempio, nelle pagine dei singoli articoli. Tuttavia c’è un piccolo workaround per sfruttare le immagini anche nella altre pagine o, in generale, ottenere l’ID dell’immagine relativa a un dato term. Eccolo:

<?php
    $images = get_option('taxonomy_image_plugin');
    $img_url = wp_get_attachment_url( $images[$term_id] ); 
?>

In questo modo è possibile mostrare le taxonomy images anche in una single.php.

read more >
Come aprire un PDF in un popup con Fancybox

Come aprire un PDF in un popup con Fancybox

jQuery

In alcuni casi è utile aprire un documento PDF in un popup, magari in seguito al click su un logo oppure sull’immagine di una anteprima. Ecco un piccolo tutorial che mostra come aprire un PDF in un popup con Fancybox.

Quando si tratta di popup, di solito preferisco utilizzare il plugin per jQuery Fancybox. È uno strumento molto valido, che permette di aprire come popup praticamente qualsiasi cosa: dalle immagini agli iframe. In quest’ultimo caso rientrano anche i PDF: l’unico requisito è che il browser dell’utente abbia un lettore PDF integrato.

Il codice per attivare una fancybox che apre un PDF è davvero semplice:

$(".fancybox").fancybox({
    iframe : {
        preload: false
    }
});

Ecco una demo funzionante, dalla documentazione ufficiale di fancybox.

read more >
Come personalizzare le barre di scorrimento

Come personalizzare le barre di scorrimento

jQuery

Recentemente ho dovuto personalizzare delle barre di scorrimento per il sito Cantiere Triplok. Le soluzioni che prevedono il solo utilizzo di CSS non sono sufficienti, in quanto permettono di agire solo su un piccolo insieme di caratteristiche (colore, dimensione), e soprattutto non sono compatibili con tutti i browser.

Questo il risultato che volevo ottenere:

triplok-barre-scorrimento-personalizzate

L’unica via percorribile è quindi quella di Javascript / jQuery. Dopo una rapida ricerca ho deciso di utilizzare jscrollpane, un plugin jQuery che mi ha dato la possibilità di raggiungere il mio obiettivo (l’immagine in cima a questo post mi ha convinto che jscrollpane fosse il plugin giusto, esempio della personalizzazione delle barre di scorrimento che è possibile raggiungere).

Il codice javascript non ha nulla di eccezionale

jQuery(function () {
 jQuery(".scrollable").jScrollPane({
   showArrows:true,
   verticalDragMinHeight: 40,
   verticalDragMaxHeight: 40
 });
});

Un po’ di CSS ha fatto il resto: ho definito due immagini per le freccine in alto e in basso, e una terza immagine per il cursore verde.

read more >