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

时间:2015-11-26 03:53:30

标签: php wordpress

通常,如果要将HTML代码添加到Wordpress的侧边栏区域,可以创建文本小部件。但这不适用于我的情况,让我向你解释一下:

我想将图片(带有链接)放置到侧边栏,侧边栏不会在带有白色背景的小部件框中结束。相反,图像应直接放在小部件区域。

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

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

2 个答案:

答案 0 :(得分: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");') );
}

答案 1 :(得分:0)

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

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