Cum mi-am pus ca thumbnail prima imagine din articol

De unde-mi sorb energia în fiecare dimineaţă

Un bug la ultimul update de la W3 Total Cache

9 mai 2011

🎥 Am creat un curs în care te învăț cum creez eu conținut: Transformă CE ȘTII în VIDEO-uri cu IMPACT 📢

Ieri mi-am dat seama că deşi ştiu cât îi de grav pentru Google să ai mai multe pagini cu acelaşi conţinut, eu nu m-am chinuit să fac nimic în acest sens, motiv pentru care mi-am băgat pe index doar excerpt-ul din articol (doar primele câteva cuvinte), nu întregul text (asta pentru că întregul text se afla şi în pagina articolului, nu numai pe index). Tot ieri am făcut în aşa fel încât arhiva mea să-mi arate doar titlurile articolelor, nu şi excerpt-ul (ca să fie ceva diferit de index şi în acelaşi timp diferit şi de pagina articolelor), dar la asta mai lucrez, că parcă nu arată bine doar titlurile acolo. Toate astea după ce am citit câteva chestii la zoso.

Astăzi mi-am dat seama că excerpt-ul, aşa cum era el pe index, era urât tare, motiv pentru care am zis să afişez şi un thumbnail în stânga, pentru a încânta mai bine ochii. Aveam pusă la dispoziţie opţiunea Featured Image, introdusă foarte bine în template-ul twentyten (de la care am plecat eu când am construit ce vedeţi aici), eu fiind nevoit să mai adaug doar o simplă linie de cod pentru a afişa imaginea aferentă. Pentru că nu-mi plăcea să stau mereu să setez un Featured Image şi pentru că şi-aşa fiecare imagine care voiam eu să apară în thumbnail trebuia să fie şi în articol, am zis să afişez prima imagine care apare în text, undeva în stângă.

Am luat reţeta de aici şi am să vă explic imediat ce-am făcut de se vede aşa.

Definirea funcţiei

În primul rând, aşa cum ne îndeamnă şi acolo, am copiat în functions.php următoarele:

function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘//i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = „wp-content/themes/yourtheme/images/default.jpg”;
}
return $first_img;
}

* nu uitaţi să modificaţi calea imaginii care apare în cazul în care articolul nu conţine nicio poză

Afişarea funcţiei

Apoi am deschis loop.php (la voi poate fi index.php, depinde pentru ce versiune de WordPress a fost făcută tema) şi am adăugat înainte de locul unde se cheamă funcţia the_excerpt, următoarele:

<div id="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image() ?>"></a></div>

Iar acum să explicăm:

„<div id="thumb">” reprezintă un div pe care l-am creat chiar acum şi care mă lasă să mă joc cum vreau cu imaginea. O să vedeţi în paşii următori despre ce vorbesc.

„<a href="<?php the_permalink(); ?>">” face ca pe imagine să se poată da click şi în urma click-ului să ajungi pe pagina articolului.

„<img src="<?php echo catch_that_image() ?>">” face ca funcţia ce tocmai am definit-o în functions.php să preia link-ul primei imagini din articol şi să-l afişeze ca un thumbnail.

Stilizarea

Revenind la div, eu am adăugat în style.css următoarele:

#thumb img{
width:100px;
height:100px;
float:left;
margin-right: 5px;
border:1px solid #EDEDED;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px;
-moz-box-shadow: 0 0 5px #88c2dc;
-webkit-box-shadow: 0 0 5px #EDEDED;
box-shadow: 0 0 5px #88c2dc;}

Am setat ca imaginea să se micşoreze automat la 100x100px, să zboare spre stânga şi să aibă un border exact la fel cu cel pe care-l am eu acum în sidebar.

Alt lucru pe care l-am făcut a fost să copiez în folderul „images” din cadrul template-ului meu, imaginea care să apară în momentul în care în articol n-am pus niciun fel de poză.

Cristian Florea

🥇 Best Tech Influencer @ Romanian Influencer Awards 2024 🎥 Vlogger pasionat de gadgeturi și tehnologii noi ✅ 15+ ani de experiență în mediul digital

24 Comments

Razna spune:
9 mai 2011 la 22:08
Îmi plăcea mai mult cum era înainte…
Nu-mi place cu thumbnail :)
Răspunde
- Cristian Florea spune:
  9 mai 2011 la 22:14
  dar nu-i placea lui google cum era inainte si el e şăfu oarecum :D
  Răspunde
Bogdan Anghelina spune:
9 mai 2011 la 21:35
Până la urmă am modificat și eu tema iar acum folosesc și eu prima imagine din articol, până acum aveam „Featured image” însă trebuia să le încarc pe host la fiecare articol și cu timpul se umple. După un timp mi-am propus să fac un set de imagini pe care să le urc pe host și să le folosesc (Imagini gen „Online”, „IT”…) pe care să le folosesc în cadrul fiecărui articol în funcție de categoria din care face parte dar așa prima pagină devenea toată într-o culoare, monotonă și urâtă astfel am trecut și eu la metoda asta pe care o știam de mult din sursa de acolo dar n-am avut inițiativă. Din greșeli înveți.
Răspunde
- Cristian Florea spune:
  9 mai 2011 la 21:56
  la tine au o marime ciudata pozele alea. unele se lungesc si se fac urate. ar trebui sa le introduci tu in articol direct cu un width mai mare decat height, ca atunci cand se micsoreaza pt thumbnail sa nu se schimbe prea mult aspectul
  Răspunde
  - Bogdan Anghelina spune:
    9 mai 2011 la 22:08
    M-am gândit și la asta însa așa e tema, voi face efortul de a alege niște imagini mai wide :-). Acum am de schimbat coduri și la „Articole recomandate” și în sidebar la „Cele mai recente articole”.
Alexander spune:
10 mai 2011 la 08:08
google s-a tampit, ce sef? am facut o analiza de continut si nea goagal considera ca am cuvinte obscene pt ca folosesc cuvantul „cum” Deci lui goagal nu prea ii place romana.
Răspunde
- Cristian Florea spune:
  10 mai 2011 la 13:59
  depinde ce fel de analiza ai facut tu. daca era un tool romanesc, n-avea cum sa spuna asemenea aberatii.
  de ce e sef? pentru ca un blog care nu apare in google nu prea e blog. cati vizitatori crezi ca poti castiga fara google?
  Răspunde
  - Alexander spune:
    10 mai 2011 la 19:46
    regulile prin google.com s-au schimbat putin si atunci am testat evident cu un tool general valabil ca in google.ro nu vad sa am probleme.
- vlad gidea spune:
  15 mai 2011 la 14:36
  cum[en]=slobozi[ro] … De asta ar impresia ca esti bloggerul porno
  Răspunde
  - Cristian Florea spune:
    15 mai 2011 la 22:07
    da, eu stiam asta, de-aia am intrebat daca era vorba de un tool in lb. romana.
Zoly spune:
10 mai 2011 la 11:37
Arata mult mai bine tema ta cu thumbnail. Ai facut o alegere inspirata.
Răspunde
- Cristian Florea spune:
  10 mai 2011 la 14:03
  ma bucur ca-ti place. multumesc!
  Răspunde
Danniel spune:
10 mai 2011 la 19:51
Foarte bine arată așa, poate voi băga și eu, să văd!
Răspunde
- Cristian Florea spune:
  10 mai 2011 la 20:06
  daca iti bagi si tu, treci apoi pe-aici si dai de stire. sunt curios cu va arata si cat de usor ai reusit sa faci asta :D
  Răspunde
  - Danniel spune:
    10 mai 2011 la 21:25
    Nu am reușit :)) adică îmi afișează imaginea, dar nu corect, fără redimensionare și fără border și shadow :D
  - Cristian Florea spune:
    11 mai 2011 la 05:29
    inseamna ca ceva nu-i bine din css. poti pune aici ceea ce ai scris acolo si vedem daca-i bine sau nu :D
Danniel spune:
11 mai 2011 la 18:35
Păi am copiat exact de la tine, dar văd că nu merge :)) Las așa cum e ;)
Răspunde
- Cristian Florea spune:
  11 mai 2011 la 19:48
  io sunt dispus sa te ajut. depinde si cat de mult vrei tu thumbnail :))
  Răspunde
Danniel spune:
11 mai 2011 la 19:58
Păi, aș vrea :)) dar nu reușesc m-am luat la bătaie cu stresul dar nu am reușit nicicum!
Răspunde
- Cristian Florea spune:
  11 mai 2011 la 20:40
  trimite pe fc@floreacristian.ro un mail cu ce eroare iti apare. trebuie sa-i dam de cap :D si un print screen ar fi de ajutor :)
  Răspunde
Florin spune:
16 mai 2011 la 20:40
Eu după ce am copiat acea funcție în functions.php nu se mai încărca pagina, primeam 500 Internal Server Error. A trebuit să intru prin ftp și să șterg funcția. Poate reușesc să îi dau de capăt până la urmă :)
Răspunde
- Cristian Florea spune:
  17 mai 2011 la 06:25
  daca n-ai reusit, da-mi de stire pe mail (eventual un print screen, sau chiar fisierul functions.php) si vedem noi cum facem
  Răspunde

Cum mi-am pus ca thumbnail prima imagine din articol

Definirea funcţiei

Afişarea funcţiei

Stilizarea

5 pluginuri pentru WordPress care s-ar putea să-ți fie utile

Cum poți să vezi ce căutări face lumea pe blogul tău

De unde poți să iei fotografii faine pentru postările de pe blog (gratuit)

24 Comments

Lasă un răspuns Anulează răspunsul