Biztosan hallottál már a rövidített bejegyzéses funkcióról WordPressben. Ez arra jó, hogyha egy hosszú cikket írsz oldaladra, akkor ne foglalja el az egész főoldalt, hanem egy Tovább gomb alkalmazásával egyszerűen lerövidítsd a bejegyzést. Ezzel a látogatókat arra is ösztönzöd, hogy megnézzék, mi van a gomb után, hiszen az ilyesmi felkelti a figyelmüket, tehát ez egy jó funkció. Most erről írok egy keveset, ami által ti is készíthettek egyedi Tovább gombot magatoknak :)

 

Először is, ehhez a dologhoz az index.php fájlodra lesz szükség. Ott láthatod, hogy a frissmodulod tartalmi részén ez a kódocska van:

<?php the_content?>

Esetleg az is előfordulhat, hogyha egy kész sablonból készítetted a design-od, hogy már alapból tartalmazza a kódod a Tovább gombot, csak esetleg nem tudtál róla, vagy nem értetted, mi is az. Ekkor így néz ki a kódod, és erre is lesz szükségünk:

<?php the_content ('<div class="readmore" align="right" >Tovább » </div>'); ?>

Ha az első verziód van, akkor a másodikat illeszd be a helyére, hiszen ez tartalmazza a funkciót. Természetesen a “Tovább »” részt saját ízlésed szerint átírhatod attól függően, hogy milyen feliratot szeretnél megjeleníteni. Lehetne akár “Olvasd tovább is” stb. Láthatjuk is, hogy a kód szerint a “readmore” fogja tartalmazni a CSS-t. Tehát eszerint dolgozunk tovább.

.readmore{
background: url(images/title01.png);
padding-left: 20px;
margin-left: 620px;
font-size: 13px;
line-height: 36px;
padding-right: 5px;
margin-top: 10px;
}

Lássuk hát, mi mit jelent, és mi az, amit mindenképpen fontos beleraknunk a kódba. Először is, a margin meghatározások. Hiszen ezek a kódok határozzák meg, hogy hol helyezkedjen el a gombod.

margin-left: px;
margin-top: px;

Ezután kedvedre változtathatod a stílust, hátteret adhatsz neki, paddingot, és egyéb dolgot, amit csak szeretnél, hiszen ez már csak rajtad múlik. A kód alapján az én tovább gombom így néz ki:

Már csak egyetlen egy dolog maradt hátra, az pedig nem más, mint maga a funkció használata. Hol is adhatod meg, hogy a bejegyzésed mekkora legyen, vagyis hol jelenjen meg a tovább gomb? Egyszerű lesz, az új bejegyzés hozzáadásánál mindent megtalálsz:

 

Kódnézetben beillesztheted a következő kódot is akár:

<!--more-->

De minek dolgozz annyit, ha a vizuális felületen is elérhető egy gomb hozzá? A következő képen meg is találod, hogy mit kell megnyomnod hozzá, és mit fogsz látni:

Ennyi lenne az egész, ez a roppant egyszerű módszer a tovább vagy bővebben gomb beszerelésére. Egyszerűen öszönözheted a látogatóidat a tovább olvasásra csupán egy feltűnő és ízléses gombocska használásával, ami csak arra hívogat mindenkit, hogy “kattints rám”. :)

 


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









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

Ellenőrző kód *