Come sviluppatori di temi WordPress, potremmo creare un tema - o temi - che richiede immagini di una certa dimensione specifica (dimensioni). Allo stesso tempo, non possiamo attribuire la responsabilità di creare tali immagini dimensionali sugli utenti finali dei nostri temi.
Quindi qual è la soluzione? Il modo migliore per affrontare questo problema è incorporare nei nostri temi la funzionalità per generare al volo immagini di dimensioni personalizzate.
In questo tutorial, ti mostrerò come utilizzare la libreria BFI Thumb PHP per ottenere ciò.
Secondo il codice WordPress:
Un'immagine in primo piano è un'immagine scelta come immagine rappresentativa per post, pagine o tipi di messaggi personalizzati. La visualizzazione di questa immagine dipende dal tema. Ciò è particolarmente utile per i temi "stile rivista" in cui ogni post ha un'immagine.
Le immagini in primo piano sono state chiamate Miniature prima che il nome fosse cambiato. Quindi troverai questi due termini usati in modo intercambiabile.
I temi devono dichiarare il loro supporto per le miniature dei post prima che l'interfaccia per l'assegnazione di queste immagini venga visualizzata nelle schermate Aggiungi post / Modifica post.
Per abilitare il supporto per le miniature delle post nel tuo tema, aggiungi la seguente riga al tuo functions.php
file:
Per visualizzare le miniature dei post nel tema, incollare il codice seguente in un punto appropriato nel file modello specifico:
Il codice sopra controlla se il post ha una miniatura prima di chiamare la funzione per visualizzarla.
Il add_image_size ()
funzione consente di registrare nuove dimensioni di immagine per le miniature dei post.
Per impostazione predefinita, WordPress crea le seguenti dimensioni di immagine quando un utente aggiunge un'immagine al Catalogo multimediale:
Per registrare nuove dimensioni di immagine, usiamo il add_image_size ()
funzione come questa:
nome $
- (stringa) (necessario) Il nuovo nome della dimensione dell'immagine. Predefinito: Nessuna $ larghezza
- (int) (opzionale) La larghezza della miniatura del post in pixel. Predefinito: 0 $ altezza
- (int) (opzionale) L'altezza della miniatura del post in pixel. Predefinito: 0 $ raccolto
- (boolean / array) (facoltativo)Per visualizzare le dimensioni delle immagini appena registrate nel tema, basta passare il nome della dimensione dell'immagine del pollice del post personalizzato al the_post_thumbnail ()
funzione, come questa:
BFI Thumb è una classe o libreria PHP che funge da resizer immagine / cropper / grayscaler / colorizer / opacitor per WordPress sviluppato da Benjamin Intal.
1. Scarica BFI thumb da GitHub e salvalo nella directory principale del tuo tema.
2. Includi nel tuo tema aggiungendo la seguente riga al tuo functions.php
file:
3. Utilizzare la seguente funzione ovunque si desideri visualizzare l'immagine di dimensioni personalizzate:
400, 'altezza' => 300); bfi_thumb ("URL-to-image.jpg", $ params); ?>
Se si guarda la funzione di cui sopra ( bfi_thumb ()
), noterete che prende l'URL dell'immagine da ridimensionare come primo parametro, seguito dagli altri parametri (dimensioni dell'immagine). Quindi devi chiedertelo, come possiamo determinare l'URL della nostra miniatura del post?
Per determinare l'URL di una miniatura del post, usiamo una funzione chiamata wp_get_attachment_image_src ()
che prende come parametri l'ID allegato, la dimensione e un'icona opzionale.
Quindi passiamo get_post_thumbnail_id ()
funzione come primo parametro. Ci vuole il Post ID
come parametro e restituisce il ID
dell'immagine in primo piano allegata al post.
Il secondo parametro è taglia
che può essere una stringa di parole chiave (miniatura, medio, grande o pieno), qualsiasi dimensione di immagine personalizzata che hai aggiunto usando il add_image_size ()
funzione o una matrice di due elementi che rappresenta la larghezza e l'altezza in pixel. Ma per garantire che la nostra immagine di dimensioni personalizzate abbia la massima qualità, useremo la dimensione originale - pieno
.
Ormai il nostro codice dovrebbe assomigliare a questo:
400, 'altezza' => 300); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); bfi_thumb ($ imgsrc [0], $ params);?>
wp_get_attachment_image_src ()
restituisce un array ordinato con valori corrispondenti a (0) url, (1) larghezza, (2) altezza e (3) scala di un allegato immagine (o un'icona che rappresenta qualsiasi allegato).
Ma ci interessa solo il primo parametro restituito - il URL
. Lo passiamo al bfi_thumb ()
funzione, insieme con i nostri altri parametri (larghezza e altezza) per ottenere la nostra immagine di dimensioni personalizzate.
Perché è probabile che utilizzeremo questo codice più e più volte nel nostro tema - o temi - racchiudiamolo in una funzione.
$ image_width, 'height' => $ image_height); $ imgsrc = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID, "), $ thumb_size); $ custom_img_src = bfi_thumb ($ imgsrc [0], $ params); return $ custom_img_src;?>
Salva questo file sul tuo functions.php
file.
Per le immagini:
O per le immagini di sfondo:
...
Le immagini di dimensioni personalizzate create al volo utilizzando una libreria come BFI Thumb presentano i seguenti vantaggi rispetto alle miniature personalizzate create / aggiunte utilizzando il add_image_size ()
funzione:
the_post_thumbail ()
le funzioni echeggiano un tag immagine. A volte quello che vuoi è l'url dell'immagine. Un esempio potrebbe essere il punto in cui si desidera utilizzare l'immagine come sfondo.add_image_size ()
non si applica alle immagini più vecchie che sono state caricate prima della registrazione della dimensione dell'immagineIn questo suggerimento rapido, abbiamo esaminato le immagini in primo piano - cosa sono e come possiamo utilizzarle nei nostri temi. Abbiamo anche guardato il add_image_size ()
funzione per vedere come possiamo usarlo per aggiungere dimensioni di immagine personalizzate quando un'immagine viene caricata nella libreria multimediale.
Abbiamo introdotto la libreria BFI THumb PHP e illustrato come possiamo utilizzarla per creare un'immagine di dimensioni personalizzate da una miniatura post o un'immagine in primo piano.
Abbiamo quindi esaminato i limiti dell'utilizzo add_image_size ()
per creare dimensioni di immagine personalizzate e i vantaggi che BFI Thumb ha su di esso.
Aggiungi questa funzione al tuo functions.php
file e usarlo ogni volta che è necessario per creare un'immagine di dimensioni personalizzate da una miniatura.