ウィジェットその1

カスタムポストをサイドバーウィジットに出してみよう!

2012.06.02(土) WordPress, テーマ, 機能, 関数
このエントリーをはてなブックマークに追加

久々にWordPressネタです。
このブログでは読んだ本をMy本棚として、カスタムポストで登録しているのですが、その最新の投稿をサイドバーに出したいなぁ~、と思いまして、どうせならウィジェットやろうかなぁ~、と思ってやったら、思ったよりも簡単だったのでご報告しておきます。


1つのクラス、4つのメソッドを作成

ウィジェットは、WP_Widgetというクラスを継承した、そのウィジェット用のクラスを作ることから始まります。そのクラスがもつメソッドが、以下の4つで、大まかな役割はこんな感じ。

  1. コンストラクタ : 利用できるウィジェットに出す名前、説明などを指定します
  2. form : ウィジェット用オプション画面を指定します
  3. widget : 実際にサイドバーにだす内容を指定します
  4. update : リロード時の動作を指定します(多分・・・)

実際のソースです。

他のウィジェットのソースをパクって、ちょいちょいと変えて作るのが一番早いと思います(これもそうです)。

<?php
/*---------------------------------------------------------------------------------*/
/* My本棚用サイドバーウィジェット */
/*---------------------------------------------------------------------------------*/

class MyBooks extends WP_Widget {

   /* -------------------------
      ①コンストラクタ
      description:説明
      name:ウィジェットの名称
     --------------------------- */
   function MyBooks() {
  	   $widget_ops = array('description' => '最近読んだ本を表示します' );
       parent::WP_Widget(false, $name = __('MyBooks', 'woothemes'), $widget_ops);
   }

   /* -------------------------
      ②オプション設定
      title:タイトル用文字列を設定
      number:ウィジェットにいくつ記事を出すか
     --------------------------- */
   function form($instance) {
       $title = esc_attr($instance['title']);
       $number = esc_attr($instance['number']);
       ?>
       <p>
       <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:','woothemes'); ?>
       <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>
       <p>
       <label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of posts:','woothemes'); ?>
       <input class="widefat" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" />
       </label>
       </p>
       <?php
   }

   /* -------------------------
      ③ウィジェットの画面表示設定
      タイトルを表示
      カスタムフィールドを指定された件数出す
     --------------------------- */
   function widget($args, $instance) {
		extract( $args );
		/* ウィジェットタイトル設定 */
        $title = $instance['title']; if ($title == '') $title = '最近よんだ本';
		/* 投稿数設定 */
		$number = $instance['number']; if ($number == '') $number = 1;

		/* ウィジェットタイトル表示 */
		echo $before_widget;
		echo $before_title;
		echo $title;
        echo $after_title; 

		/* カスタムポスト読み込み */
		$the_query = new WP_Query("showposts=$number&post_type=mybooks");

		/* カスタムポスト表示 */
		while ($the_query->have_posts()) : $the_query->the_post();

			$do_not_duplicate = $post->ID; ?>

			<div style="border-bottom: 1px solid #dadada;">

				<!--投稿タイトルリンク表示 -->
				<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>

				<?php
				/* amazonをキーとして、カスタムフィールド値を取得 */
			    $amazon = get_post_custom_values('amazon');
			    if( $amazon  ){
			    		/* amazonへのリンクをechoにより出力 */
			    		echo '<div class="sxs_amazon">';
						echo  $amazon[0];
			    		echo '</div>';
			    }
			    else{
			    		echo '<br><div class="sxs_amazon">';
				    	echo '<img src="'; echo home_url('/'); echo "wp-content/themes/themorningafter/images/NOIMAGE.gif"; echo '" />';
			    		echo '</div>';
			    }
			    ?>

			</div>
		<?php endwhile; ?>
		<div align="right"><a href="http://stepxstep.net/?post_type=mybooks">My本棚を見る</a></div>
        <?php echo $after_widget; ?>

     <?php
   }

   /* ④おそらくリロード時の動作用 */
   function update($new_instance, $old_instance) {
       return $new_instance;
   }

} 

/* クラス名によるウィジェットの登録 */
register_widget('MyBooks');
?>

widgetの内容についてですが、WP_Queryでカスタムポストを、指定した件数分読み込んでいます。指定した件数というのは、formメソッド内のnumberで指定された数ですが、指定されてなければ1回となります。それをhave_postsメソッドで、取れなくなるまでループして出しています。ここでは、カスタムフィールドを出していますが、タイトルだけとかここは自由に出したいものを出せばよいかと思います。

最後の方でregister_widget関数にクラスを登録しています。こちらもお忘れなく。

ウィジェットのソースファイルを読み込む

require_once関数で、上記で作成したソースファイルを読み込んであげます。これを忘れてはメニューに出てきませんので。
場所はfunction.phpなどでよいでしょう。ちなみに、ソース名はなんでもいいし、場所もどこでも大丈夫です。


require_once ($includes_path . 'widget-mybooks.php');		// Theme widgets

たったこれだけです。どうですか?簡単でしょう。
実際の画面は、こんな感じになります。

ウィジェットその1


ウィジェットその2



ということで、これからもどんどん読んだ本を増やしていきますので、気になるものがあればチェックしてみてくだされ。

コメントをどうぞ