
WordPressで構築したサイト(このブログではないのですが)の、「最近の投稿」ウィジェットの記事一覧に、それぞれのカテゴリ名を追加する必要があったので、以下の通りカスタマイズを行いました。
デフォルトのテンプレートを「functions.php」にコピー
「最近の投稿」ウィジェットのテンプレートは、「/wp-includes/widgets/class-wp-widget-recent-posts.php」にあります。
class WP_Widget_Recent_Posts extends WP_Widget {
/**
* Sets up a new Recent Posts widget instance.
*
* @since 2.8.0
* @access public
*/
public function __construct() {
$widget_ops = array(
'classname' => 'widget_recent_entries',
'description' => __( 'Your site’s most recent Posts.' ),
'customize_selective_refresh' => true,
);
parent::__construct( 'recent-posts', __( 'Recent Posts' ), $widget_ops );
$this->alt_option_name = 'widget_recent_entries';
}
/**
* Outputs the content for the current Recent Posts widget instance.
*
* @since 2.8.0
* @access public
*
* @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;
}
$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' );
/** 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;
/**
* Filters the arguments for the Recent Posts widget.
*
* @since 3.4.0
*
* @see WP_Query::get_posts()
*
* @param array $args An array of arguments used to retrieve the recent posts.
*/
$r = new WP_Query( apply_filters( 'widget_posts_args', array(
'posts_per_page' => $number,
'no_found_rows' => true,
'post_status' => 'publish',
'ignore_sticky_posts' => true
) ) );
if ($r->have_posts()) :
?>
<?php echo $args['before_widget']; ?>
<?php if ( $title ) {
echo $args['before_title'] . $title . $args['after_title'];
} ?>
<ul>
<?php while ( $r->have_posts() ) : $r->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a>
<?php if ( $show_date ) : ?>
<span class="post-date"><?php echo get_the_date(); ?></span>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php echo $args['after_widget']; ?>
<?php
// Reset the global $the_post as this query will have stomped on it
wp_reset_postdata();
endif;
}
/**
* Handles updating the settings for the current Recent Posts widget instance.
*
* @since 2.8.0
* @access public
*
* @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;
return $instance;
}
/**
* Outputs the settings form for the Recent Posts widget.
*
* @since 2.8.0
* @access public
*
* @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
}
}
テンプレートをカスタマイズするために、「WP_Widget_Recent_Posts」クラスを全てコピーして「functions.php」に複製します。
クラス名と継承元を変更し定義し直します
「functions.php」に複製したクラスの名前と継承元をユニークなモノに変更します。
class WP_Widget_Recent_Posts extends WP_Widget {
/*(クラスの内容)*/
}
の部分を、
class My_WP_Widget_Recent_Posts extends WP_Widget_Recent_Posts {
/*(クラスの内容)*/
}
等のようなオリジナルのクラス名に変更します。
そして、「functions.php」に下記を追記し、オリジナルクラスをウィジェットのテンプレートとして定義します。
function wp_my_widget_register() {
register_widget('My_WP_Widget_Recent_Posts');
}
add_action('widgets_init', 'wp_my_widget_register');
オリジナルクラスを修正しウィジェットの表示を変更します
記事一覧を表示するためのループ内部を修正します。
<?php while ( $r->have_posts() ) : $r->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> <?php if ( $show_date ) : ?> <span class="post-date"><?php echo get_the_date(); ?></span> <?php endif; ?> </li> <?php endwhile; ?>
の部分を、
<?php while ( $r->have_posts() ) : $r->the_post(); ?> <?php $cat = get_the_category(); $catname = $cat[0]->cat_name; //カテゴリー名 ?> <li> <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> <?php if ( $show_date ) : ?> <span class="post-date"><?php echo get_the_date(); ?></span> <?php endif; ?> </li> <?php endwhile; ?>
に変更します。
7行目「<?php echo $catname; ?>」の部分でカテゴリ名を出力しているので、この部分にスタイルを適用することで、自由なデザインでカテゴリ名を表示させることができます。
以上、WordPressの「最近の投稿」ウィジェットに各記事のカテゴリ名を追加する方法の紹介でした。
関連書籍
WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]
posted with amazlet at 17.08.05
水野 史土
エムディエヌコーポレーション (2017-03-28)
売り上げランキング: 42,942
エムディエヌコーポレーション (2017-03-28)
売り上げランキング: 42,942
一歩先にいくWordPressのカスタマイズがわかる本
posted with amazlet at 17.08.05
相原 知栄子 大曲 仁
翔泳社
売り上げランキング: 131,187
翔泳社
売り上げランキング: 131,187

![WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]](https://images-fe.ssl-images-amazon.com/images/I/51kLqB9iMKL._SL160_.jpg)



コメント