La guida completa alle miniature e alle dimensioni dell'immagine in primo piano in WordPress

Un'immagine vale più di mille parole, a meno che non sia stata ridimensionata in modo inappropriato, nel qual caso vale un centinaio di parole negative. Ok, forse questa è una versione meno conosciuta di un vecchio proverbio o qualcosa che ho appena inventato, ma il punto è: WordPress è molto potente quando si tratta di miniature e dimensioni delle immagini - devi solo sapere come gestirle. Continua a leggere per tutto ciò che devi sapere sulle dimensioni delle immagini in WordPress e gestire le immagini in primo piano.

Nota: questo post è piuttosto pesante con PHP - niente di troppo complicato, ma potresti voler leggere il nostro corso PHP gratuito prima di provare a modificare il tuo tema.

Nozioni di base in primo luogo

Nel pannello di amministrazione di WordPress, probabilmente lo sai già impostazioni -> Media.

Queste sono le tre dimensioni di immagine predefinite, che WordPress chiama: miniature, medio, e grande. La dimensione della miniatura ha un'impostazione speciale da ritagliare nella dimensione esatta specificata qui. Non è necessario che sia una dimensione 1: 1, puoi impostarla come preferisci, ma le immagini saranno centrate e ritagliate, il che significa che qualsiasi parte dell'immagine che non si adatta a quelle dimensioni dopo essere stata ridimensionata verrà semplicemente tagliata.

Le impostazioni medie e grandi funzionano in modo leggermente diverso, in quanto specifichi massimo dimensioni sia per larghezza che altezza, e le immagini verranno ridimensionate di conseguenza. Se l'immagine è troppo piccola, quelle dimensioni dell'immagine semplicemente non verranno create. Quando carichi una nuova immagine, l'originale viene salvato e disponibile per l'inserimento in un post a grandezza originale e le altre dimensioni di immagine registrate vengono create automaticamente.

Queste tre dimensioni dell'immagine, così come l'originale dimensione piena, sono gli unici disponibili quando si modifica un post e si inseriscono i media, quindi tendo a impostare grandi come larghezza assoluta del tema per pagine e post a larghezza intera e come larghezza media della colonna di contenuto tipica.

Fare più dimensioni

Quando si modifica il tema o si creano widget, le tre dimensioni definite nelle impostazioni multimediali potrebbero non essere sufficienti. Lascio sempre quelli soli per il contenuto, quindi definisco alcune nuove dimensioni dell'immagine functions.php file, come questo:

add_image_size ('my-thumbnail', 400, 200, true);

Ogni nuova dimensione dell'immagine ha bisogno di un nome, larghezza e altezza, e se le immagini debbano o meno ritagliarsi esattamente a queste dimensioni (vero o falso). Per le parti strutturali di un tema o di un widget, in genere si vorrebbe ritagliare in modo da non rompere il layout.

Immagine in primo piano

Dalla versione 2.9, WordPress ci ha permesso di impostare un'immagine specifica come “immagine in primo piano” per un post. Questa immagine non è inserita nel corpo del post (a meno che tu non lo inserisca tu stesso), ma invece può essere usata strutturalmente nel tuo tema - come una miniatura accanto al titolo del post, o forse nell'intestazione quando si visualizza quel particolare post. Non includere un'immagine in primo piano sembra pigro visto quanti temi e widget si basano su di essi: incolla questo snippet in functions.php per ricordarti quando salvi un post se ti sei dimenticato di impostarne uno (fonte):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); function wpds_check_thumbnail ($ post_id) // cambia in qualsiasi tipo di messaggio personalizzato if (get_post_type ($ post_id)! = 'post') return; if (! ha_post_thumbnail ($ post_id)) // imposta un transitorio per mostrare agli utenti un messaggio di amministrazione set_transient ("ha_post_thumbnail", "no"); // sgancia questa funzione in modo che non giri infinitamente remove_action ('save_post', 'wpds_check_thumbnail'); // aggiorna il post impostandolo su bozza wp_update_post (array ('ID' => $ post_id, 'post_status' => 'draft')); add_action ('save_post', 'wpds_check_thumbnail');  else delete_transient ("ha_post_thumbnail");  function wpds_thumbnail_error () // controlla se il transitorio è impostato e mostra il messaggio di errore if (get_transient ("ha_post_thumbnail") == "no") echo "
Devi selezionare Immagine in primo piano. Il tuo post è stato salvato ma non può essere pubblicato.
"; delete_transient (" ha_post_thumbnail ");

WordPress offre una comoda funzione per ottenere l'immagine in primo piano e utilizzarla nei temi:

the_post_thumbnail ( 'my-miniature', array ( 'class' => 'my_post_thumbnail_css_class'));

La funzione accetta 2 parametri: la dimensione con nome che stai cercando e tutti gli attributi che vuoi passare, come una classe CSS personalizzata (nota: non puoi sovrascrivere l'attributo alt). Se stai modificando un tema molto vecchio, potresti anche dover aggiungere quanto segue al tuo functions.php:

add_theme_support ( 'post-miniature');

Se preferisci semplicemente ottenere l'URL effettivo dell'immagine in primo piano piuttosto che generare l'HTML richiesto, prova invece questo (ottenendo la dimensione dell'immagine media in questo esempio):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'medium'); echo $ thumbnail [0];

Rigenerazione delle immagini

Ogni volta che modifichi le dimensioni predefinite delle immagini o crei una nuova definizione di dimensione, verrà applicata solo a nuovo uploads. Tutte le tue immagini esistenti rimangono come le dimensioni originali. Non temere mai, c'è un ottimo plugin che tornerà tra i tuoi post e rigenererà queste nuove dimensioni di immagine per te. AJAX Thumbnail Rebuild ti consente di selezionare le dimensioni da rigenerare e di elaborare lentamente l'archivio. Questo non ridimensionerà le immagini che sono state inserite nei post - quelle sono fissate nel punto di inserimento. Le immagini rigeneranti renderanno la nuova dimensione disponibile per l'uso nei temi o nei post futuri, ma non è possibile modificare automaticamente le dimensioni delle immagini esistenti che sono state già inserite.

Troverete due aspetti negativi per fare nuove immagini. Innanzitutto, anche se la dimensione dell'immagine che hai creato viene utilizzata solo per l'immagine in primo piano come parte di un tema, verrà creata una nuova versione di ogni singola immagine che hai mai caricato, non solo l'immagine in primo piano. Questa è una limitazione di WordPress; un'immagine in primo piano è uguale a qualsiasi altra e non è possibile specificarla come target con add_image_size () funzione. Fortunatamente, il plug-in Thumbnail Rebuild ti consente di limitare questo solo immagini in primo piano dall'archivio - ma tutti i futuri caricamenti di immagini saranno gestiti da WordPress e creerà le nuove dimensioni dell'immagine per tutto. Ora sarebbe un buon momento per imparare anche la differenza tra JPG e PNG Sapere quando utilizzare il formato di file: PNG contro JPG, DOC contro PDF, MP3 vs FLAC Sapere quando utilizzare il formato di file: PNG contro JPG, DOC vs. PDF, MP3 vs. FLAC Conoscete le differenze tra JPG e PNG, o MP3 e FLAC? Se non sai quali formati di file usare, lasciati guidare attraverso le loro distinzioni. Leggi di più in modo da sapere utilizzare il formato ottimale in futuro.

In secondo luogo, anche se non si utilizza più una determinata dimensione, rimarranno sul server - WordPress non eliminerà le immagini inutilizzate. Su un sito come MakeUseOf con centinaia di migliaia di immagini, questo significa un paio di gigabyte sprecati. Per i siti più piccoli, il plug-in Image Cleanup ti aiuterà digitalizzando e dandoti la possibilità di eliminare; ma i siti più grandi dovranno imparare alcune linee di comando e regex fu (vedere la nostra guida rapida periniziare con la linea di comando di Linux Una guida rapida per iniziare con la riga di comando di Linux Una guida rapida per iniziare con la riga di comando di Linux È possibile eseguire moltissime cose sorprendenti con i comandi in Linux e non è davvero difficile da imparare. Leggi di più ). Prendi sempre un backup completo, nel caso in cui cancelli qualcosa che non dovrebbe avere.

Il mio tema non cambia

Quindi hai modificato un tema con le nuove dimensioni dell'immagine e rigenerato correttamente tutte le immagini in primo piano esistenti, ma la dimensione corretta non viene ancora visualizzata? Probabilmente hai qualche codice CSS applicato all'immagine o sta circondando DIV. Usa la modalità di debug del tuo browser Figura Out Problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug Scopri i problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug Se hai seguito i miei tutorial su jQuery finora, potresti aver già incontrato alcuni problemi di codice e non sapere come per risolverli. Di fronte a un bit di codice non funzionale, è molto ... Leggi altro per trovare il CSS offensivo e modificare di conseguenza. E ricorda, puoi ridimensionare solo se l'immagine di origine è abbastanza grande - WordPress e il plugin thumbnail di generazione non scaleranno le immagini a causa della perdita di qualità.

WordPress ha quasi 11 anni, quindi è una testimonianza della sua potenza e flessibilità che è una delle poche applicazioni web che è stata mantenuta viva per tanto tempo e non sostituita. Funzionalità come le miniature dei post sono ormai onnipresenti sul web e, a suo credito, WordPress ha sempre tenuto il passo con le tendenze del design. Intendiamoci, Ghost ha un bell'aspetto Wordpress Killer? Benvenuti in Ghost (e come installarlo su un Raspberry Pi) Wordpress Killer? Benvenuti in Ghost (e come installarlo su un Raspberry Pi) Ulteriori informazioni .

Hai problemi con le immagini in primo piano? Pubblica nei commenti e vedrò se posso aiutarti.

Scopri di più su: Wordpress.