WordPressプラグインの作り方

© wordbonch.org
WordPress プラグインの作り方
WordBench宮崎
ver.1.0.0【WordBench宮崎勉強会】

© wordbonch.org
自己紹介
1
高見和也（Takami Kazuya）
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
フロントエンドエンジニア
PHPやJavaScriptとかスクリプト系言語好き。

© wordbonch.org
ハッシュタグ
2
高見和也（Takami Kazuya）
Twitter@miiitaka
Facebook@miiitaka
#wbmiyazaki

© wordbonch.org
まずは基本
3
WordPressのプラグイン基礎知識
(説明内容はWordPress3.9ベースです)

© wordbonch.org
プラグインとフックポイント
4
WordBench宮崎
宮崎のWordPress大好きな人たちのためのコミュニティ
WordBench宮崎の取組について
WordPress,勉強会
2014.07.12
WordBench宮崎は2ヶ月に1回のペース
で勉強会を開催しています。
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx
Author : Takami
Copyright © Miyazaki WordBench
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
WordPressには沢山のフックポイント
（Hook Point）が準備されています。

© wordbonch.org
フック（プログラミング）
フック（Hook）は、プログラム中の特定の箇所に、利用者が独
自の処理を追加できるようにする仕組みである。また、フックを
利用して独自の処理を追加することを「フックする」という。
処理を追加できる箇所は、元のプログラムの開発者によって、あ
らかじめ決められている。初期化処理や入出力処理などの直前・
直後が対象としてよく選ばれる。
5
wikipediaより出展

© wordbonch.org
6
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
Author : Takami
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
例えば、投稿記事のページが左図のよう
な構成で出来上がっているとします。

© wordbonch.org
7
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
Author : Takami
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
記事のタイトルが表示されたら
投稿日が表示されたら
記事の内容が表示されたら
投稿者の名前が表示されたら
例えば、投稿記事のページが左図のよう
な構成で出来上がっているとします。

© wordbonch.org
8
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
Author : Takami
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
the_title();
the_date();
the_content();
the_author();
WordPressで表示する場合

© wordbonch.org
9
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
Author : Takami
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
the_title();
the_date();
the_content();
the_author();
WordPressで表示する場合
この処理の中でフック
ポイントが設定されて
います。

© wordbonch.org
プラグインは
フックポイントが設定されている
処理が発生した時に
WordPressに何らかの処理（機能）
を追加します。
10

© wordbonch.org
プラグインの構想
11
作成するプラグインの構想

© wordbonch.org
SNSボタン（今回はTwitter）を実装
12
・投稿記事が表示された後に表示する。
・管理画面からボタンの形式を変更できる。
https://dev.twitter.com/docs/tweet-button

© wordbonch.org
13
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
the_content();
投稿記事表示後にボタン表示
この処理の後にTwitter
ボタンを表示します。
こんな感じで表示

© wordbonch.org
プラグインのファイル構成
14
プラグインの基本ファイル作成

© wordbonch.org
WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。
15
/wp-admin/
管理画面で使用するファイルあれこれがある。基本触らない。
/wp-content/
基本、このフォルダの中をさわりましょう。
/wp-include/
WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。
/
ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の
ファイルなどなど

© wordbonch.org
wp-contentフォルダのさらに中のお話。
16
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。

© wordbonch.org
今回は/wp-content/plugin/が主役です。
17
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。
この中にプラグイン毎
にディレクトリが作成
されます。

© wordbonch.org
プラグイン作成に必要なディレクトリ／ファイルの準備をします。
18
/wp-content/
/wp-content/plugin/sns-button-plugin/sns-button-plugin.php
pluginディレクトリに
任意の名前でディレク
トリ作成
pluginディレクトリに
任意の名前でディレク
トリ作成

© wordbonch.org
プラグインのメタ情報を記述します。
19
/wp-content/
このファイルの先頭に
プラグインのメタ情報
を記述します。

© wordbonch.org
<?php
/*
Plugin Name: SNS Button Plugin
Description: Twitterのボタンを表示するプラグイン
Author: Kazuya Takami
Version: 1.0
Author URI: http://programp.com/
*/
プラグインのメタ情報を記述します。
20
/wp-content/
このメタ情報でプラグ
インを認識します。

© wordbonch.org
<?php
/*
Version: 1.0
*/
管理画面に出てきた！
21
Plugin Name Description
Author
Authro URI
Version

© wordbonch.org
<?php
/*
Version: 1.0
*/
管理画面に出てきた！
22
「有効化」を押すとsns-button-plugin.php内
に記述した処理が動き出すが、まだ何も記
述していないので何も起きません。

© wordbonch.org
投稿記事にフック
23
プラグインで投稿記事にフック

© wordbonch.org 24
WordBench宮崎
WordPress,勉強会
2014.07.12
xxxxxxxxxxxxxx
アーカイブ
2014.01(1)
2014.03(1)
2014.05(1)
2014.07(1)
カテゴリー
勉強会(4)
the_content();
プラグインの仕様時に決めた、投稿記事
表示後にボタン表示することにします。
この処理の後にTwitter
ボタンを表示します。
こんな感じで表示
ということはこの処理
をフックして機能を追
加します。

© wordbonch.org
function the_content( $more_link_text = null, $strip_teaser = false) {
$content = get_the_content( $more_link_text, $strip_teaser );
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );
echo $content;
}
/wp-include/post-template.php に処理が記述してあります。（コメント省略）
25
1
2
3
4
5
6
7
2行目のget_the_content()で投稿記事本文を
取得し、$content 変数に保存。

© wordbonch.org
function the_content( $more_link_text = null, $strip_teaser = false) {
$content = get_the_content( $more_link_text, $strip_teaser );
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );
echo $content;
}
/wp-include/post-template.php に処理が記述してあります。（コメント省略）
26
1
2
3
4
5
6
7
apply_filters()がポイント。
フックポイントの名前が、the_content、
引数が投稿記事のデータ、$content となり
ます。

© wordbonch.org
function sns_button_filter($content) {
$str = '';
$str .= '<a href="https://twitter.com/share" class="twitter-share-button"
data-lang="en" data-count="vertical">Tweet</a>';
$str .= '<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s
);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertB
efore(js,fjs);}}(document,"script","twitter-wjs");</script>';
return $content . $str;
}
add_filter('the_content', 'sns_button_filter');
sns-button-plugin.php に戻ってまず、関数を準備します。
27
Twitterで発行した
タグを変数に保存

© wordbonch.org
$str = '';
}
sns_button_filter() 関数をadd_filter() 関数で設定します。
28

© wordbonch.org 29
管理画面で「有効化」
を押します。

© wordbonch.org 30
「有効化」状態
でた！＼(^o^)／

© wordbonch.org
アクションフック（add_action()）
基本的に既存の処理を変更できない。
何からのアクションの前後に処理を追加する場合に用いる。
31
フィルターフック（add_filter()）
基本的に処理の追加ができない。
既存の処理に対して処理を変更する場合に用いる。

© wordbonch.org
function add_action($tag, $function_to_add, $priority = 10, $accepted_args = 1) {
return add_filter($tag, $function_to_add, $priority, $accepted_args);
}
add_action() 関数の中身を見ると...
32
結局の所、add_filter() を返しているので、
同じ処理をやっている模様。
今後、何か使い分けがでるのか？とりあえず
add_filter() を使っておけば問題なさそう。
フィルターフック（add_filter()）
基本的に処理の追加ができない。
既存の処理に対して処理を変更する場合に用いる。

© wordbonch.org 33
プラグインで管理画面にフック

© wordbonch.org
34
設定メニューの中の
フックポイントに仕掛ける
管理画面の「設定」メニュー内にプラグイン用のメニュー
を追加します。

© wordbonch.org
35
まず、メニューをクリックしたときに表示する画面。
とりあえずタイトルを表示するだけの関数を準備。(sns-button-plugin.phpに追記)
function sns_button_option_set() {
echo '<h2>SNS Button 設定画面</h2>';
}

© wordbonch.org
36
次に設定メニュー内に項目を追加。
add_options_page() 関数を使用して追加します。
}
function sns_button_option_menu() {
add_options_page(
'SNS Button',
'SNS Button Option',
'manage_options',
__FILE__,
'sns_button_option_set'
);
}

© wordbonch.org
37
add_options_page() 関数を解説
add_options_page(
‘SNS Button’,
'manage_options',
__FILE__,
);
■第一引数
ページのタイトル（titleタグ）に表示する文字列（任意）
■第二引数
メニューに表示する文字列（任意）
■第三引数
サブメニューの権限
※ここを数値で指定している情報もありますが、WordPress2.0か
ら非推奨になっていますので、権限名で指定します。
■第四引数
サブメニューのスラッグ（URLのpage=??? の??? 部分）
■第五引数
サブメニューページのコールバック関数

© wordbonch.org
38
最後に、add_filter() でフックポイントを指定して関数を呼び出す。
}
function sns_button_option_menu() {
add_options_page(
'SNS Button',
'manage_options',
__FILE__,
);
}
add_filter('admin_menu', 'sns_button_option_menu');
管理画面のメニューにフッ
クするフィルター名

© wordbonch.org
41
Twitterのdata-countの表示方法を変えれるようにプルダウンで選択できるようにします。
if (isset($_POST['displaysas'])) {
update_option('sns_button_option_displaysas', esc_html($_POST['displaysas']));
}
echo <<< EOF
<h2>SNS Button 設定画面</h2>
<form action="" method="POST">
表示形式：
<select name="displaysas">
<option value="none">標準</option>
<option value="horizontal">水平方向にカウント吹き出し</option>
<option value="vertical">垂直方向にカウント吹き出し</option>
</select>
<p><input type="submit" value="更新"></p>
</form>
EOF;
}
この値をPOST

© wordbonch.org
$displayas = get_option('sns_button_option_displaysas');
$str = '';
data-lang="en" data-count="' . esc_attr($displayas) . '">Tweet</a>';
}
46
変数に取得した値をセット

© wordbonch.org
• フックポイントは、apply_filter() を定義しているところなので探せば沢山ある。
• フックさせるには、add_action() / add_filter() でフックさせる。
• フックさせた後の動作を関数でまとめる。
• フックポイントによって引数も異なるので、ソースコードを見てみる。
まとめ
49

© wordbonch.org
Codex日本語版：プラグイン作成
http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%
B3%E3%81%AE%E4%BD%9C%E6%88%90
Codex日本語版：ユーザーの種類と権限
http://wpdocs.sourceforge.jp/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%
AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E6%A8%A9%E9%99%90
参考URL
51

WordPressプラグインの作り方

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPressプラグインの作り方

Similar to WordPressプラグインの作り方 (20)

More from Takami Kazuya

More from Takami Kazuya (20)

Recently uploaded

Recently uploaded (10)

WordPressプラグインの作り方