WordPress - Menu's tonen


Het is vrij eenvoudig om in een template een menu te tonen van alle pagina's in WordPress. Dit kan gedaan worden met de onderstaande code die over een aantal parameters beschikt. De volgorde van het menu aanpassen is standaard helaas niet zo mooi in WordPress. Dit kan door een pagina te openen en dan aan de linkerkant bij Volgorde een cijfer in te voeren. Door dit bij alle pagina's zo te doen bepaal je de volgorde.

Niet alle parameters zul je gebruiken, de opties die je niet gebruikt kun je eventueel achterwege laten. Achter elke regel staat een korte uitleg waar deze parameter voor dient.

<?php
        $params = array(
                'menu' => '', // Alleen voor custom menu's
                'theme_location' => 'Header', // Locatie in het thema
                'container' => 'div', // Omliggend element menu
                'container_class' => 'menu-container-class', // Classnaam van omliggend element
                'container_id' => 'menu-container-id', // ID van omliggend element
                'menu_class' => 'menu-class', // Class van UL
                'menu_id' => 'menu-id', // ID van UL
                'echo' => true, // Tonen
                'before' => '', // Tekst voor een menu item
                'after' => '', // Tekst na een menu item
                'link_before' => '', // Tekst binnen de link van een menu item
                'link_after' => '', // Tekst binnen de link van een menu item
                'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // UL
                'child_of' => '', // Submenu van specifieke pagina
                'depth' => 1, // Aantal niveau's
                'walker' => ''
        );
        wp_nav_menu($params);
?>

Custom Menu's

Om zelf navigatiemenu's samen te stellen is er in WordPress een feature genaamd Aangepaste menu's. Met deze feature stel je zelf een of meerdere navigatiemenu's samen die kunnen bestaan uit pagina's, categorieen en eventueel links naar externe websites. Een voordeel is ook dat je de volgorde eenvoudiger kunt bepalen door te slepen.

Voordat je deze menu's kunt gaan maken dient de feature geactiveerd te worden. Dit kan gedaan worden door de onderstaande regel in het bestand functions.php te plaatsen.

function register_custom_menu() {
        register_nav_menu('custom_menu', __('Custom Menu'));
}
add_action('init', 'register_custom_menu');


Zodra je de bovenstaande code aan het gebruikte thema hebt toegevoegd dan zal de feature geactiveerd zijn. De aangepaste menu's zijn te vinden door in WordPress aan de linkerkant te gaan naar Weergave en daarna te klikken op het menu item Menu's.

Je kunt hier dan beginnen met het maken van je menu's. Bovenin staat de menunaam die later ook in het thema gebruikt moet worden. Zo kun je meerdere menu's gaan toevoegen.

Dan moet het nieuwe menu nog getoond worden aan de voorkant van de website. Dit doe je met de onderstaande code, pas hier de naam 'Lorem' aan naar de naam van het menu. Het is precies dezelfde code als hierboven is gebruikt voor het tonen van een menu met als verschil dus dat de naam van het aangepaste menu wordt ingevoerd op de eerste regel.

<?php
        $params = array(
                'menu' => 'Lorem',
                'theme_location' => 'Header',
                'container' => 'div',
                'container_class' => 'menu-container-class',
                'container_id' => 'menu-container-id',
                'menu_class' => 'menu-class',
                'menu_id' => 'menu-id',
                'echo' => true,
                'before' => '',
                'after' => '',
                'link_before' => '',
                'link_after' => '',
                'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth' => 2,
                'walker' => ''
        );
        wp_nav_menu($params);
?>

CategorieŽn

Op een vergelijkbare manier kan een menu geplaatst worden met alle categorieŽn in WordPress. In het onderstaande geval is de opbouw grotendeels hetzelfde met een aantal andere parameters. Zo kun je bijvoorbeeld het aantal berichten per categorie tonen of instellen dat alleen subcategorieŽn van een bepaalde categorie getoond moeten worden.

<?php
        $params = array(
                'show_option_all' => '',
                'orderby' => 'name', // ID, Naam, Aantal berichten
                'order' => 'ASC', // ASC of DESC
                'style' => 'list', // List of none
                'show_count' => 0, // Toon aantal berichten
                'hide_empty' => 1, // Verberg lege categorieŽn
                'use_desc_for_title' => 1, // Titles toevoegen aan links
                'child_of' => 0, // Alleen subcategorieŽn op basis van ID
                'feed' => '', // Link naar feeds
                'feed_image' => '', // Afbeelding in plaats van feeds
                'exclude' => '', // CategorieŽn uitsluiten
                'exclude_tree' => '', // Volledige tree uitsluiten
                'include' => '', // Alleen categorieŽn op ID tonen
                'hierarchical' => 1, // HiŽrarchische weergave
                'title_li' => __( '' ), // Titel boven menu
                'show_option_none' => __('Geen categorieen'), // Indien er geen categorieŽn zijn
                'number' => null, // Maximale aantal categorieŽn
                'depth' => 0, // Aantal niveau's
                'taxonomy' => 'category', // Taxonomie
                'walker' => ''
        );
        echo '<ul class="cat-menu">';
                wp_list_categories($params);
        echo '</ul>';
?>


Alternatieve code

<?php
        $args = array(
                'orderby' => 'name',
                'show_count' => 0,
                'pad_counts' => 0,
                'hierarchical' => 1,
        );
        echo '<ul class="cat-menu">';
                $output = get_categories($args);
                foreach($output as $cat):
                        echo '<li><a href="' . get_term_link($cat) . '">' . $cat->name . '</a></li>';
                endforeach;
        echo '</ul>';
?>