Wordpress：在不使用文本小部件的情况下将 html 代码添加到小部件区域

Posted 2023-02-19

【中文标题】Wordpress：在不使用文本小部件的情况下将 html 代码添加到小部件区域

【英文标题】：Wordpress: Add html code to widget area without using a text widget

【发布时间】：2016-02-29 01:21:47

【问题描述】：

通常，如果您想将 html 代码添加到 Wordpress 的侧边栏区域，您可以创建一个文本小部件。但这在我的情况下不起作用，让我向您解释一下：

我想将图像（带有链接）放置到侧边栏，它最终不会出现在具有白色背景的小部件框中。相反，图像应直接放置在小部件区域中。

目前，我的 wordpress 主题默认将白色背景应用于 css 类 .widget 的所有小部件。据我所知，每个小部件都分配有这个类。

有没有办法在我的主题文件夹的functions.php中使用钩子注入html代码？或者也许使用 sidebar.php 文件？

【问题讨论】：

嗨，宅男，我的互联网无法在电脑上运行，因此将为您提供创建满足您要求的新小部件的确切详细信息和代码。请稍等片刻，直到它恢复...

试试 PHP 代码小部件，它可能对你有用

我不这么认为。因为这也是一个小部件，所以里面会有 .widget 类 -> 小部件框

【参考方案1】：

你可以使用Widgets API

if ( !class_exists( 'MyCustomWidgetClass' ) ) 
        // Create Custom Draggable Widget  
    class MyCustomWidgetClass extends WP_Widget 
        // Register widget with WordPress.
        public function __construct() 

            parent::__construct(
                'my_custom_widget', 
                'My Custom Widget Title', 
                array( 'description' => __( 'Custom Widget Decription', 'cmk' ), ) 
            );
        
        //Front-end display of widget.
        public function widget( $args, $instance ) 
            $content = 'Bla Bla'; // Add HTML code, or call the function that contains your HTML code
            extract( $args );
            $title = apply_filters( 'widget_title', $instance['title'] );
            echo $before_widget;
            if ( ! empty( $title ) )
            echo $before_title . $title . $after_title;
            echo $content;
            echo $after_widget;
        

        //Sanitize widget form values as they are saved.
        public function update( $new_instance, $old_instance ) 
            $instance = array();
            $instance['title'] = strip_tags( $new_instance['title'] );
            return $instance;
        

        // Back-end widget form.
        public function form( $instance ) 
            if ( isset( $instance[ 'title' ] ) ) 
                $title = $instance[ 'title' ];
             else 
                $title = __( 'My Custom Widget Title', 'cmk' );
             ?>
            <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
            </p><?php 
        

     
    add_action( 'widgets_init', create_function('', 'return register_widget("MyCustomWidgetClass");') );

【讨论】：

好的起点。问题是，这也将具有 CSS 类 .widget，因此更新后的 html 代码将位于一个白框内。有没有办法从新创建的小部件的代码中删除小部件类？

你为什么不简单地将你的css应用到.widget:not('.customwidgetclass')之类的东西上，以避免属性应用到你不想有白框的小部件上，你也可以简单地删除那个类使用 jquery $('#my_widget_ID').removeClass('widget');

谢谢，这是我第一次听说 CSS3 中的 :not-selector。现在我开始工作了:)

【参考方案2】：

如果您想使用文本小部件添加图像，可以使用内联 css 更改图像的背景颜色。

<a href="http://www.w3schools.com/">
<img src="Your Image Path" style="background-color: beige;">
</a>