WordPressプラグイン作成入門
82 likes39,042 views
本資料は、WordPress のプラグイン作成の基本を解説しています。エンジニア寄りの解説ですが、デザイナーさんにも読んで頂ける内容かと思います。 セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの利用の許可いただきました。 僕自身は、@horike37 さんのセッションでWordPress に感動し、WordPress の活用に目覚めた人でございます。本セッションでも、その感動を共有できたらと思っています。
![データを保存する
‣ moji_changer_edit_setting() 関数を以下に変更
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-68-320.jpg)
![function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-69-320.jpg)
![function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
} $_POSTされてきたデータをオプションAPIで保存する
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-70-320.jpg)
![function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
} $_POSTされてきたデータをオプションAPIで保存する
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD オプションAPIから値を取得する
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-71-320.jpg)
![function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
} $_POSTされてきたデータをオプションAPIで保存する
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD オプションAPIから値を取得する
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div> フォームの出力
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-72-320.jpg)
![function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
} $_POSTされてきたデータをオプションAPIで保存する
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD オプションAPIから値を取得する
<div> 【ポイント】
formのactionを空にして
<h2>顔文字チェンジャー</h2> 同じ画面を呼び出している
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div> フォームの出力
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-73-320.jpg)
![<?php
完成した
/*
Plugin Name: 顔文字チェンジャー
Plugin URI: http://foreinkey.jp/
Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪
プラグインの
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
ソースコード add_filter('the_content', 'moji_changer_content_filter');
function moji_changer_content_filter($content) {
$kaomoji = get_option('kaomoji_changer_plugin_value');
return str_replace('。', $kaomoji, $content);
}
add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_admin_menu() {
add_menu_page(
'顔文字チェンジャー',
'顔文字チェンジャー設定',
'administrator',
'moji_changer_admin_menu',
'moji_changer_edit_setting'
);
}
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-85-320.jpg)
![<?php
完成した
/*
Plugin Name: 顔文字チェンジャー
Plugin URI: http://foreinkey.jp/
Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪
プラグインの
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
プラグインメタ情報
ソースコード add_filter('the_content', 'moji_changer_content_filter');
function moji_changer_content_filter($content) {
$kaomoji = get_option('kaomoji_changer_plugin_value');
return str_replace('。', $kaomoji, $content);
}
add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_admin_menu() {
add_menu_page(
'顔文字チェンジャー',
'顔文字チェンジャー設定',
'administrator',
'moji_changer_admin_menu',
'moji_changer_edit_setting'
);
}
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-86-320.jpg)
![<?php
完成した
/*
Plugin Name: 顔文字チェンジャー
Plugin URI: http://foreinkey.jp/
Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪
プラグインの
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
プラグインメタ情報
ソースコード add_filter('the_content', 'moji_changer_content_filter');
function moji_changer_content_filter($content) {
$kaomoji = get_option('kaomoji_changer_plugin_value');
return str_replace('。', $kaomoji, $content);
投稿の本文の加工処理 }
add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_admin_menu() {
add_menu_page(
'顔文字チェンジャー',
'顔文字チェンジャー設定',
'administrator',
'moji_changer_admin_menu',
'moji_changer_edit_setting'
);
}
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-87-320.jpg)
![<?php
完成した
/*
Plugin Name: 顔文字チェンジャー
Plugin URI: http://foreinkey.jp/
Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪
プラグインの
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
プラグインメタ情報
ソースコード add_filter('the_content', 'moji_changer_content_filter');
function moji_changer_content_filter($content) {
$kaomoji = get_option('kaomoji_changer_plugin_value');
return str_replace('。', $kaomoji, $content);
投稿の本文の加工処理 }
add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_admin_menu() {
add_menu_page(
'顔文字チェンジャー',
'顔文字チェンジャー設定',
'administrator',
'moji_changer_admin_menu',
'moji_changer_edit_setting'
管理画面への );
メニューページの追加 }
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
</div>
EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-88-320.jpg)
![<?php
完成した
/*
Plugin Name: 顔文字チェンジャー
Plugin URI: http://foreinkey.jp/
Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪
プラグインの
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
プラグインメタ情報
ソースコード add_filter('the_content', 'moji_changer_content_filter');
function moji_changer_content_filter($content) {
$kaomoji = get_option('kaomoji_changer_plugin_value');
return str_replace('。', $kaomoji, $content);
投稿の本文の加工処理 }
add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_admin_menu() {
add_menu_page(
'顔文字チェンジャー',
'顔文字チェンジャー設定',
'administrator',
'moji_changer_admin_menu',
'moji_changer_edit_setting'
管理画面への );
メニューページの追加 }
function moji_changer_edit_setting() {
if (isset($_POST['kaomoji'])) {
update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']);
}
$kaomoji = get_option('kaomoji_changer_plugin_value');
echo <<<EOD
<div>
<h2>顔文字チェンジャー</h2>
<form action="" method="post">
<p><input type="text" name="kaomoji" value="{$kaomoji}" /></p>
<p><input type="submit" value="登録" /></p>
</form>
メニューページ関連の </div>
実際の処理 EOD;
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-89-320.jpg)
![<?php
/*
Plugin Name: 文字チェンジャー
Plugin URI: http://foreinkey.jp/
moji-changer.php
Description: 投稿本文中の任意のテキストを任意のテキストに置換する
Author: yuka2py
Version: 1.0.0
Author URI: http://foreinkey.jp/
*/
define('MOJI_CHANGER','MOJI_CHANGER');
add_filter('the_content', 'moji_changer_content_filter');
‣ 変換元文字も指定 add_action('admin_menu', 'moji_changer_admin_menu');
function moji_changer_content_filter($content) {
できるようにした $moji_changer_vars = get_option(MOJI_CHANGER);
if (!empty($moji_changer_vars['from'])) {
$content = str_replace(
$moji_changer_vars['from'],
●
１つのキーに $moji_changer_vars['to'],
$content);
}
配列を保存して }
return $content;
みてました。 function moji_changer_admin_menu() {
add_menu_page(
'文字チェンジャー',
'文字チェンジャー設定',
'administrator',
‣ Viewを分離した 'moji_changer_admin_menu',
'moji_changer_edit_setting'
);
}
function moji_changer_edit_setting() {
if (isset($_POST['moji_changer_vars'])) {
update_option(MOJI_CHANGER, $_POST['moji_changer_vars']);
}
$moji_changer_vars = get_option(MOJI_CHANGER);
include 'setting.html.php';
}](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-96-320.jpg)
![setting.html.php
‣ WP管理画面の
<div class="wrap">
<?php screen_icon('edit'); ?>
<h2>文字チェンジャー</h2>
CSSクラス等を
<p>記事本文中の任意の文字を、別の文字に変換するプラグインです。<br />
「置き換えする文字」を空欄にすると、置換処理は行われません。</p>
<form action="" method="post">
適用して、管理画面 <table class="form-table">
<tr>
<th><label for="moji_changer_vars[from]">置き換えする文字</
らしくしてみた label></th>
<td><input id="moji_changer_vars[from]" type="text"
name="moji_changer_vars[from]"
value="<?php echo isset($moji_changer_vars['from'])
? $moji_changer_vars['from'] : '' ?>" /></td>
</tr>
<tr>
<th><label for="moji_changer_vars[to]">置き換える文字</label></th>
<td><input id="moji_changer_vars[to]" type="text"
name="moji_changer_vars[to]"
value="<?php echo isset($moji_changer_vars['to'])
? $moji_changer_vars['to'] : '' ?>" /></td>
</tr>
</table>
<p><input type="submit" class="button-primary" value="登録" /></p>
</form>
</div>](https://image.slidesharecdn.com/wp-wordpress-121126174515-phpapp02/85/WordPress-97-320.jpg)
WordPressプラグイン作成入門
- 2. はじめに ‣ 本資料は、WordPress のプラグイン作成の基本を解説して います。エンジニア寄りの解説ですが、デザイナーさんにも 読んで頂ける内容かと思います。 ‣ セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの 利用の許可いただきました。 ‣ 僕自身は、@horike37 さんのセッションでWordPress に 感動し、WordPress の活用に目覚めた人でございます。本 セッションでも、その感動を共有できたらと思っています。
- 3. 自己紹介 ‣ ノジマユウジ ‣ システム開発、 @yuka2py グラフィックデザイン、 DTPや印刷なども ‣ 株式会社フォーエンキー 代表 ‣ 最近はiPhone/Android のアプリ開発とかスマホ ‣ PythonとJavascriptが大 系のWebとか、WinDTア 好き（Dartに興味深々） プリなど作っています ‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆
- 4. 自己紹介 ‣ ノジマユウジ ‣ システム開発、 @yuka2py グラフィックデザイン、 DTPや印刷なども ‣ 株式会社フォーエンキー 絶賛 代表 お仕事募 ‣ 最近はiPhone/Android 集中 のアプリ開発とかスマホ ‣ PythonとJavascriptが大 系のWebとか、WinDTア 好き（Dartに興味深々） プリなど作っています ‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆
- 5. 最近のボク Python Design 1% お嫁 15% Windows(C#) iOS お嫁 Web(PHP/JS) 4% Android Android 40% iOS Design 10% Python Web(PHP/JS) 10% Windows(C#) 2012年11月2日 株式会社フォーエンキー調べ 20%
- 7. …は、出来てる前提です (*́ `*)ﾃﾍ♪ Σ(ﾟДﾟ;)
- 10. WPの動作の大まかな理解 初期化
- 11. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される
- 12. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる
- 13. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる レスポンス
- 14. WPの動作の大まかな理解 割り込み 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
- 15. WPの動作の大まかな理解 割り込み 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
- 16. WPの動作の大まかな理解 割り込み これ!! 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
- 17. WPのプラグインとは？ 「フック」を利用して、 WordPressに様々な機能を 追加するもの
- 18. どんなプラグインを作る？
- 19. 顔文字チェンジャー
- 23. プラグイン作成の準備
- 25. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、 任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、 任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ
- 26. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、 任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、 任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 作成
- 27. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、 任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、 任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 任意のPHPファイル 作成 作成
- 28. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、 任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、 任意の名前のPHPファイルを作成 この例では一緒にしてますが、全然違う名前でもOK! /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 任意のPHPファイル 作成 作成
- 29. メタデータを記述する ‣ moji-changer.php を開いて、以下のように、 プラグインのメタ情報を記述する <?php /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */
- 30. メタデータを記述する ‣ moji-changer.php を開いて、以下のように、 プラグインのメタ情報を記述する WPはこの <?php メタ情報でプ /* ラグインを認 識する Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */
- 31. 以上。 Σ(ﾟДﾟ;)
- 32. これだけで...
- 35. (*-`д-;) ｽ ｽｹﾞｪ… WPから プラグインが 認識される! でもまだ 何もしない
- 36. 投稿の本文テキストを加工する ∼フィルターフックの利用∼ WPの カスタマイズ はフックから
- 37. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { return str_replace('。', '(́･ω･`)', $content); }
- 38. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター フックの 登録関数 function moji_changer_content_filter($content) { return str_replace('。', '(́･ω･`)', $content); }
- 39. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 登録関数 フィルターフック function moji_changer_content_filter($content) { return str_replace('。', '(́･ω･`)', $content); }
- 40. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { return str_replace('。', '(́･ω･`)', $content); }
- 41. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { 投稿本文 の文字列 return str_replace('。', '(́･ω･`)', $content); }
- 42. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { 投稿本文 の文字列 return str_replace('。', '(́･ω･`)', $content); 投稿本文 $content に必要な処理を行って返す }
- 43. 以上。 Σ(ﾟДﾟ;)
- 44. 試してみます 有効化 する
- 48. 変わった!! d(*･` ･
- 50. まずはCodexで検索
- 52. ソースコードを読む 良くも悪 くもWPの ソースコード は読み易い the_contentフックの引数を確認
- 54. 管理画面にメニューを追加する ‣ moji-changer.php に以下のコードを追加する add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 ); } function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 55. add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 ); } function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 56. add_action('admin_menu', 'moji_changer_admin_menu'); 管理画面にメニューページを追加するフィルターフック function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 ); } function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 57. add_action('admin_menu', 'moji_changer_admin_menu'); 管理画面にメニューページを追加するフィルターフック function moji_changer_admin_menu() { add_menu_page( 投稿本文の出力前のフィルターフック名 '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 ); } function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 58. add_action('admin_menu', 'moji_changer_admin_menu'); 管理画面にメニューページを追加するフィルターフック function moji_changer_admin_menu() { add_menu_page( 投稿本文の出力前のフィルターフック名 '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 add_menu_page のオプション ); } function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 59. add_action('admin_menu', 'moji_changer_admin_menu'); 管理画面にメニューページを追加するフィルターフック function moji_changer_admin_menu() { add_menu_page( 投稿本文の出力前のフィルターフック名 '顔文字チェンジャー', //HTMLのページタイトル '顔文字チェンジャー設定', //管理画面メニューの表示名 'administrator', //この機能を利用できるユーザー 'moji_changer_admin_menu', //urlに入る名前 'moji_changer_edit_setting' //機能を提供する関数 add_menu_page のオプション ); 実行したい関数を定義して } 指定する function moji_changer_edit_setting() { echo "設定画面をここに書くよ！"; }
- 60. 以上。 Σ(ﾟДﾟ;)
- 61. これだけで...
- 62. 管理画面に メニューが 追加され
- 64. 管理画面に メニューが 追加され 個別の設定 画面が開く クリックすると...
- 65. 管理画面に メニューが 追加され 個別の設定 画面が開く クリックすると... moji_changer_edit_setting() 関数内での出力
- 66. 管理画面に メニューが 追加され add_menu_page()の 個別の設定 第４引数で指定した文字列 画面が開く クリックすると... moji_changer_edit_setting() 関数内での出力
- 68. データを保存する ‣ moji_changer_edit_setting() 関数を以下に変更 function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 69. function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 70. function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $_POSTされてきたデータをオプションAPIで保存する $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 71. function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $_POSTされてきたデータをオプションAPIで保存する $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD オプションAPIから値を取得する <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 72. function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $_POSTされてきたデータをオプションAPIで保存する $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD オプションAPIから値を取得する <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> フォームの出力 EOD; }
- 73. function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $_POSTされてきたデータをオプションAPIで保存する $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD オプションAPIから値を取得する <div> 【ポイント】 formのactionを空にして <h2>顔文字チェンジャー</h2> 同じ画面を呼び出している <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> フォームの出力 EOD; }
- 74. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); }
- 75. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); オプションAPIから値を取得する return str_replace('。', $kaomoji, $content); }
- 76. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); オプションAPIから値を取得する return str_replace('。', $kaomoji, $content); }
- 77. 以上。 Σ(ﾟДﾟ;)
- 78. 結果...
- 79. 入力 フォーム が表示
- 83. 完成ー!! ヽ(*´∀`)/
- 84. まとめ
- 85. <?php 完成した /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ プラグインの Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ ソースコード add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); } add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', '顔文字チェンジャー設定', 'administrator', 'moji_changer_admin_menu', 'moji_changer_edit_setting' ); } function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 86. <?php 完成した /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ プラグインの Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ プラグインメタ情報 ソースコード add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); } add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', '顔文字チェンジャー設定', 'administrator', 'moji_changer_admin_menu', 'moji_changer_edit_setting' ); } function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 87. <?php 完成した /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ プラグインの Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ プラグインメタ情報 ソースコード add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); 投稿の本文の加工処理 } add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', '顔文字チェンジャー設定', 'administrator', 'moji_changer_admin_menu', 'moji_changer_edit_setting' ); } function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 88. <?php 完成した /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ プラグインの Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ プラグインメタ情報 ソースコード add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); 投稿の本文の加工処理 } add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', '顔文字チェンジャー設定', 'administrator', 'moji_changer_admin_menu', 'moji_changer_edit_setting' 管理画面への ); メニューページの追加 } function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> </div> EOD; }
- 89. <?php 完成した /* Plugin Name: 顔文字チェンジャー Plugin URI: http://foreinkey.jp/ Description: 投稿本文中の「。」を顔文字に変換するおもろプラグイン♪ プラグインの Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ プラグインメタ情報 ソースコード add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); 投稿の本文の加工処理 } add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_admin_menu() { add_menu_page( '顔文字チェンジャー', '顔文字チェンジャー設定', 'administrator', 'moji_changer_admin_menu', 'moji_changer_edit_setting' 管理画面への ); メニューページの追加 } function moji_changer_edit_setting() { if (isset($_POST['kaomoji'])) { update_option('kaomoji_changer_plugin_value', $_POST['kaomoji']); } $kaomoji = get_option('kaomoji_changer_plugin_value'); echo <<<EOD <div> <h2>顔文字チェンジャー</h2> <form action="" method="post"> <p><input type="text" name="kaomoji" value="{$kaomoji}" /></p> <p><input type="submit" value="登録" /></p> </form> メニューページ関連の </div> 実際の処理 EOD; }
- 90. まとめ
- 91. まとめ ‣ WPプラグインは「フッ ク」を使って開発する ● 必要な関数をフック登録
- 92. まとめ ‣ WPプラグインは「フッ ク」を使って開発する ● 必要な関数をフック登録 ‣ WordPress の組込関数 やオブジェクトを利用し て機能を実現する ● add_menu_page 関数 ● Option API
- 93. まとめ ‣ WPプラグインは「フッ ‣ フックやWP組み込み ク」を使って開発する 関数の使い方を除くと、 ● 必要な関数をフック登録 やっぱりただのPHP ‣ WordPress の組込関数 大事!! やオブジェクトを利用し て機能を実現する ● フックや組み込み関数沢 山はたくさんあるけど、 ● add_menu_page 関数 基本的な考え方は非常に ● Option API シンプル
- 94. 注意点・補足 ‣ key/value ストアの ‣ 外部入力データは key名の重複を避ける クオートされてます ● key名はテーマやプラグイン毎 ● WordPress が独自に に名前空間が分かれてはいない magic_quotesする! ● 一般にはプラグイン名のプリ ● 戻す関数があります。 フィックスを付ける ‣ Option API はプリミティブな ‣ 他のプラグインやテーマの関数 値以外に、配列なども保存可能 との重複を避ける ‣ 説明の簡単の為に、サンプル等 ● 一般にはプラグイン名のプリ フィックスを付ける のコードは最低限のものですの でご注意ください
- 96. <?php /* Plugin Name: 文字チェンジャー Plugin URI: http://foreinkey.jp/ moji-changer.php Description: 投稿本文中の任意のテキストを任意のテキストに置換する Author: yuka2py Version: 1.0.0 Author URI: http://foreinkey.jp/ */ define('MOJI_CHANGER','MOJI_CHANGER'); add_filter('the_content', 'moji_changer_content_filter'); ‣ 変換元文字も指定 add_action('admin_menu', 'moji_changer_admin_menu'); function moji_changer_content_filter($content) { できるようにした $moji_changer_vars = get_option(MOJI_CHANGER); if (!empty($moji_changer_vars['from'])) { $content = str_replace( $moji_changer_vars['from'], ● １つのキーに $moji_changer_vars['to'], $content); } 配列を保存して } return $content; みてました。 function moji_changer_admin_menu() { add_menu_page( '文字チェンジャー', '文字チェンジャー設定', 'administrator', ‣ Viewを分離した 'moji_changer_admin_menu', 'moji_changer_edit_setting' ); } function moji_changer_edit_setting() { if (isset($_POST['moji_changer_vars'])) { update_option(MOJI_CHANGER, $_POST['moji_changer_vars']); } $moji_changer_vars = get_option(MOJI_CHANGER); include 'setting.html.php'; }
- 97. setting.html.php ‣ WP管理画面の <div class="wrap"> <?php screen_icon('edit'); ?> <h2>文字チェンジャー</h2> CSSクラス等を <p>記事本文中の任意の文字を、別の文字に変換するプラグインです。<br /> 「置き換えする文字」を空欄にすると、置換処理は行われません。</p> <form action="" method="post"> 適用して、管理画面 <table class="form-table"> <tr> <th><label for="moji_changer_vars[from]">置き換えする文字</ らしくしてみた label></th> <td><input id="moji_changer_vars[from]" type="text" name="moji_changer_vars[from]" value="<?php echo isset($moji_changer_vars['from']) ? $moji_changer_vars['from'] : '' ?>" /></td> </tr> <tr> <th><label for="moji_changer_vars[to]">置き換える文字</label></th> <td><input id="moji_changer_vars[to]" type="text" name="moji_changer_vars[to]" value="<?php echo isset($moji_changer_vars['to']) ? $moji_changer_vars['to'] : '' ?>" /></td> </tr> </table> <p><input type="submit" class="button-primary" value="登録" /></p> </form> </div>
- 98. もし良かったら遊んでください♪ @yuka2py https://twitter.com/yuka2py http://www.facebook.com/yuka2py http://gplus.to/yuka2py (´∀`〃)ゝｷｬﾊ
- 99. ご静聴、ありがとうございました！
- 100. この文書は クリエイティブ・コモンズ 表示 - 継承 2.1 日本 ライセンスの下に提供されています。
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n