web-dev-qa-db-fra.com

Comment ajouter une classe à <ul> et à l'enfant <li> du widget de la barre latérale - Wordpress

Note: S'il vous plaît noter que je crée ce thème pour le revendre, donc j'ai besoin de peu de bon moyen de l'ajouter.

Voici comment enregistrer les menus dans la barre latérale droite:

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

Et voici le résultat:

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

et voici comment la sortie a-t-elle besoin pour pouvoir utiliser les styles de style de liste Twitter Bootstrap:

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

J'apprécie toutes les suggestions. Merci.

output

Source code

menuswidgetscsstwitter-bootstrap
1
Sasa1234

Si vous avez affaire à un seul site et ne créez pas de thème, la solution la plus simple consiste peut-être à le faire "manuellement". Ce n'est pas la manière la plus "professionnelle" de le faire, mais ça marche.

Prenez un widget texte ou le nouveau widget html, collez votre code, par exemple:

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

et apportez les modifications (aux liens) manuellement.

1
IXN

Si vous envisagez de vendre votre thème comme indiqué dans vos commentaires et si vous souhaitez apporter des modifications radicales à un menu de navigation à utiliser dans un widget, je ne suis pas sûr que la création d'un marcheur puisse être la solution.

Au lieu de cela, je suggère d'utiliser un widget ou un shortcode pour une utilisation ultérieure. Voici un exemple de base, en utilisant 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;
}

Vous pouvez maintenant accéder à votre menu en utilisant [my-nav-menu location='menu-location] dans le contenu ou dans n’importe quel widget de texte.

Assurez-vous d'activer la prise en charge de l'utilisation de codes courts dans les widgets de texte, à l'aide de:

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