Question

我一直在努力解决这个问题。我如何设置我的小部件标题的样式，除了我的小部件标题之外还有这条水平线而不是它。像这样：enter image description here

Answer 1

打开您当前激活的主题。然后找到注册的侧边栏功能。 register_sidebar函数中有属性before_title等。

您可以更改在那里分配的课程。但是，更改将适用于同一窗口小部件区域中的所有窗口小部件（这可能是一个好处或问题）。

示例：

register_sidebar( array(
        'name'          => __( 'Sidebar', 'twentyseventeen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyseventeen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

Answer 2

如果您可以访问WordPress中的CSS编辑器，那么只需使用伪类:after在小部件标题旁边添加下划线。

您可以在此处查看工作演示：https://jsfiddle.net/j835Lbg2/3/

＆＃13;

/* just an example widget */
.widget {
  height: 300px;
  width: 500px;
  background: #ffffff;
  border: 1px solid #cccccc;
  margin-bottom: 30px;
}

.widget-title {
  position: relative;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: rgba(0,0,0,0.7);
  padding: 12px 12px;
}

/* widget title text */
.widget-title > .widget_name {
  position: relative;
  background: #ffffff;
  padding: 5px 15px 5px 0px;
  z-index: 1;
}

/* widget underline beside the title */
.widget_dash:after {
  content: "";
  position: absolute;
  display: block;
  left: 20px;
  right: 20px;
  top: 25px;
  border-bottom: 1px solid #cccccc;
  z-index: 0;
}

＆＃13;

<div class="widget">
  <div class="widget-title">
    <span class="widget_name">WIDGET TITLE</span>
    <span class="widget_dash"></span>
  </div>
</div>

<div class="widget">
  <div class="widget-title">
    <span class="widget_name">ANOTHER WIDGET</span>
    <span class="widget_dash"></span>
  </div>
</div>

＆＃13;

请告诉我这是否有帮助：）

Answer 3

使用您的开发人员检查工具（firebug，chrome dev tools），找到小部件和它的选择器。
然后只需将您的自定义样式应用于您找到（即它的标题）的相关选择器。
如果它不有一个唯一的选择器，或者一个选择器你想要风格的特定区域。浏览您的主题文件并找到小部件php代码或它包含标记区域，添加一个直接在那里的独特选择器，你可以然后你的风格偏好。
或者，如果你真的必须;你可以用jQuery或者添加选择器 javaScript然后设置它的样式。即 $('widget').addClass('customWidget');

希望这有帮助！

造型wordpress小部件标题

3 个答案: