Come modificare le dimensioni delle immagini in primo piano in WordPress

Le immagini in primo piano vengono utilizzate all'interno di WordPress in diversi modi, a seconda del tema che stai utilizzando. La maggior parte dei temi utilizza le immagini in primo piano come anteprima in miniatura di una delle immagini in un post o in una pagina che viene generalmente visualizzata nella home page e nelle pagine di archivio.

Questa funzionalità è stata introdotta con WordPress 2.9 ed era originariamente nota come "anteprime dei post". La maggior parte dei temi di WordPress (incluso il nostro) ora utilizza le immagini in primo piano per molti altri scopi come nelle gallerie di immagini, nei dispositivi di scorrimento delle funzionalità e nelle immagini di intestazione della pagina. Ad esempio, nel nostro tema Full Frame, l'immagine in primo piano diventa l'immagine di sfondo del post.

Le immagini in primo piano sono ovviamente molto importanti per i creativi e chiunque crei un sito WordPress che contiene molte immagini. Per utilizzare le immagini in primo piano in qualsiasi tema di Graph Paper Press, tutto ciò che devi fare è selezionare un'immagine in primo piano dal collegamento sul lato destro dello schermo nell'editor dei post.

Se la dimensione dell'immagine in primo piano predefinita impostata nel tuo tema funziona per i tuoi scopi, ottimo. In caso contrario, è possibile modificare la dimensione con una piccola modifica del codice.

Perché vorresti cambiare la dimensione dell'immagine in primo piano? Oltre a rendere le gallerie di miniature più grandi o più piccole, potresti voler cambiare le proporzioni delle dimensioni. Supponiamo, ad esempio, che tu sia un fotografo paesaggista e che il tuo portfolio sia composto da ampi panorami. In questo caso, se l'immagine in primo piano predefinita del tema è quadrata, finirà per ritagliare la maggior parte dell'immagine. Puoi risolvere questo problema regolando manualmente le dimensioni su qualcosa di più adatto.

Modifica della dimensione dell'immagine in primo piano in functions.php

Per modificare le dimensioni delle immagini in primo piano rispetto a quelle predefinite, dovrai modificare del codice nel file functions.php . È possibile accedere a questo file tramite FTP oppure modificarlo direttamente nella dashboard di WordPress in Aspetto > Editor. Consiglierei sempre il primo approccio rispetto al secondo.

Prima di apportare modifiche a questo file, vale sempre la pena assicurarsi di disporre di un backup della versione originale nel caso qualcosa vada storto. Se non hai già i file del tema originale sul tuo computer, assicurati di scaricare almeno il file functions.php e salvarlo in una cartella di backup.

Esistono due modi diversi per ridimensionare un'immagine in primo piano. Per ridimensionarlo in modo proporzionale (ovvero per evitare di allungare o comprimere l'immagine) utilizzare il seguente codice:

 set_post_thumbnail_size( 50, 50 ); // 50 pixel di larghezza per 50 pixel di altezza, modalità di ridimensionamento

puoi anche scegliere di ridimensionare l'immagine ritagliandola con questo codice:

 set_post_thumbnail_size(50, 50, vero); // 50 pixel di larghezza per 50 pixel di altezza, modalità di ritaglio

Questo imposta la dimensione predefinita delle immagini in primo piano.

Aggiunta di ulteriori dimensioni dell'immagine

È anche possibile aggiungere tutte le dimensioni dell'immagine aggiuntive necessarie aggiungendo una riga di codice aggiuntiva per ciascuna dimensione dell'immagine:

 add_image_size('categoria-pollice', 300, 9999); // 300 pixel di larghezza (e altezza illimitata)

È quindi possibile utilizzare questa nuova dimensione nel modello del tema con il codice seguente:

 <?php the_post_thumbnail( 'categoria-thumb' ); ?>

Questa funzione è utile se desideri visualizzare le immagini in primo piano in diversi modi. Ad esempio, potresti voler impostare una dimensione della miniatura per le tue gallerie di immagini e una dimensione maggiore per l'intestazione del tuo post.

Ricorda che le immagini che carichi devono essere grandi almeno quanto le dimensioni che hai impostato per le immagini in primo piano. Se carichi immagini più piccole, verranno ridimensionate e finiranno per apparire pixelate e sfocate.

Ricostruire le tue immagini in primo piano

La modifica delle dimensioni dell'immagine in primo piano influirà solo sui caricamenti dal momento in cui viene modificato il codice. Eventuali caricamenti precedenti saranno stati salvati alle dimensioni originali, quindi dovrai rigenerarli.

Se hai solo poche immagini da ridimensionare, puoi caricarle di nuovo manualmente. Se ne hai più di una manciata, è meglio usare un plugin come Regenerate Thumbnails per fare tutto il duro lavoro per te. È possibile accedere a questo plug-in tramite il menu Strumenti e ridimensionerà una o più immagini nella galleria multimediale che selezioni.

A prova di futuro le tue modifiche con un tema figlio

Il problema con apportare modifiche direttamente al tuo file functions.php è che andranno perse se viene rilasciata una nuova versione del tema e devi aggiornarlo. Puoi prendere nota del codice che hai aggiunto e inserirlo nel nuovo file functions.php , ma questo può diventare noioso, in particolare se stai apportando molte modifiche o ci sono nuove versioni del tema che escono frequentemente.

L'utilizzo di un tema figlio risolve questo problema, poiché quando il tema principale viene aggiornato, il tema figlio viene lasciato intatto. Se stai apportando modifiche al codice di un tema, nel file functions.php , nei fogli di stile o in qualsiasi altro file, è sempre consigliabile utilizzare un tema figlio.

Abbiamo già una guida completa per creare un tema figlio sul blog, ma ecco cosa devi sapere per i nostri scopi.

Per creare un tema figlio, connettiti al tuo sito tramite FTP e crea una nuova cartella in /wp-content/themes/ per il tuo nuovo tema figlio. È pratica comune assegnare alla cartella lo stesso nome del tema che si desidera modificare, con "-child" aggiunto ad essa. Ad esempio: "bambino fantastico" se stai creando un tema figlio del tema Fantastico.

Devi creare un foglio di stile all'interno della cartella del tema figlio, anche se non intendi modificare il CSS. Crea un nuovo file chiamato style.css e incolla il codice seguente:

 /*
Nome del tema: Bambino fantastico
URI del tema: http://example.com/awesome-child/
Descrizione: Fantastico tema per bambini
Autore: carta millimetrata Press
URI dell'autore: http://example.com
Modello: fantastico
Versione: 1.0.0
Tag: chiaro, scuro, layout reattivo, pronto per l'accessibilità
Dominio di testo: fantastico-bambino
*/

@import url(../awesome/style.css");

/* =La personalizzazione del tema inizia qui
-------------------------------------------------- ------------ */

Modificare il nome del tema e altri dettagli a seconda dei casi.

Per aggiungere la funzionalità per cambiare l'immagine in primo piano nel tuo tema figlio, dovrai creare un nuovo file functions.php , quindi vai avanti e fallo nella directory del tema figlio. Questo file verrà caricato in aggiunta al functions.php del tema principale.

Il modello per functions.php si presenta così:

 <?php //Apertura tag PHP

// funzioni

?> // Chiusura del tag PHP

Puoi quindi aggiungere il codice di ridimensionamento dell'immagine tra i tag PHP, quindi ti ritroverai con qualcosa del genere:

 <?php // Apertura del tag PHP

se ( funzione_esiste( 'add_theme_support' ) ) {
add_theme_support('post-miniature');
set_post_thumbnail_size(150, 150, vero); // Dimensioni predefinite della miniatura del post (ritagliate)

// dimensioni immagine aggiuntive
// elimina la riga successiva se non hai bisogno di ulteriori dimensioni dell'immagine
add_image_size('categoria-pollice', 300, 9999); //300 pixel di larghezza (e altezza illimitata)
}

?> // Chiusura del tag PHP

Una volta che hai finito di creare il codice del tuo tema figlio, dovrai attivarlo. Puoi farlo tramite la dashboard del sito, in Pannelli di amministrazione > Aspetto > Temi . Trova il tuo tema figlio nell'elenco e fai clic su Attiva.

Ammira le tue nuove immagini in primo piano ridimensionate

La modifica delle dimensioni delle immagini in primo piano e l'aggiunta di nuove dimensioni delle immagini è un'operazione piuttosto semplice, ma richiede una modifica del codice. Per questo motivo, alcuni utenti preferiscono utilizzare un plug-in per gestire il ridimensionamento delle immagini, ma l'aggiunta di plug-in aggiuntivi rappresenta sempre un rischio per la sicurezza. Intromettersi e apportare alcune semplici modifiche al codice come questa può davvero aiutare a rafforzare la tua confidenza con l'utilizzo di WordPress e ti renderà più facile personalizzare i temi e renderli davvero tuoi.