Brielle
Brielle
2015. Júl 29

Több külföldi oldalon is elterjedt az a fajta bejegyzés nézet, mely szerint a főoldalon az adott bejegyzés rövidítve jelenik meg, mellette a kiemelt kép egy részletével, majd a tovább gombra kattintva másként jelenik meg ugyanaz a bejegyzés. Ez az elrendezés mindenképpen hasznos lehet, ha helyet szeretnénk spórolni, vagy ha a tartalom lényegi részét nem szeretnénk megjeleníteni a főoldalunkon. Ha még mindig nem érted, pontosan mire is gondolok, akkor a kép alapján mindjárt világossá fog válni minden:

Emlékszem, hogy ezzel a fajta elrendezéssel már régebben is próbálkoztam, viszont sosem sikerült igazán megoldani. Most kérésre ismét nekiszaladtam, pár órányi próbálkozás után pedig sikerült is megtalálnom a megoldást. Elsőre kicsit bonyolultnak fog tűnni, hiszen nagy összetettséget igényel, de a végeredmény magáért beszél. Nézzük is, mire lesz szükségünk.

Méretek eldöntése

Először nagyon fontos, hogy meg kell határoznunk, mi mekkora legyen. Például, most a teljes bejegyzésünk 700 pixel széles lesz, a főoldali kisebb kiemelt kép pedig 250×200 pixel méretű. Ehhez azt is hozzá kell vennünk, hogy a rövidített bejegyzés is csak 200 pixel magas lehet, illetve a szélessége már csak 450 (700-250). Jegyezzük meg ezeket, hiszen ez alapján fogunk dolgozni.

Különböző méretű kiemelt képek

A legnehezebb dologgal kezdenénk, ami nem más, mint a kiemelt kép átméretezése. Hiszen a főoldalon ugyanannak a kiemelt képnek kisebb méretben kell megjelennie, míg a teljes bejegyzés nézetben viszont az eredeti méretében. Ehhez mi mást kéne elővennünk, mint a functions.php fájlt? A következő kód tartalmazni fogja a kiemelt kép kódját, illetve az átméretezés kódját is. ?> elé illesszük be:

add_theme_support( 'post-thumbnails' );

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 250, 200, true );
}

A kiemelt kép átméretezése magát a feltöltött képet nem vágja ki kisebbre. A teljes méretű kép ugyanúgy megmarad, csak azon a helyen fog megjelenni kisebben, ahol azt adjuk meg. Ez egy nagyon jó funkció, bár kicsit nehéz volt megtalálnom a megoldást. Ó, és persze nagyon fontos! A régebbi kiemelt képek NEM fognak átméreteződni, csak az újonnan feltöltöttek.

Index.php átalakítása

Innentől nagyon oda kell figyelnünk, mit minek nevezünk el a CSS-hez. A következő kódot az index.php fájlba kell beillesztenünk az első modulkód helyére.

<div id="modul">
<div class="thumb"><?php the_post_thumbnail( ); ?></div>
<div class="header2" align="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div class="datas"><b>Dátum:</b> <?php the_time('Y. m. d.') ?>, <b>Írta:</b> <?php the_author() ?>, <?php comments_number( 'Szólj hozzá!', '1 válasz', '% válasz' ); ?></div>
<div class="middle2"><?php the_content ('<div class="readmore" align="right" >Tovább olvasom » </div>'); ?>
</div>
</div>

Magyarázat:

thumb – ez fogja megadni CSS-ben a kiemelt kép adatait
header2 – frissmodul fejléc
datas – frissmodul adatsor
middle2 – frissmodul tartalom

Ha más CSS meghatározásokhoz szoktál, akkor nyugodtan használd azokat, de figyelj oda rá, hogy mindegyiket pontosan cseréld ki.

Főoldali frissmodul CSS kódja

Az előbb átalakított részhez tartoznak bizonyos átalakítások. Nyilvánvalóan a modulok megformálása már a fantáziádra van bízva, így a saját kedved szerint alakíthatod ezeket ki. Íme, itt van hozzá az alapkód. Ezt stlye.css-be illeszd be.

/* ----- FŐOLDALI FRISSMODUL ----- */

.thumb { /*főoldali kiemelt kép*/
float: left;
width: 250px;
height: 200px;
margin-bottom: 20px;
}

.header2{ /*főoldali cím*/
float: right;
background-color: #947eb5;
width: 440px;
padding-top: 10px;
text-align: left;
padding-left: 10px;
padding-bottom: 10px;
height: 20px;
}

.header2 A{ /*főoldali cím linkje*/
color: #000000;
font-family: arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}

.datas{ /*főoldali adatok sor*/
float: right;
background-color: #b69cdc;
width: 440px;
padding-left: 10px;
text-align: left;
color: #000000;
padding-top: 10px;
padding-bottom: 10px;
color: #ffffff;
height: 12px;
}

.middle2{ /*főoldali tartalom*/
float: right;
background-color: #caaff3;
width: 420px;
text-align: justify;
color: #000000;
height: 108px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 20px;
}

Magyarázat: float taggel megadtuk, mi hol helyezkedjen el (kiemelt kép bal oldalt, minden más jobbon), míg a kiemelt kép 250 pixel széles, addig minden másnak bele kell férnie a 450 pixel szélességbe. Az egész modul csupán 200 pixel magasságot foglal el.

Teljes bejegyzés sablonkódja: single-post.php

Ahhoz, hogy létrehozhassuk a külön teljes bejegyzés nézetet, egy teljesen új sablon fájlt kell feltöltenünk a sablonunkba FTP segítségével. Töltsük le szerverünkről a design mappánkból az index.php oldalt, majd NotePad++ vagy egy jegyzettömb segítségével mentsük el ezen a néven: single-post.php

Töltsük fel az új fájlt, majd alakítsuk át egy kicsit. A következő kódot illesszük be a modulkód helyére:

<div id="modul">
<div class="post-title" align="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div class="thumb2"><?php the_post_thumbnail( 'original' ); ?></div>
<div class="datas2"><b>Dátum:</b> <?php the_time('Y. m. d.') ?>, <b>Írta:</b> <?php the_author() ?>, <?php comments_number( 'Szólj hozzá!', '1 válasz', '% válasz' ); ?></div>
<div class="post-content"><?php the_content (); ?>
</div>
</div>

Változások:

– A cím a kiemelt kép fölé került
– A kiemelt kép megkapta az ‘original’ attribútumot, vagyis ez adja meg, hogy ezúttal a teljes méretű kiemelt kép fog megjelenni, és nem a lekicsinyített verzió, ami ezúttal az alapértelmezett.
– Új elnevezést kaptak a CSS meghatározások:

  • header2 » post-title
  • thumb » thumb2
  • datas » datas2
  • middle2 » post-content

Ne feledjük, erre azért van szükség, mivel a bejegyzések teljes nézetéhez külön stílus kell. Nem használhatjuk ugyanazt, mint a főoldalon, mert akkor nem fog működni a dolog.

Teljes bejegyzés CSS kódja

/* ----- BEJEGYZÉSEK ----- */

.thumb2 { /*főoldali kiemelt kép*/
width: 700px;
height: 250px;
}

.post-title{ /*főoldali cím*/
background-color: #947eb5;
width: 690px;
padding-top: 10px;
text-align: left;
padding-left: 10px;
padding-bottom: 10px;
height: 20px;
}

.post-title A{
color: #432f61;
font-family: arial;
font-size: 18px;
font-weight: none;
text-transform: uppercase;
}

.datas2{
background-color: #b69cdc;
width: 690px;
padding-left: 10px;
text-align: left;
color: #000000;
padding-top: 10px;
padding-bottom: 10px;
color: #ffffff;
height: 12px;
}

.post-content{
background-color: #ffffff;
width: 670px;
text-align: justify;
color: #000000;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
}

A változás annyi, hogy ezúttal a modul részletek is 700 pixel szélességben fognak megjelenni egymás alatt, nem úgy, mint a főoldali bejegyzések esetén, ahol a kiemelt kép miatt kisebb helyet foglalhattak, ráadásul ott fix magasságot kellett megadnunk, ami ez esetben nem létezik, hiszen itt a teljes hosszában jelenítjük meg a bejegyzésünk.

Tovább olvasom gomb formázása

Nem egyértelmű, de a tovább gombnak is új elhelyezést kell adnunk. A formázást megint rád bízom, viszont néhány attribútum miatt muszáj beillesztenem a formáló kódot:

/* ----- TOVÁBB GOMB FORMÁZÁSA ----- */

.readmore{
background-color: #b69cdc;
padding-left: 0px;
margin-left: 300px;
font-size: 11px;
line-height: 30px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-transition: .8s ease-in;
-moz-transition: .8s ease-in;
-o-transition: .8s ease-in;
padding-right: 10px;
margin-top: -5px;
font-weight: bold;
}

.readmore A{
color: #000000;
font-weight: none;
}

Igazából, ennyi lenne a teljes leírás a dologhoz. Ha mindent jól csináltunk, akkor a kép alapján fogjuk látni a bejegyzéseinket. Természetesen igényel némi próbálkozást, ezzel tisztában vagyok, hiszen én is sokat szenvedtem vele, mire sikerült megcsinálnom. Ha bármi gondod akad, akkor kérdésedet szívesen fogadom hozzászólásban.


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









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

Ellenőrző kód *