致力于打造一个优秀的建站资源共享学习平台!

爱站窝四川

wordpress进阶教程(三十九):wordpress输出bootstrap的菜单结构

爱站窝查看全部>>

人气386

现在自适应(即常说的响应式设计,一个网页在PC/平板/手机上显示不同的布局)用的越来越多,然而,对于大多数人来说,写一个自适应的网页并非易事,于是有了

Bootstrap是twitter的工程师利用业余时间制作推出的一个开源的用于前端开发的工具包,即里面已经写好了 js,你只需要引入它的js和css,然后根据要求,给网页的div添加相应的class属性,即可制作一个响应式网页。

说实话,bootstrap很方便,作者使用过一次,但是有一个缺点,那就是你需要引入bootstrap的框架的css和js,然而这个css里面,有很多代码都是你用不到的,这样就会产生很多冗余代码,而去除css的冗余代码绝对是个体力活,所以作者用过一次就不用了。

将bootstrap应用到wordpress上也很简单,唯一可能有困难的就是菜单,因为bootstrap的菜单有他自己的结构和属性,最新的菜单演示页面如下:http://v3.bootcss.com/examples/navbar/

wordpress进阶教程(三十九):wordpress输出bootstrap的菜单结构

查看网页源文件,可以看到菜单的结构大概是这样

  1. <ul class="nav navbar-nav">
  2.   <li class="active"><a href="#">Link</a></li>
  3.   <li class="dropdown">
  4.     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  5.     <ul class="dropdown-menu">
  6.       <li><a href="#">Action</a></li>
  7.       <li><a href="#">Another action</a></li>
  8.     </ul>
  9.   </li>
  10. </ul>

要在wordpress上实现这个菜单结构看似不难,其实,里面Dropdown后面的<b class="caret"></b>对应网页中下拉菜单的那个到三角形,以及二级菜单的ul标签的class属性。除非你把菜单写死,否则使用wp_nav_menu函数是无法输出这两个内容的。

那要怎么办呢?
wordpress的wp_nav_menu函数参数如下:

  1. <?php
  2. $defaults = array(
  3.     'theme_location'  => '',
  4.     'menu'            => '',
  5.     'container'       => 'div',
  6.     'container_class' => '',
  7.     'container_id'    => '',
  8.     'menu_class'      => 'menu',
  9.     'menu_id'         => '',
  10.     'echo'            => true,
  11.     'fallback_cb'     => 'wp_page_menu',
  12.     'before'          => '',
  13.     'after'           => '',
  14.     'link_before'     => '',
  15.     'link_after'      => '',
  16.     'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  17.     'depth'           => 0,
  18.     'walker'          => ''
  19. );
  20. wp_nav_menu( $defaults );
  21. ?>

其中的walker参数是关键。

更改你的主题菜单输出函数wp_nav_menu的walker参数:

  1. <?php
  2. wp_nav_menu( array(
  3. 'theme_location' => 'ashu_menu',
  4. 'depth' => 2,
  5. 'container' => false,
  6. 'menu_class' => 'nav navbar-nav',
  7. 'fallback_cb' => 'wp_page_menu',
  8. //添加或更改walker参数
  9. 'walker' => new wp_bootstrap_navwalker())
  10. );
  11. ?>

上面代码中walker参数的值是一个类,所以接下来你需要添加这个类,在你的主题functions.php文件中添加下面代码:

或者https://github.com/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php

  1. <?php
  2. /**
  3.  * Class Name: wp_bootstrap_navwalker
  4.  * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
  5.  * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
  6.  * Version: 2.0.4
  7.  * Author: Edward McIntyre - @twittem
  8.  * License: GPL-2.0+
  9.  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
  10.  */
  11. class wp_bootstrap_navwalker extends Walker_Nav_Menu {
  12.     /**
  13.      * @see Walker::start_lvl()
  14.      * @since 3.0.0
  15.      *
  16.      * @param string $output Passed by reference. Used to append additional content.
  17.      * @param int $depth Depth of page. Used for padding.
  18.      */
  19.     public function start_lvl( &$output, $depth = 0, $args = array() ) {
  20.         $indent = str_repeat( "/t", $depth );
  21.         $output .= "/n$indent<ul role=/"menu/" class=/" dropdown-menu/">/n";
  22.     }
  23.     /**
  24.      * @see Walker::start_el()
  25.      * @since 3.0.0
  26.      *
  27.      * @param string $output Passed by reference. Used to append additional content.
  28.      * @param object $item Menu item data object.
  29.      * @param int $depth Depth of menu item. Used for padding.
  30.      * @param int $current_page Menu item ID.
  31.      * @param object $args
  32.      */
  33.     public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
  34.         $indent = ( $depth ) ? str_repeat( "/t", $depth ) : '';
  35.         /**
  36.          * Dividers, Headers or Disabled
  37.          * =============================
  38.          * Determine whether the item is a Divider, Header, Disabled or regular
  39.          * menu item. To prevent errors we use the strcasecmp() function to so a
  40.          * comparison that is not case sensitive. The strcasecmp() function returns
  41.          * a 0 if the strings are equal.
  42.          */
  43.         if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
  44.             $output .= $indent . '<li role="presentation" class="divider">';
  45.         } else if ( strcasecmp( $item->title, 'divider') == 0 && $depth === 1 ) {
  46.             $output .= $indent . '<li role="presentation" class="divider">';
  47.         } else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
  48.             $output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
  49.         } else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
  50.             $output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
  51.         } else {
  52.             $class_names = $value = '';
  53.             $classes = empty( $item->classes ) ? array() : (array) $item->classes;
  54.             $classes[] = 'menu-item-' . $item->ID;
  55.             $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
  56.             if ( $args->has_children )
  57.                 $class_names .= ' dropdown';
  58.             if ( in_array( 'current-menu-item', $classes ) )
  59.                 $class_names .= ' active';
  60.             $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
  61.             $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
  62.             $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  63.             $output .= $indent . '<li' . $id . $value . $class_names .'>';
  64.             $atts = array();
  65.             $atts['title']  = ! empty( $item->title )   ? $item->title  : '';
  66.             $atts['target'] = ! empty( $item->target )  ? $item->target : '';
  67.             $atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';
  68.             // If item has_children add atts to a.
  69.             if ( $args->has_children && $depth === 0 ) {
  70.                 $atts['href']           = '#';
  71.                 $atts['data-toggle']    = 'dropdown';
  72.                 $atts['class']          = 'dropdown-toggle';
  73.                 $atts['aria-haspopup']  = 'true';
  74.             } else {
  75.                 $atts['href'] = ! empty( $item->url ) ? $item->url : '';
  76.             }
  77.             $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
  78.             $attributes = '';
  79.             foreach ( $atts as $attr => $value ) {
  80.                 if ( ! empty( $value ) ) {
  81.                     $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
  82.                     $attributes .= ' ' . $attr . '="' . $value . '"';
  83.                 }
  84.             }
  85.             $item_output = $args->before;
  86.             /*
  87.              * Glyphicons
  88.              * ===========
  89.              * Since the the menu item is NOT a Divider or Header we check the see
  90.              * if there is a value in the attr_title property. If the attr_title
  91.              * property is NOT null we apply it as the class name for the glyphicon.
  92.              */
  93.             if ( ! empty( $item->attr_title ) )
  94.                 $item_output .= '<a'. $attributes .'><span class="glyphicon ' . esc_attr( $item->attr_title ) . '"></span>&nbsp;';
  95.             else
  96.                 $item_output .= '<a'. $attributes .'>';
  97.             $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
  98.             $item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
  99.             $item_output .= $args->after;
  100.             $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  101.         }
  102.     }
  103.     /**
  104.      * Traverse elements to create list from elements.
  105.      *
  106.      * Display one element if the element doesn't have any children otherwise,
  107.      * display the element and its children. Will only traverse up to the max
  108.      * depth and no ignore elements under that depth.
  109.      *
  110.      * This method shouldn't be called directly, use the walk() method instead.
  111.      *
  112.      * @see Walker::start_el()
  113.      * @since 2.5.0
  114.      *
  115.      * @param object $element Data object
  116.      * @param array $children_elements List of elements to continue traversing.
  117.      * @param int $max_depth Max depth to traverse.
  118.      * @param int $depth Depth of current element.
  119.      * @param array $args
  120.      * @param string $output Passed by reference. Used to append additional content.
  121.      * @return null Null on failure with no changes to parameters.
  122.      */
  123.     public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
  124.         if ( ! $element )
  125.             return;
  126.         $id_field = $this->db_fields['id'];
  127.         // Display this element.
  128.         if ( is_object( $args[0] ) )
  129.            $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
  130.         parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  131.     }
  132.     /**
  133.      * Menu Fallback
  134.      * =============
  135.      * If this function is assigned to the wp_nav_menu's fallback_cb variable
  136.      * and a manu has not been assigned to the theme location in the WordPress
  137.      * menu manager the function with display nothing to a non-logged in user,
  138.      * and will add a link to the WordPress menu manager if logged in as an admin.
  139.      *
  140.      * @param array $args passed from the wp_nav_menu function.
  141.      *
  142.      */
  143.     public static function fallback( $args ) {
  144.         if ( current_user_can( 'manage_options' ) ) {
  145.             extract( $args );
  146.             $fb_output = null;
  147.             if ( $container ) {
  148.                 $fb_output = '<' . $container;
  149.                 if ( $container_id )
  150.                     $fb_output .= ' id="' . $container_id . '"';
  151.                 if ( $container_class )
  152.                     $fb_output .= ' class="' . $container_class . '"';
  153.                 $fb_output .= '>';
  154.             }
  155.             $fb_output .= '<ul';
  156.             if ( $menu_id )
  157.                 $fb_output .= ' id="' . $menu_id . '"';
  158.             if ( $menu_class )
  159.                 $fb_output .= ' class="' . $menu_class . '"';
  160.             $fb_output .= '>';
  161.             $fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) . '">Add a menu</a></li>';
  162.             $fb_output .= '</ul>';
  163.             if ( $container )
  164.                 $fb_output .= '</' . $container . '>';
  165.             echo $fb_output;
  166.         }
  167.     }
  168. }
TA的作品
  • Mohtml 作品/设计展示自适应wordpress主题 模板兔出品
  • QYKCMS后台软件v4.1.3部分操作界面截图
  • 轻松制作一款与众不同的QYKCMS网站主题
  • 怎样设置可以让QYKCMS系统运行得更快?
  • 使用 Apache .htaccess 文件设置QYKCMS伪静态规则的方法
  • QYKCMS后台管理软件入门级操作视频教程
  • IIS下使用 web.config 文件设置QYKCMS伪静态规则的方法
  • 同一个网站空间使用QYKCMS建立多个独立站点
  • QYKCMS后台管理员密码忘记了怎么办
  • QYKCMS 网站系统4.0 标签大全
查看全部

全部评论: 0

在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录