Két modulos WordPress bejegyzés

A WordPress bejegyzésekhez beállított kiemelt képes “funkció” már elég régóta nagy népszerűségnek örvendezik. Ez az egyszerű bővítmény rengeteg klassz előnnyel jár,hiszen elsősorban nem kell közvetlenül a bejegyzésbe ágyazni a kiemelni kívánt képet,hanem pár kattintással a bejegyzés tetejére/oldalára helyezhetjük őket. Azonban sokáig nagy fejtörést okozott,hogy mi van akkor,ha nem minden bejegyzéshez szeretnénk kiemelt képet. Az első megoldás,amivel még viszonylag régebben találkoztam a “No image” vagy valami más feliratú kép egyenkénti beállítása volt. Ez viszont azzal járt,hogy designcserekor a meglévő bejegyzések tetejéről egyesével kellett törölgetni a kiemelt képeket. Később megjelent egy ügyes kis trükk,ez pedig nem más volt mint a .css kódban egy alap háttér beállítása,ami a feljebb említett problémát könnyen orvosolta.

 

Viszont,egy jó ideje a szerkesztők/weblepfejlesztők egyre trükkösebb és egyedibb megoldásokkal dobják fel a WordPress bejegyzéseket. Ilyen pl. a dátum elhelyezése a kiemelt képen,vagy hogy a kiemelt kép végigfut az egész bejegyzés mögött. De mi van akkor ha nincs kiemelt kép? A stílusfájlban meghatározott tulajdonságok nem tudnak egyszerre a kettőre egységesen hangzik. Vagy mégis? Nikivel ezt sikerült ügyesen kicseleznünk,így ahogy azt a legutóbbi sablonból is láthattátok,két féle modulban is megjeleníthető egy WordPress bejegyzés,amikre külön-külön .css kód hat. Na de lássuk ez hogy valósítható meg:

 

Az első lépés,az index.php fájl átszabása kicsit. Keressétek meg azt a sort,ahová a kiemelt kép php kódja van beágyazva. Ez alapesetben így néz ki:

<?the_post_thumbnail;?>

 

Ha még eddig nem használtál kiemelt képet,akkor ezt ajánlatos egy külön divben elhelyezni,amit a legfelső sorba szokás elhelyezni (mivel legtöbben a kiemelt képeket a bejegyzés tetején jelenítik meg). Most bemutatom ezt egy nagyon egyszerű példával,amit egy általunk készített sablonból vettem ki:

<div class=”modul”>
<div class=”thumb”><?the_post_thumbnail;?> </div>
<div class=”post-title”><?php the_title(); ?></div>
<div class=”content”><?php the_content();?></div>

</div>

 

Ahogy láthatjátok a megadott pár sorból,a bejegyzés a következő elemekből épül fel: maga a modul,amibe magába foglalja a bejegyzéseket,ezt követi a kiemelt kép,majd jön a cím és a bejegyzés szövege. A .css kódban ezeket ügyesen tudjuk helyezgetni,amivel minden elemet bárhová el lehet helyezni. Viszont,ha nincs beállítva kiemelt kép,az elhelyezett elemek a helyükon maradnak,a kép helyén pedig vagy egy üres rész marad ha be van állítva egy auto magasság,vagy nem marad semmi és akkor a többi elem “kilóg” az egészből. Ezért,kell két modul,amikre külön kódok és tulajdonságok érvényesül.

 

Miután megkerested tehát a kiemelt képek php kódját az index.php fájlban,ezt illezd be lehetőleg a “modul” és a kiemelt kép divje közé:

<?php if ( has_post_thumbnail() ) { /* van kiemelt kép */ ?>

 

Ennek a style.css fájlban egy külön részt kell meghatározni. Erre itt egy egyszerű példa:

.thumb { /* a kiemelt kép beállításai */
width: 720px;
height: 390px;
margins: 0px auto;

 

Most,térjetek vissza az index.php fájlba,és a “modul” rész alatt meglévő php elemeket másoljátok és illeszétek be újra. Nagyon fontos hogy a “modul” diven belül legyen mindkettő kód! Keressétek meg az előzőleg beillesztett “van kiemelt kép” sort,és cseréljétek ki erre:

<?php } else { /*nincs kiemelt kép */ ?>

 

Ha ez megvan,az alatta lévő “thumb”,vagy ahogy ti elneveztétek a kiemelt kép divjét töröljétek ki,csak ez a sor maradjon,illetve alatta a cím,tartalom,stb.

Ha minden jól ment,most ezt kell hogy lássátok:

<div class=”modul”><?php if ( has_post_thumbnail() ) { /* van kiemelt kép */ ?>
<div class=”thumb”><?the_post_thumbnail;?> </div>
<div class=”post-title”><?php the_title(); ?></div>
<div class=”content”><?php the_content();?></div><?php } else { /*nincs kiemelt kép */ ?>
<div class=”post-title”><?php the_title(); ?></div>
<div class=”content”><?php the_content();?></div></div>

 

A .css kódban ehhez természetesen külön részt kell meghatározni szintén,de csak üresen hagyva így:

.no-thumb {
}

 

Ha ez is megvan,akkor már csak egy teendő van: két külön felépítés elkészítése. Ez nem kötelező,de aki pl. a kiemelt képen akarja elhelyezni a címet vagy a dátumot,annak új változókat kell behoznia,amit a .css kódban is külön feltűntetni.

Erre is itt egy nagyon egyszerű példa:

<div class=”modul”><?php if ( has_post_thumbnail() ) { /* van kiemelt kép */ ?>
<div class=”thumb”><?the_post_thumbnail;?> </div>
<div class=”thumb-post-title”><?php the_title(); ?></div>
<div class=”thumb-date”><?php the_time(‘F j, Y’) ?></div>
<div class=”content”><?php the_content();?></div>
<div class=”comment”>Neked mi a véleményed? <a href=”<?php the_permalink() ?>/#comm”>Kommentelj!</a></div><?php } else { /*nincs kiemelt kép */ ?>
<div class=”post-title”><?php the_title(); ?></div>
<div class=”date”><?php the_time(‘F j, Y’) ?></div>
<div class=”content”><?php the_content();?></div>
<div class=”comment”>Neked mi a véleményed? <a href=”<?php the_permalink() ?>/#comm”>Kommentelj!</a></div></div>

 

És persze a hozzá tartozó egyszerű .css kód:

.thumb { /* a kiemelt kép beállításai */
width: 720px;
height: 390px;
margins: 0px auto;
}
.no-thumb { /* ezt hagyd üresen */
}.modul { /* az egész bejegyzés sáv  */
background-color: white;
width: 720px;
margin: 0px auto;
}.post-title { /* a bejegyzés címének beállításai */
font-size: 15px;
font-stlye: italic;
text-align: left;
padding: 10px;
color: black;
}
.date { /* dátum beállítása */
font-size: 10px;
text-align: left;
text-transform: uppercase;
color: black;
}
.content { /* a bejegyzés beállításai */
font-size: 12px;
padding: 8px;
color: black;
text-align: justify;
}
.comment { /* a komment rész beállításai */
font-size: 11px;
text-align: center;
color: black;
}.thumb-post-title { /* a bejegyzés címének beállításai,ahol van kiemelt kép */
font-size: 15px;
font-stlye: italic;
text-align: left;
padding: 10px;
color: black;
background-color: white;
position: relative;
z-index: 10; /* ezt ne módosítsd */
margin-top: 135px; /* a cím 135 pixellel feljebb van */
}
.thumb-date { /* dátum beállítása */
font-size: 10px;
text-align: left;
text-transform: uppercase;
color: black;
background-color: white;
position: relative;
z-index: 10; /* ezt ne módosítsd */
margin-top: 145px; /* a cím 145 pixellel feljebb van */
}