Wordpress Как добавить класс в виджет боковой панели

вот как я регистрирую боковую панель:

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

и это вывод HTML WordPress:

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

Я хочу добавить до <ul> тег.
Вот так:

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

как добавить до <ul>?

6
wordpress

9 ответов

простой, но не очень приятный и более Хак, использует Javascript/jQuery.

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

Мне очень не нравится использовать javascript, но в этом случае он выполняет свою работу.

4

мне удалось сделать это так:

боковая панель.на 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 -->

я использовал буферизацию вывода для сохранения виджетов боковой панели в переменную, а затем использовал строку replace, чтобы найти все <ul> теги и заменить их <ul> тег с классом.

3

Использовать Менее:

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

это сработало для меня;)

1

Я играл с ним, и это работает для меня.

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

параметр, который вы ищете является 'class' => ''

для вас:

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

это должно сработать.

0

существует собственное решение для добавления отдельных имен виджетов в качестве className с помощью sprintf к их контейнеру:

%1$s - это идентификатор и %2$s виджеты className

нет необходимости добавлять имя класса непосредственно в <ul> из-за этого возможного селектора (jQuery / CSS):

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

также обратите внимание, что ответный код jQuery предназначен для всех виджетов на всех боковых панелях, даже если они не являются nav-list (что может быть хорошо, если ваш единственный используемый виджет-это nav).

before_widget-HTML для размещения перед каждым виджетом(по умолчанию:<li id="%1$s" class="widget %2$s">) Примечание: использует sprintf для подстановки переменных

ссылка на wordpress.org

функции.на 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>'
));

вывод для виджета навигации по умолчанию:

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

я публикую в этом старом потоке, потому что это был лучший результат поиска для поискового термина " register_sidebar widgetname" - поэтому я подумал, что полный ответ здесь хорош.

0

используйте пользовательский виджет WordPress: (нет необходимости в jQuery или любом плагине!!)

мои шаги будут проходить с виджетом категорий, и вы можете сделать то же самое для любого виджета.

  1. виджет регистрация (в функциях.в PHP)

    add_action('widgets_init', 'register_widgets');
    function register_widgets($id) {
      register_sidebar(array(
        'name' => 'Sidebar',
        'id'  => 'sidebar'
      ));
    }
  1. зарегистрировать пользовательский виджет (в функции.в PHP)

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

  1. копировать класс файла-wp-виджет-категории.php из /wp-includes / widgets / и поместите его рядом с файлами тем / wp-content / themes / - ваша тема - / виджеты/

  2. включить этот файл в функции.в PHP

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

  3. переименовать имя класса из "WP_Widget_Categories" в "WP_Widget_Categories_Custom" в " виджеты/класс-wp-виджет-категории.PHP-файл.

    class WP_Widget_Categories_Custom extends WP_Widget {

  4. Поиск о ul тег в " виджеты / класс-wp-виджет-категории.php " файл и редактировать его как

    <ul class="nav nav-list">

вот и все ;)

0

Я боролся с этой проблемой, и я обнаружил, что вы можете использовать этот плагин:http://wordpress.org/plugins/wp-bootstrap-navmenu

-1

вы можете использовать плагин, который называется widget-css-class каталог WordPress

после этого вы сможете добавить пользовательский класс css к любым виджетам, которые вам нужны.

-2