Imaginile thumbnail devin tot mai populare printre utilizatorii de bloguri. Multe teme (cele gen revista indeobste) folosesc deja aceasta functionalitate. Cu ajutorul acesteia se poate afisa o imagine din interiorul unui articol, atat pe pagina de start, cat si pe paginile de categorie, arhiva sau tag.
In versiunile mai vechi ale WordPress aceasta functionalitate era obtinuta prin setarea unui custom-field, insa nu era o solutie la indemana oricui. Multumita programatorilor WordPress, o serie de functii ajutatoare au fost adaugate incepand cu versiunea 2.9.
Varianta simpla
Aceasta varianta functioneaza DOAR DACA tema are deja activata functionalitatea pentru imaginile thumbnail. Daca functionalitatea e deja activata, atunci vei vedea in bara laterala a panoului de scriere a articolului:
Apasa pe linkul Seteaza imagine recomandata si vei fi dus in pagina de incarcare a pozelor. Incarca o imagine si vei vedea un ecran asemanator cu acesta:
Apasa pe Foloseste ca imagine recomandata. In momentul in care ai apasat iti va aparea in bara laterala a panoului de scriere a articolului ceva de genul:
Gata. Acum poti publica articolul si imaginea va fi aratata pe site.
Varianta complexa
Desi acesta functionalitate este predefinita in WordPress, nu toti utilizatorii vor vedea optiunea prezenta in bara laterala a panoului lor de scriere a articolului. Aceasta functionalitate poate fi activata doar daca tema o suporta. Temele mai vechi e posibil sa nu suporte aceasta functionalitate. De aceea va fi nevoie ca tu sa faci modificarile de rigoare urmarind acest tutorial ;)
Deschizi fisierul functions.php (existent in directorul temei pe care o folosesti) si adaugi codul urmator:
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
}
Acest cod va activa functionalitatea, atat pentru articole cat si pentru pagini. Ca atare acum vei putea vedea optiunea Imagine recomandata in bara laterala a panoului de scriere a articolului. Dar imaginea nu va fi inca aratata in paginile blogului tau din cauza ca inca nu am adaugat codul php in tema.
Poti afisa imaginea thumbnail oriunde in interiorul the Loop folosind acest cod (acesta va reda codul html pentru imagine):
if ( has_post_thumbnail() ) { the_post_thumbnail(); }
Aceasta a fost prezentarea de baza a functiei, dar daca vreti sa setati parametri avansati (cum ar fi latimea, inaltimea sau denumirea imaginii thumbnail) atunci va trebui sa adaugati in fisierul functions.php acest cod php:
set_post_thumbnail_size( 120, 120, true );
… unde 120, 120, true sunt latime in pixeli, inaltime in pixeli, taierea imaginii dupa dimensiunile date.
Puteti de asemenea sa adaugati mai multe dimensiuni ale imaginii thumbnail, folosind linii de cod de genul:
add_image_size( 'denumirea-mea', 312, 187, true );
… unde ‘denumirea-mea’, 312, 187, true sunt ‘denumirea data de tine pentru a fi mai usor de retinut’, latime in pixeli, inaltime in pixeli, taierea imaginii dupa dimensiunile date.
Apoi puteti chema in interiorul temei codul pentru respectiva imagine thumbnail (acesta va reda codul html pentru imagine):
if ( has_post_thumbnail() ) { the_post_thumbnail( 'denumirea-mea' ); }
Va veti intreba probabil: „bine bine, dar la articolele mai vechi cum adaug thumbnail?”. Pentru articolele mai vechi exista o solutie. Selectati imaginea pe care o doriti prin Imagine recomandata, selectati din galeria respectivului articol imaginea si apasati pe Foloseste ca imagine recomandata. Apoi instaland si folosind pluginul Regenerate Thumbnails, acesta va recrea imaginile (care, evident, lipsesc) la dimensiunile specificate de tine prin add_image_size.
BONUS: imagine/descriere pentru Facebook
Cand cineva da „Like” sau „Recommend” paginii pe care se afla, Facebook ia o imagine din pagina si descrierea din meta pentru a le afisa pe pagina profilului respectivei persoane.
Pentru a nu lasa la intamplare ce imagine apare puteti pune acest cod in header.php, undeva intre <head> si </head>:
<?php $thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
$default_img = get_bloginfo('stylesheet_directory').'/imaginea-ta-default.jpg';
// acest cod vede daca ai thumbnail, altfel pune imaginea default - imaginea-ta-default.jpg trebuie pusa in folderul temei tale
if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } elseif (is_home()) { ?>
<meta property="og:type" content="home" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:image" content="<?php $default_img = get_bloginfo('stylesheet_directory').'/imaginea-de-index.jpg'; // imaginea-de-index.jpg trebuie pusa in folderul temei tale ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } ?>
Fain articolul :) Folosesc deja functionalitatea, dar nu de mult timp. Cu o alta tema. Si trebuie sa recunosc ca arat mult mai bine homepage-ul.
Sar’na ;) Folosesc si eu pe mai multe bloguri functionalitatea. Am schimbat luna trecuta fiindca e mai usor pentru server sa folosesti asa in loc de timthumb sau phpthumb.
Interesant articol, chiar ma luat din el idei folositoare pe care le pot pune în practică, merci mult.