今回は、ウィジェットの作り方です。
ウィジェットはサイドバーに表示される小さめのプラグインといった感じですね。実際、ウィジェットもプラグインとして作るわけです。ウィジェットを作ってみてそれからプラグインに入るといろいろわかりやすいのではないかと思いました。
いつものようにWordPress CodexのWordPress ウィジェット APIなどを参考にさせていただいています。
ウィジェットはプラグインとして作る
ウィジェットはプラグインとして作ります。プラグインを作るには、プラグインメインファイルの冒頭にコメントとして次のような情報を書き込んでおけば良いのでした。
これを記述したファイルを含むディレクトリをwp-contents/plugins/配下に置くと、WordPressによってプラグインと認識されます。管理者としてログインし、プラグインメニューを開くと一覧の中にプラグインの名前とその情報が表示されていることでしょう。
そのプラグイン(ウィジェット)を有効化すれば、管理メニューの「外観」->「ウィジェット」の中にあなたのウィジェットを見つけることができます。
Widget作成
プラグインではなくウィジェットにするには、WordPressのWP_Widgetクラスを継承したPHPクラスを作り、そのクラスをウィジェットとして登録します。基本的な構成は次のようになります。
なお、後ほど見るように管理者がウィジェットのために設定する項目は、WordPressのデータベースに登録されます。
add_action
の第一引数にフックとして「widgets_init」を指定することで、widgetの初期化の時に第二引数の「文字列で指定された」関数が(フックされたタイミングで)実行されます(引数は文字列であることに注意)。上の例は、関数名を指定する第二引数に無名関数を定義しています。無名関数は変数へ代入できるのでこのような使い方ができます。
これは、下のものと同等です。
このようにして、フックのタイミングでregister_widget("…")
関数が呼び出され、クラス名「CD_My_Widget」を登録します。
次に、ウィジェットの各メソッドを見ていきましょう。
- コンストラクタ: function CD_My_Widget() { /* … */ }
- 設定を登録する管理画面フォーム: function form($instance) { /* … */ }
- データベースに登録する値を処理する:function update($new_instance, $old_instance) { /* … */ }
- ウィジェットコンテンツを表示する: function widget($args, $instance) { /* … */ }
コンストラクタ
継承した親のコンストラクタを呼び出し、このウィジェットにはcd_widgetという名前を付けました。このウィジェットのクラス名はCD_My_Widgetなので、コンストラクタは、
となります(これはphp4の書き方なのですね。php5風に__construct()
としても大丈夫です)。
ここでは先ず、最低限の内容として「タイトル」と「テキスト」を入力し、登録、表示させるウィジェットを完成させることにします。その際、それぞれに‘title’と‘text’という(自分で決めた)キーを用いています。
設定を登録する管理画面フォーム
管理画面でウィジェットをサイドバーにドラッグ&ドロップした場所で表示される設定画面です。
既に登録されている値があれば、「< > & “ ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート)」 文字参照をエンコードして表示しています。
データベースに登録する値を処理する
新しく登録する値からHTMLタグを剥ぎ取りハッシュで返します。設定値は「wp_optionsテーブル」に1レコードとして登録されます。
ウィジェットコンテンツを表示する
タイトルとテキストを表示するだけですが、立派にウィジェットが完成しました。
CSSファイルを読み込む
スタイルシートで表現をカスタマイズしたいですね。
スタイルシートを読み込むには、
この2つの関数で実現できます。まずはwp_register_style
関数で登録だけしておいて、そのスタイルシートを使う場面でwp_enqueue_style
関数で読み込ませる、という使い方ができます。
wp_register_style 関数
1
wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' );
$handle … スタイルシートを登録する「識別子」。初期値: なし。
$src … このスタイルシートのファイル名(パス付き)。初期値: false 。
$deps … このスタイルシートが依存していて、これよりも先に読み込まれていなければならないスタイシートの「識別子」を配列で記述する。初期値: array() 。
$ver … このスタイルシートのヴァージョン番号。初期値: false 。
$media … どの種類のmediaに対するスタイルシートなのかを指定する。例: ‘all’, ‘screen’, ‘handheld’, ‘print’。 初期値: ‘all’ 。
wp_enqueue_style 関数
1
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )
引数は、wp_register_style
と全く同じです。ソースを読むとwp_enqueue_style
関数だけで引数があればスタイルシートの登録と同時に読み込ませられることがわかりました。確かめてみたら
1
wp_enqueue_style('cd_jp_calendar_style', plugins_url('', __FILE__) . '/cd_jp_calendar.css', array(), '201406');
とすることでスタイルシートを読み込ませることができました。
いつスタイルシートを読み込ませるか
使いもしないのにスタイルシートだけを読み込ませておくのは無駄です。どのタイミングで読み込ませるかを指定するのがフックを指定してのadd_action
関数ですね。
admin_init
フックは、管理画面が表示される時一番初めに実行する関数を登録します。
admin_menu
フックは、管理画面が表示される時メニューまたはサブメニューの表示のされ方を指定する関数を登録します。
wp_enqueue_scripts
フックは、コンテンツが表示されている時に読み込ませるフックです。
ここではスタイルシートについてだけ述べていますが、javascriptファイルを読み込ませる時もほとんど同じです。wp_register_style
をwp_register_script
に、wp_enqueue_style
をwp_enqueue_script
に置き換えるだけです。
Widget 完成形
クラスの内部も記述した全体です。
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
98
99
100
101
102
103
104
<?php
/*
Plugin Name: CD test Widget
Plugin URI: http://www.co-machi.org/plugins/cd_my_widget/
Description: テストウィジェットです。
Author: Denn
Author URI: http://www.co-machi.org/
Version: 201406
License: GPL2
*/
if (!class_exists('CD_My_Widget')) :
//require_once WP_PLUGIN_DIR . '/cd_my_widget/CD_Foge.php';
class CD_My_Widget extends WP_Widget {
// constructor
function CD_My_Widget() {
parent::WP_Widget(false, $name = 'cd_widget');
}
// widget form :ウィジェットの設定画面
function form($instance) {
if ($instance) {
$title = esc_attr($instance['title']);
$text = esc_attr($instance['text']);
} else {
$title = '';
$text = '';
}
?>
<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('text'); ?>">
<?php _e('Text:'); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('text'); ?>"
name="<?php echo $this->get_field_name('text'); ?>"
type="text"
value="<?php echo $text; ?>" />
</p>
<?php
}
// widget update :データベースに登録する値の処理
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['text'] = strip_tags($new_instance['text']);
return $instance;
}
// widget display :ウィジェットとして表示する内容の記述
function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
$text = $instance['text'];
echo $before_widget;
// ウィジェット本体を囲む
echo '<div class="widget-text cd_my_widget_block">';
// 「タイトル」の表示
if ($title) {
echo $before_title . $title . $after_title;
}
// 「テキスト」の表示
if ($text) {
echo '<p class="cd_my_widget_text">' . $text . '</p>';
}
echo '</div>';
echo $after_widget;
}
}
endif;
// register widget
add_action('widgets_init', function() {
register_widget("CD_My_Widget");
});
// register stylesheet
add_action('wp_enqueue_scripts', 'cd_enqueue_scripts');
function cd_enqueue_scripts() {
wp_register_style('cd_my_widget_style', plugins_url('', __FILE__) . '/cd_my_widget.css', array(), '201406');
wp_enqueue_style('cd_my_widget_style');
}
今回のウィジェットでは必要ありませんでしたが、別ファイルで定義した関数やクラスを使うためにインクルードする一行も入れてあります。
1
require_once WP_PLUGIN_DIR . '/cd_my_widget/CD_Foge.php';
以上、ウィジェットの作り方でした。
プラグインより簡単に作れそう、と思っていただけたらうれしいです。 皆さんもウィジェット作りに挑戦してみてください。
伝