Utilizzo di dimensioni immagine personalizzate nel tema e ridimensionamento delle immagini esistenti

In questo tutorial imparerai come generare immagini di dimensioni personalizzate da utilizzare nel tuo tema WordPress. Perché utilizzare le dimensioni personalizzate dell'immagine? Quindi non dovrai modificare tutte le immagini che carichi nella libreria multimediale. In questo modo ogni immagine caricata otterrà automaticamente tutte le dimensioni di immagine personalizzate definite. Può essere inserito nel post o nella pagina utilizzando la Galleria multimediale o dal ciclo. Continua a leggere per scoprire come.


Passaggio 1: definizione di dimensioni immagine personalizzate

Affinché il tuo tema supporti dimensioni di immagine personalizzate, devi modificare il file functions.php che si trova nella cartella dei temi. Apri le funzioni.php del tuo tema e verifica se hai una linea simile a questa:

add_action ('after_setup_theme', 'function_name');

Questo hook viene chiamato durante l'inizializzazione di un tema. Viene generalmente utilizzato per eseguire azioni di configurazione, registrazione e inizializzazione di base per un tema, dove "nome_funzione" è il nome della funzione da chiamare.

Se hai trovato una riga del genere, trova anche il metodo con lo stesso nome del secondo parametro da quel metodo add_action.

Se non riesci a trovare una riga simile a questa, devi aggiungerla e creare anche i nomi di un metodo come secondo parametro:

add_action ('after_setup_theme', 'setup'); funzione setup () // ...

Ora per abilitare le miniature dei post per il tuo tema aggiungi le seguenti righe nel metodo sopra definito:

function setup () // ... add_theme_support ('post-thumbnails'); // Questa funzione abilita il supporto post-miniatura per un tema // Per abilitare solo per i post: // add_theme_support ('post-thumbnails', array ('post')); // Per abilitare solo per i post e i tipi di post personalizzati: // add_theme_support ('post-thumbnails', array ('post', 'movie')); // Registra una nuova dimensione dell'immagine. // Ciò significa che WordPress creerà una copia dell'immagine post con le dimensioni specificate // quando carichi una nuova immagine. Registrati come necessario. // Aggiunta di dimensioni immagine personalizzate (nome, larghezza, altezza, ritaglio) add_image_size ('featured-image', 620, 200, true); // ...

Passaggio 2 Visualizzazione delle immagini con dimensioni personalizzate

Inserisci immagine di dimensioni personalizzate nel post utilizzando la Galleria multimediale

Per inserire un'immagine all'interno di un post o di una pagina dalla galleria multimediale, inserisci il seguente filtro nel file functions.php:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ sizes) $ custom_sizes = array ('featured-image' => 'Immagine in primo piano'); return array_merge ($ sizes, $ custom_sizes); 

Cosa fa questo codice, unisce le dimensioni delle immagini personalizzate a quelle definite in WordPress, quindi il risultato sarà l'immagine qui sotto.

Inserisci immagine personalizzata all'interno del loop

Per visualizzare ad esempio l'immagine che è stata nominata "featured-image", all'interno del ciclo devi aggiungere queste righe:

 'featured-image')); finisci se; ?>

Questo controllerà se il post / pagina ha un'immagine allegata e ne mostrerà uno tag che mostra l'immagine alla dimensione desiderata.


Passaggio 3 Ridimensionamento delle immagini esistenti

Per questo compito c'è un plugin per aiutare, Rigenera Miniature. Può rigenerare tutto, un lotto o singole immagini. Se si cambiano le dimensioni dell'immagine e la si rigenera, le immagini con le dimensioni precedenti non verranno eliminate.


Esempio

Diciamo che ti piacerebbe utilizzare questa funzione all'interno del tuo tema. Dal / Wp-content / themes / nome-of-the-tema cartella aperta functions.php con il tuo editor di testo preferito. Se il tuo tema non ha un after_setup_theme azione definita, è necessario aggiungerne una. Il codice per le dimensioni personalizzate dell'immagine verrà aggiunto al metodo definito.

Nota: questi sono nomi di dimensioni immagine riservati: pollice, miniatura, medio, grande, post-miniatura. L'aggiunta di una dimensione immagine personalizzata con un nome riservato annullerà i suoi valori predefiniti.

add_action ('after_setup_theme', 'setup'); function setup () // ... add_theme_support ('post-thumbnails'); // Questa funzione abilita il supporto post-miniatura per un tema add_image_size ('header', 600, 200, true); // header image add_image_size ('custom-size1', 400, 200); // 400 pixel di larghezza e 200 pixel di altezza, ridimensionati proporzionalmente add_image_size ('custom-size2', 400, 200, true); // 400 pixel di larghezza e 200 pixel di altezza, ritagliati // ...

Modifica del content.php o content-single.php o content-page.php file, è possibile mostrare l'immagine con le dimensioni appropriate per l'intestazione del post inserendola sotto o sotto il titolo del post.

Per rendere le altre due dimensioni personalizzate selezionabili dalla Galleria multimediale, aggiungi il seguente filtro:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ sizes) $ custom_sizes = array ('custom-size1' => 'My custom size 1', 'custom-size2' => 'My custom size 2'); return array_merge ($ sizes, $ custom_sizes); 

Un vero esempio di come funziona e come può essere usato: gurde.com


Riferimenti

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

Il prossimo

Come generare una galleria con dimensioni di immagine personalizzate e aggiungere alcuni JavaScript per ingrandire le immagini e passare da una all'altra (mouse e tastiera).