wordpress - Wordpress 如何添加类到
侧边栏小部件

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

score 4 · Accepted Answer

使用 Javascript/jQuery 很简单，但不是很好，更像是 hack。

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

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

score 3 · Accepted Answer

我设法做到了这一点：

边栏.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>类的标签。

score 1 · Accepted Answer

1

少用：

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

它对我有用；）

于 2015-03-24T15:51:50.797 回答

score 1 · Accepted Answer

我玩过它，这对我有用。

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

score 0 · Accepted Answer

您正在寻找的参数是'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>'
));

那应该行得通。

score 0 · Accepted Answer

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

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

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

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

另请注意，已回答的 jQuery 代码针对所有侧边栏中的所有小部件，即使它们不是导航列表（如果您唯一使用的小部件是导航，则可以这样做）。

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”的热门搜索结果 - 所以我认为在这里有一个完整的答案很好。

score 0 · Accepted Answer

使用自定义 WordPress 小部件：（不需要 jQuery 或任何插件！！）

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

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

    add_action('widgets_init', 'register_widgets');
    函数 register_widgets($id) {
      register_sidebar（数组（
        '名称' => '侧边栏',
        'id' => '侧边栏'
      ));
    }

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

    add_action('widgets_init', 'register_custom_widget');
    功能 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">

就这些 ;）

score 0 · Accepted Answer

这将替换所有打开的 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;
  } 

?>

为了避免与不需要的替换发生冲突，我建议不要在“before_widget”和“before_title”中使用 ul 和 li，例如：

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

score -1 · Accepted Answer

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

score -2 · Accepted Answer

您可以使用一个名为 widget-css-class WordPress 目录的插件

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

wordpress - Wordpress 如何添加类到侧边栏小部件

10 回答 10

Related

Reference

wordpress - Wordpress 如何添加类到
侧边栏小部件