首页 视频课程 主题开发课程第11章、小工具 WordPress显示小工具的方法

WordPress显示小工具的方法

2023-06-11 / 319阅

在WordPress中,使用小工具可以在侧边栏、页脚、顶部等位置添加一些额外的信息或功能,如搜索框、最新文章、分类目录等。下面是使用小工具的方法和示例代码:

  1. 在WordPress后台,进入“外观”->“小工具”界面
  2. 选择一个位置,如侧边栏,在左侧列表中找到相应的小工具,将其拖放到右侧小工具区块中
  3. 配置小工具的参数,如标题、显示数量等
  4. 点击保存,预览网站中的效果

下面是一个示例代码:在侧边栏中添加“最新文章”小工具,显示最新5篇文章,不显示摘要。

<?php
/**
 * Plugin Name: Latest Posts Widget
 * Plugin URI: https://www.example.com/
 * Description: A simple widget to show the latest posts
 * Version: 1.0
 * Author: Your Name
 * Author URI: https://www.example.com/
 */
class Latest_Posts_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'latest_posts_widget',
            __('Latest Posts Widget', 'latest_posts_widget_domain'),
            array( 'description' => __( 'A widget to display the latest posts', 'latest_posts_widget_domain' ), )
        );
    }

    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        $count = ! empty( $instance['count'] ) ? $instance['count'] : 5;
        $query_args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => $count
        );
        $latest_posts = new WP_Query( $query_args );

        if ( $latest_posts->have_posts() ) {
            echo $args['before_widget'];
            if ( ! empty( $title ) ) {
                echo $args['before_title'] . $title . $args['after_title'];
            }
            echo '<ul>';
            while ( $latest_posts->have_posts() ) {
                $latest_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
            echo $args['after_widget'];
            wp_reset_postdata();
        }
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Latest Posts', 'latest_posts_widget_domain' );
        $count = ! empty( $instance['count'] ) ? $instance['count'] : 5;
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:' ); ?></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>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'count' ) ); ?>"><?php _e( 'Number of posts to display:' ); ?></label>
            <input class="tiny-text" id="<?php echo esc_attr( $this->get_field_id( 'count' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'count' ) ); ?>" type="number" min="1" step="1" value="<?php echo esc_attr( $count ); ?>">
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['count'] = ( ! empty( $new_instance['count'] ) ) ? intval( $new_instance['count'] ) : 5;
        return $instance;
    }
}
function register_latest_posts_widget() {
    register_widget( 'Latest_Posts_Widget' );
}
add_action( 'widgets_init', 'register_latest_posts_widget' ); 

这个示例代码是一个自定义小工具,可以将其直接放置在主题的functions.php文件中,即可在小工具列表中使用。具体实现方法请参考代码注释和WordPress官方文档。

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
    我的见解
    目录