公告:

WordPress中自定义导航菜单

作者:star0312 / 时间：12年前 (2013/06/21) / 分类:未命名 / 阅读:1965 / 评论:0
WordPress中自定义导航菜单

任务：已知菜单样式，把该菜单样式搬移到WordPress的主题中




比如，我需要使用WordPress制作一个网站，类似damienhirst.com。首先看一下该网站的样子：


WordPress中自定义导航菜单

 

本文的目标，就是制作该网站的导航菜单部分，并把它放到我们自定义的WordPress主题中，供该主题使用。


  • 我们不能直接把该网站的HTML，CSS代码写到WordPress的主题文件中。这样会导致无法使用Wp的函数来获取菜单对象。
  • 我们应该在后台创建菜单，然后在主题的header.php文件中使用wp内置函数来生成菜单的HTML代码

-----------------------------------------华丽分割------------------------------------


Step1.为主题注册菜单


  • 进入后台，选择Appearance->Theme


WordPress中自定义导航菜单


可以看到，WordPress的默认主题Twenty Ten 是支持Menus的。（OPTIONS后面有Menus）


而如果你自定义一个主题，那我的例子来说：


WordPress中自定义导航菜单


可以看到，我的主题名字叫 Damien，它和其他两个WP已有主题twentyten和twentyeleven位于同一目录下。我这个主题里面文件很少，几个文件夹全部是图片和Javascript文件，与wp主题相关的主要有：

  • index.php
  • style.css (注意文件头部的描述信息，否则WP后台无法识别加载)
  • header.php(本例只演示头部，其他footer.php sidebar.php未添加)
  • functions.php（空的，里面无代码）


上述文件中 index.php代码如下:
[php] view plaincopyprint?
  1. <?php   
  2. get_header();  
  3. ?>  


style.css的头部需要加上描述信息，我的是：
[css] view plaincopyprint?
  1. /* 
  2. Theme Name: Damien 
  3. Theme URI: http://wordpress.org/extend/themes/twentyeleven 
  4. Author: David 
  5. Author URI: http://wordpress.org/ 
  6. Description: NULL 
  7. Version: 1.0 
  8. License: GNU General Public License v2 or later 
  9. License URI: http://www.gnu.org/licenses/gpl-2.0.html 
  10. Tags: Artist 
  11. Text Domain: Damien 
  12. */  


此时，保存后，再次进入后台，我们就可以在主题页面看到主题 Damien了。

我们在后台激活主题：Damien，可以看到如下图：
WordPress中自定义导航菜单

可以看到，在Options中，我们看不到Menus条目。说明该主题目前还不支持导航菜单。。

为什么呢？
因为我们要为该主题注册菜单，否则无法使用。


具体方法是：
在functions.php中写如下代码：

[php] view plaincopyprint?
  1. <?php  
  2. //Register Nav Menus   
  3. register_nav_menus(array('header-menu' => __( 'Damien-Menu' ),));  
  4. ?>  

此时我们保存文件，再次进入后台查看：

WordPress中自定义导航菜单

可以看到，现在支持菜单啦！！WordPress中自定义导航菜单
我们点击Menus，在里面创建一个菜单。

-----------------------------------------华丽分割------------------------------------
Step2.添加菜单项


在本文第一张图中，damienhirst网站的菜单有以下选项：Home，News...等，我们把它完善到新建的菜单里即可，如下图所示：

WordPress中自定义导航菜单

OK，添加完成后，下面就是写主题的PHP代码了。


-----------------------------------------华丽分割------------------------------------

Step3.编写PHP代码显示菜单

       要学习如何写WordPress中的代码，我们可以拿默认的主题作为参考。首先，进入WordPress3.4的默认主题，我们只关注导航菜单部分。

WordPress中自定义导航菜单


可以看到，该菜单有两项，分别是Home ，Sample Page。我们看一下它的源码：

[html] view plaincopyprint?
  1. <div class="menu">  
  2. <ul>  
  3. <li class="current_page_item">  
  4. <a title="Home" href="http://localhost/BE/wp/">Home</a>  
  5. </li>  
  6. <li class="page_item page-item-2">  
  7. <a href="http://localhost/BE/wp/?page_id=2">Sample Page</a>  
  8. </li>  
  9. </ul>  
  10. </div>  

发现它是一个<div>标签里面嵌套一个<ul>。

我们再看一下该主题的 header.php文件，其实和该Menu相关的代码就下面这一句话：
[php] view plaincopyprint?
  1. <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>  

可见，wp_nav_menu()函数完成了一切工作。

我们，查看该函数的源码：
[php] view plaincopyprint?
  1. function wp_nav_menu( $args = array() ) {  
  2.     static $menu_id_slugs = array();  
  3.   
  4.     $defaults = array(  'menu' => '',   
  5.                                 'container' => 'div',   
  6.                                 'container_class' => '',   
  7.                                 'container_id' => '',   
  8.                                 'menu_class' =>   
  9.                                 'menu',   
  10.                                 'menu_id' => '',  
  11.                                 'echo' => true,   
  12.                                 'fallback_cb' => 'wp_page_menu',   
  13.                                 'before' => '',   
  14.                                 'after' => '',   
  15.                                 'link_before' => '',   
  16.                                 'link_after' => '',   
  17.                                 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',  
  18.                                 'depth' => 0,   
  19.                                 'walker' => '',   
  20.                                 'theme_location' => '' );  
  21.   
  22.     $args = wp_parse_args( $args, $defaults );  
  23.     $args = apply_filters( 'wp_nav_menu_args', $args );  
  24.     $args = (object) $args;  
  25.   
  26.     // Get the nav menu based on the requested menu   
  27.     $menu = wp_get_nav_menu_object( $args->menu );  
  28.   
  29.     // Get the nav menu based on the theme_location   
  30.     if ( ! $menu && $args->theme_location && ( $locations = get_nav_menu_locations() ) && isset( $locations[ $args->theme_location ] ) )  
  31.         $menu = wp_get_nav_menu_object( $locations[ $args->theme_location ] );  
  32.   
  33.     // get the first menu that has items if we still can't find a menu   
  34.     if ( ! $menu && !$args->theme_location ) {  
  35.         $menus = wp_get_nav_menus();  
  36.         foreach ( $menus as $menu_maybe ) {  
  37.             if ( $menu_items = wp_get_nav_menu_items($menu_maybe->term_id) ) {  
  38.                 $menu = $menu_maybe;  
  39.                 break;  
  40.             }  
  41.         }  
  42.     }  
  43.   
  44.     // If the menu exists, get its items.   
  45.     if ( $menu && ! is_wp_error($menu) && !isset($menu_items) )  
  46.         $menu_items = wp_get_nav_menu_items( $menu->term_id );  
  47.   
  48.     // If no menu was found or if the menu has no items and no location was requested, call the fallback_cb if it exists   
  49.     if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) )  
  50.         && $args->fallback_cb && is_callable( $args->fallback_cb ) )  
  51.             return call_user_func( $args->fallback_cb, (array) $args );  
  52.   
  53.     // If no fallback function was specified and the menu doesn't exists, bail.   
  54.     if ( !$menu || is_wp_error($menu) )  
  55.         return false;  
  56.   
  57.     $nav_menu = $items = '';  
  58.   
  59.     $show_container = false;  
  60.     if ( $args->container ) {  
  61.         $allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );  
  62.         if ( in_array( $args->container, $allowed_tags ) ) {  
  63.             $show_container = true;  
  64.             $class = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '"' : ' class="menu-'. $menu->slug .'-container"';  
  65.             $id = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : '';  
  66.             $nav_menu .= '<'. $args->container . $id . $class . '>';  
  67.         }  
  68.     }  
  69.   
  70.     // Set up the $menu_item variables   
  71.     _wp_menu_item_classes_by_context( $menu_items );  
  72.   
  73.     $sorted_menu_items = array();  
  74.     foreach ( (array) $menu_items as $key => $menu_item )  
  75.         $sorted_menu_items[$menu_item->menu_order] = $menu_item;  
  76.   
  77.     unset($menu_items);  
  78.   
  79.     $sorted_menu_items = apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args );  
  80.   
  81.     $items .= walk_nav_menu_tree( $sorted_menu_items, $args->depth, $args );  
  82.     unset($sorted_menu_items);  
  83.   
  84.     // Attributes   
  85.     if ( ! empty( $args->menu_id ) ) {  
  86.         $wrap_id = $args->menu_id;  
  87.     } else {  
  88.         $wrap_id = 'menu-' . $menu->slug;  
  89.         while ( in_array( $wrap_id, $menu_id_slugs ) ) {  
  90.             if ( preg_match( '#-(\d+)$#', $wrap_id, $matches ) )  
  91.                 $wrap_id = preg_replace('#-(\d+)$#', '-' . ++$matches[1], $wrap_id );  
  92.             else  
  93.                 $wrap_id = $wrap_id . '-1';  
  94.         }  
  95.     }  
  96.     $menu_id_slugs[] = $wrap_id;  
  97.   
  98.     $wrap_class = $args->menu_class ? $args->menu_class : '';  
  99.   
  100.     // Allow plugins to hook into the menu to add their own <li>'s   
  101.     $items = apply_filters( 'wp_nav_menu_items', $items, $args );  
  102.     $items = apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args );  
  103.   
  104.     $nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items );  
  105.     unset( $items );  
  106.   
  107.     if ( $show_container )  
  108.         $nav_menu .= '</' . $args->container . '>';  
  109.   
  110.     $nav_menu = apply_filters( 'wp_nav_menu', $nav_menu, $args );  
  111.   
  112.     if ( $args->echo )  
  113.         echo $nav_menu;  
  114.     else  
  115.         return $nav_menu;  
  116. }  

发现，该函数可以附带很多参数，因此，我们可以设置div ,ul ,li 标签的class ,id 以及其他很多参数。

下面，贴一下每个参数的说明：

[php] view plaincopyprint?
  1. <?php wp_nav_menu(  
  2. array(  
  3. 'theme_location'  => '' //指定显示的导航名，如果没有设置，则显示第一个   
  4. 'menu'            => 'header-menu',  
  5. 'container'       => 'nav', //最外层容器标签名   
  6. 'container_class' => 'primary', //最外层容器class名   
  7. 'container_id'    => '',//最外层容器id值   
  8. 'menu_class'      => 'sf-menu', //ul标签class   
  9. 'menu_id'         => 'topnav',//ul标签id   
  10. 'echo'            => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false   
  11. 'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用   
  12. 'before'          => '',//显示在导航a标签之前   
  13. 'after'           => '',//显示在导航a标签之后   
  14. 'link_before'     => '',//显示在导航链接名之后   
  15. 'link_after'      => '',//显示在导航链接名之前   
  16. 'items_wrap'      => '<ul id="%1$s">%3$s</ul>',  
  17. 'depth'           => 0,////显示的菜单层数，默认0，0是显示所有层   
  18. 'walker'          => ''// //调用一个对象定义显示导航菜单 )); ?>  


最后的最后，回到我们的目标样式：
WordPress中自定义导航菜单

它的HTML代码如下：
[html] view plaincopyprint?
  1. <div class="grid_28 prefix_1 ">  
  2.     <ul class="nav">  
  3.         <li class="selected">  
  4.             <a href="/home">Home</a>/   
  5.         </li>  
  6.         <li>  
  7.             <a href="/news">News</a>/   
  8.         </li>  
  9.         <li>  
  10.             <a href="/artworks">Artworks</a>/   
  11.         </li>  
  12.         <li>  
  13.             <a href="/exhibitions">Exhibitions</a>/   
  14.         </li>  
  15.         <li>  
  16.             <a href="/projects">Projects</a>/  
  17.         </li>  
  18.         <li>  
  19.             <a href="/biography">Biography</a>/   
  20.         </li>  
  21.         <li>  
  22.             <a href="/audio-video">Audio & Video</a>/   
  23.         </li>  
  24.         <li>  
  25.             <a href="/texts">Texts</a>/   
  26.         </li>  
  27.         <li>  
  28.             <a href="/live-feed">Live Feed</a>/   
  29.         </li>  
  30.         <li>  
  31.             <a href="http://hirst.othercriteria.com/">Shop</a>  
  32.         </li>  
  33.     </ul>  
  34. </div>  


然后，我们对应一下上面给出的参数表，发现我们需要设置4个参数：
  • 1.'theme-location'=>'header-menu'  (见functions.php)
  • 2.'container-class'=>'grid_28 prefix_1'（容器div类型）
  • 3.'menu-class'=>'nav'(ul的样式类型）
  • 4.'after'=>'/'(<a>标签后面的 / 符号)

OK，最后是PHP代码：
[php] view plaincopyprint?
  1. <?php wp_nav_menu( array( 'theme_location'=> 'header-menu',  
  2.             'container_class' => 'grid_28 prefix_1',                         'menu_class'     =>'nav',                                    'after'     =>'/'    
  3.             )  
  4.         );   
  5. ?>  

完成后的样子：
WordPress中自定义导航菜单



-----------------------------------------华丽分割------------------------------------

本来详细介绍了如何在WordPress中使用自定义菜单。感谢您的阅读。




  • 我的QQ二维码
  • QQ群
  • 我的微信二维码
  • 微信公众号

版权属于：文心博客     本文作者：star0312

原文地址： http://www.stararly.com/%E6%9C%AA%E5%91%BD%E5%90%8D/208.html

版权声明：转载时必须以链接形式注明原始出处及本声明。

« 上一篇
WordPress网站多语言化插件WPML试用 下一篇 »
WordPress 3.0 之 wp_nav_menu 详解

没有评论，留下你的印记，证明你来过。


发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

访问最多文章

评论最多文章

最新评论

Copyright © 文心博客  版权所有  网站地图 
鲁ICP备09092366号Copyright StarArly.com. All Rights Reserved.
本站已经运行 0 天
导航