Impostare delle immagini in evidenza predefinite da assegnare automaticamente agli articoli di WordPress quando dimentichiamo di selezionare un’immagine può essere molto utile. Nella pratica evita che gli articoli vengano pubblicati senza un’immagine e quindi che vengano mostrati senza immagine associata nella pagina del blog o quando li condividiamo sui social.
In questa guida vedremo diversi modi per far sì che venga mostrata un’immagine di default quando dimentichiamo di selezionare l’immagine in evidenza.
Parleremo anche di metodi alternativi a cui possiamo ricorrere per evitare di dimenticare un elemento importante come l’immagine in evidenza.
Indice
Quando serve impostare un’immagine in evidenza predefinita su WordPress
Scegliere un’immagine che venga mostrata di default quando non è stata selezionata nessuna immagine in evidenza è utile per evitare di lasciare gli articoli privi di immagine associata.
Non impostare un’immagine in evidenza per i nostri articoli su WordPress, infatti, ha diversi aspetti negativi:
- le pagine che raccolgono gli articoli, come ad esempio la pagina del blog e le pagine delle categorie avranno le immagini mancanti e quindi non avranno più un aspetto uniforme;
- quando condividiamo gli articoli sui social, verrà mostrata un’immagine interna come immagine di anteprima o potrebbe non essere mostrata nessuna immagine.
Nella maggior parte dei casi è meglio impostare singolarmente le immagini in evidenza in modo che ogni articolo abbia un’immagine pertinente e correlata all’argomento del post stesso.
Se, però, c’è il rischio di dimenticarsi di impostarla, ecco che entra in gioco la possibilità di impostare un’immagine in evidenza di default che verrà usata in mancanza di un’immagine specifica.
In questa guida vedremo proprio i diversi metodi per usare un’immagine predefinita, poi starà a te capire qual è il sistema migliore in base al tuo sito e al risultato che vuoi ottenere.
I metodi che andremo a vedere sono:
- usare il plugin Default Featured Image per impostare una singola immagine predefinita;
- usare il plugin Default Featured Image e una funzione aggiuntiva (via codice) per impostare immagini diverse in base alla categoria;
- impostare un’immagine predefinita senza plugin, via codice;
- usare Auto Featured Image per impostare la prima immagine (interna al post) come predefinita.
Alla fine vedremo quali metodi alternativi utilizzare per non dimenticare di impostare l’immagine in evidenza.
Come impostare un’immagine di default con un plugin
Uno dei metodi per impostare un’immagine in evidenza predefinita quando non viene selezionata, è quello di ricorrere a un plugin.
Un plugin creato con questo scopo è Default Featured Image.
Per prima cosa dobbiamo installare e attivare il plugin: andiamo quindi su Plugin > Aggiungi plugin, cerchiamo il plugin e installiamolo, per poi attivarlo.
Si tratta di un plugin semplicissimo da usare e che non ha impostazioni aggiuntive.
Per impostare l’immagine che sarà usata come immagine in evidenza predefinita, ci basterà andare su Impostazioni > Media.
Qui vedremo una nuova voce, “Default Featured Image” che compare solo dopo aver attivato il plugin. Accanto a questa opzione vedremo due pulsanti:
- “Select Default Featured Image” ci permette di scegliere dalla libreria dei media l’immagine da usare;
- “Don’t use a default featured image” è il bottone che ci permette di rimuovere l’immagine selezionata e quindi serve se non vogliamo più usare un’immagine predefinita.
Come funziona esattamente il plugin?
Dopo aver selezionato l’immagine da usare, a tutti i post che vengono pubblicati senza immagine in evidenza selezionata, verrà associata automaticamente l’immagine predefinita scelta da noi.
Come impostare immagini diverse di default in base alla categoria
La funzione di base del plugin che abbiamo visto prima ci permette semplicemente di impostare una singola immagine predefinita che verrà usata per tutti gli articoli.
Se, invece, vogliamo fare una distinzione ulteriore, possiamo utilizzare una funzione aggiuntiva che sfrutta i filtri di WordPress e che ci permette di impostare immagini in evidenza diverse in base alle categorie.
Per farlo possiamo personalizzare il codice fornito dagli sviluppatori del plugin Default Featured Image.
Puoi aggiungere questo codice in diversi modi, il modo più facile è creare uno snippet con il plugin Code Snippets.
Nota: affinché il codice funzioni devi avere il plugin Default Featured Image installato e attivato.
add_filter( 'dfi_thumbnail_id', 'dfi_category', 10, 2 );
function dfi_category( $dfi_id, $post_id ) {
// Set a different image for posts that have the 'cats' category set.
// This will trigger first, if multiple categories have been set.
if ( has_category( 'cats', $post_id ) ) {
return 7; // cats img id.
}
// Set a different image for posts that have the 'dogs' category set.
if ( has_category( 'dogs', $post_id ) ) {
return 8; // dogs img id.
}
return $dfi_id; // the original featured image id.
}Per personalizzare questo codice dobbiamo andare a sostituire:
- “cats” e “dogs” con i nomi delle categorie per le quali vogliamo impostare delle immagini in evidenza;
- il numero dopo return va sostituito con l’ID dell’immagine che vogliamo impostare.
Ora ti mostro come fare con un esempio pratico.
Nel mio caso voglio impostare l’immagine con ID 53 per la categoria “wordpress” e l’immagine con ID 49 per quella “informatica“, allora personalizzerò il codice di conseguenza. Nell’esempio qui sotto sono state evidenziate le righe da modificare.
Suggerimento: per trovare l’ID dell’immagine ti basta aprire la libreria dei media, modificare l’immagine e guardare l’ID nell’URL come indicato in questa schermata qui sotto.
Nota che proprio come la funzione del plugin di base, anche in questo caso l’immagine di default verrà usata solo se non abbiamo già impostato un’immagine in evidenza manualmente per quel post. Nell’esempio qui sotto puoi vedere il codice in funzione.
A sinistra abbiamo la situazione di partenza:
- il primo e il terzo articolo non hanno un’immagine in evidenza impostata;
- il secondo e il quarto articolo hanno già un’immagine specifica.
Dopo aver attivato la funzione, il codice fa il suo dovere:
- per gli articoli della categoria “informatica” che non hanno già un’immagine in evidenza, nel nostro esempio il primo articolo, viene impostata l’immagine scelta;
- la stessa cosa succede per gli articoli con categoria “wordpress”, nell’esempio il quarto articolo, per i quali viene usata l’altra immagine selezionata;
- gli articoli per cui abbiamo scelto in precedenza un’immagine in evidenza, non vengono modificati e continuano a mostrare l’immagine corretta.
Come impostare un’immagine predefinita senza plugin
Se non vogliamo utilizzare un plugin, un altro metodo per impostare un’immagine predefinita su WordPress è aggiungere una funzione.
Per esempio è possibile usare il codice di WPCode che riporto qui:
// Go to Settings > Media after activating this snippet to set the default featured image.
add_action( 'admin_init', function() {
register_setting( 'media', 'default_featured_image', 'absint' );
add_settings_field(
'default_featured_image',
__( 'Default Featured Image', 'wpcode-snippet' ),
function() {
wp_enqueue_media();
$image_id = get_option( 'default_featured_image', 0 );
$image_url = $image_id ? wp_get_attachment_url( $image_id ) : '';
?>
<div>
<img id="default-featured-image-preview" src="<?php echo esc_url( $image_url ); ?>" style="max-width: 150px; display: <?php echo $image_url ? 'block' : 'none'; ?>; margin-bottom: 10px;"/>
<input type="hidden" id="default_featured_image" name="default_featured_image" value="<?php echo esc_attr( $image_id ); ?>"/>
<button type="button" class="button" id="upload-default-featured-image"><?php esc_html_e( 'Choose Image', 'wpcode-snippet' ); ?></button>
<button type="button" class="button" id="remove-default-featured-image"><?php esc_html_e( 'Remove Image', 'wpcode-snippet' ); ?></button>
</div>
<script>
jQuery( document ).ready( function ( $ ) {
var removeButton = $( '#remove-default-featured-image' );
var frame;
$( '#upload-default-featured-image' ).on( 'click', function ( event ) {
event.preventDefault();
if ( frame ) {
frame.open();
return;
}
frame = wp.media( {
title: '<?php echo esc_js( __( 'Select Default Featured Image', 'wpcode-snippet' ) ); ?>',
button: {
text: '<?php echo esc_js( __( 'Use this image', 'wpcode-snippet' ) ); ?>'
},
multiple: false
} );
frame.on( 'select', function () {
var attachment = frame.state().get( 'selection' ).first().toJSON();
$( '#default_featured_image' ).val( attachment.id );
$( '#default-featured-image-preview' ).attr( 'src', attachment.url ).show();
removeButton.show();
} );
frame.open();
} );
$( '#remove-default-featured-image' ).on( 'click', function () {
$( '#default_featured_image' ).val( '' );
$( '#default-featured-image-preview' ).hide();
removeButton.hide();
} );
if ( $( '#default_featured_image' ).val() === '0' ) {
removeButton.hide();
}
} );
</script>
<?php
},
'media',
'default',
array( 'label_for' => 'default_featured_image' )
);
});
add_filter( 'post_thumbnail_html', function( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
if ( ! $html ) {
$default_image_id = get_option( 'default_featured_image' );
if ( $default_image_id ) {
$image_url = wp_get_attachment_image_src( $default_image_id, $size );
if ( $image_url ) {
$html = '<img src="' . esc_url( $image_url[0] ) . '" class="attachment-' . esc_attr( $size ) . ' wp-post-image" alt="' . esc_attr( get_the_title( $post_id ) ) . '" />';
}
}
}
return $html;
}, 10, 5 );Questo codice funziona in maniera analoga al plugin che abbiamo visto all’inizio di questa guida. Dopo averlo attivato, ci basta andare in Impostazioni > Media e vedremo la voce “Default Featured Image”.
Cliccando sul pulsante “Choose Image” potremo selezionare l’immagine da usare come predefinita, assicurandoci poi di cliccare su “Salva le modifiche“.
L’immagine in evidenza predefinita verrà mostrata solo per gli articoli privi di immagine in evidenza.
Nota: se il codice non funziona può dipendere dal tema che stai utilizzando, in quel caso potresti dover rivedere le impostazioni del tema o personalizzare il codice per farlo funzionare.
Se, invece, hai problemi con tutte le immagini in evidenza, controlla la guida su come risolvere gli errori di visualizzazione delle immagini in evidenza.
Come impostare la prima immagine come immagine in evidenza
In alcuni casi può essere comodo far sì che la prima immagine inserita all’interno dell’articolo venga usata automaticamente come immagine in evidenza. Questo può essere utile per risparmiare tempo ed evitare di lasciare articoli senza immagini in evidenza impostate.
Avvertenza: in base alle impostazioni del tema, se l’immagine in evidenza viene mostrata anche nel post e non solo nelle pagine archivio come la pagina blog, seguendo questo metodo potresti ritrovarti ad avere l’immagine presente due volte negli articoli. Quindi devi valutare cosa fare in base a come vuoi impostare le pagine degli articoli.
Se vogliamo automatizzare il processo possiamo usare un plugin come “Auto Featured Image“.
Dopo aver installato e attivato il plugin, il funzionamento è automatico: i nuovi articoli che creeremo avranno come immagine in evidenza la prima immagine inserita nell’articolo.
Se, invece, vogliamo selezionare un’immagine diversa, ci basterà impostarla manualmente come al solito. Il plugin, infatti, agisce solo sugli articoli che lasciamo senza immagine in evidenza selezionata.
Per aggiornare gli articoli creati prima dell’installazione del plugin, ci basta andare su “Auto Featured Image” dalla barra laterale di WordPress e cliccare su “Generate Featured Images“.
Il plugin cercherà tutti gli articoli per cui non è stata impostata un’immagine in evidenza e andrà a impostare automaticamente la prima immagine inserita nel corpo dell’articolo.
Poi ci restituirà in alto un breve riepilogo delle immagini che ha impostato e più sotto in “Generation log” la cronologia delle immagini che sono state impostate.
Metodi alternativi alle immagini in evidenza predefinite
Può essere comodo avere un sistema automatico che imposta un’immagine in evidenza predefinita quando non ne viene scelta una manualmente. Se, però, abusiamo un po’ troppo di questa funzione rischiamo di ritrovarci ad avere tutti gli articoli con la stessa immagine e questo non è proprio l’ideale.
Se hai un blog o un sito di notizie con più autori e vuoi assicurarti che lo step di impostazione dell’immagine in evidenza non venga saltato per una dimenticanza, ci sono delle alternative.
Un’opzione valida (che personalmente ho visto usare nella pratica in siti di notizie), è quella di aggiungere una sorta di checklist che renda obbligatoria la scelta dell’immagine in evidenza. Si tratta in pratica di un controllo prima della pubblicazione che ti aiuta a ricordare di impostare l’immagine in evidenza.
Un plugin che ci permette di avere una lista di controlli da fare prima della pubblicazione è PublishPress Checklists.
Questo plugin ci permette di creare una lista di controllo personalizzata in base a ciò che vogliamo ricordarci prima della pubblicazione di un articolo. Il plugin ha tante opzioni, ma in questo caso ci concentreremo solo sul motivo per cui ne stiamo parlando. Vediamo quindi come rendere obbligatoria la selezione di un’immagine in evidenza usando questo plugin.
Dopo aver installato e attivato il plugin andiamo su Liste di controllo > Liste di controllo e clicchiamo sulla scheda “Immagine in evidenza”. Qui possiamo:
- attivare un controllo sull’immagine in evidenza per assicurarci che sia stata selezionata. Per farlo scegliamo “Richiesto” dal menu a tendina.
- testo alternativo e didascalia dell’immagine in evidenza. Possiamo anche aggiungere controlli aggiuntivi per ottimizzare le immagini per la SEO, nello specifico per ricordarci di aggiungere l’alt text e / o la didascalia dell’immagine.
Alla fine clicchiamo su “Salva modifiche” per confermare.
Cosa succede dopo aver attivato la lista di controllo?
Dopo aver attivato il controllo, quando andiamo a pubblicare un articolo senza aver prima selezionato l’immagine in evidenza, vedremo che il tasto Pubblica non è più cliccabile e vedremo l’avviso sotto “Lista di controllo” che ci invita a completare prima l’azione richiesta, cioè aggiungere l’immagine in evidenza.
Conclusioni
Adesso sai come fare a impostare su WordPress delle immagini in evidenza predefinite. Abbiamo visto come fare a impostare una singola immagine e come fare a selezionare immagini diverse in base alla categoria degli articoli. Non dimenticare che ci sono anche alternative, ad esempio aggiungere una checklist che ti ricordi di impostare l’immagine prima di pubblicare a tutti gli effetti i tuoi articoli.
E tu, quale metodo preferisci usare? Condividi la tua esperienza nei commenti.
Pronto a costruire il tuo sito WordPress?
Prova il nostro servizio gratuitamente per 14 giorni. Nessun impegno, nessuna carta di credito richiesta.
