ナビゲーションメニューにサイドバーを追加しますか？

Question

ナビゲーションメニューにサイドバーを追加することは可能ですか？

私はページを追加するように、Appearance> Menusでサイドバーを追加できるようにしたい。

追加のサイドバーを作成する方法があるので、これは問題にはなりません（必要に応じて、専用のサイドバーをいくつか登録することもできます）。

基本的に私は余分なプラグインを使用せずに、メニューにウィジェットを表示する方法が必要です。

そのようなことは可能ですか？ Walker_Nav_Menuを拡張する必要がありますか？

編集

私のmenu_walker.phpはこのようになります：

// Allow HTML descriptions in WordPress Menu
remove_filter( 'nav_menu_description', 'strip_tags' );

function my_plugin_wp_setup_nav_menu_item( $menu_item ) {
    if ( isset( $menu_item->post_type ) && 'nav_menu_item' == $menu_item->post_type) {
        $menu_item->description = apply_filters( 'nav_menu_description', $menu_item->post_content );
    }

    return $menu_item;
}

add_filter( 'wp_setup_nav_menu_item', 'my_plugin_wp_setup_nav_menu_item' );

// Menu without icons
class theme_walker_nav_menu extends Walker_Nav_Menu {

    public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
        $id = $this->db_fields['id'];

        if(isset($children[$el->$id])){
            $el->classes[] = 'has_children';
        }

        parent::display_element($el, $children, $max_depth, $depth, $args, $output);
    }

    // add classes to ul sub-menus
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // depth dependent classes
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'navi',
            ( $display_depth ==1 ? 'first' : '' ),
            ( $display_depth >=2 ? 'navi' : '' ),
            'menu-depth-' . $display_depth
            );
        $class_names = implode( ' ', $classes );

        // build html
        $output .= "\n" . $indent . '<ul class="' . esc_attr($class_names) . '">' . "\n";
    }

    // add main/sub classes to li's and links
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

        static $is_first;
        $is_first++;
        // depth dependent classes
        $depth_classes = array(
            ( $depth == 0 ? 'main-menu-item' : '' ),
            ( $depth >=2 ? 'navi' : '' ),
            ( $is_first ==1 ? 'menu-first' : '' ),
            'menu-item-depth-' . $depth
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );
        // passed classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        $is_mega_menu = (strpos($class_names,'mega') !== false) ? true : false;
        $use_desc = (strpos($class_names,'use_desc') !== false) ? true : false;
        $no_title = (strpos($class_names,'no_title') !== false) ? true : false;

        if(!$is_mega_menu){
            $class_names .= ' normal_menu_item';
        }

        // build html
        $output .= $indent . '<li id="nav-menu-item-'. esc_attr($item->ID) . '" class="' . esc_attr($depth_class_names) . ' ' . esc_attr($class_names) . '">';
        // link attributes
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="' . (($item->url[0] == "#" && !is_front_page()) ? home_url() : '') . esc_attr($item->url) .'"' : '';

        $attributes .= ' class="menu-link '.((strpos($item->url,'#') === false) ? '' : 'scroll').' ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

        $html_output = ($use_desc) ? '<div class="description_menu_item">'.wp_kses($item->description, allowed_tags()).'</div>' : '';
        $item_output = (!$no_title) ? '<a ' . $attributes . '><span>' . apply_filters( 'the_title', $item->title, $item->ID ) . '</span></a>'.$html_output : $html_output;
        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ).(($is_mega_menu)?'<div class="sf-mega"><div class="sf-mega-inner clearfix">':'');
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        $is_mega_menu = (strpos($class_names,'mega') !== false) ? true : false;

        $output .= (($is_mega_menu)?'</div></div>':'') . "</li>\n";
    }

}

また、megamenuの列数を選択するためのドロップダウンメニューを追加するjqueryコードもあります。

jQuery(document).ready(function($) {
    "use strict";

    var $depth_zero = $('#menu-to-edit').find('.menu-item-depth-0');
    var $depth_one = $('#menu-to-edit').find('.menu-item-depth-1');

    var i = 0;
    $depth_zero.find('.field-description').each(function(){
        i++;
        $(this).before('<p class="field-additional description-wide"><label for="add_mega'+i+'">Menu Type<br><select id="add_mega'+i+'" class="additional_input add_mega"><option value="">Default Standard Menu</option><option value="mega1">Mega Menu - Single Column</option><option value="mega2">Mega Menu - 2 Columns</option><option value="mega3">Mega Menu - 3 Columns</option><option value="mega4">Mega Menu - 4 Columns</option><option value="mega5">Mega Menu - 5 Columns</option><option value="mega6">Mega Menu - 6 Columns</option><option value="mega7">Mega Menu - 7 Columns</option></select></p>');
        var classes = $(this).siblings('.field-css-classes').find('input').val();
        var current_c;
        for (var c = 1; c <= 7; c++) {
            current_c = 'mega'+c;
            if(classes.indexOf(current_c) >= 0) {
                $(this).siblings('.field-additional').find('select').val(current_c);
            }
        }
    });

    $depth_one.find('.field-description').each(function(){
        i++;
        var use_desc_state = ($(this).siblings('.field-css-classes').find('input').val().indexOf('use_desc') >= 0) ? ' checked' : '';
        var no_title_state = ($(this).siblings('.field-css-classes').find('input').val().indexOf('no_title') >= 0) ? ' checked' : '';
        $(this).before('<p class="field-additional description-wide"><br><label for="use_desc'+i+'"><input type="checkbox" id="use_desc'+i+'" class="additional_input use_desc" value="use_desc"'+use_desc_state+'>Use description field as HTML content<br></label><label for="no_title'+i+'"><input type="checkbox" id="no_title'+i+'" class="additional_input no_title" value="no_title"'+no_title_state+'>Hide title</label></p>');
    });

    $('.additional_input, .edit-menu-item-classes').change(function() {
        var $parent_item = $(this).closest('.menu-item');
        define_classes($parent_item);
    });

    function define_classes($item){
        var $class_field = $item.find('.field-css-classes input');
        var current_class_value = $class_field.val().replace('use_desc','').replace('no_title','').replace('mega1','').replace('mega2','').replace('mega3','').replace('mega4','').replace('mega5','').replace('mega6','').replace('mega7','').replace('  ',' ');

        var new_class_value = [];

        new_class_value.Push(current_class_value.trim());

        if($item.find('.add_mega').length > 0 && $item.find('.add_mega').val() !== ''){
            new_class_value.Push($item.find('.add_mega').val());
        }

        if($item.find('.use_desc').length > 0 && $item.find('.use_desc').is(':checked')){
            new_class_value.Push('use_desc');
        }

        if($item.find('.no_title').length > 0 && $item.find('.no_title').is(':checked')){
            new_class_value.Push('no_title');
        }

        $class_field.val(new_class_value.join(' ').trim());

    }


});

私のmemgamenuを拡張するために this code を追加してみましたが、何も起こりません。

ここにサイドバーを表示できない場合は、説明フィールドにショートコードを追加するだけでよいのでしょうか。どのようにこれをしますか？

説明フィールドにショートコードを入力しても、何も起こりません。どんな助けも大歓迎です。

編集

別の方法を見つけました。すべてのサイドバーを一覧表示するメタボックスをMenusページに追加してから、サイドバーの内容をdescreptionフィールドに配置します（すべてを削除しないように、descriptionフィールドのwp_kses()関数を無効にするか編集する必要があります）。 ）関数は次のようになります。

<?php

if ( !class_exists('sidebars_custom_menu')) {
    class sidebars_custom_menu {
        public function add_nav_menu_meta_boxes() {
            add_meta_box(
                'sidebar_menu_add',
                esc_html__('Add Sidebar', 'theme'),
                array( $this, 'nav_menu_link'),
                'nav-menus',
                'side',
                'low'
            );
        }

        public function nav_menu_link() {?>
            <div id="posttype-sidebars" class="posttypediv">
                <div id="tabs-panel-sidebars" class="tabs-panel tabs-panel-active">
                    <ul id ="sidebars-checklist" class="categorychecklist form-no-clear">
                    <?php $i = 0; ?>
                    <?php foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar ) { ?>
                    <?php
                        $i++;
                        ob_start();
                        dynamic_sidebar($sidebar['id']);
                        $sidebar_html = ob_get_contents();
                        ob_end_clean();
                    ?>
                        <li>
                            <label class="menu-item-title">
                                <input type="checkbox" class="menu-item-checkbox" name="menu-item[-<?php echo $i; ?>][menu-item-object-id]" value="<?php echo $sidebar['id']; ?>"> <?php echo ucwords( $sidebar['name'] ); ?>
                            </label>
                            <input type="hidden" class="menu-item-type" name="menu-item[-<?php echo $i; ?>][menu-item-type]" value="custom">
                            <input type="hidden" class="menu-item-title" name="menu-item[-<?php echo $i; ?>][menu-item-title]" value="<?php echo ucwords( $sidebar['name'] ); ?>">
                            <input type="hidden" class="menu-item-url" name="menu-item[-<?php echo $i; ?>][menu-item-url]" value="">
                            <input type="hidden" class="menu-item-classes" name="menu-item[-<?php echo $i; ?>][menu-item-classes]" value="menu_sidebar use_desc">
                            <input type="hidden" class="menu-item-description" name="menu-item[-<?php echo $i; ?>][menu-item-description]" value="<?php echo htmlentities($sidebar_html); ?>">
                        </li>
                    <?php } ?>
                    </ul>
                </div>
                <p class="button-controls">
                    <span class="list-controls">
                        <a href="/wordpress/wp-admin/nav-menus.php?page-tab=all&amp;selectall=1#posttype-page" class="select-all"><?php esc_html_e('Select All', 'theme'); ?></a>
                    </span>
                    <span class="add-to-menu">
                        <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_html_e('Add to Menu', 'theme');?>" name="add-post-type-menu-item" id="submit-posttype-sidebars">
                        <span class="spinner"></span>
                    </span>
                </p>
            </div>
        <?php }
    }
}

$custom_nav = new sidebars_custom_menu;

add_action('admin_init', array($custom_nav, 'add_nav_menu_meta_boxes'));

here からの元のコード

Answer 1

私が望んだ解決策はこのようになります：

<?php


// Allow HTML descriptions in WordPress Menu
remove_filter( 'nav_menu_description', 'strip_tags' );

function my_plugin_wp_setup_nav_menu_item( $menu_item ) {
    if ( isset( $menu_item->post_type ) && 'nav_menu_item' == $menu_item->post_type) {
        $menu_item->description = apply_filters( 'nav_menu_description', $menu_item->post_content );
    }

    return $menu_item;
}

add_filter( 'wp_setup_nav_menu_item', 'my_plugin_wp_setup_nav_menu_item' );

// Menu
class my_theme_walker_nav_menu extends Walker_Nav_Menu {

    public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
        $id = $this->db_fields['id'];

        if(isset($children[$el->$id])){
            $el->classes[] = 'has_children';
        }

        parent::display_element($el, $children, $max_depth, $depth, $args, $output);
    }

    // add classes to ul sub-menus
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // depth dependent classes
        $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            'navi',
            ( $display_depth == 1 ? 'first' : '' ),
            ( $display_depth >= 2 ? 'navi' : '' ),
            'menu-depth-' . $display_depth
            );
        $class_names = implode( ' ', $classes );

        // build html
        $output .= "\n" . $indent . '<ul class="' . esc_attr($class_names) . '">' . "\n";
    }

    // add main/sub classes to li's and links
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

        static $is_first;
        $is_first++;
        // depth dependent classes
        $depth_classes = array(
            ( $depth == 0 ? 'main-menu-item' : '' ),
            ( $depth >= 2 ? 'navi' : '' ),
            ( $is_first == 1 ? 'menu-first' : '' ),
            'menu-item-depth-' . $depth
        );
        $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );
        // passed classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        $is_mega_menu = (strpos($class_names,'mega') !== false) ? true : false;
        $use_desc = (strpos($class_names,'use_desc') !== false) ? true : false;
        $is_sidebar = (strpos($class_names,'menu_sidebar') !== false) ? true : false;
        $no_title = (strpos($class_names,'no_title') !== false) ? true : false;

        if(!$is_mega_menu){
            $class_names .= ' normal_menu_item';
        }

        // build html
        $output .= $indent . '<li id="nav-menu-item-'. esc_attr($item->ID) . '" class="' . esc_attr($depth_class_names) . ' ' . esc_attr($class_names) . '">';
        // link attributes
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="' . (($item->url[0] == "#" && !is_front_page()) ? home_url() : '') . esc_attr($item->url) .'"' : '';

        $attributes .= ' class="menu-link '.((strpos($item->url,'#') === false) ? '' : 'scroll').' ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

        $html_output = ($use_desc) ? '<div class="description_menu_item">'.wp_kses($item->description, allowed_tags()).'</div>' : '';



        if ($is_sidebar) {
            ob_start();
            dynamic_sidebar($item->description);
            $sidebar_html = ob_get_clean();

            $sidebar_output = '<div class="sidebar_menu_item">'.$sidebar_html.'</div>';

            $item_output = $sidebar_output;

        } else{
            $item_output = (!$no_title) ? '<a ' . $attributes . '><span>' . apply_filters( 'the_title', $item->title, $item->ID ) . '</span></a>'. $html_output : $html_output;
        }


        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ).(($is_mega_menu)?'<div class="sf-mega"><div class="sf-mega-inner clearfix">':'');
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        $is_mega_menu = (strpos($class_names,'mega') !== false) ? true : false;

        $output .= (($is_mega_menu)?'</div></div>':'') . "</li>\n";
    }

}

//Sidebars in Menu

if ( !class_exists('sidebars_custom_menu')) {
    class sidebars_custom_menu {
        public function add_nav_menu_meta_boxes() {
            add_meta_box(
                'sidebar_menu_add',
                esc_html__('Add Sidebar', 'theme'),
                array( $this, 'nav_menu_link'),
                'nav-menus',
                'side',
                'low'
            );
        }

        public function nav_menu_link() {?>
            <div id="posttype-sidebars" class="posttypediv">
                <div id="tabs-panel-sidebars" class="tabs-panel tabs-panel-active">
                    <ul id ="sidebars-checklist" class="categorychecklist form-no-clear">
                        <?php
                        $i = -1;
                        foreach ( $GLOBALS['wp_registered_sidebars'] as $sidebar ) {
                            ob_start();
                            dynamic_sidebar($sidebar['id']);
                            $sidebar_html = ob_get_clean();
                            ?>
                            <li>
                                <label class="menu-item-title">
                                    <input type="checkbox" class="menu-item-checkbox" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-object-id]" value="<?php echo $sidebar['id']; ?>"> <?php echo ucwords( $sidebar['name'] ); ?>
                                </label>
                                <input type="hidden" class="menu-item-type" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-type]" value="custom">
                                <input type="hidden" class="menu-item-attr-title" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-attr-title]" value="<?php echo ucwords( $sidebar['name'] ); ?>">
                                <input type="hidden" class="menu-item-title" name="menu-item[<?php echo esc_attr( $i ); ?>][menu-item-title]" value="&nbsp;" />
                                <input type="hidden" class="menu-item-url" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-url]" value="">
                                <input type="hidden" class="menu-item-classes" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-classes]" value="menu_sidebar">
                                <input type="hidden" class="menu-item-description" name="menu-item[<?php echo esc_attr($i); ?>][menu-item-description]" value="<?php echo $sidebar['id']; ?>">
                            </li>
                            <?php
                            $i --;
                        }
                        ?>
                    </ul>
                </div>
                <p class="button-controls">
                    <span class="list-controls">
                        <a href="<?php echo admin_url( 'nav-menus.php?page-tab=all&amp;selectall=1#posttype-sidebars' ); ?>" class="select-all"><?php esc_html_e('Select All', 'theme'); ?></a>
                    </span>
                    <span class="add-to-menu">
                        <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_html_e('Add to Menu', 'theme');?>" name="add-post-type-menu-item" id="submit-posttype-sidebars">
                        <span class="spinner"></span>
                    </span>
                </p>
            </div>
        <?php }
    }
}

$custom_nav = new sidebars_custom_menu;

add_action('admin_init', array($custom_nav, 'add_nav_menu_meta_boxes'));

これにより、メニューに追加できるサイドバーのリストが作成され、必要に応じてウィジェットのスタイル設定に使用できるクラスmenu_sidebarが表示されます。

これが同じことを望んでいる人に役立つことを願っています。

Answer 2

それはあなたの質問に対してあなたを助けることができるかもしれません：

基本的に私は余分なプラグインを使用せずに、メニューにウィジェットを表示する方法が必要です。

テーマのfunctions.phpにコードを配置します

<?php

register_sidebar( array(
    'name' => 'Page Menu',
    'id' => 'page-menu',
    'before_widget' => '<div id="page-nav">',
    'after_widget' => '</div>',
    'before_title' => false,
    'after_title' => false
) );

add_filter( 'wp_page_menu', 'my_page_menu' );

function my_page_menu( $menu ) {
    dynamic_sidebar( 'page-menu' );
}

?>

参考のために ウィジェットをメニューに配置する そして

http://justintadlock.com/archives/2009/04/15/how-to-widgetize-your-page-menu-in-wordpress