web-dev-qa-db-ja.com

サイドバーウィジェットの<ul>とchild <li>にクラスを追加する方法 - Wordpress

注：このテーマは再販するために作成しているので、追加するには少し良い方法が必要です。

右側のサイドバーにメニューを登録する方法は次のとおりです。

if(function_exists('register_sidebar')){
  register_sidebar(array(
            'name'=>'sidebar_default',
            'before_widget' => '<div class="panel panel-info">',
            'after_widget' => '</div>',
            'before_title' => '<div class="panel-heading"><h4>',
            'after_title' => '</h4></div>'
        ));
 }

そしてこれは出力です：

<div class="panel panel-info">
   <div class="panel-heading">
      <h4>Title</h4>
   </div>
<div class="menu-openings-menu-container">
    <ul id="menu-openings-menu" class="menu">
       <li id="" class="menu-item-object-page menu-item-381"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-382"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-383"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-384"><a href="">Software</a></li>
       <li id="" class="menu-item-object-page menu-item-385"><a href="">Software</a></li>
    </ul>
</div>
</div>

そしてこれがTwitter Bootstrapのlist-stylesスタイルを使えるようにするための出力方法です。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

私はすべての提案に感謝します。ありがとう。

output

Source code

menuswidgetscsstwitter-bootstrap
1
Sasa1234

あなたがたった1つのサイトを扱っていてテーマを作成していないのなら、おそらく最も簡単な解決策はそれを「手動で」行うことです。それを行うための最も「専門的な」方法ではありませんが、うまくいきます。

テキストウィジェットまたは新しいHTMLウィジェットを使用して、コードを貼り付けます。次に例を示します。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

手動で（リンクに）変更を加えます。

1
IXN

あなたのコメントで述べられているようにあなたのテーマを売ろうとしていて、あなたがウィジェットで使用するためにナビゲーションメニューに劇的な変更を加えたいなら、私はウォーカーを作成することさえ解決になるかどうかわからない。

代わりに、私はそれ以上の使用のためにウィジェットかショートコードを使うことを勧めます。これは wp_get_nav_menu_items() を使った基本的な例です：

add_shortcode('my-nav-menu','my_nav_menu_callback');
function my_nav_menu_callback($atts){
    $atts = shortcode_atts( 
        array(
            'location' => '',
        ), 
        $atts, 
        '' 
    ); 

    // Get the menu by its theme location
    $menu = get_term( $locations[$atts['location']], 'nav_menu' );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    // Run a loop and output the menu
    $menu_list = '<ul class="list-group">';

    foreach( $menu_items as $menu_item ) {

        if( $menu_item->menu_item_parent == 0 ) {

            $parent = $menu_item->ID;

            $menu_array = array();
            foreach( $menu_items as $submenu ) {
                if( $submenu->menu_item_parent == $parent ) {
                    $bool = true;
                    $menu_array[] ='<li class="list-group-item">'.$submenu->title.'</li>';
                }
            }
            if( $bool == true && count( $menu_array ) > 0 ) {

                $menu_list .= '<li class="list-group-item">'.$menu_item->title.'</li>';

            } else {

                $menu_list .= '<li class="list-group-item">' . $menu_item->title . '</li>';
            }

        }

    }

    $menu_list .='</ul>';

    return $menu_list;
}

これで、コンテンツまたは任意のテキストウィジェットで[my-nav-menu location='menu-location]を使用してメニューにアクセスできるようになりました。

以下を使用して、最初にテキストウィジェットでショートコードを使用するためのサポートを有効にしてください。

add_filter('widget_text','do_shortcode');
0
Jack Johansson