WordPress So fügen Sie Klasse hinzu des Seitenleisten-Widgets

So registriere ich die Sidebar:

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

und dies ist die HTML-WordPress-Ausgabe:

<div class="well">
<h4>title</h4>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Ich möchte eine hinzufügen class Attribut zu <ul> Schild.
So was:

<div class="well">
    <h4>title</h4>
    <ul class="nav nav-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

Wie füge ich die hinzu class zuschreiben <ul>?

Der einfache, aber nicht so nette und eher ein Hack ist die Verwendung von Javascript/jQuery.

jQuery( document ).ready(function() {
    jQuery('.widget > ul').addClass('nav nav-list');
});

Ich mag es wirklich nicht, Javascript zu verwenden, aber in diesem Fall funktioniert es.

Ich habe es so hinbekommen:

Seitenleiste.php:

<!-- sidebar -->
<aside class="sidebar" role="complementary">

<div class="sidebar-widget">
  <?php if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('widget-area-1');
    $sidebar = ob_get_contents();
    ob_end_clean();

    $sidebar_corrected_ul = str_replace("<ul>", '<ul class="menu vertical">', $sidebar);

    echo $sidebar_corrected_ul;
    } 

  ?>
</div>

</aside>
<!-- /sidebar -->

Ich habe die Ausgabepufferung verwendet, um die Seitenleisten-Widgets in einer Variablen zu speichern, und dann die String-Ersetzung verwendet, um alle zu finden <ul> Tags und ersetzen Sie sie durch die <ul> Tag mit der Klasse.

Nicht zu gebrauchen:

.widget ul {
    .nav;
    .nav-pills;
    .nav-stacked;
}

bei mir hat es geklappt 😉

Ich habe damit herumgespielt und das funktioniert bei mir.

function create_widget( $name, $id, $class, $description ) {
    register_sidebar(array(
        'name' => __( $name ),
        'id' => $id,
        'class' => $class,
        'description' => __( $description ),
        'before_widget' => '<div ' . 'class=". $class . ">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>'
    ));

create_widget( 'widget name', 'myID', 'myClass', 'my description' );

Der gesuchte Parameter ist 'class' => ''

Für dich brauchst du:

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'class'         => 'nav-list',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

Das sollte funktionieren.

Es gibt eine native Lösung, um die einzelnen Widget-Namen als Klassennamen hinzuzufügen Sprintf zu ihrem Behälter:

%1$s repräsentiert die ID und %2$s der Klassenname des Widgets

Es ist nicht erforderlich, den Klassennamen direkt zu hinzuzufügen <ul> wegen dieses möglichen Selektors (jQuery/CSS):

.widget_nav-list > ul (.widget_nav_menu > ul)

Beachten Sie auch, dass der beantwortete jQuery-Code auf alle Widgets in allen Seitenleisten abzielt, auch wenn es sich nicht um eine Navigationsliste handelt (was in Ordnung sein kann, wenn Ihr einziges verwendetes Widget ein Navigationselement ist).

before_widget – HTML, das vor jedem Widget platziert wird (Standard: <li id="%1$s" class="widget %2$s">) Hinweis: verwendet sprintf für die Variablenersetzung

Referenz auf wordpress.org

Funktionen.php:

register_sidebar(array(
  'name' => 'First_sidebar',
  'id' => 'sidebar-1',
  'before_widget' => '<div id="%1$s" class="well %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h4>',
  'after_title' => '</h4>'
));

Ausgabe für ein Standard-Navigations-Widget:

<div id="nav_menu-1" class="well widget_nav_menu">
  <h4>title</h4>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Ich poste in diesem alten Thread, weil es ein Top-Suchergebnis für den Suchbegriff “register_sidebar widgetname” war – also dachte ich, dass es gut ist, hier eine vollständige Antwort zu haben.

Verwenden Sie ein benutzerdefiniertes WordPress-Widget: (Keine Notwendigkeit für jQuery oder ein Plugin!!)

Meine Schritte werden mit dem Kategorien-Widget durchlaufen, und Sie können dasselbe für jedes Widget tun.

1. Widget registrieren (in functions.php)

    add_action('widgets_init', 'register_widgets');
    function register_widgets($id) {
      register_sidebar(array(
        'name' => 'Sidebar',
        'id'  => 'sidebar'
      ));
    }

2. Benutzerdefiniertes Widget registrieren (in functions.php)

    add_action('widgets_init', 'register_custom_widget');
    function register_custom_widget() {
      register_widget('WP_Widget_Categories_Custom');
    }

3. Kopiere die Datei class-wp-widget-categories.php aus /wp-includes/widgets/ und lege sie neben deine Theme-Dateien /wp-content/themes/-your theme-/widgets/

4. Fügen Sie diese Datei in die functions.php ein

   require_once('widgets/class-wp-widget-categories.php');

5. Benennen Sie den Klassennamen in der Datei „widgets/class-wp-widget-categories.php“ von „WP_Widget_Categories“ in „WP_Widget_Categories_Custom“ um.

   class WP_Widget_Categories_Custom extends WP_Widget {

6. Suche nach Ul Tag in der Datei “widgets/class-wp-widget-categories.php” und bearbeiten Sie es wie folgt

   <ul class="nav nav-list">

Das ist alles 😉