Question

我通过扩展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>

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

Answer 1

由于我真的无意覆盖默认模板before_widget注入，我提出了一个奇怪的解决方法，仍然没有触及模板实现。

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

设置只读类属性：

function getClassNamePlaceHolder()
{ return 'EPPZPageWidgetClassNamePlaceHolder'; }

Set是构造时窗口小部件的类名：

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

将占位符替换为render：

中的widget参数

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>

Answer 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 );
}
?>

然后根据您选择的小部件选项（例如

）将其替换为您选择的类

<?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/

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

2 个答案: