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.
Péter
11.05.23
15:04
sziasztok,
Érdeklődni szeretnék, hogy ez a leírás alkalmazható-e olyan esetben, amikor egy ún. hírgyűjtő oldalról van szó. Jelen esetben nekem olyan oldalam van, ahol több weboldalról szívja be a tartalmat, de valamiért a hozzá tartozó képeket nem tölti be a rendszer. Azt szeretném megoldani – de sajnos hosszas keresgélés után sem találtam rá megoldást – hogy ezt miként lehetne. Vagyis a hír beolvasásával egyidejüleg a képeket is “beszívná” az adott oldalról.
Van erre esetleg valami megoldás?
Köszönöm szépen előre is.
Üdv:
Péter
codeart
11.05.29
18:20
Szia Péter!
Ez a funkció nem erre való, csakis a saját blogod kiemelt képeinek megjelenítésére használható.
Ha az a bizonyos oldal, ahonnan a híreket gyűjtöd használ előnézeti képet a bejegyzéseihez és ki is engedi rss-en keresztül, akkor van megoldás a problémádra. Próbálj valamelyik programozói fórumon utánaérdeklődni mert sajna még én sem csináltam hasonlót.
sYska
11.10.29
15:35
Hello!
A Thumbnail url-ét miként tudnám kivadászni? Facebook-os img_rel-hez kéne, hogy azt a képet tegye be a megosztásnál vagy lájkolásnál.
A sima beszúrással sajnos beteszi az <img kódot is.
Előre is köszi!
codeart
11.11.11
17:22
Szia,
Így tudod lekérni a bejegyzéshez tartozó kiemelt kép url-ét:
Codex
sYska
11.11.12
10:56
Köszi! Azt még had kérdezzem meg, hogy miként oldható meg az, hogy amikor feltöltök egy képet akkor ne csak a tumb, med, big, original méretek legyenek, hanem legyen egy 4ik, amit slideshow-hoz szeretnék használni?
meno10
11.11.16
19:53
Szia nagyon könnyen megtudtam oldani nagyon jól leírtad! :)
Lenne egy kérdésem hátha meglehet oldani.
Lightbox Plus Options v2.4 van feléve az oldalhoz hogy a képeket szépen lehessen nézegetni. ezt a funkciot valahogy belelehet e berhelni a thumb képhez is hogy arra is rálehessen kattintani és megnyissa nagyban? :)
meno10
11.11.16
22:24
Az előzőt ne vegyétek figyelembe! bocsi :$
eszembe jutott egy jobb ötlet! :)
a thumkép kattintható legyen és beadja a bejegyzést, azt hogy lehet megcsinálni?
codeart
11.11.28
11:59
A bővítmény beállításainál esetleg nincs ilyen lehetőség?
A másik opció, hogy hozzáadsz egy osztályt a kiemelt képekhez. Valószínű a bővítmény is ezt teszi a többi képpel, nézd meg mit ad meg nekik és állítsd be azt a kiemelt képhez is.
A másik kérdésedre a válasz:
codeart
11.11.28
12:11
Erre gondolsz?
Codex
De létezik plugin is hozzá.
meno10
11.11.29
18:31
ezt hova kell beillesztenem hogy működjön?
<a href="” title=”">
meno10
11.11.29
18:33
nah nem adta be,
a másik kérdésedre a válasz amit adtál
hova kell beillesztenem hogy működjön?
codeart
11.11.30
00:32
A jelenlegi thumbnail kód helyére. Csak kibővítettem egy link-el, ami a bejegyzésre dob.
meno10
11.11.30
16:54
ha ezt beillesztem a helyére akkor az oldalon ezt írj aki:
Parse error: syntax error, unexpected ‘?’ in /var/www/csillabazar/data/www/csillabazar.hu/01/wp-content/themes/elegant-grunge/index.php on line 29
ilyenkor mi a bibije? :)
codeart
11.11.30
17:50
Ezt töröld és jónak kell lennie.
Én írtam rosszul, elnézést.
meno10
11.11.30
17:59
uh nagyon zsivány!!! :D köszönöm
még egy kis finomítást szeretnék kérni benne :)
azt hogy a kép ne a szöveg felet hanem a szöveg bal oldalán helyezkedjen el itt az oldal: http://www.csillabazar.hu/01/?cat=4
“még csak készülőben van a fura bejegyzéseket neved figyelembe” :D
meglehet oldani? :)