Külön kategóriák a főoldalon

Üdv!



A főoldalamat szeretném teljesen átalakítani, ehhez kéne a segítségetek. Jelenleg úgy néz ki a főoldalam, hogy a hírek egymás alatt sorban jelennek meg. Ezt szeretném “törölni” és helyette olyan widgeteket rakni (ha ez lehetséges), hogy a kategóriáim külön kis dobozban legyenek, és mindegyikből az utolsó 5-10 hír címe jelenjen csak meg, ahogy képen is látható. Ehhez keresek valami plug-int, vagy widgetet. Már feltelepítettem a “list category posts” plugint, de nem nagyon értem, hogy mit is kezdjek vele. Megoldható ez valami pluginnel, vagy ehhez már komolyabb programozói gyakorlat is szükséges?

A “List category posts” plugin-t használva pl. így lehet elindulni:


  1. a kezdőoldalnak beállított statikus oldalba (vagy a lábléc widget-be) másold be a lenti kódot, majd írd be a megfelelő kategória neveket és ID-ket (id=1 … id=6; az ID-t a kategória szerkesztésekor lehet látni),
<div class="lcp_column1"><br />
<h3>KATEGÓRIA 1</h3><br />
[catlist id=1 numberposts=10 class=lcp_catlist1]<br />
<h3>KATEGÓRIA 2</h3><br />
[catlist id=2 numberposts=10 class=lcp_catlist2]<br />
<h3>KATEGÓRIA 3</h3><br />
[catlist id=3 numberposts=10 class=lcp_catlist3]<br />
</div><br />
<br />
<div class="lcp_column2"><br />
<h3>KATEGÓRIA 4</h3><br />
[catlist id=4 numberposts=10 class=lcp_catlist4]<br />
<h3>KATEGÓRIA 5</h3><br />
[catlist id=5 numberposts=10 class=lcp_catlist5]<br />
<h3>KATEGÓRIA 6</h3><br />
[catlist id=6 numberposts=10 class=lcp_catlist6]<br />
</div>
```<br />
2. a sablon style.css végére írd be a lenti kódot,<br />

.lcp_column1 h3,

.lcp_column2 h3 {

border: 1px solid #b3b3b3;

margin: 5px 0 10px;

padding: 5px 10px 5px 10px;

background: #fdfdfd;

}



.lcp_catlist1,

.lcp_catlist2,

.lcp_catlist3,

.lcp_catlist4,

.lcp_catlist5,

.lcp_catlist6 {

list-style-type: none;

margin: 0;

padding: 0;

}



.lcp_catlist1 li:nth-child(even),

.lcp_catlist2 li:nth-child(even),

.lcp_catlist3 li:nth-child(even),

.lcp_catlist4 li:nth-child(even),

.lcp_catlist5 li:nth-child(even),

.lcp_catlist6 li:nth-child(even) {

background-color: #e9e9e9;

}

3. az egyéni igényeknek megfelelően további finomítások a kódon.

És még ez is kell a style.css-be (előző hozzászólásban kihagytam:),

.lcp_column1 {<br />
width: 49%;<br />
padding: 5px;<br />
float: left;<br />
}<br />
<br />
.lcp_column2 {<br />
width: 49%;<br />
padding: 5px;<br />
float: right;<br />
}

Megnézem, köszi!