Skip to content

WordPress 3.0 Menu :: Updated

Sinds WordPress 3.0 is de manier waarop menu’s kunnen worden gecreëerd en kunnen worden georganiseerd enorm verbeterd. De WordPress navigatie is omgezet in een widget met menu items die je door drag en drop kan organiseren zoals je dat wil onder weergave > Menu’s. In dit artikel zullen we uitleggen hoe je een WordPress thema kan laten samenwerken met zo’n nieuw WP 3.0 menu.

Nieuwe menu functionaliteit toevoegen aan thema

Het eerst wat gedaan moet worden om de menu nieuwe stijl te laden onder weergave > Menu’s is het toevoegen van de nieuwe functionaliteit aan je bestaande WordPress thema. Dit doe je door de volgende code aan je functions.php toe te voegen


//Voeg dynamische menu's toe
//Code ontwikkeld door Jasper Frumau http://doede.net

if (function_exists('wp_nav_menu')) {
add_action( 'init', 'registreer_mijn_menus' );
function registreer_mijn_menus() {
register_nav_menus(array(
 'primaire-menu' => __( 'Primaire Menu' ),
 'secondaire-menu' => __( 'Secondaire Menu' ),
 'tertiaire-menu' => __( 'Tertiaire Menu' )
 )

);
}
}

Uitleg

  • Check of de functie wp_nav_menu bestaat door middel van de if exists
  • initiate = laadt de actie register_my_menus
  • functie register_mijn_menus laadt vervolgens een array met de dynamische menu’s

Als alles goed is gedaan zal je thema nu dynamische menu’s ondersteunen.

Nieuwe menu laden in template

Nu moeten we code toevoegen aan het thema – locatie waar het menu primaire menu oftewel de navigatie – wordt geladen. In de meeste thema’s is dat in header.php van het thema waarop je site draait. Vervang je oude navigatie code – zoals bijvoorbeeld:


<div id="navigation">
<ul class="nav">
<li><a href="<?php echo get_settings('home'); ?>" title="Home">Home</a></li>
 <?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>
 <?php wp_list_categories('depth=1&sort_column=menu_order&title_li='); ?>
 </ul>
</div>

met:


<?php if ( has_nav_menu( 'primaire-menu' ) ) { ?>
 <?php wp_nav_menu(array('theme_location' => 'primaire-menu', 'container_id' => 'navigation', 'menu_class' => 'nav')); ?>
 <?php }
 else { ?>
 <div id="navigation"><ul>
 <?php wp_list_pages( 'title_li=' ); ?>
 </ul></div><!--end navigation-->

 <?php    } ?>

Uitleg

Deze code zal het dynamische menu Primaire Menu laden als deze is aangemaakt onder weergave > menu’s. Dankzij dit stukje code kun je nu namelijk een menu toewijzen aan een themalocatie die je met deze code in de header.php laat laden.

Terugval optie op oudere wp_pages_menu

Mocht er geen dynamisch menu  primaire menu aangemaakt zijn dan zal een lijst van pagina’s weergegeven worden. Dit wordt gedaan met dit deel van bovenstaande code:


else { ?>
 <div id="navigation"><ul>
 <?php wp_list_pages( 'title_li=' ); ?>
 </ul></div><!--end navigation-->

 <?php    } ?>

Dit noemt men ook wel een fallback menu

Styling

De container_d en menu_class kunnen van naam veranderd worden. Deze zijn noodzakelijk om je nieuwe WordPress 3.0 menu te stijlen in je style.css. Probeer ervoor te zorgen dat de stijlmethode van het oude menu zoveel mogelijk aangehouden kan worden, want dat scheelt tijd.

Eindresultaat voorbeeld backend

Met deze code kun je nu een menu onder weergave > menu’s aanmaken en plaaatsen op de themalocatie Primaire Menu. Hier twee screenshots hoe dat er in de Dashboard onder weergave > menu’s eruit kan zien:

Extra: Homeknop laden in fallback menu

UPDATED: Wil je de homepage knop ook toevoegen als menu item voor je fallback menu op basis van wp_pages_menu()  EN je WP 3.0 menu, dan kun je de volgende code gebruiken die voor het nieuwe standaard theme “Twentyten” van WordPress wordt gebruikt:


function twentyten_page_menu_args( $args ) {
 $args['show_home'] = true;
 return $args;
}
add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

Dit kan bijvoorbeeld handig zijn als je alleen pagina’s toont in je menu, maar je ook graag een link naar de homepagina wilt hebben.

Bronnen

http://www.1stwebdesigner.com/wordpress/how-to-add-backwards-compatible-wordpress-3-0-features-to-your-theme/
Uitleg over WordPress 3.0 menu + ondersteuning voor menu’s op de oude wijze

http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus
Uitleg over werking WordPress 3.0 menu door een van de beste WordPress developers die je kunt vinden

http://www.nkuttler.de/2010/06/08/wp_nav_menu-wordpress-3-0/
Nog een WP 3.0 menu uitleg door een WordPress developer die vaak op IRC #wordpress te vinden is

http://www.wpbeginner.com/wp-themes/how-to-show-home-page-link-in-wordpress-3-0-menu/
Uitleg over toevoegen knop naar home in je menu widgetoverzicht onder weergave > menu’s

Disclaimer

Zoals altijd kun je deze code op eigen risico gebruiken en mochten er fouten in zitten dan horen wij die graag, maar hiervoor kunnen we geen verantwoording nemen.

Gepubliceerd door Doede op dinsdag 7 september 2010

Van → Wordpress

4 Reacties
  1. Very nice tutorial on making an extra menu item. I use the default TwentyTen WordPress 3.0.1 theme which has containers for menu by default. This tutorial looks good for older themes without as many containers for items on sidebar, and footer.

  2. Very nice tutorial,
    Thanks for sharing.

    I use the theme Numarket and fuction.php and the header.php look very unclear to me.
    Can you explain me where exactly I should add you code in.

    In de header.php i have a lot of Div’s
    <div id="hederwrap"

    which one should I replace with your code?..

    Ik zie nu pas dat je Nederlands bent.. hahahahaha sorry voor de Engelse taal…

    Gr. José

Trackbacks & Pingbacks

  1. How to Make Wordpress 3.0 Custom Sidebar Navigation Menu | Computer Software Hardware Repair Web Design Help Blog

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*