在导航菜单项之间添加分隔符或分隔符

时间:2012-01-08 作者:TheDeadMedic

有人知道如何允许用户在某些导航菜单项之间插入分隔符或分隔符吗?

谷歌似乎只为第一个/最后一个孩子选择器提供了新的CSS提示,但我追求的是类似Firefox书签的东西。

UPDATE:

到目前为止,我非常感谢大家的意见,但我会详细说明,以避免进一步的混淆;

我写了很多插件;主题,并对所有基础知识有很好的理解(连接到WordPress、实现扩展功能、处理和保存数据等)

  • 我特别想听听关于扩展nav menus admin UI, 这将允许用户在菜单项之间插入“分隔符”(只不过是标记),以及如何最好地存储该数据&;然后在输出时使用wp_nav_menu

    此外,我认为它实际上可能对其他人有用,如果我继续,我会发布自己的反馈/结果。

  • 3 个回复
    最合适的回答,由SO网友:fuxia 整理而成

    使用custom walker. 延伸start_el() 要打印<li class="menu_separator"><hr></li> 如果菜单标题只是\'-\'.

    功能。php

    function wpse38241_setup_menu()
    {
        register_nav_menu( \'main-menu\', \'Main Menu\' );
    }
    add_action( \'after_setup_theme\', \'wpse38241_setup_menu\' );
    
    
    /**
     * Replaces items with \'-\' as title with li class="menu_separator"
     *
     * @author Thomas Scholz (toscho)
     */
    class Wpse38241_Separator_Walker extends Walker_Nav_Menu
    {
        /**
         * Start the element output.
         *
         * @param  string $output Passed by reference. Used to append additional content.
         * @param  object $item   Menu item data object.
         * @param  int $depth     Depth of menu item. May be used for padding.
         * @param  array $args    Additional strings.
         * @return void
         */
        public function start_el( &$output, $item, $depth, $args )
        {
            if ( \'-\' === $item->title )
            {
                // you may remove the <hr> here and use plain CSS.
                $output .= \'<li class="menu_separator"><hr>\';
            }
            else
            {
                parent::start_el( &$output, $item, $depth, $args );
            }
        }
    }
    
    创建菜单现在创建常用菜单。添加具有的项目\'-\' 作为标题:

    enter image description hereFull size image

    调用模板中的菜单

    wp_nav_menu(
        array (
            \'menu\'            => \'main-menu\',
            \'container\'       => FALSE,
            \'container_id\'    => FALSE,
            \'menu_class\'      => \'\',
            \'menu_id\'         => FALSE,
            \'walker\'          => new Wpse38241_Separator_Walker
        )
    );
    
    输出(为可读性重新格式化)

    <ul id="menu-separated" class="">
      <li id="menu-item-92" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-92">
        <a href="https://wordpress.stackexchange.com/questions/38241/nav-menu-separators">Nav menu separators?</a>
      </li>
      <li class="menu_separator">
        <hr>
      </li>
      <li id="menu-item-93" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-93">
        <a href="https://wordpress.stackexchange.com/">wordpress.stackexchange.com</a>
      </li>
    </ul>
    
    即使没有JavaScript和CSS,这也可以工作。

    SO网友:mor7ifer

    你必须有两层,一个PHP脚本来存储用户的偏好并在重新进入时重新创建它,另一个JS脚本允许他们放置它。如何放置取决于您,我可能会使用拖放界面。我的脚本如下所示:

    add_action( \'wp_enqueue_scripts\', \'my_divider_enqueue\' );
    add_action( \'wp_ajax_insert-divider\', \'ajax_insert_divider\' );
    
    // enqueue the script
    function my_divider_enqueue() {
        // register the script elsewhere, preferably in an init hook
        wp_enqueue_script( \'divider-js\' );
        $passed_vars = array(
            \'ajaxurl\' => admin_url(\'admin-ajax.php\' ),
            \'nonce\'   => wp_create_nonce( \'divider-ajax-nonce\' )
        );
        if( is_user_logged_in() )
            $passed_vars[\'prev\'] => get_user_meta( $current_user->ID, \'divider_location\', true ); // you shouldn\'t need to declare $current_user, but you may
        wp_localize_script( \'divider-js\', \'divider\', $passed_vars );
    }
    // handle the js
    function ajax_insert_divider() {
        if( !wp_verify_nonce( $_POST[\'divider_nonce\'], \'divider-ajax-nonce\' ) ) {
            header("HTTP/1.0 401 Internal Server Error", true, 401);
            exit;
        } else {
            //may not be necessary, you can test this
            global $current_user;
            get_currentuserinfo();
    
            //update user meta
            update_user_meta( $current_user->ID, \'divider_location\', $_POST[\'divider_location\'] );
        }
        exit;
    }
    
    文档:wp_register_script(), wp_enqueue_script(), wp_localize_script(), wp_create_nonce(), is_user_logged_in(), get_user_meta(), wp_verify_nonce(), get_currentuserinfo(), update_user_meta()

    然后,在用户更改时处理一些javascript/jQuery(这是伪代码,因为实现是需要决定的)

    jQuery(document).ready(function(){
        //when the user releases the divider in the desired location, do some stuff
        jQuery(\'.divider\').mouseup(function() {
            if( divider_is_valid() ) {
                place_divider();
            } else {
                reset_divider();
            }
        });
        //using divider.prev, place the desired dividers
    });
    function reset_divider() {
        //put the divider back where it started, either in a holder for unused dividers or where it was in the menu previously
    }
    function place_divider() {
        //place divider where it\'s going
        jQuery.post(
            divider.ajaxurl,
            {
                action        : \'insert-divider\',
                divider_nonce : divider.nonce,
                location      : //some representation of the location that you can call later
            },
            function( response ) {
                //execute any actions you need to do on response
            }
        );
    }
    
    这个脚本完全没有经过测试(我直接把它写进了答案编辑器lol),但它应该会让你朝着正确的方向前进。

    SO网友:Asko

    我会使用jQuery的.before().after() 功能,除非你反对它。

    结束

    相关推荐

    在wp_menus3中应用我自己的css类?

    具有以下功能:class my_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat(\"\\t\", $depth) : \'\';