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