Question

这是我注册侧栏的方式：

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>

我想在class标记中添加<ul>属性像这样：

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

如何将class属性添加到<ul>？

Answer 1

简单但不那么好，而且更多的是使用Javascript / jQuery。

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

我真的不喜欢使用javascript，但它在这种情况下完成了工作。

Answer 2

我设法这样做了：

的sidebar.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 -->

我使用输出缓冲将侧边栏小部件保存到变量中，然后使用字符串替换来查找所有<ul>标记，并将其替换为带有类的<ul>标记。

Answer 3

少用：

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

它对我有用;）

Answer 4

我玩弄它，这对我有用。

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

Answer 5

您要查找的参数是'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>'
));

这应该有效。

Answer 6

有一个本机解决方案，可以使用sprintf将各个窗口小部件名称作为className添加到其容器中：

%1$s表示id和%2$s小部件className

由于这个可能的选择器（jQuery / CSS），不需要将className直接添加到<ul>：

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

另请注意，已回答的jQuery代码会定位所有侧边栏中的所有小部件，即使它们不是导航列表（如果您唯一使用的小部件是导航，那么可能没问题。）

before_widget - 在每个小部件之前放置的HTML（默认值：<li id="%1$s" class="widget %2$s">）注意：使用sprintf进行变量替换

Reference on wordpress.org

的functions.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>

我发布在这个旧帖子中，因为它是搜索字词的最高搜索结果＆＃34; register_sidebar widgetname＆＃34; - 所以我觉得这里有一个完整的答案很好。

Answer 7

使用自定义WordPress小部件:(不需要jQuery或任何插件!!）

我的步骤将通过类别小部件进行，您可以对任何小部件执行相同操作。

注册小部件（在functions.php中）


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

注册自定义窗口小部件（在functions.php中）


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

从/ wp-includes / widgets /复制文件class-wp-widget-categories.php并将其放在主题文件旁边/ wp-content / themes / -your theme- / widgets /
在functions.php中包含此文件

require_once('widgets/class-wp-widget-categories.php');
在“widgets / class-wp-widget-categories.php”文件中将类名从“WP_Widget_Categories”重命名为“WP_Widget_Categories_Custom”。

class WP_Widget_Categories_Custom extends WP_Widget {
在“widgets / class-wp-widget-categories.php”文件中搜索 ul 标记并将其编辑为

<ul class="nav nav-list">

就是这样;）

Answer 8

这将替换所有开头的ul标签和li标签：

<?php 

  if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('news-sidebar');
    $news_sidebar = ob_get_contents();
    ob_end_clean();
    $news_sidebar_corrected_ul_and_li = str_replace('<ul>', '<ul class="list-group mb-20">', str_replace('<li>', '<li class="list-group-item rounded-0">', $news_sidebar));
    echo $news_sidebar_corrected_ul_and_li;
  } 

?>

为避免与意外替换发生冲突，我建议您不要在内部使用ul和li “ before_widget”和“ before_title”，例如：

register_sidebar( array(
  'name'          => __( 'news-sidebar'),
  'id'            => 'news-sidebar',
  'description'   => '',
  'class'         => 'card-body border-bottom px-0 px-md-20',
  'before_widget' => '<div id="%1$s" class="w-100 widget-%2$s">',
  'after_widget'  => '</div>' ,
  'before_title'  => '<div class="card-header p-10 p-md-20 h5 bg-light">',
  'after_title'   => '</div>'  
)) ;

Answer 9

我正在努力解决这个问题，我发现你可以使用这个插件：http://wordpress.org/plugins/wp-bootstrap-navmenu

Answer 10

您可以使用名为widget-css-class的插件 WordPress directory

之后，您将能够将自定义css类添加到您需要的任何小部件中。

Wordpress如何将类添加到侧栏小部件的<ul> </ul>

10 个答案: