WordPress: Cum scoţi pe prima pagină thumbnail-ul primei poze din articol, fără “custom fields”

Acum vreo patru luni, lucrînd la un proiect, mi-am bătut capul aproape două zile cu o funcţie PHP care trebuia să-mi scoată pe prima pagină o fotografie şi asta din cauză că n-aveam chef să instalez încă un plugin. De altfel, cînd vine vorba de WordPress, în ultima vreme, evit pe cît posibil să instalez pluginuri şi mă rezum doar la cîteva.

exemplu-post-thumb

De ce? Pentru că, dacă ne gîndim la cîte update-uri a suferit WordPress în două-trei săptămîni, exceptînd posibila incompatibilitate dintre versiuni, cele mai rele sînt erorile. Mai exact, incompatibilitatea WP 2.8.4 cu un plugin (habar n-am care, oricum nu-l foloseam, dar era activat) se translata în imposibilitatea de a lansa frame-ul de upload fotografii. De fapt, bloca, în general, cam tot ce e bazat pe JavaScript în interfaţa de admin.

Acum, în ceea ce priveşte thumbnail-ul, să explic concret despre ce e vorba. Se dă un template WordPress cu o primă pagină în care se publică doar excerpt-ul. Ca să faci blogul mai dinamic, respectiv mai puţin plictisitor sau tern, ataşezi fotografii. Doar că funcţia the_excerpt() nu îţi afişează pozele pe prima pagină. În loc să-ţi baţi capul cu un plugin, poţi să foloseşti o funcţie proprie şi să modifici un pic home.php, de exemplu. Sau index.php, după preferinţe. Şi cu un strop de CSS, poţi să rezolvi imediat. Asta mai ales dacă nu ai chef să uploadezi imagini separate, crop-uite special pentru a fi folosite cu ajutorul custom fields, adică muncă mai multă şi, uneori, inutilă.

Pe scurt, următoarea bucată de cod se plasează în functions.php:

function frontpagethumb() {
$files = get_children(‘post_parent=’.get_the_ID().’&post_type=attachment&post_mime_type=image’);
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, ‘thumbnail’, false);
$imagepieces = explode(‘”‘, $image);
$imagepath = $imagepieces[1];
$thumb=wp_get_attachment_thumb_url($num);
print $thumb;
else :
$defaultimg = bloginfo(‘template_url’).’/images/default.png’;
print $defaultimg;
endif;
}

Ce face funcţia? Verifică dacă articolul publicat conţine ca ataşament o imagine şi preia link-ul către thumbnail-ul creat de WordPress în momentul în care a fost uploadată. În cazul în care articolul nu are nici o fotografie ataşată, va livra pe prima pagină o imagine generică, prestabilită de tine.

Cum se foloseşte? Se deschide home.php, archive.php, search.php, index.php, în funcţie de preferinţe, unde doreşti să fie afişată. Copy/paste după modelul de mai jos:

<div class=”post”>
<span class=”posthumb alignright”><img width=”100″ src=”<?php frontpagethumb(); ?>” alt=”<?php the_title(); ?>” border=”0″ /></span>
<?php the_excerpt(__(‘Citeste mai departe’));?>
</div>

Explicaţia. Bucata de cod de mai sus este baza oricărui template. Considerînd că titlul este într-un DIV separat de conţinutul articolului (prin absurd, să-i zicem chiar “titlu”), primul rînd indică deschiderea DIV-ului, iar ultimul indică unde se termină. Al doilea rînd, începînd şi terminînd cu “span”, este funcţia prezentată mai sus. Va fi “lipită” întotdeauna deasupra funcţiei the_excerpt().

De ce? Cu ajutorul “span”-ului se face încadrarea imaginii în context. Clasa CSS pe care i-am atribuit-o se numeşte “posthumb”. De ce este deasupra funcţiei the_excerpt()? Pentru că, “lipind-o” dedesubt, încadrarea va fi proastă. E ca şi cum ai introduce o fotografie sub primul paragraf al textului şi te-ai întreba de ce nu apare deasupra. Acum să trecem la CSS. Deschide style.css şi copiază următoarea bucată de cod undeva, în fişier:

.posthumb {
overflow:hidden;
width: 110px;
text-align: center;
padding: 5px;
background: #fff;
border: 1px solid #ddd;
}

Şi explicaţiile de rigoare: codul CSS de mai sus stabileşte cum trebuie să arate imaginea pe prima pagină, dar poate fi modificat după preferinţe. A se remarca faptul că nu i-am setat float spre stînga ori dreapta. Dacă ai remarcat mai sus, la introducerea funcţiei în template (în home.php, de exemplu), am stabilit span class=”posthumb alignright”, ceea ce înseamnă că va prelua caracteristicile setate atît în clasa posthumb, cît şi în clasa alignright, cea folosită, de altfel, şi la stabilirea alinierii imaginii proaspăt uploadate, la introducerea ei într-o postare.

Bineînţeles, există template-uri, mai vechi, de regulă, fără clase de genul .alignleft, .aligncenter şi .alignright definite. Acestea au devenit obligatorii pentru template-urile gratuite uploadate în directorul “oficial” al WordPress după lansarea WordPress 2.5, dacă nu mă înşel. Prin urmare, dacă nu există bine definite cele trei clase, se pot opera modificări direct în clasa .posthumb. De exemplu, se poate adăuga margin-left: 10px; pentru spaţierea dintre text şi poză şi, obligatoriu, float: right; pentru aliniere dreapta.

Distracţie plăcută!

PS: Înainte de a copia direct codul PHP, copiază-l într-un Notepad şi, pentru orice eventualitate, rescrie tot ce înseamnă ghilimele şi apostrof, pentru a evita potenţiale erori de execuţie a scriptului.

Dacă îţi place acest blog şi vrei să-l susţii, cumpără de la eMag folosind acest link.

21 comentarii

  1. Aici presupun că e vorba de perspectivă.

    Eu prefer să extrag tot ce nu e standard la tema respectivă şi să creez plugin-uri. E un pic mai multă muncă, dar îmi va fi mai simplu să introduc aceeaşi funcţionalitate într-o altă temă, de exemplu. Un alt avantaj e că utilizatorul poate elimina funcţionalitatea respectivă doar dezactivînd un plugin.

    Apropo, în general nu lucrez cu teme de WordPress, dar am translatat ce fac eu, ca web developer, în „termeni de WordPress”.

    • Mda, vorba ta, cred ca tine de perspectiva, pina la urma. Totusi, eu prefer sa nu-mi bat capul cu potentiale incompatibilitati, cu update-uri peste update-uri etc. Eu mi-am creat un soi de tema standard pe care imi dezvolt toate proiectele, in functie de cerinte. Si am inclus in ea tot soiul de chestii, incepind de la cautare in WP mult imbunatatita (ma rog, codul e furat din alta parte si modificat) si pina la tot soiul de hack-uri mici, dar utile.
      Daca ma “enervez”, miine-poimiine postez si un how-to pentru “featured posts” cu slider jQuery :))

  2. ar fi bine sa muti codul pentru afisare (span si img) in functie ca sa functioneze si daca nu este nici o poza in post

  3. Deci te ador :D

    Cu faza asta imi rupeam mereu gatul, de cate ori aveam chef sa fac mai altfel un skin de wordpress. Tre’ sa incerc ce scrii tu aici si dupa aia clar imi vor iesi mai repede si mai bine niste facilitati. saru’mana de tutorial ;)

  4. Salut.
    Am incercat si eu sa implementez acest cod, dar daca pun in functions.php codul acela, imi apare in site in header tot codul acela in cateva randuri.
    Ar mai fi ceva de adaugat si nu stiu eu ?
    Eu atat am in functions.php

    • Baga-l intr-un notepad si rescrie ghilimelele si apostrofurile. dupa care copiaza-l si pune-l inapoi in functions.php. De fapt, hai sa facem asa: arhiveaza functions.php al tau si da-mi-l pe mail (subiectiv at gmail punct com). Ma uit pe el si ti-l trimit inapoi.

    • Chiar acum am trimis mail-ul.
      Iti multumesc mult pentru ajutorul acordat.

    • Ti-am si raspuns. Sper sa-ti fie de ajutor. Ah, nu uita sa creezi o imagine, default.png, pe care s-o plasezi in folderul /images/ al template-ului :)

    • Apropo, eu nu am functia the_excerpt() chiar niciunde si am pus iante de the_content ( … citeste mai departe)…
      Nu arata asa codul sa iti faci o idee pt ca nu pot afisa php in mesaje.

    • Trimite-mi si fisierul ala, arhivat :)

  5. Salut.
    Acum am trimis si celalalt fisier home.php dar vezi ca la poza merge acum, eu am pus in /wp-content/images/ unde am toate pozele de pe site.

  6. ti-am trimis mail sper ca ma poti ajuta,multumesc.

  7. Se pot incarca thumbnails fara a avea pozele pe disk? adica din link-uri de pe internet?

  8. Am o thema care taie pozele la mai multe dimeniuni dar multe din ele nu se folosesc pe site si ocupa spatiu degeaba. Imi poti spune cum pot opri tairea pozelor?

  9. Sal,

    Am un website cu stiri si mai nou nu imi apar fotografiile desi daca dau click pe articol cind se deschide in pagina noua sunt acolo.
    Asta este mesajul

    “Alin-Trasculescu_bis.jpg” nu s-a actualizat datorită unei erori
    Fișierul încărcat nu s-a putut muta în /home/milcovul/public_html/wp/wp-content/uploads/2012/03.

    Efectiv NU STIU CE SA FAC VA ROG SA MA AJUTATI, DACA SE POATE

  10. Salut!

    Vreau să nu-mi apară imaginea default la articolele în care nu am poze. Cum fac?

  11. http://i41.tinypic.com/ohpulz.png

    Uite, Focşaniul vechi are thumbnail, celelalte nu. La asta mă refer. Dacă nu am o poză în articol, nu doresc să-mi afişeze thumbnail. Am văzut că în functions.php ai codul “$defaultimg = bloginfo(“template_url”).”/images/default.png”;” .. însă nu mă pricep să fac.

  12. Salut ,
    Am incercat sa fac si imi da eroare …
    Cum pot rezolva problema ….