Вивід записів WordPress з мініатюрами (зображеннями) та вибором конкретної категорії через віджет.

Для виводу записів у необхідному місці, частіше всього у сайтбарі (бічній колонці), можна використовувати багато різних плагинів, які гарно справляються зі своє  функцією, але можна скористатися стандартним віджетом WordPress – Recent Post (Недавні записи).

За замовчуванням цей віджет не відображає мініатюри записів та не дає можливість обрати категорію записів.

Так як вивести записи WordPress з мініатюрами (зображеннями) через віджет? Та як вивести записи WordPress з конкретної категорії через віджет?

Треба допрацювати стандартний віджет, а саме:

  1. Знайти у директорії WordPress папку wp-includes у ній відкрити папку widgets
  2. Скопіювати файл class-wp-widget-recent-posts.php у папку зі своєю темою, а саме у папку inc
  3. Перейменувати на widget-recent-posts-image.php
  4. Замінити код на наступний:
<?php
/**
 * Widget API: WP_Widget_Recent_Posts class
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 4.4.0
 */

/**
 * Core class used to implement a Recent Posts widget.
 *
 * @since 2.8.0
 *
 * @see WP_Widget
 */
class Image_Widget_Recent_Posts extends WP_Widget {

	/**
	 * Sets up a new Recent Posts widget instance.
	 *
	 * @since 2.8.0
	 */
	public function __construct() {
		$widget_ops = array(
			'classname'                   => 'widget_recent_image',
			'description'                 => __( 'Your site&#8217;s most recent Posts.' ),
			'customize_selective_refresh' => true,
			'show_instance_in_rest'       => true,
		);
		parent::__construct( 'image-recent-posts', __( 'Останні записи з зображенням' ), $widget_ops );
		$this->alt_option_name = 'widget_recent_image';
	}

	/**
	 * Outputs the content for the current Recent Posts widget instance.
	 *
	 * @since 2.8.0
	 *
	 * @param array $args     Display arguments including 'before_title', 'after_title',
	 *                        'before_widget', and 'after_widget'.
	 * @param array $instance Settings for the current Recent Posts widget instance.
	 */
	public function widget( $args, $instance ) {
		if ( ! isset( $args['widget_id'] ) ) {
			$args['widget_id'] = $this->id;
		}

		$default_title = __( '' );
		$title         = ( ! empty( $instance['title'] ) ) ? $instance['title'] : $default_title;

		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
		if ( ! $number ) {
			$number = 5;
		}
		$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
?>

		<?php echo $args['before_widget']; ?>
		<?php echo $args['before_title'];  ?>
        <?php echo $title; ?> 
        <?php echo $args['after_title'];  ?>


<?php
			
	        $args = array(
					'cat'                 => $instance[ 'category' ],
					'posts_per_page'      => $number,
					'no_found_rows'       => true,
					'post_type' => 'post',
					'post_status'         => 'publish',
					'ignore_sticky_posts' => true,
	        );	

            $the_query = new WP_Query( $args ); ?>


			
                <?php if ( $the_query->have_posts() ) : ?>
			   <div class="post-grid widget-recent-posts">
			    <?php
	            while ( $the_query->have_posts() ) :
	        	$the_query->the_post();
	        	?>
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					    <div class="entry-thumb post-thumb">
					        <a href="<?php the_permalink( $recent_post->ID ); ?>"<?php echo $aria_current; ?>>
						    <?php echo get_the_post_thumbnail( $recent_post->ID, "medium"); ?></a>
						</div>
					    <header class="entry-header">
						    <h2 class="entry-title"><a href="<?php the_permalink( $recent_post->ID ); ?>"><?php echo wp_trim_words( get_the_title(), 10 ); ?></a></h2>
						</header>
						<footer class="entry-footer">
							<div class="entry-meta">
					         <?php if ( $show_date ) : ?>
					           <span class="posted-on">
					              <div class="post-date-widget">
									  <span class="post-date-widget--d"><?php echo get_the_date( 'd', $recent_post->ID ); ?></span>
									  <span class="post-date-widget--m"><?php echo get_the_date( 'M', $recent_post->ID ); ?></span>
									  <span class="post-date-widget--y"><?php echo get_the_date( 'Y', $recent_post->ID ); ?></span>
								  </div>
							   </span>
							</div>
						</footer>
					
						
				</article>
				   <?php endif; ?>
				    <?php endwhile; ?>

		    </div>
			
           <?php wp_reset_postdata(); ?>

           <?php endif; ?> 
			


<?php
		if ( 'html5' === $format ) {
			echo '</nav>';
		}

		echo $args['after_widget'];
	}
	  

	/**
	 * Handles updating the settings for the current Recent Posts widget instance.
	 *
	 * @since 2.8.0
	 *
	 * @param array $new_instance New settings for this instance as input by the user via
	 *                            WP_Widget::form().
	 * @param array $old_instance Old settings for this instance.
	 * @return array Updated settings to save.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance              = $old_instance;
		$instance['title']     = sanitize_text_field( $new_instance['title'] );
		$instance['number']    = (int) $new_instance['number'];
		$instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
		$instance['category'] = strip_tags( $new_instance['category'] );
		return $instance;
	}

	/**
	 * Outputs the settings form for the Recent Posts widget.
	 *
	 * @since 2.8.0
	 *
	 * @param array $instance Current settings.
	 */
	public function form( $instance ) {
		$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
		$number    = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
		$show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
		?>
		<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 $title; ?>" />
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
			<input class="tiny-text" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" step="1" min="1" value="<?php echo $number; ?>" size="3" />
		</p>

		<p>
			<input class="checkbox" type="checkbox"<?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
			<label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label>
		</p>
             
        <?php $categories = get_categories(); ?>
        <p>
         <label for="<?php echo $this->get_field_id('category'); ?>">Оберіть категорію</label>
         <select name="<?php echo $this->get_field_name('category'); ?>" id="<?php echo $this->get_field_id('category'); ?>">
             <?php
                 foreach ( $categories as $link_cat ) {
                 echo '<option value="' . intval( $link_cat->term_id ) . '"' . selected( $instance['category'], $link_cat->term_id, false ) . '>' . $link_cat->name . "</option>\n";
                 }
		      ?>
		 </select>
         </p>
		<?php
	}
}
  1. Реєстрація віджету. У файлі функцій прописати:
/**
 **  Register widget Recent Posts with thumbnails
 **/
function irp_load_widget() {
	register_widget('Image_Widget_Recent_Posts');
}
add_action("widgets_init", "irp_load_widget");

require get_template_directory() . '/inc/widget-recent-posts-image.php';