Hoe u beschrijvingen in uw WordPress-thema's kunt toevoegen

WordPress-menusysteem heeft een ingebouwde functie waarmee u beschrijvingen kunt toevoegen met menu-items. Deze functie is standaard verborgen. Zelfs als deze is ingeschakeld, wordt het weergeven ervan niet ondersteund zonder enige code toe te voegen. De meeste thema's zijn niet ontworpen met het oog op menu-itembeschrijvingen. In dit artikel laten we u zien hoe u beschrijvingen van menu's in WordPress kunt inschakelen en hoe u beschrijvingen van menu's kunt toevoegen aan uw WordPress-thema's.

Opmerking: Deze tutorial vereist dat u een goed begrip hebt van HTML-, CSS- en WordPress-thema-ontwikkeling.

Wanneer en waarom zou je menubeschrijvingen willen toevoegen?

Sommige gebruikers denken dat het toevoegen van een menubeschrijving helpt bij de SEO. We denken echter dat de belangrijkste reden waarom u ze zou willen gebruiken, is om een ​​betere gebruikerservaring op uw site te bieden.

Beschrijvingen kunnen worden gebruikt om bezoekers te vertellen wat ze zullen vinden als ze op een menu-item klikken. Een intrigerende beschrijving zal meer gebruikers aantrekken om op menu's te klikken.

Stap 1: Schakel menubeschrijvingen in

Ga naar Uiterlijk »Menu's. Klik op Schermopties knop in de rechterbovenhoek van de pagina. Controleer de beschrijvingen doos.

Dit zal het beschrijvingsveld in uw menu-items mogelijk maken. Zoals dit:

Nu kunt u menubeschrijvingen toevoegen aan items in uw WordPress-menu. Deze beschrijvingen worden echter nog niet weergegeven in uw thema's. Om de menubeschrijvingen weer te geven, moeten we een code toevoegen.

Stap 2: Voeg de Walker-klasse toe:

Walker-klasse breidt de bestaande klasse uit in WordPress. Het voegt in feite gewoon een regel code toe om beschrijvingen van menu-items weer te geven. Voeg deze code toe aan uw thema's functions.php het dossier.

 class Menu_With_Description breidt Walker_Nav_Menu uit function start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ diepte)? str_repeat ("\ t", $ depth): "; $ class_names = $ value ="; $ klassen = leeg ($ item-> klassen)? array (): (array) $ item-> klassen; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ indent. ''; $ attributen =! empty ($ item-> attr_title)? '': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributen. =! leeg ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> before; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = '
'. $ item-> beschrijving. ''; $ item_output. = ''; $ item_output. = $ args-> after; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args);  

Stap 3. Schakel Walker in wp_nav_menu in

WordPress-thema's gebruiken de functie wp_nav_menu () om menu's weer te geven. We hebben ook een tutorial voor beginners gepubliceerd over het toevoegen van aangepaste navigatiemenu's in WordPress-thema's. De meeste WordPress-thema's voegen menu's toe header.php sjabloon. Het is echter mogelijk dat uw thema een ander sjabloonbestand heeft gebruikt om menu's weer te geven.

Wat we nu moeten doen, is vinden wp_nav_menu () functie in uw thema (waarschijnlijk in header.php) en verander het op deze manier.

   'primary', 'menu_class' => 'nav-menu', 'walker' => $ walker)); ?> 

In de eerste regel die we hebben ingesteld $ walker om de Walker-klasse te gebruiken die we eerder in functions.php. In de tweede regel code is het enige extra argument dat we moeten toevoegen aan onze bestaande wp_nav_menu-argumenten 'wandelaar' => $ wandelaar.

Stap 4. De beschrijvingen stylen

De Walker-klasse die we eerder hebben toegevoegd, toont itembeschrijvingen op deze regel code:

 $ item_output. = '
'. $ item-> beschrijving. ''; 

De bovenstaande code voegt een regeleinde toe aan het menu-item door een a toe te voegen
tag en verpakt uw beschrijvingen vervolgens in een reeks met klassenub. Zoals dit:

 
Wat betreft
Wie zijn we?
 

Als u de manier wilt wijzigen waarop uw beschrijvingen op uw site worden weergegeven, kunt u CSS toevoegen aan de stylesheet van uw thema. We testten dit op Twenty Twelve en gebruikten dit css.

 .menu-item border-left: 1px solid #ccc;  span.sub font-style: italic; font-size: small;  

We hopen dat u dit artikel nuttig zult vinden en dat het u zal helpen cool uitziende menu's te maken met menubeschrijvingen in uw thema. Vragen? Laat ze achter in de reacties hieronder.

Aanvullende bronnen

Hoe WordPress Navigation-menu's te stijlen

Aangepaste items toevoegen aan specifieke WordPress-menu's

Bill Erickson's Menu's met Description Class