Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

WordPressプラグイン作成入門 Slide 1 WordPressプラグイン作成入門 Slide 2 WordPressプラグイン作成入門 Slide 3 WordPressプラグイン作成入門 Slide 4 WordPressプラグイン作成入門 Slide 5 WordPressプラグイン作成入門 Slide 6 WordPressプラグイン作成入門 Slide 7 WordPressプラグイン作成入門 Slide 8 WordPressプラグイン作成入門 Slide 9 WordPressプラグイン作成入門 Slide 10 WordPressプラグイン作成入門 Slide 11 WordPressプラグイン作成入門 Slide 12 WordPressプラグイン作成入門 Slide 13 WordPressプラグイン作成入門 Slide 14 WordPressプラグイン作成入門 Slide 15 WordPressプラグイン作成入門 Slide 16 WordPressプラグイン作成入門 Slide 17 WordPressプラグイン作成入門 Slide 18 WordPressプラグイン作成入門 Slide 19 WordPressプラグイン作成入門 Slide 20 WordPressプラグイン作成入門 Slide 21 WordPressプラグイン作成入門 Slide 22 WordPressプラグイン作成入門 Slide 23 WordPressプラグイン作成入門 Slide 24 WordPressプラグイン作成入門 Slide 25 WordPressプラグイン作成入門 Slide 26 WordPressプラグイン作成入門 Slide 27 WordPressプラグイン作成入門 Slide 28 WordPressプラグイン作成入門 Slide 29 WordPressプラグイン作成入門 Slide 30 WordPressプラグイン作成入門 Slide 31 WordPressプラグイン作成入門 Slide 32 WordPressプラグイン作成入門 Slide 33 WordPressプラグイン作成入門 Slide 34 WordPressプラグイン作成入門 Slide 35 WordPressプラグイン作成入門 Slide 36 WordPressプラグイン作成入門 Slide 37 WordPressプラグイン作成入門 Slide 38 WordPressプラグイン作成入門 Slide 39 WordPressプラグイン作成入門 Slide 40 WordPressプラグイン作成入門 Slide 41 WordPressプラグイン作成入門 Slide 42 WordPressプラグイン作成入門 Slide 43 WordPressプラグイン作成入門 Slide 44 WordPressプラグイン作成入門 Slide 45 WordPressプラグイン作成入門 Slide 46 WordPressプラグイン作成入門 Slide 47 WordPressプラグイン作成入門 Slide 48 WordPressプラグイン作成入門 Slide 49 WordPressプラグイン作成入門 Slide 50 WordPressプラグイン作成入門 Slide 51 WordPressプラグイン作成入門 Slide 52 WordPressプラグイン作成入門 Slide 53 WordPressプラグイン作成入門 Slide 54 WordPressプラグイン作成入門 Slide 55 WordPressプラグイン作成入門 Slide 56 WordPressプラグイン作成入門 Slide 57 WordPressプラグイン作成入門 Slide 58 WordPressプラグイン作成入門 Slide 59 WordPressプラグイン作成入門 Slide 60 WordPressプラグイン作成入門 Slide 61 WordPressプラグイン作成入門 Slide 62 WordPressプラグイン作成入門 Slide 63 WordPressプラグイン作成入門 Slide 64 WordPressプラグイン作成入門 Slide 65 WordPressプラグイン作成入門 Slide 66 WordPressプラグイン作成入門 Slide 67 WordPressプラグイン作成入門 Slide 68 WordPressプラグイン作成入門 Slide 69 WordPressプラグイン作成入門 Slide 70 WordPressプラグイン作成入門 Slide 71 WordPressプラグイン作成入門 Slide 72 WordPressプラグイン作成入門 Slide 73 WordPressプラグイン作成入門 Slide 74 WordPressプラグイン作成入門 Slide 75 WordPressプラグイン作成入門 Slide 76 WordPressプラグイン作成入門 Slide 77 WordPressプラグイン作成入門 Slide 78 WordPressプラグイン作成入門 Slide 79 WordPressプラグイン作成入門 Slide 80 WordPressプラグイン作成入門 Slide 81 WordPressプラグイン作成入門 Slide 82 WordPressプラグイン作成入門 Slide 83 WordPressプラグイン作成入門 Slide 84 WordPressプラグイン作成入門 Slide 85 WordPressプラグイン作成入門 Slide 86 WordPressプラグイン作成入門 Slide 87 WordPressプラグイン作成入門 Slide 88 WordPressプラグイン作成入門 Slide 89 WordPressプラグイン作成入門 Slide 90 WordPressプラグイン作成入門 Slide 91 WordPressプラグイン作成入門 Slide 92 WordPressプラグイン作成入門 Slide 93 WordPressプラグイン作成入門 Slide 94 WordPressプラグイン作成入門 Slide 95 WordPressプラグイン作成入門 Slide 96 WordPressプラグイン作成入門 Slide 97 WordPressプラグイン作成入門 Slide 98 WordPressプラグイン作成入門 Slide 99 WordPressプラグイン作成入門 Slide 100
Upcoming SlideShare
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Next
Download to read offline and view in fullscreen.

83 Likes

Share

Download to read offline

WordPressプラグイン作成入門

Download to read offline

本資料は、WordPress のプラグイン作成の基本を解説しています。エンジニア寄りの解説ですが、デザイナーさんにも読んで頂ける内容かと思います。

セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの利用の許可いただきました。

僕自身は、@horike37 さんのセッションでWordPress に感動し、WordPress の活用に目覚めた人でございます。本セッションでも、その感動を共有できたらと思っています。

Related Books

Free with a 30 day trial from Scribd

See all

WordPressプラグイン作成入門

  1. 1. WordPressプラグイン作成入門 ∼とりあえず「出来そう!」「簡単そう!」って思ってもらいたい∼
  2. 2. はじめに ‣ 本資料は、WordPress のプラグイン作成の基本を解説して います。エンジニア寄りの解説ですが、デザイナーさんにも 読んで頂ける内容かと思います。 ‣ セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの 利用の許可いただきました。 ‣ 僕自身は、@horike37 さんのセッションでWordPress に 感動し、WordPress の活用に目覚めた人でございます。本 セッションでも、その感動を共有できたらと思っています。
  3. 3. 自己紹介 ‣ ノジマユウジ ‣ システム開発、 @yuka2py グラフィックデザイン、 DTPや印刷なども ‣ 株式会社フォーエンキー 代表 ‣ 最近はiPhone/Android のアプリ開発とかスマホ ‣ PythonとJavascriptが大 系のWebとか、WinDTア 好き(Dartに興味深々) プリなど作っています ‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆
  4. 4. 自己紹介 ‣ ノジマユウジ ‣ システム開発、 @yuka2py グラフィックデザイン、 DTPや印刷なども ‣ 株式会社フォーエンキー 絶賛 代表 お仕事募 ‣ 最近はiPhone/Android 集中 のアプリ開発とかスマホ ‣ PythonとJavascriptが大 系のWebとか、WinDTア 好き(Dartに興味深々) プリなど作っています ‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆
  5. 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%
  6. 6. WordPressのインストール
  7. 7. …は、出来てる前提です (*́ `*)テヘ♪ Σ(゚Д゚;)
  8. 8. こちらで丁寧に解説されてますよ♪ http://wpdocs.sourceforge.jp/WordPress のインストール
  9. 9. WordPressのプラグインとは?
  10. 10. WPの動作の大まかな理解 初期化
  11. 11. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される
  12. 12. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる
  13. 13. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる レスポンス
  14. 14. WPの動作の大まかな理解 割り込み 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
  15. 15. WPの動作の大まかな理解 割り込み 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
  16. 16. WPの動作の大まかな理解 割り込み これ!! 初期化 フ ク ッ URLに対応するデータが検索される フ ク ッ URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
  17. 17. WPのプラグインとは? 「フック」を利用して、 WordPressに様々な機能を 追加するもの
  18. 18. どんなプラグインを作る?
  19. 19. 顔文字チェンジャー
  20. 20. 顔文字チェンジャー ‣ WordPressの投稿の本文に、表示前にアクセス。
  21. 21. 顔文字チェンジャー ‣ WordPressの投稿の本文に、表示前にアクセス。 ‣ 本文中の「。」を顔文字に変換して表示する。
  22. 22. 顔文字チェンジャー ‣ WordPressの投稿の本文に、表示前にアクセス。 ‣ 本文中の「。」を顔文字に変換して表示する。 。 (´・ω・`)
  23. 23. プラグイン作成の準備
  24. 24. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、         任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、         任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php
  25. 25. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、         任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、         任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ
  26. 26. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、         任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、         任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 作成
  27. 27. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、         任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、         任意の名前のPHPファイルを作成 /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 任意のPHPファイル 作成 作成
  28. 28. プラグインファイルの作成 ‣ WPのプラグインディレクトリに、         任意の名前のディレクトリを作成 ‣ 作成したディレクトリ内に、         任意の名前のPHPファイルを作成 この例では一緒にしてますが、全然違う名前でもOK! /wp-content/plugins/moji-changer/moji-changer.php プラグインディレクトリ 任意のディレクトリ 任意のPHPファイル 作成 作成
  29. 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. 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. 31.  以上。 Σ(゚Д゚;)
  32. 32. これだけで...
  33. 33. (*-`д-;) ス スゲェ… WPから プラグインが 認識される!
  34. 34. (*-`д-;) ス スゲェ… WPから プラグインが 認識される! でもまだ 何もしない
  35. 35. 投稿の本文テキストを加工する ∼フィルターフックの利用∼ WPの カスタマイズ はフックから
  36. 36. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); function moji_changer_content_filter($content) { return str_replace('。', '(́・ω・`)', $content); }
  37. 37. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター フックの 登録関数 function moji_changer_content_filter($content) { return str_replace('。', '(́・ω・`)', $content); }
  38. 38. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 登録関数 フィルターフック function moji_changer_content_filter($content) { return str_replace('。', '(́・ω・`)', $content); }
  39. 39. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { return str_replace('。', '(́・ω・`)', $content); }
  40. 40. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { 投稿本文 の文字列 return str_replace('。', '(́・ω・`)', $content); }
  41. 41. フックを追加 ‣ moji-changer.php に以下のコードを追加する add_filter('the_content', 'moji_changer_content_filter'); フィルター 【フック名】 フックの 投稿本文の出力前の 実行したい関数を定義して 登録関数 フィルターフック フックに関数名を指定する function moji_changer_content_filter($content) { 投稿本文 の文字列 return str_replace('。', '(́・ω・`)', $content); 投稿本文 $content に必要な処理を行って返す }
  42. 42.  以上。 Σ(゚Д゚;)
  43. 43. 試してみます 有効化 する
  44. 44. 変わった!! d(*・` ・
  45. 45. APIを確認するには? ∼エンジニアだったら気になるその確認方法∼
  46. 46. まずはCodexで検索
  47. 47. ソースコードを読む the_contentフックの引数を確認
  48. 48. ソースコードを読む 良くも悪 くもWPの ソースコード は読み易い the_contentフックの引数を確認
  49. 49. 設定画面を追加する ∼アクションフィルタの利用∼
  50. 50. 管理画面にメニューを追加する ‣ 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 "設定画面をここに書くよ!"; }
  51. 51. 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 "設定画面をここに書くよ!"; }
  52. 52. 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 "設定画面をここに書くよ!"; }
  53. 53. 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 "設定画面をここに書くよ!"; }
  54. 54. 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 "設定画面をここに書くよ!"; }
  55. 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' //機能を提供する関数 add_menu_page のオプション ); 実行したい関数を定義して } 指定する function moji_changer_edit_setting() { echo "設定画面をここに書くよ!"; }
  56. 56.  以上。 Σ(゚Д゚;)
  57. 57. これだけで...
  58. 58. 管理画面に メニューが 追加され
  59. 59. 管理画面に メニューが 追加され クリックすると...
  60. 60. 管理画面に メニューが 追加され 個別の設定 画面が開く クリックすると...
  61. 61. 管理画面に メニューが 追加され 個別の設定 画面が開く クリックすると... moji_changer_edit_setting() 関数内での出力
  62. 62. 管理画面に メニューが 追加され add_menu_page()の 個別の設定 第4引数で指定した文字列 画面が開く クリックすると... moji_changer_edit_setting() 関数内での出力
  63. 63. 設定機能を実装する ∼データの永続化。Option API の利用∼
  64. 64. データを保存する ‣ 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; }
  65. 65. 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; }
  66. 66. 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; }
  67. 67. 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; }
  68. 68. 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; }
  69. 69. 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; }
  70. 70. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); return str_replace('。', $kaomoji, $content); }
  71. 71. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); オプションAPIから値を取得する return str_replace('。', $kaomoji, $content); }
  72. 72. 保存したデータを利用する ‣ moji_changer_content_filter() 関数を以下に変更 function moji_changer_content_filter($content) { $kaomoji = get_option('kaomoji_changer_plugin_value'); オプションAPIから値を取得する return str_replace('。', $kaomoji, $content); }
  73. 73.  以上。 Σ(゚Д゚;)
  74. 74. 結果...
  75. 75. 入力 フォーム が表示
  76. 76. 入力 フォーム が表示 値を 登録保存 できる
  77. 77. 完成ー!! ヽ(*´∀`)/
  78. 78. まとめ
  79. 79. <?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; }
  80. 80. <?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; }
  81. 81. <?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; }
  82. 82. <?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; }
  83. 83. <?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; }
  84. 84. まとめ
  85. 85. まとめ ‣ WPプラグインは「フッ ク」を使って開発する ● 必要な関数をフック登録
  86. 86. まとめ ‣ WPプラグインは「フッ ク」を使って開発する ● 必要な関数をフック登録 ‣ WordPress の組込関数 やオブジェクトを利用し て機能を実現する ● add_menu_page 関数 ● Option API
  87. 87. まとめ ‣ WPプラグインは「フッ ‣ フックやWP組み込み ク」を使って開発する 関数の使い方を除くと、 ● 必要な関数をフック登録 やっぱりただのPHP ‣ WordPress の組込関数 大事!! やオブジェクトを利用し て機能を実現する ● フックや組み込み関数沢 山はたくさんあるけど、 ● add_menu_page 関数 基本的な考え方は非常に ● Option API シンプル
  88. 88. 注意点・補足 ‣ key/value ストアの ‣ 外部入力データは key名の重複を避ける クオートされてます ● key名はテーマやプラグイン毎 ● WordPress が独自に に名前空間が分かれてはいない magic_quotesする! ● 一般にはプラグイン名のプリ ● 戻す関数があります。 フィックスを付ける ‣ Option API はプリミティブな ‣ 他のプラグインやテーマの関数 値以外に、配列なども保存可能 との重複を避ける ‣ 説明の簡単の為に、サンプル等 ● 一般にはプラグイン名のプリ フィックスを付ける のコードは最低限のものですの でご注意ください
  89. 89. エンジニア的な発展 ∼キレイに書きたきゃ書けば良い∼
  90. 90. <?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'], ● 1つのキーに $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'; }
  91. 91. 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>
  92. 92. もし良かったら遊んでください♪ @yuka2py https://twitter.com/yuka2py http://www.facebook.com/yuka2py http://gplus.to/yuka2py (´∀`〃)ゝキャハ
  93. 93. ご静聴、ありがとうございました!
  94. 94. この文書は クリエイティブ・コモンズ 表示 - 継承 2.1 日本 ライセンスの下に提供されています。
  • _ume

    Sep. 3, 2021
  • chen420

    Dec. 17, 2020
  • akanemaeda

    Jul. 9, 2019
  • yamanes

    Aug. 29, 2018
  • ssuser1b9ea7

    Nov. 23, 2017
  • AtsushiIshido

    Jul. 30, 2017
  • scanner0928

    Jun. 15, 2017
  • NorimitsuMiyakawa

    Nov. 23, 2016
  • mayosuke

    Oct. 5, 2016
  • RyutaroMatsuoka

    Sep. 1, 2016
  • sakanakana

    Apr. 10, 2016
  • hrs_o

    Mar. 8, 2016
  • YoshinoriKoba

    Feb. 11, 2016
  • yuusaku0908

    Jan. 15, 2016
  • nobynoby

    Jan. 12, 2016
  • DaisukeKomiya

    Dec. 21, 2015
  • NaruhitoKubota

    Nov. 6, 2015
  • ssuser6186a5

    Sep. 22, 2015
  • ssuser27b980

    Sep. 15, 2015
  • shimonakiyama

    Aug. 14, 2015

本資料は、WordPress のプラグイン作成の基本を解説しています。エンジニア寄りの解説ですが、デザイナーさんにも読んで頂ける内容かと思います。 セッション内容の出典は WordBench 神戸の元管理人 @horike37 さんです。ご本人に確認して本セッションでの利用の許可いただきました。 僕自身は、@horike37 さんのセッションでWordPress に感動し、WordPress の活用に目覚めた人でございます。本セッションでも、その感動を共有できたらと思っています。

Views

Total views

43,951

On Slideshare

0

From embeds

0

Number of embeds

15,351

Actions

Downloads

250

Shares

0

Comments

0

Likes

83

×