Brielle
Brielle
2015. Júl 02

Most ismét egy hasznos WordPress tutoriallal érkeztem hozzátok. Gondoltam, most valami olyasmiről lesz szó, ami minden WordPress felhasználó számára hasznos lehet. Mivel többségünk használ kategóriákat bejegyzéseink besorolására, így hasznos lehet, ha az oldal látogatói számára megjeleníthetjük az összes kategóriát egy összefoglaló helyen. Ezt pedig most egy kategóriafelhő készítésében fogom bemutatni. Nem kell hozzá bővítmény, vagy widgetsáv, csupán némi kód, és kreativitás.

Először is, a következő alapkódot kell beillesztenünk arra a helyre, ahol szeretnénk megjeleníteni a kategóriákat. Lehet ez akár fejléc, lábléc, vagy oldalsáv. Az egyes kódok részletezése a kód után fog következni.

<?php
$args = array(
'show_option_all' => '',
'orderby' => 'name',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 1,
'title_li' => __( '' ),
);
wp_list_categories( $args );
?>

Kódok magyarázata

Természetesen csak azokat a kódokat fogom részletezni, amelyek számunkra fontosak lehetnek. Némelyikre nem is igazán lesz szükségünk.

orderby – Ezzel adhatjuk meg, hogy milyen elv szerint rendezhetjük a kategóriákat. A következők lehetnek:

  • ID – mindegyik kategóriának van egy kódja, és ez alapján jeleníti meg őket
  • name – alapértelmezett

order – rendezés növekvő vagy csökkenő sorrendben.

  • ASC – növekdő
  • DESC – csökkenő

show_count – ezzel a kóddal megjeleníthetjük a kategóriák neve után a hozzájuk tartozó bejegyzések számát.

  • 1 – mutassa
  • 0 – ne mutassa

hide_empty – ez a kód pedig elrejti azokat a kategóriákat, melyekbe egy bejegyzés sem tartozik.

  • 1 – igaz, vagyis ekkor eltünteti ezeket
  • 0 – hamis, vagyis ekkor megjeleníti ezeket is.

title_li – az ezutáni zárójelekben megjelenített szöveg jelenik meg az összes kategória fölött (pl Kategóriák felirat) de ezt érdemes üresen hagyni, mivel ha van felirat, akkor az egész kategória felhő egy listaelemmel beljebb fog kerülni.

CSS kód

A fő kód után már csak a CSS-el kell bíbelődni. Itt nagyobb szabadságot kapunk, hiszen itt rendezhetjük a kategóriákat egymás alá, illetve felhő szerűen is, ahogy én jelenítettem őket meg a minta képen legfelül. Ezt a következő kóddal adhatjuk meg:

.cat-item{
display: inline;
}

display – ez adja meg, hogy hogyan rendeződnek el az egyes lista elemek. A következőket adhatjuk meg:

  • inline: egymás mellett jelenjenek meg a kategória elemek
  • block: egymás alatt, külön sorban jelenjen meg mindegyik kategória elem.

A következő kód segítségével pedig magukat a kategória elemeket formázhatjuk meg. Ez már a saját fantáziánkon múlik, a saját kreativitáson. Természetesen fontos szempont, hogy passzoljon a designhoz.

.cat-item A{
background: url(images/linkeskep02.png);
padding-top: 5px;
padding-bottom: 5px;
font-size: 10px;
font-family: calibri;
text-transform: uppercase;
letter-spacing: 2px;
border: 1px solid transparent;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
color: #ffffff;
width: 100%;
line-height: 30px;
}

Remélem, hasznosnak véltétek ezt a rövid tutorialt, mely segítségével akár ti is elkészíthetitek a saját kategória felhőtöket szempillantás alatt. Nem kellett hozzá semmiféle widget vagy bővítmény, csupán néhány egyszerű kód ismerete.


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









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

Ellenőrző kód *