web-dev-qa-db-de.com

So fügen Sie <ul> und childs <li> des Sidebar-Widgets eine Klasse hinzu - Wordpress

Hinweis: Bitte beachten Sie, dass ich dieses Thema zum Weiterverkaufen erstelle, also brauche ich ein bisschen gute Möglichkeit, es hinzuzufügen.

So registriere ich die Menüs in meiner rechten Seitenleiste:

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>'
        ));
 }

Und das ist die Ausgabe:

<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>

und so wird die Ausgabe benötigt, um die Listenstile von Twitter Bootstrap verwenden zu können:

<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>

Ich schätze alle Vorschläge. Vielen Dank.

output

Source code

1
Sasa1234

Wenn Sie sich nur mit einer Website befassen und kein Thema erstellen, ist es möglicherweise die einfachste Lösung, dies "manuell" zu tun. Es ist nicht die "professionellste" Art, es zu tun, aber es funktioniert.

Nehmen Sie ein Text-Widget oder das neue HTML-Widget, fügen Sie Ihren Code ein, zum Beispiel:

<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>

und nehmen Sie die Änderungen (an den Links) manuell vor.

1
IXN

Wenn Sie Ihr Thema verkaufen möchten, wie in Ihren Kommentaren angegeben, und drastische Änderungen an einem Navigationsmenü vornehmen möchten, das in einem Widget verwendet werden soll, bin ich mir nicht sicher, ob auch das Erstellen eines Walkers die Lösung sein könnte.

Stattdessen schlage ich vor, ein Widget oder einen Shortcode für die weitere Verwendung zu verwenden. Hier ist ein einfaches Beispiel mit 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;
}

Jetzt können Sie auf Ihr Menü zugreifen, indem Sie [my-nav-menu location='menu-location] im Inhalt oder in einem beliebigen Text-Widget verwenden.

Stellen Sie sicher, dass Sie zuerst die Unterstützung für die Verwendung von Shortcodes in Text-Widgets aktivieren, indem Sie Folgendes verwenden:

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