Ezidáig a bejegyzéseinkhez használt bélyegképeket, különböző trükkökkel tudtuk csak megjeleníteni, a wordpressben nem volt olyan funkció amely lehetővé tette volna az admin felületről történő megnyitást, szerkesztést. A 2.9-es verzió megjelenésével viszont a fejlesztők kibővítették ezzel a lehetőséggel is a cms-t.
Ebben a bejegyzésben azt fogjuk megvizsgálni, miként is lehet bekapcsolni ezt az új dolgot és hogyan tudjuk testre szabni, hogy az illeszkedjen saját weboldalunkba is.
Cikkünk a hirdetés után folytatódik!
A post-thumbnail funkció használata
Bekapcsolás
Tehát, az első dolgunk a bekapcsolás. Szerkesztenünk kell a sablonunk fuctions.php fájl-ját, mi mást 
. Ugyanis a bejegyzés bélyegképek a sablonunkhoz tartoznak. Mivel lehet, hogy egy másik templatben máshol más formában akarjuk megjeleníteni őket, nemde?
Szóval ha megnyitottuk a fájlt, illeszük be a bekapcsoláshoz használandó kódot:
1 2 | // post thumbnailek engedélyezése add_theme_support('post-thumbnails'); |
Bélyegkép beillesztése
Navigáljunk a wordpress adminunkba és a bejegyzés szerkesztő menüben, a jobb oldalsáv alsó részén találnunk kell egy új dobozt. Mint azt a lenti képen láthatjuk. Itt tudjuk hozzáadni a bélyegképet a bejegyzéshez. Kattintsunk a bélyegkép beállítása linkre.
Megjegyzés: Nem muszáj méretre vágott képpel dolgoznunk, hiszen a 2.9-es wordpress képkezelőjében már található képek vágására és szerkesztésére alkalmas eszköz.
Nézőkép beillesztése
A felugró ablak ismerős kell legyen, viszont ha kiválasztunk egy képet a bejegyzésbe illesztés gomb mellett találunk egy új linket, felhasználás bélyegképként. Ha a kiválasztott fotót vagy grafikát bélyegképként akarjuk használni, erre a linkre kell kattintanunk.
Felhasználás bélyegképként
Miután kiválasztottuk a képet az meg is jelenik a jobb oldali kis dobozában.
Bélyegkép beillesztve
Bélyegképek megjelenítése
A következő feladat a nézőképek megjelenítése az oldalon. Illesszük a következő kódot az index.php fájl azon részébe ahol a thumbnailt látni szeretnénk. Mondjuk a cím vagy a leed elé, ez sablononként eltérő lehet, de ha nem menne segítek.
1 | <?php the_post_thumbnail(); ?> |
Mentsük el a fájlt és frissítsük oldalunkat. Most már látnunk kell a bélyegképet élesben is.
Thumbnail megjelenítése az oldalon
CSS formázás
A képek formázására két css osztályt (class) kapunk:
- attachment-post-thumbnail
- wp-post-image
Ezen osztályok segítségével saját weboldalunkhoz igazíthatjuk a thumbnailek kinézetét.
Méret megadása
Az egyik megoldás a function.php fájlban nemrég beillesztett kód kiegészítése, méghozzá a következő módon:
1 2 3 | // post thumbnailek engedélyezése add_theme_support('post-thumbnails'); set_post_thumbnail_size(200, 200, true); |
A képek máretét megadhatjuk az admin felületen is, a média beállítások menüben.
Méret megadása az adminban
Ez esetben módosítanunk kell az index fájlban lévő kódrészletet is:
1 | <?php the_post_thumbnail('thumbnail'); ?> |
Különböző méretű bélyegképek
Megeshet, hogy több méret megadására is szükségünk lehet, ilyenkor a következőképpen járhatunk el.
Definiáljuk az új méretet a functions.php fájlban
1 | add_image_size('loopThumb', 500, 200, true); |
Megjegyzés:
- loopThumb: Az új méret neve, amire majd hivatkozni fogunk.
- 500: A kép szélessége
- 200: A kép magassága
- true: A beállítás engedélyezése
A módosítás érvényesítéséhez módosítsuk az index.php fájlban lévő kódrészletünket is, vagy hozzunk létre újat, attól függően, hogy mit szeretnénk elérni. Pl. magazine stílusú oldalaknál sok esetben szükséges lehet több fajta thumbnail használatára is.
1 | <?php the_post_thumbnail('loopThumb'); ?> |
CSS formázás
Az egyedi méretű thumbnailek-hez is rendelhetünk css osztályokat. Ehhez egészítsük ki a megjelenítő kódot az index.php-ban így:
1 | <?php the_post_thumbnail('loopThumb', array('class'=>'loopsThumbs')); ?> |
…ahol a loopsThumbs jelenti a css osztályt. Valamint megmarad a wp-post-image class is.
Kapcsolódó oldalak
Zárszó
Remélhetőleg mindezek után könnyen és gyorsan tudjátok majd szerkeszteni a bélyegképeket saját weboldalatokon, ennek a hasznos kis módosításnak köszönhetően. Sok sikert!
potyka
10.06.02
20:59
Szia Codee47.
Megcsináltam az első két lépést a leírtak szerint működik is ahogyan kell de a bélyeg képet nem akarja 150×150 re csinálni helyette az eredeti méretet teszi ki.
Mi lehet a probléma?
codee47
10.06.02
21:11
Így használd a funkciót és menni fog:
És a média beállításoknál is a 150-es méret szerepeljen. Valamint töltsd fel újra a képet mert úgy emlékszem utólag nem méretez sajna.
potyka
10.06.02
21:32
Megy ez mint a szél:)!Köszönöm frankó lett és köszönöm a gyors reagálást.Remélem még sok okosság lesz az oldalon…
GM
10.06.05
19:45
Szia
Tudom buta kérdés, de melyik index.php file, és melyik részébe?
Kezdők vagyunk.
GM
codee47
10.06.06
23:19
A sablonod könyvtárában lévő index.php fájlba kell illeszteni. Mondjuk a
elé. Ekkor a bejegyzés leed előtt kell megjelennie a képnek. De ez a sablonodtól is függ.
Hugo
10.08.02
14:35
Szia Codee47, az én kérdésem kicsit más, de már nem tudom hol találhatnék megértő fülekre.
A wp_get_attachment_link -ről probálom remove_filter() -el leszedni a link körítést, mivel egy plusz html tag-ekkel megtűzdelt változatott szeretnék a helyére apply_filters()-el betolni… valamiért még a remove se jött össze.
Van esetleg ötleted merre indulhatnék?
(ui.: nem vagyok php guru, de már évek óta játszom wpékkel
)
Hugo
10.08.02
15:58
Elnézést az előtző offtopic-ért, időközben a te megoldásoddal sikerült megcsinálnom, amit akartam, bár nem olyan szépen mint terveztem:
function span_my_image_tag($html, $id , $alt, $title){
$html = str_replace('alt=""','alt="'.$title.'"',$html);
$html = str_replace('<img','',' />',$html);
return $html;
}
add_filter('get_image_tag','span_my_image_tag',10,4);
ha netán a remove_filter-esre van ötleted, vagy bárkinek, még érdekelne a megoldás! köszi, üdv
codee47
10.08.03
13:25
A codex1 codex2 -ben nem találtad meg a megoldást?
Hogy őszinte legyek nem sokat használtam még ezt a funkciót. Esetleg Wordpress Magyarország Fórum?
És még egy link a Digwp-ről.
Ha így sem megy utánanézek pontosabban.
Melinda
10.08.10
22:01
Szia
Én a másik oldalról szeretném megközelíteni a kérdést. Frissítenék egy olyan sablonra, ami ezt a bélyegkép funkciót használja, de a régi postjaimnál ez nincs beállítva, hanem maga a post egy kép általában. Egy olyan else ágat szeretnék beilleszteni a kódba, hogy vegye ki a postból a képet és azt használja, ha nincs külön megadva a thumbnail.
Tudsz esetleg erre megoldást?
codee47
10.08.11
18:27
Szia
Rövid gondolkodás után (legalábbis ha jól értelek) én a következő megoldást javasolnám.
Van ugyebár sok sok régi bejegyzésed amelyeknek az első képét használtad thumbnail-nek. Gondolom adtál nekik egy css osztályt amivel megformáztad őket. Miért nem formázod meg úgy ezt az osztályt ahogyan az új post_thumbnail-t fogod és akkor nincs szükség a php-s megoldásra (amire tulajdonképpen nincs is ötletem, hogy hogyan lehetne). Megnéztem a WP Codex-et de nem találtam semmiféle utalást hasonló problémára.
Remélem jól értelek és ez az egyszerű megoldás segíteni fog.