logo标签列表

WordPress如何给侧边栏小部件的<ul>添加class属性

wordpress
6

这是我注册侧边栏的方法：

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

这是 WordPress 的 HTML 输出：

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

我想在 <ul> 标签中添加一个 class 属性。
就像这样：

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

我该如何向 <ul> 标签添加 class 属性？
你不能只修改sidebar.php吗？ - Paulo Bu
1
我使用 dynamic_sidebar 函数。 - Qing
我也遇到了同样的问题，因为我想将BS nav类添加到ul中。我编辑了/wp-includes/nav-menu-template.php文件，在wp_nav_menu()函数内修改$defaults数组...在'items_wrap'中添加所需的标记。虽然有点hacky，但这是一个开始。WP 4.7.2 - Grogenstein
11个回答
5

一种简单但不太优雅也有些不规范的方法是使用JavaScript/jQuery。

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

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

以防万一，有很多种方法可以将JavaScript添加到WordPress中。有些方法比其他方法更正确，但您可以参考（文档）[https://codex.wordpress.org/Using_Javascript]。 - toto_tico
3

我用以下方法完成了它:

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> 标签进行替换。

1
使用Less：
.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
你还应该添加一些描述性的语句来解释你的逻辑/代码。 - AADProgramming
0

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

应该可以。

嘿，你能在这里发布你的代码让我看看吗？ - Eliran Efron
我遇到了与这个问题完全相同的情况。 - toto_tico
（文档）http://codex.wordpress.org/Function_Reference/register_sidebar 中写道：class - 分配给小部件HTML的CSS类名称（默认值：空）。 - toto_tico
“class”属性会将类添加到整个侧边栏，而不是小部件的ul。您应该使用“before_widget”来放置具有类名的div，然后使用CSS转到它：.className ul{ /* properties */ } - Eliran Efron
1
好吧，它曾经可以工作... 无论如何，您仍然可以使用 before_widget 来编写具有所需类的 div 包装器，然后使用 .class_name ul{ /* css code */}。 - Eliran Efron
显示剩余5条评论
0

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

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

  1. 注册小部件（在functions.php中）
    add_action('widgets_init', 'register_widgets');
    function register_widgets($id) {
      register_sidebar(array(
        'name' => '侧边栏',
        'id'  => 'sidebar'
      ));
    }
  1. 注册自定义小部件（在functions.php中）
    add_action('widgets_init', 'register_custom_widget');
    function register_custom_widget() {
      register_widget('WP_Widget_Categories_Custom');
    }

  1. 从 /wp-includes/widgets/ 复制文件 class-wp-widget-categories.php 并将其放置在您的主题文件 /wp-content/themes/-your theme-/widgets/ 旁边。

  2. 在 functions.php 中包含此文件

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

  3. 将“widgets/class-wp-widget-categories.php”文件中的类名从“WP_Widget_Categories”重命名为“WP_Widget_Categories_Custom”。

    class WP_Widget_Categories_Custom extends WP_Widget {

  4. 在“widgets/class-wp-widget-categories.php”文件中搜索ul标签，并像这样编辑它：

    <ul class="nav nav-list">

就是这样;)

0

有一种本地解决方案，可以使用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进行变量替换

{{link1：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>

我在这个旧帖子上发帖，因为它是搜索词“register_sidebar widgetname”的顶级搜索结果 - 所以我认为在这里提供完整的答案是很好的。
0

这将替换所有开头的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>'  
)) ;
0
in function.php

     register_sidebar( array(
                "id" => "contactform",
                "name" => "lorm text",
                "description" => "lorm text",
                "before_widget" => "",
                "after_widget" => "",
            ));

in .php file

     

      <div class="feature_h">
                <?php if(is_active_sidebar( 'contactform' )) 
                    dynamic_sidebar( 'contactform' );
                ?>   
            </div>

in .js file

    jQuery( document ).ready(function() {
        jQuery('.feature_h > h2').addClass('mb-3 text-white');
    });
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接