Customizare widget categorii WordPress

În postarea de astăzi voi vorbi din nou despre WordPress și vă voi arăta o soluție rapidă și destul de utilă pentru a vă customiza secțiunea de categorii de pe blog, asta în cazul în care dețineți una.

Dacă nu dețineți o astfel de secțiune, o puteți activa oricând din Appearance -> Widgets -> Right Sidebar sau Left Sidebar în funcție de designul blogului și cu drag and drop mutați Categories în sidebarul dorit.

Pe acest blog secțiunea de categorii este deja customizată, drept urmare, voi lua ca și exemplu secțiunea de categorii de pe blogul meu personal. Momentan arată destul de plictisitoare această secțiune, așadar  să începem customizarea ei!

customizare categorii wordpress Bianca Ionel

Iar codul sursă pentru această secțiune arată la fel de plictisitor.

cod sursa inainte de modificare wordpress bianca ionel

Pasul 1: Adăugați în Appearance -> Editor -> functions.php la finalul fișierului, dar nu după ?> următorul cod și salvați modificarea făcută.

/* Customize Category List */
if ( !function_exists( ‘add_span_cat_list_widget’ ) ):
function add_span_cat_list_widget( $links ) {
$links = preg_replace( ‘/(<a[^>]*>)/’, ‘$1’, $links );
$links = str_replace( ‘’, ‘
’, $links );
$links = str_replace( ‘ (‘, ‘’, $links );
$links = str_replace( ‘)’, ‘
’, $links );
return $links;
}
endif;
add_filter(‘wp_list_categories’, ‘add_span_cat_list_widget’);

Pasul 2: După salvarea modifcării, dacă vizualizați din nou categoriile o să observați că parantezele au dispărut și momentan această secțiune arată mai ciudat decât la început, numărul din articole din aceasta fiind lipit de text.

categories after code bianca ionelNu vă panicați și aruncați o privire în codul sursă, a cărui structură pentru ă categorie ar trebui să arate ca în imaginea de mai jos.

cod sursa categorii bianca ionel

Dacă facem o comparație între codul sursă inițial și cel actual, putem observa faptul că am pus o clasă „category-text” pe denumirea categoriei și de asemenea pe numărul de articole din acea categorie, în prezent având <span class=”count”><span class=”count-hidden”>numărul de articole</span></span>

Acum urmează partea ușoară, trebuie să adăugăm puțin CSS pentru a aranja așa cum ne dorim aceste categorii. De această dată vom modifica în Appearance -> Editor -> style.css Eu am început prin a elimita săgețica și padding-ul din stânga, modificând .widget ul li astfel:

.widget ul li { padding: 0px; font-size: 16px; line-height:30px; margin:0px;color:black;}

Apoi am aliniat la dreapta numărul de articole din fiecare categorie:

.widget_categories a .count { width:42px; float:right;color:black; }

.count-hidden { float: right; text-align: center; width: 42px; }

În continuare am adăugat culoare după bunul plac. Am să vă arăt doar pentru o singură categorie, restul urmând aceeași procedură, dar în culori diferite. Eu am ales să folosesc culorile din logo, pentru a exista o unitate în site.

.cat-item.cat-item-1082 { border-left: 2px solid #bc0500; }
.cat-item.cat-item-1082 a:hover { background: #bc0500 none repeat scroll 0 0; color: white; font-weight: bold; text-decoration: none; }
.cat-item.cat-item-1082 .count-hidden { background: #bc0500 none repeat scroll 0 0; color: white; font-weight: bold; }

Rezultatul final arată în felul următor:

customiza categorii wordpress bianca ionel rezultat finalPuteți alege să puneți efecte la hover, sau orice alte idei că vă pot da un strop de culoare și originalitate blog-ului sau site-ului. Pe blog-ul actual am ales să colorez categoriile în culorile care definesc subiectele abordate de mine.

Dacă ți-a plăcut acest articol, nu uita să-i dai un share să afle și pretenii tăi despre această mică strategie aplicată pe WordPress. Dacă ai și tu alte modalități de Customizare widget categorii WordPress, poți să le împărtășești oricând cu mine.

Pentru întrebări și suport, nu ezitați să mă contactați!

2 Comments

  1. Ethos

    septembrie 9, 2016 at 2:10 am

    Mie îmi plac lucrurile simple și plictisitoare 🙂 dar rezultatul obținut de tine e frumos.

    1. Bianca Ionel

      septembrie 9, 2016 at 8:29 am

      Mulțumesc 🙂

Leave a Reply

%d blogeri au apreciat:
Mai multe despre bianca ionel blog, IT, Wordpress
Review MarketOnline.ro

Marketonline.ro este un site de comert online ce oferă o gamă largă de produse, de la laptopuri la jucării pentru...

Închide