【WordPressの新着記事（最近の投稿）にアイキャッチ（サムネイル）を表示】 functions.phpを初めていじるのに最適かと

WordPress

前回の記事：【WordPressでウィジェットを細かく設定できるプラグイン3つ】 これ3つ入れればウィジェットのカスタマイズは十分に続いて、ウィジェット関連についてです。

「最近の投稿」ウィジェットを使用されている方は結構いらっしゃると思います。閲覧する方にとっては、更新情報がわかりやすいですしね。で、この「最近の投稿」なんですが、デフォルトのものを使うと結構あっさりしていますよね。

最近の投稿ウィジェットはあっさりですよね

まあ、これもシンプルでかっこいいんですがね。これをアイキャッチ画像（サムネイル）でもうちょっとかっこよくしたいと思います。方法はいくつかありますが、今回は「アイキャッチ付き最近の投稿ウィジェットを作って表示させる」方法です。

なぜこの方法か、というと 「functions.php」 を触れるきっかけになったからです。WordPressのカスタマイズには避けて通れないのが、「functions.php」だと思っています。そのカスタマイズの入り口にはもってこいの難易度だと思います。下記に方法を紹介いたしますので、是非挑戦してくださいませ。

2012/03/27  追記

この記事で紹介したプログラムを改良してプラグイン化しました。WordPress.orgで配布しています。詳しくは、【WordPressの最近の投稿（新着記事）にアイキャッチ（サムネイル）を表示する】Newpost Catchプラグインをご覧下さい。良ければ使ってあげてください。

「スパッ」とウィジェットを自作する頭に切り替えましょう

では、まずは前提としてウィジェット名：「My_widget」というウィジェットを作成することにしますね。で、作成したウィジェットはアイキャッチ付きで表示されるということになります。

あらかじめですが、これから紹介する方法はWordPress ウィジェット API – WordPress Codex 日本語版のサイトに例としてあるコードのサンプルを元に作成しています。というわけで、「functions.php」を編集することになります。

「functions.php」を編集するときは、ちょっと注意してください

編集の方法は多分この３つ。

  • １．「functions.php」をWordPressの管理画面のテーマ編集から開いて編集
  • ２．ローカル環境で編集してファイルをアップロード
  • ３．sshなどでサーバへ接続してviコマンドなどを使ってファイルを編集

・・・だと思っています。他にも方法があるかな。ありましたら是非、ご教示ください。できればローカルでテスト環境をもたれている方は、一度ローカル環境で編集を行い動作検証を行ったのちに、初めて本番環境に適用したほうがよい、と思います。

また、管理画面ではなく、テキストエディターなどで編集する際は、文字コードにUTF-8を利用されている方は、BOMなしの形式でファイルを保存しましょう。いずれの方法を使うにしても、編集するときは必ずバックアップをとっておくことをオススメします。

バックアップのとりかたは、FTPソフトでサーバに接続し、ご利用のテーマファイルの中に、「functions.php」ファイルがあるはずですので、ご自身のPCにダウンロードしましょう。

「え・・よくわからないけど、ちょっと何のことか知りたいかもしれない」と思われる方は、こちらのWordPressのフォーラムをご参考下さい。http://ja.forums.wordpress.org/topic/71では、なんとなく「function.php」の扱いがわからないと思いますが早速、下記のコードを「functions.php」ファイルの一番最後に追加しましょう。

ウィジェット定義のためのコード

 <?php
 /**
 * My_Widget Class
 */
 class My_Widget extends WP_Widget {
 function My_Widget() {
 parent::WP_Widget(false, $name = 'My_Widget');
 // widget actual processes
 }
function widget($args, $instance) {
 extract( $args );
 $title = apply_filters('widget_title', $instance['title']);
 ?>
 <?php echo $before_widget; ?>
 <?php if ( $title ) echo $before_title . $title . $after_title; ?>
 <?php query_posts($query_string . "&showposts=10"); ?>
 <ul class="new_article_thumb">
 <?php if( have_posts() ) : ?>
 <?php while( have_posts() ) : the_post(); ?>
 <li>
 <span class="new_thumb"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
 <?php if( has_post_thumbnail() ) : ?>
 <?php the_post_thumbnail( array(90,90),array( 'alt' => $title_attr , 'title' => $title_attr )); ?>
 <?php else : ?>
 <img src="<?php bloginfo('template_directory'); ?>/images/no_thumb.jpg">
 <?php endif; ?>
 </a></span>
 <span class="new_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
 <?php the_title(); ?></a></span>
 </li>
 <?php endwhile; ?>
 <?php else : ?>
 <p>no post</p>
 <?php endif; ?>
 </ul>
 <?php echo $after_widget; ?>
 <?php
 }
/** @see WP_Widget::update */
 function update($new_instance, $old_instance) {
 return $new_instance;
 }
/** @see WP_Widget::form */
 function form($instance) {
 $title = esc_attr($instance['title']);
 ?>
 <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <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; ?>" /></label></p>
 <?php
 }
 }
 ?>

注目したほうがよい処理は、

  • 表示件数の設定（この例では10件：17行目）
  • 投稿毎のタイトルの表示とリンク設定（29,30行目）
  • 投稿毎のアイキャッチの表示とリンク設定 「alt」と「title」もついでに指定（22～26行目）
  • アイキャッチが設定されていない時は「no_image.jpg」を表示（26行目）
  • 投稿が1件もないときは「no post」と表示（34行目）

これくらいです。もっともっとコードを少なくできるんですが、とりあえず進みましょう。

  • 「<?php」がやたら多い、もっとまとめられる
  • インデントがされていないから見づらい

と思われた方もいらっしゃると思いますが、これは理由があります。とりあえず今回は表示できればいいんで、これをまんま「コピー＆貼り付け」でも大丈夫だと思います。この記事の最下部のコメント欄に、「functions.php」を触る時の参考となるとてもよいサイトがありますので、掲載しております。おそらく初めて「functions.php」を編集される方は、エラー連発になるでしょう。私がそうでした。ですので、「functions.php」を編集する時の注意事項は、極力守りましょう。特にバックアップは必須、と言っても大げさではないと思います。

では次は、このウィジェットを使えるように登録しましょう。同じく「functions.php」の先ほどの記述のあとに追加してください。

ウィジェットの登録

 <?php
 // register My_Widget widget
 add_action('widgets_init', create_function('', 'return register_widget("My_widget");'));
 ?>

これで、ウィジェットの登録は完了です。追加したあとは、保存しましょう。

作ったウィジェットが追加されます

WordPressの管理画面から、「ウィジェット」をクリックしてください。先ほど作った「My_widget」が追加されています。こんな感じです。

ウィジェットが追加されました

設定はこんな感じです

もしかして表示が私とは違うかもしれません。ウィジェットカスタマイズのプラグインを使っているからだと思います。もし気になられた方は下記の記事をご参考ください。参考記事：【wordpressでウィジェットを細かく設定できるプラグイン3つ】 これ3つ入れればウィジェットのカスタマイズは十分

というわけで、タイトルを入力して、保存しましょう。これがどう表示されるかご自身のサイトで確認してみましょう。

こんな表示になります

変更前、とても寂しい

変更後、ちょっとだけ雰囲気出てますかね

ちょっと仮にですが、スタイルシートで表示を整えています。お好みのデザインにカスタマイズしましょう。

まとめ

ウィジェットはとても便利ですね。便利なので、もっと活用する方法はないものか・・・と思っていたら、「そういえば最近の投稿ウィジェットってなんかあっさりだなぁ・・・」って思っていまして実験的にウィジェットを作成しました。

で、このウィジェットのコードなんですが、私が作ったサンプルは投稿件数が10件です。ホントは、投稿件数も「functions.php」を直接編集することなくウィジェットの設定画面内で変更したいですよね。

いちいち「functions.php」の該当する箇所の数字を変更するなんて、面倒です。そのやり方もありますが、少しだけハードルが上がるので、これはまた次回紹介いたします。まずは、ウィジェット作成の課程でwordpressの「functions.php」の具合をこの機会に確かめていただいて、これができたら次回は応用編・・・と徐々に技術レベルを高めた方が良いと個人的には思っています。ただ、これは基本編かというとそうではないと思っており、基本より少しだけ難易度は高いと思います。

やっぱり実用性のあるものを作るには、それなりに難易度が高いと認識しています。よくある例の、「Hello World」なんて表示してもつまらないでしょう。それに、「Hello World」は理解しているつもりなんだけど、その次の一歩が難易度高いんだよ・・・・って私も結構苦労させられた経験があります。

是非、挑戦していただければと思います。

  • アイキャッチ付きの最近の投稿（新着記事）を表示させたい
  • ウィジェットを自分で作成したい

と思われている方に、少しでもご参考になっていただければ幸いです！

著者:bouya Imamura