如何将用户定义的 CSS 类添加到我的自定义小部件呈现代码中？答案

【问题标题】：How to add user defined CSS class to my custom widget rendering code?如何将用户定义的 CSS 类添加到我的自定义小部件呈现代码中？
【发布时间】：2017-03-13 02:30:04
【问题描述】：

我通过扩展WP_Widget 创建了一个小部件，效果很好。还向管理员添加了一个名为 className 的字段。

但是我找不到任何可以将自定义 CSS 类名称注入到小部件的呈现代码中的钩子（我当然希望该类应用于整个小部件）。

// Before widget.
echo $before_widget;

if ($title)
{ echo $before_title.$title.$after_title; }

    if ($headline)
    { echo '<h4>'.$headline.'</h4>'; }

    if ($description)
    { echo '<p>'.$description.'</p>'; }

    if ($className)
    { echo '<p>Class name: '.$className.'</p>'; }

// After widget.
echo $after_widget;

HTML 输出如下：

<aside id="eppz-page-widget-2" class="widget widget_eppz-page-widget">
    <h3 class="widget-title">Title</h3>
    <h4>Headline!</h4>
    <p>Some description that can be added optionally to the widget.</p>
    <p>Class name: featuredPageWidget</p>
</aside>

现在我真的想在所有应用于aside 的类之后附加className 变量。我可以用一些字符串函数来做到这一点，但我真的希望有一个简单的 WordPressy 方法来做到这一点。

【问题讨论】：

标签： html css wordpress plugins widget

【解决方案1】：

因为我真的无意覆盖默认模板 before_widget 注入，所以我想出了一个古怪的解决方法，它仍然不涉及模板实现。

我使用占位符作为类名，然后在渲染代码中简单地替换它。

设置一个只读类属性：

function getClassNamePlaceHolder()
{ return 'EPPZPageWidgetClassNamePlaceHolder'; }

设置为构建时小部件的类名：

$widgetOptions = array
(
    'classname' => $this->getClassNamePlaceHolder(),
    'description' => 'Lovely widget description for humans.'
);

在渲染时用小部件参数替换占位符：

function widget($args, $instance)
{

    // ...

    // Exchange default class name to custom.
    $classNamePlaceHolder = $this->getClassNamePlaceHolder();
    $before_widget_withCustomClassName = str_replace($classNamePlaceHolder, $customClassName, $before_widget);

    // Before widget.
    echo $before_widget_withCustomClassName;

还有。无论实际的 before_widget 实现是什么，这种方法都可以安全地为整个小部件设置自定义类名（参见下面的 MyCustomClassName）：

<aside id="eppz-page-widget-2" class="widget MyCustomClassName">
    <h3 class="widget-title">eppz! page widget</h3>
    <h4>Headline!</h4>
    <p>Some content goes here.</p>
</aside>

【讨论】：

【解决方案2】：

首先在构造函数中添加一个自定义占位符类

<?php
public function __construct() {
   $widget_ops  = array(
      'classname'                   =>; 'widget_text eaa __eaa__', //__eaa__ is my placeholder css class
      'description'                 =>; __( 'AdSense ads, arbitrary text, HTML or JS.','eaa' ),
      'customize_selective_refresh' =>; true,
   );
   $control_ops = array( 'width' =>; 400, 'height' =>; 350 );
   parent::__construct( 'eaa', __( 'Easy AdSense Ads &amp; Scripts', 'eaa' ), $widget_ops, $control_ops );
}
?>

然后根据像这样的小部件选项将其替换为您选择的类/es

<?php
if ( $instance['no_padding'] ) {
   $args['before_widget'] = str_replace( '__eaa__', 'eaa-clean', $args['before_widget'] );
}
?>

我们使用占位符来限制 before_widget 的 html 可能影响我们的插件功能的方式

您可以在以下位置找到带有示例的详细信息 http://satishgandham.com/2017/03/adding-dynamic-classes-custom-wordpress-widgets/

【讨论】：