「最近の投稿」を画像入りにしたいんですよ
せっかくアイキャッチ画像設定してるので、最近の投稿一覧も画像入りにできればなと。
プラグインで実現する方法もありますが、大した手間じゃないので自作ウィジェットでやります。
この記事はWordPressバージョン3.8.1の時点で書いています。
将来のバージョンではファイルや行番号などが変わっているかもしれません。
ウィジェット作成の流れ
概要
WordPressに標準で入っているウィジェットと同じような機能のを作るなら、そのコードを流用したほうが早いです。
今回は画像を追加で表示させたいので、既定の「最近の投稿を表示」ウィジェットを改造して対応します。
作成手順
1.既定のウィジェットから改造するコードを入手
まずは既定のウィジェットが格納されている［WPのルート/wp-includes/default-widgets.php］を開き、533～628行の「WP_Widget_Recent_Posts」クラスのコードをコピー。
編集する必要があるので、一旦空のテキストエディタに貼り付け。
2.オブジェクト名を新しいものに修正
新しいウィジェットとするため、クラス名やキャッシュ名などを下記のように単語単位で置換。
- 「WP_Widget_Recent_Posts」を「Monodamono_Recent_Posts」に置換
- 「recent-posts」を「monodamono-recent-posts」に置換
- 「widget_recent_entries」を「monodamono_recent_entries」に置換
- 「widget_recent_posts」を「monodamono-recent-posts」に置換
3.ウィジェット名の設定
コンストラクタの2行目にあるウィジェット名のところを「ものだもの : 画像付き最近の投稿」に書き変え。
多言語対応するわけじゃないんで「__()」は外した。
|
1 |
parent::__construct('monodamono-recent-posts', 'ものだもの : 画像付き最近の投稿', $widget_ops); |
4.画像表示コードの追加
アイキャッチ画像出力は［get_the_post_thumbnail］関数で出力できる。
サイズは160px矩形に収まるように設定。第1引数は自動的に投稿IDが参照されるnullでOK。
|
1 |
get_the_post_thumbnail(null, array(160, 160)) |
これを投稿リンクを表示しているところに追記。
|
1 |
<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(null, array(160, 160)); ?><br /><?php get_the_title() ? the_title() : the_ID(); ?></a> |
5.ウィジェット登録処理の追加
コードの一番最後にウィジェットを登録するコードを追加。
|
1 |
add_action('widgets_init', create_function('', 'return register_widget("Monodamono_Recent_Posts");')); |
これでコードは出来上がりです。
適用方法
修正したコードを子テーマの［functions.php］に追加して終了。
追加するコードの全体はこうなりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
class Monodamono_Recent_Posts extends WP_Widget { function __construct() { $widget_ops = array('classname' => 'widget_recent_entries', 'description' => __( "Your site’s most recent Posts.") ); parent::__construct('monodamono-recent-posts', 'ものだもの : 画像付き最近の投稿', $widget_ops); $this->alt_option_name = 'monodamono_recent_entries'; add_action( 'save_post', array($this, 'flush_widget_cache') ); add_action( 'deleted_post', array($this, 'flush_widget_cache') ); add_action( 'switch_theme', array($this, 'flush_widget_cache') ); } function widget($args, $instance) { $cache = wp_cache_get('monodamono_recent_posts', 'widget'); if ( !is_array($cache) ) $cache = array(); if ( ! isset( $args['widget_id'] ) ) $args['widget_id'] = $this->id; if ( isset( $cache[ $args['widget_id'] ] ) ) { echo $cache[ $args['widget_id'] ]; return; } ob_start(); extract($args); $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Recent Posts' ); $title = apply_filters( 'widget_title', $title, $instance, $this->id_base ); $number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 10; if ( ! $number ) $number = 10; $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false; $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 $before_widget; ?> <?php if ( $title ) echo $before_title . $title . $after_title; ?> <ul> <?php while ( $r->have_posts() ) : $r->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail(null, array(160, 160)); ?><br /><?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 $after_widget; ?> <?php // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); endif; $cache[$args['widget_id']] = ob_get_flush(); wp_cache_set('monodamono_recent_posts', $cache, 'widget'); } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['number'] = (int) $new_instance['number']; $instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false; $this->flush_widget_cache(); $alloptions = wp_cache_get( 'alloptions', 'options' ); if ( isset($alloptions['monodamono_recent_entries']) ) delete_option('monodamono_recent_entries'); return $instance; } function flush_widget_cache() { wp_cache_delete('monodamono_recent_posts', 'widget'); } 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 id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" 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 } } add_action('widgets_init', create_function('', 'return register_widget("Monodamono_Recent_Posts");')); ?> |
ウィジェット設定
子テーマに追記した時点でウィジェット一覧に追加されているので、それを設定するだけ。
設定は「最近の投稿」と同じです。
これでアイキャッチ画像入りでリンクが表示されるようになります。
後記
同じようなウィジェットを提供するプラグインもあるんですが、以前カスタマイズだけで実現したこともあるのでコードを書いてみました。
こうして記事化することで修正パターンの覚書を残すという意味もあります。
画像サイズを設定で変えられるようにしたり、ランダム表示などの機能を追加すればより汎用性は増すかと思います。
画像とリンク文字の間も改行ではなくCSSを適用しやすい形に変えるのも良いかもしれません。どちらもspanで囲ってCSSで配置を設定するとか。
とりあえず目的のものができたのでここまでとします。
