Brielle
Brielle
2016. jan 22

Sok, főleg külföldi oldalon figyelhetjük meg, hogy a bejegyzéseket előszeretettel jelenítik meg egymás mellett, több oszlopban, hiszen így sokkal átláthatóbb lehet az oldal tartalma. Ebben a WordPress segítségben pedig arról lesz szó, hogyan jeleníthetjük meg a kiemelt képes bejegyzéseket két oszlopban úgy, hogy még az oldalmodul is megjelenjen ezek mellett. Ha felkeltette az érdeklődésedet az ötlet, akkor olvass tovább, mert az alábbiakban minden bemutatásra kerül.

Alapok

Tehát, a legelső feladatunk az lesz, hogy elosszuk a méreteket. Én most egy 1024 pixel szélességű oldallal fogok dolgozni, nyilván Te a kedved szerint szabhatod ezt személyre. Ebből adódóan elosztottam a méreteket úgy, hogy megfelelően elférjenek a modulok egymás mellett. Nagyon oda kell figyelnünk, hogy minden pontosan illeszkedjen.

Mivel oldalunk 3 sávból áll, ezért bele kell kalkulálnunk a közöttük lévő üres teret, ami a mi esetünkben 12 pixel lesz. Az oldalmodulunk 300 pixel, míg a két bejegyzéssáv 350-350 pixel széles lesz. Így tehát pontosan belefértünk az 1024-be. (350+350+300+12+12=1024).

Oldalmodul

Az oldalmodulunkon nem kell túl sokat alakítani, hiszen az általunk használt WordPress sablonban jó esetben már szerepel. Csupán arra kell figyelnünk, hogy pontosan olyan széles legyen az oldalmodul, és minden eleme, mint amit az előbb elterveztünk, vagyis 300 pixel.

#sidebar{
width: 300px; /*szélesség*/
float: right; /*jobb oldalon helyezkedik el*/
margin-top: 12px; /*a fejléctől számított távolság*/
}

A CSS-ben a sidebar résznél láthatjuk az általános adatokat, itt alakítsuk át az eltervezettek szerint.

Kiemelt kép beállításai

Mivel a bejegyzésekben kiemelt képeket is fogunk használni, így a következő részben ezt állítjuk be. Az én mintámban a kiemelt képek 350×210 pixel nagyságúak, de arra is kell ügyelnünk, hogy a teljes bejegyzéseknél is a megfelelő méretben jelenjenek meg, ami nálunk 712×210 lesz. (A szélesség a két bejegyzés, plusz a köztük lévő szünet méretének összege).

Mivel a rövid bejegyzések, és a teljes bejegyzések kiemelt képe különböző méretű, ezért a főoldali rövid bejegyzésekét le kell kicsinyítenünk. Ehhez a következő kódot illesszük be functions.php-ba a ?> rész elé:

add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 350, 210, true );
}

Bejegyzések kódja

Most pedig az index.php-ra lesz szükségünk, ugyanis a két oszlopos bejegyzések kódjához érkeztünk. Most a fájlból csak a modul tartalmával kell dolgoznunk, amibe a navigáció, illetve az oldal egyéb tartalmának kódja nem tartozik bele (!!!) ezért semmi más kulcsfontosságú részt ne töröljünk ki!!! A <? include(“header.php”) ?> kód utánra kell beillesztenünk a következő, hosszúnak és bonyolultnak tűnő kódot:

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<div class="cats"><i class="fa fa-folder"><span style="color:transparent;display:none;">icon-folder</span></i> <?php the_category(', ') ?></div>
<div class="date"><i class="fa fa-calendar"><span style="color: transparent; display: none;">icon-calendar</span></i> <?php the_time('Y, M d') ?></div>
<div><?php the_post_thumbnail(); ?></div>
<div class="middle2">
<div class="newstitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php the_content(''); ?></div>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">
<div class="cats"><i class="fa fa-folder"><span style="color:transparent;display:none;">icon-folder</span></i> <?php the_category(', ') ?></div>
<div class="date"><i class="fa fa-calendar"><span style="color: transparent; display: none;">icon-calendar</span></i> <?php the_time('Y, M d') ?></div>
<div><?php the_post_thumbnail(); ?></div>
<div class="middle2">
<div class="newstitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php the_content(''); ?></div>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

Egy kis magyarázat a kódhoz:

Ez a kód a modulokat két oszlopba rendezi: bal és jobb oldaliba az ID-jük alapján. Így a következő képen fognak rendeződni a bejegyzések:

első oszlop: 1. bejegyzés, 3. bejegyzés, 5. bejegyzés…

második oszlop: 2. bejegyzés, 4. bejegyzés, 6. bejegyzés…

Ezért a bal és jobb oldali modul kódját külön kell beilleszteni. A modul tartalmi része mindkét esetben ugyanúgy fog kinézni.

Bal oldali oszlop kódja:

<div id="left-column">
<div class="cats"><i class="fa fa-folder"><span style="color:transparent;display:none;">icon-folder</span></i> <?php the_category(', ') ?></div>
<div class="date"><i class="fa fa-calendar"><span style="color: transparent; display: none;">icon-calendar</span></i> <?php the_time('Y, M d') ?></div>
<div><?php the_post_thumbnail(); ?></div>
<div class="middle2">
<div class="newstitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php the_content(''); ?></div>
</div>

Jobb oldali oszlop kódja:

<div id="right-column">
<div class="cats"><i class="fa fa-folder"><span style="color:transparent;display:none;">icon-folder</span></i> <?php the_category(', ') ?></div>
<div class="date"><i class="fa fa-calendar"><span style="color: transparent; display: none;">icon-calendar</span></i> <?php the_time('Y, M d') ?></div>
<div><?php the_post_thumbnail(); ?></div>
<div class="middle2">
<div class="newstitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php the_content(''); ?></div>
</div>

A kettő közötti egyetlen különbséget kiemeltem. Ennyi lenne az index.php kódja, ne feledjük el, hogy ez után még a következő kódok is megjelennek a fájlban:

</div>
<div class="navigation">
<?php wp_pagenavi(); ?>
</div>

<?php get_footer(); ?>

CSS kód

Már csak a CSS kód van hátra, ami két részből áll. A jobb és bal oldali modul külön kódjából, illetve maguk a modul részegységek kódjából (mint kiemelt kép, dátum, kategóriák, cím, tartalom).

Oszlopok kódja:

div#left-column {
width: 362px;
float: left;
clear: none;
}
div#right-column {
width: 362px;
float: right;
clear: none;
}

Mint láthatjuk, a szélességnél 362 pixel lett megadva, ez pedig azért van, mert a modulok közötti üres teret, a szünetet is bele kell venni. Ezt ne felejtsük el.

Modulrészegységek kódja:

.newstitle{ /*bejegyzés címe*/
font-size: 14px;
font-family: arial;
text-transform: uppercase;
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
width: 310px;
padding-left: 20px;
padding-right: 20px;
}

.newstitle A{ /*bejegyzés címének linkje*/
color: #9f7a23;
font-weight: none;
}

.newstitle A:hover{ /*bejegyzés címének linkje, ha ráviszed az egeret*/
color: #9f7a23;
font-weight: none;
}

.date{ /*dátum kódja*/
position: absolute;
background-color: #ffffff;
margin-top: 10px;
margin-left: 10px;
font-size: 11px;
font-family: arial;
font-weight: bold;
text-transform: uppercase;
text-align: left;
color: #a48888;
padding: 10px;
}

.cats{ /*kategóriák kódja*/
position: absolute;
margin-top: 195px;
margin-left: 20px;
font-family: arial;
font-size: 9px;
text-transform: uppercase;
padding: 10px;
background-color: #cda138;
}

.middle2{ /*tartalom kódja*/
background-color: #e7c064;
width: 330px;
padding: 10px 10px;
text-align: justify;
color: #fff;
font-size: 12px;
margin-top: -2px;
height: 200px;
margin-bottom: 12px;
}

Ennyi lenne a leírás, ami elsőre hosszúnak tűnik, de nagyon egyszerűen megvalósítható. Még a végére annyit, hogy a bejegyzések teljes nézetéhez külön kód kell, melyhez segítséget itt találhatsz:

» Eltérő főoldali és teljes bejegyzés nézet

[Alapkód forrása]


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









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

Ellenőrző kód *