Brielle
Brielle
2015. Júl 29

Meglepetten vettem észre, hogy valami oknál fogva törlődött a kiemelt képes WordPress tutorialom, ezért úgy gondolom, nem is fecsérelhetem az időt a nem pótlására. Szerencsére volt róla biztonsági mentés a gépemen, így most ugyanazt fogom közzétenni, kicsit átdolgozva.

Bizonyára sok helyen találkozhattál már a Kiemelt képpel, ami egy lényegében nagyobb kép a bejegyzések fölött, mely az adott bejegyzéshez köthető, ahhoz illik, azt illusztrálja. Véleményem szerint a megoldás rajongói oldalaknál a legpraktikusabb, nem is véletlenül. A továbbiakban részletesen megtudhatod, hogyan állítsd be magadnak Te is a funkciót, valamint, hogy mire érdemes odafigyelned.

Kiemelt képek mérete

Nagyon fontos szempont, mielőtt beállítanád a funkciót, hogy biztos legyél a képek méretében. Ne legyenek túl nagyok, vagy túl kicsik, ne foglalják el az oldal felét, viszont a látogató először mindenképpen ezt vegye szemügyre egy friss megtekintésekor. Számomra az ideális méret a 700×250, én ezt a méretet használom Iggy Azalea-s oldalamon.

Előrelátónak kell lenned a méret kiválasztásakor, hiszen minden egyes designodhoz illeszkednie kell a méretnek. Ha a továbbiakban nagyobb modulokat szeretnél, akkor valószínűleg nem fogják kitölteni a teret, ha pedig kisebbeket, akkor a régebbi képek túl fognak nyúlni (persze, ehhez van egy trükkös megoldás, melyet a későbbiekben megismerhetsz).

Funkció bekapcsolása

Kiemelt képet csak akkor illeszthetsz be az oldaladra, ha a lehetőség meg van “engedve” a vezérlő pultodban. Ehhez egy kicsit a functions.php fájlodban kell kutakodnod. ?> zárótag elé a következő kódot kell beillesztened, ha még nem szerepel a fájlban:

add_theme_support( ‘post-thumbnails’ );

Ha pedig még nincs functions.php fájlod, akkor hozz létre egyet ugyanezen a néven, és a következő kódot illeszd bele, majd másold fel a sablonodba:

<?php
add_theme_support( 'post-thumbnails' );
?>

Ha a kód sikeresen bekerült a fájlba, akkor bejegyzés hozzáadásakor meg fog jelenni a Kiemelt kép hozzáadása funkció. A Kiemelt kép beállítása lehetőségre kattintva feltölthetünk egy új képet (ami persze megegyezik a kiválasztott méreteknek) vagy esetleg egy régebbit is beállíthatunk.

Kiemelt kép beillesztése a frissmodulba

Az eddig teljességgel rendben van, hogy be tudunk állítani egy kiemelt képet a bejegyzéshez, viszont mivel még nem jelenik meg a sablonban, így nem fogjuk látni, hiába állítottunk be mindent. Ezúttal az index.php fájlra lesz szükség, amibe a következő kódot kell beillesztenünk, oda, ahol szeretnénk, hogy megjelenjen a kiemelt kép:

<?php the_post_thumbnail(); ?>

A következőképpen akkor kell beillesztenünk a kódot, ha <div>-es modulokat használunk:

<div><?php the_post_thumbnail(); ?></div>

Táblázatos modul esetén érdemes egy új cellát nyitni neki:

<tr>
<td valign="top"><?php the_post_thumbnail(); ?>
</td>
</tr>

Kiemelt kép formázása

Ha már beillesztettük a kiemelt kép kódját, akkor már csak azt kell tudnunk, hogyan formázhatjuk meg magát a képet. Előfordulhat, hogy később esetleg kisebb méretű modulokat szeretnénk, ami rendben is van, viszont a régebbi bejegyzésekből ki fognak lógni a nagyobb képek. Emiatt már nem kell többé aggódnunk. Érdemes mindig ugyanazt a képméretet használni, SOSE változtassunk a feltöltendő képek méretén, így mindenképpen egységesek lesznek. Kódolásban egyszerűen meg tudjuk adni a méreteket:

.attachment-post-thumbnail{ /*kiemelt képre vonatkozó beállítások*/
width: 670px;
height: 239px;
}

Megeshet az is, hogy esetleg szeretnénk, ha a kiemelt kép legfölső két sarka le lenne kerekítve. Ehhez ugyanezt a CSS megnevezést fogjuk használni, csupán más adatokat adunk meg neki:

.attachment-post-thumbnail{ /*kiemelt képre vonatkozó beállítások*/
-moz-border-radius-topleft: 100px; /* bal felső sarok kerekítése Mozzillában */
-moz-border-radius-topright: 100px; /* jobb felső sarok kerekítése Mozzillában */
-webkit-border-top-left-radius: 100px; /* bal felső sarok kerekítése */
-webkit-border-top-right-radius: 100px; /* jobb felső sarok kereítése */
}

Természetesen ez alapján a CSS megnevezés alapján bármilyen jellemzőt beállíthatunk, mivel ez pontosan a kiemelt képekre vonatkozik.

Ennyi lenne ez a segítség, ez alapján nagyon egyszerűen beilleszthetjük a kiemelt kép funkciót, amit jómagam is nagyon szeretek használni. Ha esetleg kérdésed lenne, hozzászólásban bármikor megírhatod, illetve még többet megtudhatsz a kiemelt képek formázásáról a következő tutorialokban:

» Kiemelt kép hatással

» Cím kiemelt képre


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *