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

Question

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

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

// 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 方法来做到这一点。

Answer 1

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

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

设置只读类属性:

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>