Page-navi

Om du vill göra om din Sid navigering i ditt underscores bootstrap tema så går det utmärkt och är inte alls svårt. Jag har valt att använda mig av Jointswp’s page-navi, vilket man får göra. Det första du gör om du vill använda detta är att ladda ner Jointswp och när du har gjort detta så går du in i mappen som heter functions. Då hittar du en fil som heter page-navi.php och det är just denna vi använder oss av. Du kan ta hela mappen functions över till det eget tema och i mitt fall så blir det då till exempelwp. Jag öppnar sedan upp själva page-navi.php i dreamweaver (valfritt vad man använder) och ändrar lite i koden på själva page-navi.php på rad 2. Här står jointswp men det ska stå ditt temas namn istället för jointswp, för mig blir det så här,
function exempelwp_page_navi(). När detta är gjort så kan du ta bort alla andra filer i mappen function och lägga den bland dina andra mappar i ditt tema. Sedan går du vidare till att öppna din functions.php fil, eftersom du måste lägga till din page-navi där.
Lägg då till detta och spara din function.php när du är färdig.

require_once(get_template_directory().'/functions/page-navi.php');

Så där, då kan du öppna dina filer index.php och single.php i båda dessa hittar du följande rad,
the_post_navigation();
och det är detta vi ska ändra lite på, det ska se ut på följande sätt i index.php
exempelwp_page_navi();
(obs! ändra exempelwp till ditt eget temas namn).
I single.php tar jag bara bort det helt och hållet eftersom jag inte vill ha någon räknare där eller länk till föregående eller nästa inlägg.
Då du sedan sparat dessa filerna i ditt tema så har du bara en sak till kvar att göra, sätta din egen prägel på hur och vilka färger du vill ha.
Så öppna style.css och här får du lite kod att klistra in, så har du en början att leka med.

style.css

.page-navigation ul{font-size: 15px !important; }
.page-navigation ul li {color:#333 !important;}
.page-navigation ul li a {color: #666 !important;}
.page-navigation ul li a:hover {color: #000 !important;}
.page-navigation ul li span.current {color: #bd7d33 !important; font-weight:bold;}

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *