La guida completa alle miniature in primo piano e alle dimensioni delle immagini in WordPress

La guida completa alle miniature in primo piano e alle dimensioni delle immagini in WordPress

Un'immagine vale più di mille parole, a meno che non sia stata ridimensionata in modo inappropriato, nel qual caso è un po' imbarazzante. WordPress contiene potenti strumenti per ridimensionare immagini e miniature, ma devi sapere come gestirli.





Continua a leggere per tutto ciò che devi sapere sulle dimensioni delle immagini in WordPress e sulla gestione delle immagini in primo piano.





Modificare PHP nei file di WordPress

Questo post contiene codice PHP per WordPress. Potresti voler leggere il nostro corso accelerato PHP gratuito prima di tentare qualsiasi modifica sul tuo tema.





Se non ti senti a tuo agio nell'aprire i file del tema, o non vuoi perché andranno persi con futuri aggiornamenti del tema, puoi utilizzare il Le mie funzioni personalizzate plugin per aggiungere invece blocchi di codice.

https://en-gb.wordpress.org/plugins/my-custom-functions/



Nozioni di base sulla dimensione delle immagini di WordPress

Nella dashboard di amministrazione di WordPress, probabilmente lo sai già Impostazioni > Metà.

trasferire file da mac a pc

Queste sono le tre dimensioni di immagine predefinite, che WordPress chiama: miniatura , medio , e grande . La dimensione della miniatura ha un'impostazione speciale per essere ritagliata alla dimensione esatta specificata qui. Questa non deve essere una dimensione di rapporto 1: 1 --- puoi impostarla come preferisci.





Quando il ritaglio è abilitato, le immagini verranno ridimensionate e centrate, quindi tutto ciò che non si adatta verrà scartato.

L'impostazione media e grande funzionano in modo leggermente diverso, in quanto specificherai massimo dimensioni sia per la larghezza che per l'altezza e le immagini verranno ridimensionate di conseguenza. Se l'immagine è troppo piccola, quelle dimensioni dell'immagine non verranno create.





Quando carichi una nuova immagine, l'originale viene salvato e disponibile per l'inserimento in un post a dimensione intera e le altre dimensioni dell'immagine registrate vengono create automaticamente.

Aggiungere dimensioni di immagine personalizzate in WordPress

Le tre dimensioni definite per impostazione predefinita all'interno di WordPress potrebbero non essere sufficienti, motivo per cui temi e plug-in possono aggiungere le proprie dimensioni personalizzate. Se hai dimestichezza con la modifica dei file del tema, puoi farlo anche tu.

Apri la directory del tema e cerca il funzioni.php file. Aggiungi il seguente codice, uno per ogni dimensione dell'immagine che si desidera definire:

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

Ogni nuova dimensione dell'immagine richiede un nome, dimensioni di larghezza e altezza e se le immagini devono essere ritagliate o meno esattamente a questa dimensione ( vero o falso ). Per le parti strutturali di un tema o di un widget, in genere dovresti ritagliare in modo che non rompa il layout.

Potresti essere tentato di creare molte dimensioni di immagini personalizzate, ma dovresti farlo con parsimonia. Ogni dimensione dell'immagine che definisci verrà generata per ogni singola immagine che carichi, anche se l'hai intesa solo per noi con l'immagine in primo piano.

Quindi, se hai sette dimensioni di immagine personalizzate, più le tre predefinite, ogni immagine che carichi genererà 10 piccole copie di se stessa. Se consideri che un singolo post può contenere 10 immagini incorporate, sono 100 i file creati solo per quel post.

Non è possibile creare una dimensione dell'immagine personalizzata e specificare che deve essere utilizzata solo per le immagini in primo piano.

Inoltre, anche se non stai più utilizzando una certa dimensione personalizzata e hai cancellato quel codice (o cambiato temi), le vecchie immagini rimarranno sul server per sempre. WordPress non eliminerà le immagini inutilizzate per te. Su un sito vecchio o grande come MakeUseOf, ciò significa che alcune centinaia di gigabyte vengono sprecate per archiviare immagini che non vengono più utilizzate.

Per i siti più piccoli, il Detergente per supporti il plugin può essere d'aiuto, ma esegui sempre prima un backup completo.

https://wordpress.org/plugins/media-cleaner/#description

Dimensioni immagine personalizzate da utilizzare nei contenuti dei post

Per impostazione predefinita, le dimensioni delle immagini personalizzate non verranno visualizzate nella casella a discesa quando si inserisce un'immagine in un post. L'unica cosa che vedrai è Miniatura, Media, Grande e Dimensione intera (a seconda delle dimensioni dell'immagine originale, poiché non verrà ingrandita).

Se vuoi che anche la tua taglia personalizzata sia nell'elenco, avremo bisogno di un po' più di codice. Ancora una volta, aggiungi al tuo funzioni.php file:

function image_sizes_to_mediapicker( $default_sizes ) {
return array_merge( $default_sizes, array(
'my-thumbnail' => __( 'My Thumbail Size' ),
) );
}
add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

Funziona filtrando l'elenco di selezione dei media. Uniamo l'array dell'elenco delle dimensioni originali con qualsiasi nuova dimensione che vogliamo elencare. Cambia 'Mia miniatura' e 'Mia dimensione miniatura' con la tua dimensione personalizzata e il nome descrittivo leggibile che desideri venga elencato come.

Le immagini in primo piano sono una singola immagine associata a un post, ma non necessariamente inserita nel contenuto del post. Sono spesso utilizzati dai temi nell'intestazione, nella prima pagina o nella barra laterale. Tuttavia, in termini di dimensioni dell'immagine, non vengono trattate in modo diverso dalle immagini normali.

Per ogni dimensione che hai definito, qualsiasi immagine caricata verrà duplicata e ridimensionata, inclusa l'immagine in primo piano.

trasferire foto da iphone a mac

Se non vedi l'opzione per Imposta immagine in primo piano nella schermata di modifica del tuo post, è possibile che il tuo tema non supporti la funzione. Puoi forzare il supporto aggiungendo la seguente riga al tuo tema funzioni.php file, ma suggerirei caldamente di trovare invece un nuovo tema.

La mancanza di supporto per qualcosa di così semplice come le immagini in primo piano sarebbe indicativa di codice obsoleto altrove.

add_theme_support('post-thumbnails');

Per utilizzare l'immagine in primo piano nel tuo tema o nei tuoi plugin, usa the_post_thumbnail() funzione per emettere il tag immagine:

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

La funzione accetta 2 parametri: la dimensione denominata che stai cercando (in questo caso 'my-thumbnail') e tutti gli attributi che vuoi passare, come una classe CSS personalizzata.

Se preferisci ottenere solo l'URL effettivo dell'immagine in primo piano rispetto all'HTML richiesto, prova invece questo (ottenendo la dimensione media dell'immagine in questo esempio):

iPhone non apparirà su iTunes
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

Rigenerazione delle immagini in miniatura di WordPress

Ogni volta che modifichi le dimensioni dell'immagine predefinite o crei una dimensione dell'immagine personalizzata, si applicherà solo a nuovo caricamenti. Tutte le tue immagini esistenti rimangono nelle dimensioni originali.

Se desideri ridimensionare le immagini caricate in precedenza, avrai bisogno di un plug-in. Ricostruzione miniature AJAX ti consente di selezionare le dimensioni da rigenerare e funzionerà lentamente attraverso il tuo archivio.

https://wordpress.org/plugins/ajax-thumbnail-rebuild/

Tuttavia, ci sono alcune limitazioni e insidie ​​che dovresti conoscere.

Sebbene le immagini in primo piano possano essere ridimensionate automaticamente, nessun plug-in può riscrivere il contenuto del post. Ad esempio, se hai aggiunto un'immagine a un post su grande size (che all'epoca poteva essere 500 px), cambiando la definizione di grande non cambierà la dimensione dell'immagine nel post. Rimarrà a 500 px a meno che non modifichi il post e reinserisca la stessa immagine con la nuova dimensione.

Come accennato, se hai molte dimensioni dell'immagine, genererai molte immagini. Per fortuna, Thumbnail Rebuild ti consente di limitarlo a solo immagini in evidenza . Ma ancora una volta, ricorda che questo vale solo per la tua immagine precedente. Tutti i futuri caricamenti di immagini saranno gestiti da WordPress, il che significa che tutte le dimensioni delle immagini verranno create per tutto.

Ora sarebbe un ottimo momento per imparare anche il differenza tra JPG e PNG così saprai usare il formato ottimale in futuro.

Porta il tuo sito WordPress al livello successivo

Vuoi modificare il tuo tema WordPress? L'uso di immagini, colori e posizionamento degli elementi da parte del tuo tema è definito principalmente da CSS e HTML, quindi ti consigliamo di dare un'occhiata a questi tutorial passo passo per imparare CSS e HTML .

E se sei interessato ai temi, dai un'occhiata a questi fantastici temi WordPress per un portfolio fotografico.

Il tuo sito WordPress si blocca troppo spesso? Stai pagando troppo? Passa a un noto servizio di hosting come InMotion Hosting (sconto speciale MakeUseOf con questo link ) o Bluehost (sconto speciale MakeUseOf con questo link ).

Condividere Condividere Tweet E-mail Ecco perché l'FBI ha emesso un avviso per il ransomware Hive

L'FBI ha emesso un avvertimento su un ceppo di ransomware particolarmente dannoso. Ecco perché devi prestare particolare attenzione al ransomware Hive.

Leggi Avanti
Argomenti correlati
  • Programmazione
  • Wordpress
Circa l'autore James Bruce(707 articoli pubblicati)

James ha una laurea in Intelligenza Artificiale ed è certificato CompTIA A+ e Network+. Quando non è impegnato come editor di recensioni hardware, gli piacciono i LEGO, la realtà virtuale e i giochi da tavolo. Prima di entrare a far parte di MakeUseOf, era un tecnico luci, insegnante di inglese e ingegnere di data center.

Altro da James Bruce

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti