使用 CSS 创建 Widget WP

Question

我必须创建一个插件，但我遇到了 Widget Class 和 CSS 的问题。我创建的代码是好的，但我没有结果。 CSS 不起作用，我在扩展 Widget 类上使用 constuct 方法，正如我在 Wordpress 网站上的教程中找到的那样，我不明白错误。

• mysql 5
• php 5
• 阿帕奇 2

我的代码：

class Foo_Widget extends WP_Widget {
  /**
 * Register widget with WordPress.
 */
function __construct() {
    parent::__construct(
        'foo_widget', // Base ID
        esc_html__( 'Widget Title', 'text_domain' ), // Name
        array( 'description' => esc_html__( 'A Foo Widget', 'text_domain' ), ) // Args
    );

}

/**
 * Front-end display of widget.
 *
 * @see WP_Widget::widget()
 *
 * @param array $args     Widget arguments.
 * @param array $instance Saved values from database.
 */
public function widget( $args, $instance ) {
    echo $args['before_widget'];
    if ( ! empty( $instance['title'] ) ) {
        echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
    }
    echo esc_html__( 'Hello, World!', 'text_domain' );
    echo "Ciao a tutti"; ?>
    <p class="a">This is a paragraph, shown in the Times New Roman font.</p>
    <p class="b">This is a paragraph, shown in the Arial font</p>

    <?php 
         echo $args['after_widget'];
    }

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
    ?>
    <p>
    <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label> 
    <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
    </p>
    <?php 
}

/**
 * Sanitize widget form values as they are saved.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';

    return $instance;
}
    public function register_plugin_styles() {
    wp_register_style( 'prova-widget-3', plugins_url( 'stile.css' ) );
    wp_enqueue_style( 'prova-widget-3' );
}
} // class Foo_Widget
function register_foo_widget() {
   register_widget( 'Foo_Widget' );
}
add_action( 'widgets_init', 'register_foo_widget' );

Answer 1

很正常，你已经定义了调查Style的函数，但是你没有调用它。

如果您想在管理空间中插入 CSS，请使用钩子：admin_print_styles。

如果是网站（前端），请使用钩子：wp_enqueue_scripts。

您必须以这种方式调用将样式表插入构造函数的函数：

行政区：

function __construct() {
    parent::__construct(
            'foo_widget', // Base ID
            esc_html__('Widget Title', 'text_domain'), // Name
            array('description' => esc_html__('A Foo Widget', 'text_domain'),) // Args
    );

    // Register stylesheets for Admin Area
    add_action('admin_print_styles', array( $this , 'register_plugin_styles'));
}

前端：

    function __construct() {
    parent::__construct(
            'foo_widget', // Base ID
            esc_html__('Widget Title', 'text_domain'), // Name
            array('description' => esc_html__('A Foo Widget', 'text_domain'),) // Args
    );
    // Register stylesheets for the frontend
    add_action('wp_enqueue_scripts' , array( $this , 'register_plugin_styles') );
}