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

33
URL : http://www.asial.co.jp/ Copyright © 2013 Asial Corporation. All Rights Reserved. 1 ノンプログラマーのための WordPressプラグイン開発超入門 アシアル株式会社 岡本 雄樹

description

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

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

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 1

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

アシアル株式会社 岡本 雄樹

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 2

本日のセッションでお伝えしたいこと

プラグインの正体

簡単なプラグインを開発するために必要な最低限の知識

公式ディレクトリ登録についての諸注意

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 3

自己紹介

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 4

自己紹介

名前:岡本 雄樹 (ジャスティス隊長)所属:アシアル株式会社職業

• スクール事業部 マネージャー• MonacaPressプロジェクト 統括

プロフィール経営学部生時代に3年間、創業したばかりの通販企業でECサイ

トのウェブマスターを経験、システム構築からサーバの運用などシステム面を一手に引き受ける。アシアル入社後は、その経験を生かしECサイトの自社パッケージ開発や多数のEC案件に関わったのち、スクール事業担当となる。またWordPress向けモバイルアプリを研究開発してGPLライセンスの元に公開する「MonacaPress」プロジェクトを統括している。

執筆経験• イラストでよくわかるPHP はじめてのWebプログラミング入門

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 5

プロダクト紹介

イラストでよくわかるPHP~入門レベルに厳選した本物の入門書~

• なんと!SQL文が登場しない– WordPressでテーマを弄ったりするときにSQL文を直接書くことは無いですよね?

• 総ページ数は200ページ以下!

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 6

プロダクト紹介

MonacaPress~モバイルアプリ開発プロジェクト~

• WordPressと連携して動くモバイルアプリの研究開発• 手伝っていただけるメンバー募集中

– 無報酬ですが成果はGPLで共有します

http://press.monaca.mobi/

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 7

アシアル株式会社 会社紹介

アシアルはWeb技術に特化したテクノロジーベンチャーです。2002年7月の設立以来、Webシステムの開発を行う傍ら様々な開発ツールや技術情報の提供を行っております。

モバイルアプリ開発ツールMonaca アシアルブログ(所謂技術ブログ)

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 8

プラグインとは?

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 9

プラグインとは

改めてプラグインとは何か?–WordPressの挙動を変更するための技術–WordPressに無い機能を追加するための技術

表示高速化 SSL強制化 会員制サイト化

サイトマップ吐き出し

問い合わせフォーム設置

シンタックスハイライト

JSON吐き出し

バックアップ処理

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 10

プラグインとは

プラグインの限界限界なんてない!

• 例えば、WordPressにショッピングカート機能を付けたり、SNS機能を付けることすら可能。

–大型プラグインの例»Welcart» BuddyPress

今日はもっと簡単なものを例に解説します

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

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

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 12

プラグインと他の仕組みの比較

プラグイン– 複数のプラグインを同時に使うことができる– テーマを切り替えたり更新しても消えないテーマ– 複数のテーマを同時に使うことはできないfunctions.php– テーマを切り替えると書き直すはめになる– テーマを更新すると上書きされてしまう

• もちろん、子テーマ化しておけば平気ですよ

wp-config.php– ここは設定を書く場所!

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 13

ノンプログラマーがプラグイン開発を学ぶべき理由

機能をプラグイン化すれば再利用が容易になる使い回すことで作業効率アップ公開すれば他のWP製作者も助かる!「Exec-PHP愛好家の方」もショートコードをプラグインにまとめておけば便利、と串本在住の宮内さんが仰っていました!

• http://firegoby.jp/archives/4633

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 14

プラグイン・ソースコード解説

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 15

まず、フォルダを用意しよう

プラグインの設置場所/wp-content/plugins/

命名規則ユニーク制約

• ①フォルダ名 ②プラグインの主たる PHPファイル ③プラグイン名は他のプラグインに対してユニークでなければならない。

プラグインの中では、同一でも異なっていても動作は可能。利用可能な文字種

• フォルダ名とファイル名は半角英数小文字とハイフンのみ利用可能• プラグイン名は半角英数字とスペース、ハイフンが利用可能※アンダースコアは公式ディレクトリで使えない(ハイフンに変換されるとの情報あり)。

①フォルダ名

②プラグインの主たる PHPファイル③プラグイン名

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

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');?>

① コメント (ヘッダー)

②処理 (関数)

③フック

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

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

※命名規則 (公式ディレクトリに登録する場合)フォルダ名:半角英数小文字とハイフンのみ利用可能プラグイン名:半角英数字とスペース、ハイフンは利用可能

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

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('ステルスマーケティングは完璧に。それが僕のジャスティス');

}

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

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');

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 20

実行結果

実行結果• サイトのフッター周辺に文字が出れば成功!

※テーマによって表示位置は変わります

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 21

フィルターフックを利用したプラグイン例

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

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*/

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

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');?>

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 24

引数と返り値

引数とは– 関数が外の世界から情報を受け取るための仕組みです– フィルター関数は引数からデータを受け取ることができます

• the_contentをフックした場合は記事情報のデータを受け取ります

返り値とは– 関数が外の世界に情報を渡すための仕組みです

• return という命令で情報を返します– フィルター関数は引数で受け取ったデータを加工して返すことが期待されています

• 今回のプラグインは、記事の終端にメッセージを付加する仕様にしました。

function hello_justice2($content)

return $content.$message;

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

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);

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

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];

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

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はテンプレートで 記事を出力するタイミングのフックポイントです

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 28

実行結果

実行結果

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 29

公式ディレクトリへの登録

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 30

公式ディレクトリへに登録したい方へ

• ライセンスはGPLのみ GPL互換のみ認められています• 公式サイトへのメンバー登録が必要です• readme.txtを用意する必要があります• コメントやreadme.txtは英語で書く必要があります

– 翻訳ツールが吐き出す英文でも通る– GINGERというサービスのリフレーズ機能がなかなか強力

• 最初は簡単なものから挑戦することを勧めます

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

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

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

URL : http://www.asial.co.jp/ │ Copyright © 2013 Asial Corporation. All Rights Reserved. │ 32

追加参考資料

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

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