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.

ノンプログラマーのためのWordPressプラグイン開発超入門v1.0

6,307 views

Published on

プログラミング経験の浅いWebデザイナーの方でもWordPressプラグインの仕組みや書き方の基礎が理解できる資料です。

Published in: Technology

ノンプログラマーのためのWordPressプラグイン開発超入門v1.0

  1. 1. ノンプログラマーのための WordPressプラグイン開発超入門 アシアル株式会社 岡本 雄樹 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 1
  2. 2. 本日のセッションでお伝えしたいこと プラグインの正体 簡単なプラグインを開発するために必要な最低限の知識 公式ディレクトリ登録についての諸注意 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2
  3. 3. 自己紹介 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 3
  4. 4. 自己紹介 名前:岡本 雄樹 (ジャスティス隊長) 所属:アシアル株式会社 職業 • • スクール事業部 マネージャー MonacaPressプロジェクト 統括 プロフィール 経営学部生時代に3年間、創業したばかりの通販企業でECサイ トのウェブマスターを経験、システム構築からサーバの運用などシ ステム面を一手に引き受ける。 アシアル入社後は、その経験を生かしECサイトの自社パッケー ジ開発や多数のEC案件に関わったのち、スクール事業担当となる。 またWordPress向けモバイルアプリを研究開発してGPLライセン スの元に公開する「MonacaPress」プロジェクトを統括している。 執筆経験 • イラストでよくわかるPHP はじめてのWebプログラミング入門 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 4
  5. 5. プロダクト紹介 イラストでよくわかるPHP ∼入門レベルに厳選した本物の入門書∼ • なんと!SQL文が登場しない – WordPressでテーマを弄ったりするときにSQL文を直接書 くことは無いですよね? • 総ページ数は200ページ以下! URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 5
  6. 6. プロダクト紹介 MonacaPress ∼モバイルアプリ開発プロジェクト∼ • WordPressと連携して動くモバイルアプリの研究開発 • 手伝っていただけるメンバー募集中 – 無報酬ですが成果はGPLで共有します http://press.monaca.mobi/ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 6
  7. 7. アシアル株式会社 会社紹介 アシアルはWeb技術に特化したテクノロジーベンチャーです。 2002年7月の設立以来、Webシステムの開発を行う傍ら様々な開 発ツールや技術情報の提供を行っております。 モバイルアプリ開発ツールMonaca URL : http://www.asial.co.jp/ │ アシアルブログ(所謂技術ブログ) Copyright © 2013 Asial Corporation. All Rights Reserved. │ 7
  8. 8. プラグインとは? URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 8
  9. 9. プラグインとは 改めてプラグインとは何か? – WordPressの挙動を変更するための技術 – WordPressに無い機能を追加するための技術 表示高速化 SSL強制化 会員制サイト 化 問い合わせ フォーム設置 シンタックス ハイライト JSON吐き出 し URL : http://www.asial.co.jp/ │ サイトマップ 吐き出し バックアップ 処理 Copyright © 2013 Asial Corporation. All Rights Reserved. │ 9
  10. 10. プラグインとは プラグインの限界 限界なんてない! • 例えば、WordPressにショッピングカート機能を 付けたり、SNS機能を付けることすら可能。 – 大型プラグインの例 » Welcart » BuddyPress 今日はもっと簡単なものを例に解説します URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 10
  11. 11. プラグインとは プラグインに限界がない理由 – プラグインファイルの実体はPHP言語で書か れたプログラム。 • PHP言語で実現できることなら何でもできる。 – おまけに、プラグインにはHTMLやCSS、画像 やJavaScriptも含めることができる。 プラグインファイル(zip)の中身 PHP HTML JS CSS 画像 その他 URL : http://www.asial.co.jp/ │ PHPファイ ル以外は無 くてもOK Copyright © 2013 Asial Corporation. All Rights Reserved. │ 11
  12. 12. プラグインと他の仕組みの比較 プラグイン – 複数のプラグインを同時に使うことができる – テーマを切り替えたり更新しても消えない テーマ – 複数のテーマを同時に使うことはできない functions.php – テーマを切り替えると書き直すはめになる – テーマを更新すると上書きされてしまう • もちろん、子テーマ化しておけば平気ですよ wp-config.php – ここは設定を書く場所! URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 12
  13. 13. ノンプログラマーがプラグイン開発を学ぶべき理由 機能をプラグイン化すれば再利用が容易になる 使い回すことで作業効率アップ 公開すれば他のWP製作者も助かる! 「Exec-PHP愛好家の方」もショートコードをプ ラグインにまとめておけば便利、と串本在住の宮 内さんが仰っていました! • http://firegoby.jp/archives/4633 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 13
  14. 14. プラグイン・ソースコード解説 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 14
  15. 15. まず、フォルダを用意しよう プラグインの設置場所 /wp-content/plugins/ ①フォルダ名 ②プラグインの主たる PHPファイル ③プラグイン名 命名規則 ユニーク制約 • ①フォルダ名 ②プラグインの主たる PHPファイル ③プラグイン名は他のプラグイン に対してユニークでなければならない。 プラグインの中では、同一でも異なっていても動作は可能。 利用可能な文字種 • フォルダ名とファイル名は半角英数小文字とハイフンのみ利用可能 • プラグイン名は半角英数字とスペース、ハイフンが利用可能 ※アンダースコアは公式ディレクトリで使えない(ハイフンに変換されるとの情報あり)。 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 15
  16. 16. 簡単なプラグインファイルの例 <?php /* Plugin Name: Hello Justice Plugin URI: https://github.com/j801/hello-justice Description: This is just a joke plugin. Author: Yuki Okamoto (HN:Justice) Version: 1.0 Author URI: http://press.monaca.mobi/ License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ // output message. function hello_justice() { echo esc_html('ステルスマーケティングは完璧に。 それが僕のジャスティス'); } // set that function up to execute when action is called add_action('wp_footer', 'hello_justice'); ?> URL : http://www.asial.co.jp/ │ ① コメント (ヘッダー) ②処理 (関数) ③フック Copyright © 2013 Asial Corporation. All Rights Reserved. │ 16
  17. 17. ①コメント(ヘッダー) • Plugin Name: – • Plugin URI: – • プラグイン作者のURIを書きます License: – • プラグインのバージョンを書きます Author URI: – • プラグイン作者の名前を書きます Version: – • プラグインの概要を書きます Author: – • プラグインの説明や更新情報があるページのURIを書きます Description: – • プラグインの名前を書きます プラグインのライセンスを書きます License URI: – ライセンスを明示的に記載する方法の一つとして、URIを指定します。 • 例:http://www.gnu.org/licenses/gpl-2.0.html ※命名規則 (公式ディレクトリに登録する場合) フォルダ名:半角英数小文字とハイフンのみ利用可能 プラグイン名:半角英数字とスペース、ハイフンは利用可能 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 17
  18. 18. ②処理 (関数) • 関数とは – – – 命令を一つの処理としてまとめにしたものです。 プラグイン開発では任意のタイミングで処理を呼び出せるように、命令を関数などの形でま とめる必要があります。 プラグインの関数における命名規則 • • 他のプラグインやWordPress本体の関数名と被らないユニークなものにする必要があります。 プログラム解説 – hello_justice: • 「hello_なんとか」という命名はプログラミング入門における慣習です – • – 今回の関数は、文字を出力するだけの簡単な関数です echo • – WordPressにはサンプルプラグインとして「hello-dolly」が用意されています 文字を出力するPHPの命令です esc_html • html出力用のエスケープ処理を行うWordPress独自の命令です function hello_justice() { echo esc_html('ステルスマーケティングは完璧に。 それが僕のジャスティス'); } URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 18
  19. 19. ③フック • フックとは – – WordPressの処理に割り込みを掛けるための仕組み フックポイント • フックを行える箇所。WordPressにはフックポイントが100以上用意されています – • フックの種類 – アクションフック • • – 特定のタイミングで発動するフックポイント アクション関数に対して何らかの値を渡すことができます(Codex参照) 。 フィルターフック • • データの入出力に関わる特定のタイミングで発動するフックポイント フィルター関数にデータを渡し、加工結果を受け取ります。 – • Codex:プラグイン API/アクションフック一覧 プラグイン API/フィルターフック一覧 参照 例えば、記事中の「。」を全部「わぷ∼。」に変換することができます。 プログラム解説 – add_action • • 特定のフックポイントにアクション関数を追加します wp_footerはテンプレートで wp_footer 関数を呼び出すタイミングのフックポイントです // set that function up to execute when action is called add_action('wp_footer', 'hello_justice'); URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 19
  20. 20. 実行結果 実行結果 • サイトのフッター周辺に文字が出れば成功! ※テーマによって表示位置は変わります URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 20
  21. 21. フィルターフックを利用したプラグイン例 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 21
  22. 22. ヘッダー <?php /* Plugin Name: Hello Justice2 Plugin URI: https://github.com/j801/hello-justice2 Description: This is just a joke plugin. Author: Yuki Okamoto (HN:Justice) Version: 2.0 Author URI: http://press.monaca.mobi/ License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 22
  23. 23. 処理とフック function hello_justice2($content) { $messages[] = '僕、君たちにお願いがあって来たんだ。山田さんと契約して、CPIのエバンジェリストになってよ!'; $messages[] = 'よりにもよって、プラグインをGPLで公開するなんて、どうかしてるよ'; $messages[] = '公式がGPLを優遇するなら、みんなGPLで書くしかないじゃない!あなたも・・・私もっ!'; $messages[] = '君のソースコードはエントロピーを凌駕した'; $messages[] = 'GPLってのはタダじゃないんだ。コードを活用すればそれ以上のコードがGPLで撒き散らされる。'; $messages[] = '訳が分からないよ。どうして公式はそんなに、GPLにこだわるんだい'; // choise message from messages by random $min = 0; $max = count($messages) - 1; $key = mt_rand($min, $max); $message = $messages[$key]; return $content.$message; } // set that function up to execute when action is called add_filter('the_content', 'hello_justice2'); ?> URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 23
  24. 24. 引数と返り値 引数とは – – 関数が外の世界から情報を受け取るための仕組みです フィルター関数は引数からデータを受け取ることができます • the_contentをフックした場合は記事情報のデータを受け取ります function hello_justice2($content) 返り値とは – 関数が外の世界に情報を渡すための仕組みです • – return という命令で情報を返します フィルター関数は引数で受け取ったデータを加工して返すことが期待されています • 今回のプラグインは、記事の終端にメッセージを付加する仕様にしました。 return $content.$message; URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 24
  25. 25. 変数と配列 • 変数とは – – – 文字列や数字などの情報を一時的に格納するための仕組みです。 PHPの場合は「$」から始まる記述が変数を表しています。 関数の返り値や計算結果を保存する際にも利用できます。 $min = 0; $max = count($messages) - 1; $key = mt_rand($min, $max); URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 25
  26. 26. 変数と配列 • 配列とは – 変数の一種で複数の情報を格納するための仕組みです。 $messages[] $messages[] $messages[] $messages[] $messages[] $messages[] • = = = = = = '僕、君たちにお願いがあって来たんだ。山田さんと契約して、CPIのエバンジェリストになってよ!'; 'よりにもよって、プラグインをGPLで公開するなんて、どうかしてるよ'; '公式がGPLを優遇するなら、みんなGPLで書くしかないじゃない!あなたも・・・私もっ!'; '君のソースコードはエントロピーを凌駕した'; 'GPLってのはタダじゃないんだ。コードを活用すればそれ以上のコードがGPLで撒き散らされる。'; '訳が分からないよ。どうして公式はそんなに、GPLにこだわるんだい'; 配列のキー – – 配列に情報を出し入れする際には[]の中にキーを指定する必要があります キーを指定せずに情報を入力した場合は連番(0スタート)が設定されます $message = $messages[$key]; URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 26
  27. 27. プログラム解説 • hello_justice2()関数 – • count()関数 – • $messages配列の中からメッセージを一つ選んで記事の最後に追記するフィルター関数 配列の要素数を数えて返す関数。 mt_rand()関数 – ランダムな値を返す関数。引数で下限と上限を設定できる。 • • $count.$messageの間にあるドット – • 下限を0、上限を(配列の要素数 - 1)に設定することで、配列のキーをランダムに選択する処理を実現 文字列連結処理を行うための記述です add_filter – – 特定のフックポイントにフィルター関数を追加します the_contentはテンプレートで 記事を出力するタイミングのフックポイントです URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 27
  28. 28. 実行結果 実行結果 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 28
  29. 29. 公式ディレクトリへの登録 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 29
  30. 30. 公式ディレクトリへに登録したい方へ • • • • ライセンスはGPLのみ GPL互換のみ認められています 公式サイトへのメンバー登録が必要です readme.txtを用意する必要があります コメントやreadme.txtは英語で書く必要があります – – • 翻訳ツールが吐き出す英文でも通る GINGERというサービスのリフレーズ機能がなかなか強力 最初は簡単なものから挑戦することを勧めます URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 30
  31. 31. GPLについて • 詳しくはWikiPedia参照 – • http://ja.wikipedia.org/wiki/GNU_General_Public_License 日本語訳もあります – GNU 一般公衆利用許諾契約書 バージョン2 • – GNU 一般公衆利用許諾書 バージョン3 • • http://sourceforge.jp/projects/opensource/wiki/licenses%2FGNU_General_Public_License http://sourceforge.jp/projects/opensource/wiki/licenses%252FGNU_General_Public_Licens e_version_3.0 WordPress利用者のはこちらもおすすめ – WordPress を使うなら知っておきたい GPL ライセンスの知識【基本編】 • – http://wp-d.org/2012/11/07/1046/ ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス • http://www.slideshare.net/nogajun/20121124-wordbench-osakalicense URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 31
  32. 32. 追加参考資料 URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 32
  33. 33. 追加参考資料 • WordPress Codex 日本語版 – プラグインの作成 • • http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%8 3%B3%E3%81%AE%E4%BD%9C%E6%88%90 WordPressコミュニティーの方の情報 – WordPressプラグイン作成入門 (ノジマユウジさん) • – http://www.slideshare.net/yuka2py/wordpress-15359306 セキュアなWORDPRESSプラグインの作り方 (池田百合子さん) • http://www.yuriko.net/wp-content/uploads/2011/08/writing-secure-plugins.pdf URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 33

×