12/19 13:00- WordBench宮崎勉強会資料

1. ©
WordBench
Miyazaki
プラグイン公開までの道のり
WordBench宮崎
ver.1.0.0
【WordBench宮崎勉強会】

2. ©
WordBench
Miyazaki
⾃自⼰己紹介
2
⾼高⾒見見 和也（Takami Kazuya）
h6ps://twi6er.com/miiitaka
h6ps://www.facebook.com/miiitaka
株式会社アラタナ
フロントエンドエンジニア
WordPress と JavaScript が友達です。
h6ps://github.com/miiitaka

3. ©
WordBench
Miyazaki
ハッシュタグ
3
#wbmiyazaki

4. ©
WordBench
Miyazaki
アジェンダ
4
p どんなプラグインを作ろう？
p プラグイン制作時のポイント（気をつけること）
p プラグインの翻訳に挑戦
p 公開準備
p 公開！
p 公開後のお楽しみ

5. ©
WordBench
Miyazaki
さてさて
5
どんなプラグインを作ろう？

6. ©
WordBench
Miyazaki
まずはどういうプラグインを作ろうか考える
6
◆プラグインのアイデア
などなど。まずは作るものを設計するところから始めます。
- 普段仕事でよく使う機能をプラグイン化。
- 公開されているプラグインではできない、かゆいところに⼿手が届くもの。
- サードパーティ製品と連携できるようなプラグイン。
- Web API と連携するプラグイン。

7. ©
WordBench
Miyazaki
⾼高⾒見見が作ってみた例例
7
◆⾼高⾒見見が公開したプラグインの例例
l きっかけ → HTML5 Experts.jp で記事を書かせてもらった。
https://html5experts.jp/miiitaka/17128/
- JSON-LDの出⼒力力を⾃自動化できないかな？
- @type 毎に定義（ルール）は決まっているし作りやすいんじゃないか？
- 投稿ページや固定ページ、場合によってはカスタム投稿で定義できそう。
- なにより作ることでGoogleの知識識が深まりそう。
これをプラグインにできないかな？ (・_・ )

8. ©
WordBench
Miyazaki
Let’s Programming !!
8
作ってみた

9. ©
WordBench
Miyazaki
Markup (JSON-‐‑‒LD) structured in schema.org
9
h6ps://wordpress.org/support/plugin/wp-­‐structuring-­‐markup

10. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
10
プラグイン制作時のポイント
（注意点）

11. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
11
/wp-content/plugin/xxxx-xxxxx ※xxxx-xxxx はプラグイン名。
/includes/
読み込むPHPファイル群を保存。
/languages/
翻訳ファイルを保存。
/css/
プラグインで使⽤用するCSSファイルを保存。
/js/
プラグインで使⽤用するJavaScriptファイルを保存。
⾼高⾒見見的提案 (^-^)
（例例です）
◆プラグインのディレクトリを整理理しましょう。
xxxx-xxxx.php（プラグインの基準ファイル）
readme.txt （プラグインの説明）

12. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
12
◆コーディング規約を守りましょう。
l WordPressにはコーディング規約がちゃんと定めてあります。
http://codex.wordpress.org/WordPress_Coding_Standards
- PHP / HTML / CSS / JavaScript それぞれ規約に⽬目を通しておきましょう。
- 質の悪いコードは、メンテナンス性が落落ちます。
- 変数や関数の命名規則も定めてあります。
- https://wpdocs.osdn.jp/WordPress_%E3%82%B3%E3%83%BC
%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E5%9F%BA
%E6%BA%96

13. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
13
◆エラーの出ないコーディングをしましょう。
l ローカル環境で制作を⾏行行う際にデバッグモードをONで作業をしましょう。
- ⾮非推奨関数を使⽤用した場合、警告してくれます。
- Notice や Warning など出ないようにコーディングしましょう。
◆
wp-­‐config.php
に以下の値を設定
define(
'WP_DEBUG',
true
);

14. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
14
◆脆弱性対策を⾏行行いましょう。
l 出⼒力力内容に対して、各種エスケープ処理理などを実装します。
- セキュリティ⽩白書（⽇日本語版）があります。熟読しましょう。
※翻訳対応された⽅方々お疲れ様です。
- https://ja.wordpress.org/security/

15. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
15
◆主なエスケープ関数
- esc_html() http://codex.wordpress.org/Function_Reference/esc_html
< > & ” ‘をエンティティ化します。（「<」→「&lt；」「>」→「&gt；」等表⽰示に⽀支障がないよ
うに置き換えてくれる。）表⽰示するだけなら関数を使⽤用します。
- esc_attr() http://codex.wordpress.org/Function_Reference/esc_attr
< > & ” ‘をエンティティ化する。HTMLタグ属性を取り除きます。タグの属性値として出⼒力力する
際に使⽤用します。inputなどの値として出⼒力力して使う場合はこちらの esc_attr を使⽤用します。
- esc_url() http://codex.wordpress.org/Function_Reference/esc_url
URL⽂文字列列になっているかを調べて、適切切でない場合は取り除き、URL⽂文字列列として最適化し
ます。アドレスを出⼒力力する際に使⽤用します。
頑張って使いこなしましょう。φ( . _ . )

16. ©
WordBench
Miyazaki
プラグイン制作時のポイント（注意点）
16
◆readme.txt は必須です。
l プラグインを公開したときにできるページの説明になります。
l ヘッダーにはプラグインの情報を記載します。
最初は他のプラグインのreadme.txtを真似して書いてみましょう。φ( . _ . )

17. ©
WordBench
Miyazaki
プラグインの翻訳
17
プラグインの翻訳

18. ©
WordBench
Miyazaki
プラグインの翻訳
18
◆翻訳ファイルの基本
xxxx-xxxx.pot（POT（Portable Object Templete））
翻訳ファイルのテンプレート
/languages/
翻訳ファイルを保存。
xxxx-xxxx-ja.po（PO（Portable Object））
テンプレートを元に翻訳したファイル（⾔言語ごと）
xxxx-xxxx-ja.mo（MO（Machine Object））
翻訳ファイル
ja は⽇日本語翻訳ファイ
ルを表しています。
/wp-content/plugin/xxxx-xxxxx ※xxxx-xxxx はプラグイン名。

19. ©
WordBench
Miyazaki
プラグインの翻訳
19
◆ヘッダー情報に翻訳設定
l プラグインの基準ファイルのヘッダーに以下の記述をしておきます。
Text
Domain:
xxxx-­‐xxxx
Domain
Path:
/languages

20. ©
WordBench
Miyazaki
プラグインの翻訳
20
◆コンストラクタに記述
l プラグインのロード時に翻訳設定を動作させる設定をしておきます。
add_acRon(
'plugins_loaded',
array(
$this,
'plugins_loaded'
)
);
public
funcRon
plugins_loaded
()
{
load_plugin_textdomain(
'xxxx-­‐xxxx',
false,
dirname(
plugin_basename(
__FILE__
)
)
.
'/languages'
);
}

21. ©
WordBench
Miyazaki
プラグインの翻訳
21
◆プラグイン作成時に翻訳する箇所に設定しておきます。
l 翻訳⽤用の関数を使⽤用してプログラミングしましょう。
esc_html__(
'Add
New',
'
xxxx-­‐xxxx'
);
__()
_e()
esc_html__()
esc_html_e()
eは、echo() 付き。
この関数を使⽤用してい
る箇所が翻訳対象
脆弱性対策のために基本的にはesc_html付関数を使⽤用しましょう。φ( . _ . )

22. ©
WordBench
Miyazaki
プラグインの翻訳
22
◆POTファイルを作成
l Gettextを使ってファイルを作ります。（Gettextについてはこちら）
languagesディレクトリで以下のコマンドを実⾏行行します。
makepot.php
wp-­‐plugin
..
開発環境にVCCWを使っていると全部揃っているのでとても簡単。φ( . _ . )
VCCW を開発環境に
している例例（SSHで）

23. ©
WordBench
Miyazaki
プラグインの翻訳
23
◆翻訳してコンパイル
POT
l POTファイルをコピーして、POファイルを作成。そのファイルをコンパ
イルします。コンパイルコマンドは以下のように。
msgfmt
-­‐o
xxxx-­‐xxxx-­‐ja.mo
xxxx-­‐xxxx-­‐ja.po
これで準備完了了！(・∀・)
PO MO
makepot
copy &
rename
翻訳 &
msgfmt

24. ©
WordBench
Miyazaki
公開準備
24
プラグインの公開準備

25. ©
WordBench
Miyazaki
公開準備
25
1. 公式サイトでアカウントを作る。
2. プラグインをダウンロードできる状態にしておく。
3. 登録するプラグイン情報を送る。
4. 公式サイトの有志が審査。
5. 公式サイトからメールが届く。
6. 送られてきたリポジトリを確認。
この流流れで準備をしていきます。φ( . _ . )

26. ©
WordBench
Miyazaki
公開準備
26
◆まずは公式サイトでアカウントを作りましょう。
l プラグインのリポジトリをもらうにはアカウントが必要です。
- https://wordpress.org/support/register.php

27. ©
WordBench
Miyazaki
公開準備
27
◆プラグインをダウンロードできる状態にしておく。
l 出来上がったプラグインを zip 形式で圧縮します。
l zip ファイルをどこでもよいので、アップロードしておき、ダウンロード
できる状態にしておきましょう。

28. ©
WordBench
Miyazaki
公開準備
28
◆登録するプラグイン情報を送信する。
・公式サイトに送信⽤用のフォームがありますので情報を⼊入⼒力力します。
Plugins
Add Your
Plugin

29. ©
WordBench
Miyazaki
公開準備
29
ほしいリポジトリ名
（⼀一意）
圧縮したプラグインの
ダウンロード先URL
プラグインの説明
（英語でがんばれ！）
⼊入⼒力力が完了了したら
送信！

30. ©
WordBench
Miyazaki
公開準備
30
◆プラグインの審査（レビュー）を待ちます。
l 最短で次の⽇日に来ました。レビューするプラグインのたまり具合とかに左
右されそうです。NGの例例はまだないので、逆に知りたい。（・_・）

31. ©
WordBench
Miyazaki
公開準備
31
◆審査通過するとテンションやや⾼高めのメールが届きます。
リポジトリのURLが
届きます(^o^)
登録⽅方法まとめ
読んでおきましょう。

32. ©
WordBench
Miyazaki
いよいよ！
32
プラグインを公開する

33. ©
WordBench
Miyazaki
公開
33
◆Subversion をインストールしておく
l WordPress のソースコードは、Subversion で管理理されています。事前に
インストールしておきましょう。（ Gitになってほしいな… (・ω・) ）

34. ©
WordBench
Miyazaki
公開
34
/xxxx-xxxxx/ ※xxxx-xxxx はリポジトリ名。
/assets/
プラグインのアイキャッチ画像やアイコン画像を保存。
/branches/
ブランチ。
/tags/
バージョンタグ付けされたデータが保存されている。
/trunk/
プラグインの最新ファイルを保存。
◆リポジトリの構成
このディレクトリがリポジトリにできています。(・∀・)

35. ©
WordBench
Miyazaki
公開
35
◆リポジトリからファイルやディレクトリを取得します。
SVN
svn
co
リポジトリ名（メールでもらったURL）
l ターミナル（Macの場合）でダウンロードするディレクトリに移動して以
下のコマンドを実⾏行行します。
svn co xxxxx
(co は check out のこと）

36. ©
WordBench
Miyazaki
公開
36
◆ダウンロードしてきたディレクトリにデータを保存。
SVN
l trunk – プラグイン
l assets – アイキャッチ画像を保存（なくてもOK）
trunk / assets
trunk
assets

37. ©
WordBench
Miyazaki
公開
37
◆保存したファイルを追加（更更新）します。
SVN
l svn add は新規ファイル追加
l svn update は既にアップロード済のファイル上書き
svn
add
assets/*
svn
add
trunk/*
svn add
trunk
assets

38. ©
WordBench
Miyazaki
公開
38
◆追加（更更新）したファイルをコミットします。
SVN
l メッセージを書いてコミットします。私は定形でバージョンを書いてます。φ( . _ . )
svn
commit
-­‐m
“version
1.0.0
release.”
svn commit
完了了するとアカウント宛に
メールが届きます。
trunk
assets

39. ©
WordBench
Miyazaki
公開
39
◆バージョン管理理をします。
SVN
l tagsディレクトリにtrunkの内容をバージョンをつけてコピーします。
svn
cp
trunk
tags/1.0.0
svn cp
trunk
assets
tags

40. ©
WordBench
Miyazaki
公開
40
◆tagsディレクトリのコミット
SVN
l tagsディレクトリをコミットしてリポジトリに送信します。
svn
ci
-­‐m
“tagging
version
1.0.0”
trunk
assets
tags
svn ci xxxxx
(ci は check in のこと）
完了了するとアカウント宛に
メールが届きます。

41. ©
WordBench
Miyazaki
公開
41
公開された！
＼(^o^)／

42. ©
WordBench
Miyazaki
公開後のお楽しみ
42
公開後のお楽しみ

43. ©
WordBench
Miyazaki
公開後のお楽しみ
43
◆ユーザーの反応が楽しい！(^^♪
l 公開した⾃自分のプラグインのページでダウンロード状況が確認できます。
Active Version
バージョンは x.x.x とつけたほう
が良良さそうです。φ( . _ . )
Download

44. ©
WordBench
Miyazaki
公開後のお楽しみ
44
◆レビューがもらえる！(^^♪
l 世界の⼈人からレビューもらえる嬉しさ。そう思うの私だけ？
外⼈人がレビュー
くれた！誰？

45. ©
WordBench
Miyazaki
公開後のお楽しみ
45
◆サポート掲⽰示板でご指摘いただける。φ( . _ . )
l いや、確認漏漏れだろ……けど親切切に教えてもらえた！
エラー出てま
すよ (^o^)

46. ©
WordBench
Miyazaki
公開後のお楽しみ
46
プラグインを通して
交流流が広がることが⼀一番楽しい！

47. ©
WordBench
Miyazaki
ご清聴ありがとうございました。
47
ありがとうございました。
次回は2ヶ月後の2016年2月開催です。

48. ©
WordBench
Miyazaki
WordPress関数リファレンス／Widgets_API
https://codex.wordpress.org/Widgets_API
WordPress関数リファレンス／register_widget
https://codex.wordpress.org/Function_Reference/register_widget
参考URL
48