Le immagini sono elementi molto importanti in un sito web. Oltre a definire maggiormente la tematica e ad abbellire l’aspetto estetico dell’intero sito, hanno anche una valenza a livello di posizionamento, specie se parliamo di Google Image.
Nei temi WordPress generalmente già è presente la funzione per mostrare le immagini in evidenza (featured image) che vengono visualizzate nelle categorie (ad esempio la lista di articoli di un blog interno al sito) oppure nell’articolo o pagina stesso.
Accade anche che per impostazione predefinita del tema l’immagine in evidenza non sia visibile o che le sue dimensioni non rispettino le nostre volontà. Vediamo come, mettendo mano al codice, si possano mostrare e personalizzare le immagini in evidenza.
Per prima cosa occorre dire a WordPress che la funzione per mostrare le immagini in evidenza deve essere attiva. Basta aggiungere al file function.php le seguenti righe di codice
[php]// Abilita il tem per le immagini in evidenza
<?php add_theme_support( ‘post-thumbnails’ ); ?>[/php]
Fatto ciò bisogna definire le dimensioni delle immagini. Sempre in function.php si aggiunge questa funzione che dice che la dimensione predefinita è 720×224 pixel.
[php]//Dimensione standard delle immagini in evidenza
<?php set_post_thumbnail_size(720, 224, true); ?>[/php]
Non è detto che ovunque si vogliano immagini in evidenza di queste dimensioni, è possibile perciò personalizzare le dimensioni con il codice che segue e che andrà inserito sempre nel file function.php
[php]// Differenti dimensioni delle immagini utilizzate nel tema
<?php
add_image_size( ‘page-large’, 720, 300, true );
add_image_size( ‘page-small’, 230, 230, true );
add_image_size( ‘post-large’, 600, 330, true );
add_image_size( ‘post-small’, 365, 365, true );
?>[/php]
Con questo codice abbiamo creato 4 differenti dimensioni:
- page-large: 720×300 pixel
- page-small: 230×230 pixel
- post-large: 600×330 pixel
- post-small: 365×365 pixel
A questo punto dobbiamo inserire nel loop o nei file dedicati a pagine e post, il codice che serve per mostrare l’immagine in evidenza standard
[php]//Mostra l’immagine in evidenza delle dimensioni predefinite
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>[/php]
oppure quella di dimensioni personalizzate
[php]//Mostra l’immagine in evidenza delle dimensioni dichiarate in post-large
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘post-large’ ); } ?>[/php]