Cum se adauga thumbnails pe prima pagina

16
3501
views

Este la modă să ai şi nişte micuţe şi frumoase poze pe prima pagină, imediat lângă sumarul articolului. Cum este o muncă de 2 minute pentru unul care ştie ce bibileşte la temă, cuget că putem specializa auditoriul dojoblog, mai ales că nu e mult de lucru. Să vedem ce avem deci de făcut.

1. Thumbnails sau featured images

Tot rahatul ăla este, oricum îl numeşti. Funcţia, după ce apare la articol, se cheamă “featured image“, poza aia mică de face treaba, e thumbnail. Să ştim deci despre ce vorbim. Prima mişcare este să “învăţăm” tema să folosească această facilitate. Pentru asta deschidem fişierul functions.php (este în folderul de teme), îl puteţi accesa prin FTP (site / wp-content / themes / tema aleasă) ori direct din administrare prin APPEARANCE / EDITOR. De acolo deschideţi functions.php.

Adăugaţi undeva în functions.php

if ( function_exists(‘add_theme_support’) )
add_theme_support(‘post-thumbnails’);

2. Punem acum codul de thumbnails unde îl dorim.

La vechile variante de wordpress, codul pentru prima pagină se găsea în index.php. Doh. De la 3.0, cu minunea lor de temă “twenty-ten”, s-a complicat mişcarea. Deci, dacă nu aveţi o temă “3.0 compliant”, deschideţi index.php (se găseşte tot în directorul temei, unde e şi functions.php).

Căutăm:

<?php the_excerpt(); ?>

sau

<?php the_content(); ?>

Dacă aveţi la index “content” schimbaţi cu excerpt. Altfel veţi avea thumbnail la tot articolul şi arată ciudat. Ca şi economie de resurse şi crescut paginile accesate, e indicat ca pe index să aveţi sumar de articole, să nu se încarce 10 articole complete de fiecare dată când cineva accesează situl.

Bun. Acum, că avem şi excerpts pus la locul lui, ÎNAINTEA LUI puneţi:

<?php the_post_thumbnail(array( 150,100 ), array( ‘class’ => ‘alignleft’ )); ?>

Ce face asta?

Pune thumbnail înainte de sumar. Thumbnail-ul va avea 150 pixeli lăţime şi 100 de pixeli înălţime. Normal, dacă aveţi alte planuri de design, modificaţi numerele în cauză, că nu-s bătute în cuie. Tot din codul respectiv am stabilit că minunea de imagine se foloseşte de aceleaşi “atribute” ca şi cele aliniate la stânga, oricum setate în temă.

Dacă tema este după “twenty ten”, înseamnă că index-ul este pus la muncă de către LOOP.PHP. Din el se poate seta mai repede (zic ei) tot ce trebuie pentru index, arhive sau pagina cu rezultatele căutării.

În cazul meu, am avut de căutat în loop.php după codul

<?php /* How to display all other posts. */ ?>

Aici se face setarea şi pentru index, aşa că am căutat “excerpt”-ul şi m-am plasat înainte de el cu codul pentru thumbnail.

3. Setăm thumbnails să aibă dimensiunea în cauză.

Dacă tot lucrăm frumos şi curat, intrăm în SETTINGS : MEDIA şi setăm dimensiunile pentru thumbnails, aşa cum vor fi folosite în index.

4. Păi să punem imaginile la muncă!

După ce aţi pus deja în functions.php codul respectiv, când scrieţi un articol, veţi observa în dreapta jos o nouă “cutiuţă” de se cheamă FEATURED IMAGE. De asta am insistat la început cu ambele denumiri, să nu vă sperie că nu se cheamă thumbnail. Tot ăla este.

Pentru a pune imaginea minunată în index, click pe linkul “set featured image” de apare când scrieţi articolul, urcaţi imaginea dorită şi daţi click pe “use as featured image”. Dacă doriţi să folosiţi imaginea şi în articol, în altă dimensiune, puneţi înainte şi insert into post. Asta dacă nu doriţi să deschideţi de 2 ori panoul cu imagine.

Cam asta e “şmecheria”. Scăpaţi deci “ieftin”  cu 2 fişiere de modificat: functions.php şi index.php sau loop.php, depinde ce versiune de temă aveţi.

PS: ATENTIE! datorită fontului meu minunat de la comp, e posibil să primiţi eroare din cauza “apostrofului”. Dacă primiţi vreo eroare, scrieţi voi ‘ în cod, acolo unde aveţi treabă cu el. Nu de alta, dar mă înjuraţi după aia că dau coduri proaste 🙂

16 COMMENTS

  1. @Dojo – He he he, ieri cautam tutoriale cum sa adaug thumbnail in theme WordPress si uite ca articolul tau a picat foarte bine pentru mine. Maine, cand ajung acasa ma pun pe treaba si poate reusesc sa adaug si eu thumbnail la articole.

  2. @Dojo – Da, vad ca in reply nu a aparut cum trebuie.

    Pai, am avut grija sa modifitc ‘ si tot imi da eroare. O sa ma mai uit si maine, cand ajung acasa.

  3. Utila aceasta postare. Abia astept sa o pun si eu pe blogul pe wordpress. Era tare daca scriai ceva similar si pentru blogger dar presupun ca interesul este mult mai scazut.

  4. Sa traiesti 1000 de ani! Ca mai invata si impiedicati ai internetului- ca mine- cate ceva :). Dojo, as avea o intrebare colaterala, ca sa zic asa. Ma caznesc de cateva luni sa gasesc un plungin, ceva, care sa fac urmatoarea chestie: cand da cititorul click pe o poza sa se deschida tot pe pagina respectiva- deci sa nu paraseasca pagina- intr-o fereastra transparenta, mai mare. Ca o folie transparenta, asa. Stii cumva cum s-ar putea numi acest plugin??? Multam!

  5. parca ma bate gandul si pe mine, dar eu procedez manual si pun o poza care sa apare si pe index si in articol… imi place mai mult asa. 😀

  6. Foarte faina functionalitatea cu the_post_thumbnail. Ma vad insa nevoit sa fac o adaugire pt ca m-am dat cu capul de asta.

    Functionalitatea descrisa de dojo nu este valabila si pentru articolele scrise anterior introducerii the_post_thumbnail. Se aplica doar pt pozele uploadate dupa introducerea the_post_thumbnail. De ce? pt ca wordpress-ul face resize la poze doar in momentul upload-ului.

    Exista insa o rezolvare relativ simpla. Dupa introducerea acestei functionalitati, folositi cu incredere plugin-ul regenerate thumbnails pentru a genera thumb-uri pt noile dimensiuni.

    Atentie pt bloguri mai mari procesul de regenerare poate dura ceva mai mult.

  7. Am si eu de facut un blog pt scoala si as avea nevoie de putin ajutor pe care sper sa-l pot gasi aici.
    Daca va uitati putin la blogul meu (http://zonadeit.hi2.ro/) pe prima pagina este un chenar un se duc posturile recente dar problema este ca atunci cand dau clik pe ea imaginea ar trebui sa se mareasca in dreapta si nu imi dau seama cum sa setez chestia asta.
    Nu am explicat foarte bine dar daca va uitati pe blog sigur intelegeti.
    Multumesc anticipat!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.