【WordPress】最近の投稿をサムネイル画像付きで表示するウィジェットを作成する
「最近の投稿をサムネイル画像つきで表示したい」
「標準の最近の投稿のウィジェットにサムネイル画像をつけるにはどうしたらいいんだろう？」
そんな方向けに。
最近の投稿をサムネイル画像付きで表示するウィジェットを作成する方法をご紹介します。
WordPressでは、標準で最近の投稿を表示するウィジェットが搭載されていますが、サムネイル画像付きで表示するには新しくウィジェットを追加する必要があります。
プラグインを使った方法もありますが、今回はプラグインなしで直接テーマファイルを編集してウィジェットを作成していきます。
イメージはこんな感じです。
最近の投稿をサムネイル画像付きで表示するウィジェットを作成する
といっても簡単です。
以下のコードをfunction.phpにコピペしてください。
/* imgNewPostWidget
* ---------------------------------------- */
add_action('widgets_init', create_function('', 'return register_widget("imgNewPostWidget");'));
class imgNewPostWidget extends WP_Widget {
//コンストラクタ
function imgNewPostWidget() {
parent::WP_Widget(
false,
$name = 'imgNewPostWidget',
array( 'description' => '最近の投稿を画像付きで表示します。', )
);
}
function form( $instance ) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('limit'); ?>"><?php _e('表示する投稿数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" value="<?php echo esc_attr( $instance['limit'] ); ?>" size="3">
</p>
<?php
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
return $instance;
}
function widget( $args, $instance ) {
extract( $args );
if($instance['title'] != ''){
$title = apply_filters('widget_title', $instance['title']);
}
echo $before_widget;
if( $title ){
echo $before_title . $title . $after_title;
}
?>
<ul class="img-new-post clearfix">
<?php
query_posts("posts_per_page=".$instance['limit']);
if(have_posts()):
while(have_posts()): the_post();
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
?>
<li>
<?php if( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/no-image.jpg" alt=""></a>
<?php endif; ?>
<div class="side-text"><p class="post-date"><?php echo get_the_date('Y.m.j'); ?><span class="cat-name"><?php echo $cat_name ?></span></p><p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></div>
</li>
<?php endwhile; endif; ?>
</ul>
<?php
echo $after_widget;
}
}
コードの解説
add_action('widgets_init', create_function('', 'return register_widget("imgNewPostWidget");'));
widgets_initフックで、ウィジェットの登録をしています。
//コンストラクタ
function imgNewPostWidget() {
parent::WP_Widget(
false,
$name = 'imgNewPostWidget',
array( 'description' => '最近の投稿を画像付きで表示します。', )
);
}
コンストラクタです。
ウィジェット管理画面上に表示させるウィジェット名や説明を変更できます。
function form( $instance ) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('limit'); ?>"><?php _e('表示する投稿数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" value="<?php echo esc_attr( $instance['limit'] ); ?>" size="3">
</p>
<?php
}
ウィジェットの設定フォームの内容を指定しています。
今回は、タイトルと表示する投稿数を管理画面から設定できるようにしています。
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['limit'] = is_numeric($new_instance['limit']) ? $new_instance['limit'] : 5;
return $instance;
}
ウィジェットの設定を保存しています。
入力したてのデータは $new_instance に、直前のデータは $old_instance に保存されています。
最終的に return した配列を保存します。
function widget( $args, $instance ) {
extract( $args );
if($instance['title'] != ''){
$title = apply_filters('widget_title', $instance['title']);
}
echo $before_widget;
if( $title ){
echo $before_title . $title . $after_title;
}
?>
<ul class="img-new-post clearfix">
<?php
query_posts("posts_per_page=".$instance['limit']);
if(have_posts()):
while(have_posts()): the_post();
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
?>
<li>
<?php if( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/no-image.jpg" alt=""></a>
<?php endif; ?>
<div class="side-text"><p class="post-date"><?php echo get_the_date('Y.m.j'); ?><span class="cat-name"><?php echo $cat_name ?></span></p><p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></div>
</li>
<?php endwhile; endif; ?>
</ul>
<?php
echo $after_widget;
}
サイトに表示される部分の処理を書いています。
$instanceの配列からデータを抜き出して好きなように加工できます。
サイトの表示を確認する
管理画面にログインして、作成したウィジェットが登録されているか確認してみましょう。
上記のように表示されていたらOKです。
今回は、サイドバーに設置します。
設定を入力して保存して完了です。
サムネイル画像や文字の大きさ等の調整は、cssでお好みにカスタマイズしてみてください。
おわりに
最近の投稿をサムネイル画像つきで表示する方法をご紹介しました。
ウィジェットの作り方がわかれば、色々とカスタマイズの幅が広がりますね。