Brielle
Brielle
2015. Júl 18

Most egy olyan WordPress bővítmény leírásával érkeztem, melyre alapvetően minden WordPresses felhasználónak szüksége van: ez pedig nem más, mint az oldalváltó bővítmény, vagyis a PageNavi. A következő leírásban a telepítésről, megjelenítésről, illetve a formázásról is lesz szó, vagyis kereken összefoglalva mindenről írni fogok, amit csak tudni illik erről a bővítményről.

Miért is jó ez a bővítmény?

Egyrészt azért, mivel enélkül nem tudunk navigálni a frissek között, tehát ahhoz, hogy meg tudjuk tekinteni a régebbi posztjainkat is, telepítenünk kell a PageNavi bővítményt. Másrészt pedig ez egy nagyon hasznos, jól formálható bővítmény, amit könnyedén a designunkhoz tudunk alakítani CSS segítségével.

Telepítés folyamata

A bővítmény hozzáadása ugyanúgy működik, mint bármelyik másiknak a telepítése. Tehát a vezérlőpultban Bővítmények » Új hozzáadása mneüpont alatt begépeled a következőt: PageNavi, majd telepítheted is. Természetesen telepítés után bekapcsolni se felejtsd el a bővítményt.

PageNavi kód beillesztése

A következő kód beillesztésével jelenítheted meg a navigációs menüt. Természetesen érdemes az index.php-ba a bejegyzések kódja alá illeszteni.

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

PageNavi beállítások

Miután telepíted a bővítményt, egy külön menü is kerül hozzá a Beállításokba. Itt érdemes több dolgot is megváltoztatnunk a megjelenéssel kapcsolatban. A megjelenő szöveg rész mögötti sort töröljük ki (ez mutatja az összes oldalszámot. De ha úgy gondolod, ez egy hasznos funkció, akkor meg is hagyhatod, bár szerintem elég zavaró). Ezután az első és utolsó oldal szövegét magyarosítsuk, és készen is leszünk.

Nyilván több dolgot is megváltoztathatsz, ez már csak rajtad múlik. Most csak azokat a lehetőségeket soroltam fel, amiket én változtattam meg az oldalváltóm formálására.

 

Formálás CSS-sel

A navigációs menüt megformálhatod a saját CSS kódjában is, de sokkal egyszerűbb lesz, ha a weboldalad jelenlegi CSS stíluskódjába illesztjük be a CSS-t. Ehhez viszont érdemes kitörölni a bővítmény CSS stílusából bizonyos kódokat. Lépj a telepített bővítményeidhez, majd a PageNavinál kattints a szerkesztésre. Ekkor be fognak jönni a bővítmény kódjai, oldalt keresd meg a CSS-t. Eredetileg itt tudod átszínezni az oldalváltót. Célszerű mindent kitörölni.

Miután kitörölted az alapértelmezett stíluskészletét a PageNavinak, lépjünk a saját CSS-ünkbe. Megjelenés » Szerkesztő » style.css.

A következő kódokat illesszük be ide, majd mentsük el. Utólag így bármikor megformálhatod csupán a CSS szerkesztésével, témához illeszkedően a navigációs menüt úgy, ahogy szeretnéd.

/*WP PageNavi stílusa*/

.navigation{ /*navigációs menü elhelyezkedése*/
text-align: left;
}

.wp-pagenavi {
clear: both;
}

.wp-pagenavi a, .wp-pagenavi span { /*oldalváltó alap kinézete*/
text-decoration: none;
border: 1px solid #;
padding: 8px 6px;
margin: 2px;
background-color: #ffffff;
color: #000000;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current { /*aktív oldal mutatása*/
color: #ffffff;
background-color: #319498;
}

.wp-pagenavi span.current {
font-weight: bold;
}

Remélem, hasznosnak vélted ezt a kis segítséget a PageNavihoz, mely után te is egyszerűen fogod tudni használni ezt a nagyszerű bővítményt. Ha kérdésed, vagy gondod akadna, kérdez 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 *