1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのテーマ作成方法 > 
  5. WordPressで自作のウィジェットを作成・カスタマイズする方法

WordPressで自作のウィジェットを作成・カスタマイズする方法

WordPressのウィジェットの作成は、PHPの知識が必要なもののそれほど難しくはありません。自作テーマのメンテナンスが楽になりますので、ウィジェットの作成・カスタマイズ方法を解説。

  • 2017/1/3
  • 2015/5/24

公開しているWordPressのテーマファイルでは、テーマの各テンプレートファイルを直接操作できない人のために、サイドバーで使用しているアイキャッチ画像を使用した最新記事の一覧表示などを、自作ウィジェットにしました。

作り方を忘れないうちに、自作ウィジェットを作る方法をまとめておきます。
自作テーマを作っている方で一般には公開しないとしても、自作ウィジェットを作っておくと自分のカスタマイズが楽になりますので、ぜひチャレンジしてみましょう。

今回作成する自作ウィジェット

WordPress管理画面の外観→ウィジェットに自分で作ったウィジェットを表示して、サイドバーなどにドラッグ、簡単な設定ができるようにします。

今回は、下の画像のようなアイキャッチ画像を使用した最新記事の一覧表示用ウィジェットを作成します。

自作ウィジェットのキホン

自作ウィジェットは、functions.phpに設定を記述します。
WordPress Codex日本語版のWordPressウィジェットAPIのページには、「標準ウィジェットクラスとこのクラスのいくつかのメソッドを継承すれば良い」と書かれていますが、何のこっちゃ？という人も多いと思いますので、とりあえず以下のコードがキホンになる、とだけ覚えておきましょう。

class My_Widget extends WP_Widget {
　/*　コンストラクタ　*/
　/*　自作ウィジェットを登録するみたいな感じ　*/
　function My_Widget() {
　
　}
　
　/*　管理画面の設定とか表示用コードを書く　*/
　function form($instance) {

　}
　
　/*　管理画面で設定を変更した時の処理を書く　*/
　function update($new_instance, $old_instance) {

　}

　/*　ウィジェットを配置した時の表示用コードを書く　*/
　function widget($args, $instance) {

　}

}
/*　自作ウィジェットを使えるようにする処理　*/
register_widget('My_Widget');

ではひとつずつ見ていきましょう。

自作ウィジェットのクラスを作成

まずは、WP_Widgetクラスを継承する自作ウィジェットのクラスを作成します。My_Widgetの部分にはこれから作るウィジェットの名前を書きます。

class My_Widget extends WP_Widget {
　　//ここに処理を記述します
}

名前は（ある程度）何でも大丈夫です。例えば「画像表示付きの最近の投稿を表示する」というウィジェットであれば、ImgNewPostWidgetみたいな名前でいいでしょう。

ウィジェットの名前以外は決まり文句みたいなものですので、そのままコピペしましょう。

コンストラクタ

コンストラクタとはそのクラスのインスタンスが生成される時に、自動的に実行される関数です。
つまり、ここに記述された内容は必ず実行されるので、何かのデータを初期化しておいたり、後々利用する変数を定義したりといった使い方をします。

関数名は先ほど決めたクラス名と同じ名前をつけます。とりあえず以下のソースコードをコピペして、ウィジェット名や説明文を書きましょう。説明文はWordPressの管理画面で表示されます。

class [ウィジェット名] extends WP_Widget {

　　//コンストラクタ
　　function [ウィジェット名]() {
		parent::WP_Widget(
			false,
			$name = '[ウィジェット名]',
			array( 'description' => '[ウィジェットの説明文]', )
		);
	}
}

WordPressの管理画面でウィジェットの設定をするフォーム

WordPressの管理画面でウィジェットの設定を行うフォームのHTMLを記述します。今回はウィジェットを表示したときのタイトルと、何本の記事を表示するかの2つの設定項目を記述しておきます。

現在設定されている、タイトル（title）と表示する投稿数（limit）の値は、$this->get_field_id(‘xxxx’);でアクセスすることができます。
すでに何らかの設定が入力されている場合、その設定値を呼び出して表示しています。

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
}

管理画面でウィジェットの設定を変更した時の処理

WordPressの管理画面でウィジェットの設定を変えた時の処理を記述します。主に管理画面のフォームで設定された項目を更新する処理を記述します。

以下のコードでは、管理画面で入力したタイトルから、HTMLやPHPのタグを取り除いて$instance[‘title’]に保存、表示する投稿数の数字を$instance[‘limit’]に保存しています。
また$instance[‘limit’]に数字以外の文字が書かれていた場合（is_numeric部分）、デフォルトの表示数である5が入るように書いています。

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;
}

ウィジェットを配置した時に出力されるHTML

最後はウィジェットを配置した時に出力されるHTMLです。要するにウィジェットの見た目部分です。
WordPressの管理画面でウィジェットのタイトルを設定していた場合そのタイトルを表示して、query_postsに表示する件数分の数値を渡してあげているだけです。

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();
	?>
	<li>
	<?php if( has_post_thumbnail() ): ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(400,400) ); ?></a>
	<?php else: ?>
	<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/no-image.jpg" alt=""></a>
	<?php endif; ?>
	<div><p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><span class="img-new-post-date"><?php echo get_the_date('Y/n/j'); ?></span></p></div>
	</li>
	<?php endwhile; endif; ?>
	</ul>
	<?php
	echo $after_widget;
}

$before_widgetと$after_widgetは、ウィジェットの前後に入るタグを挿入しています。
この設定はウィジェットエリアごとに行います。

たとえば、takerootのサイドバーウィジェットエリアでは、以下のような設定をしています。

register_sidebars(1,
	array(
		'name' => 'サイドバーウィジェット',
		'id' => 'sidebar-1',
		'description' => 'サイドバーのウィジットエリアです。',
		'before_widget' => '<li>',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>'
	)
);

ここの’before_widget’に設定してある'<li>’、’after_widget’に設定してある'</li>’が、それぞれ$before_widgetと$after_widgetで出力されるという流れです。

細かなPHP関数の説明などは割愛しましたが、それほど難しくない関数ばかりですので、Googleで調べてみてください。
また、この記事で紹介しているウィジェットは、オリジナルテーマに実装していますので、ダウンロードしてfunctions.phpを確認してみてください。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク（6か月のガッチリ型）

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲