wordpress pluginの作成方法と公式ディレクトリ公開までの手順・覚書

WEB制作, wordpress

記事の執筆時間の記録・表示が出来るwordpress plugin【write-time】を公開したので、そこに至るまでに学んだことの覚書です。
そうそうwordpress pluginを頻繁に作ることも無いかと思うので、次作るときには【多分忘れてる】と思うので、plugin作成から公式ディレクトリ登録までの流れをここに記録しておきますw

ちなみにこのpluginを作ったのも、公式ディレクトリに登録したのも初めてなので、初心者向けの内容になっています。

自作plugin作成

まずはplugin作成から始めます。
今回は簡単な例として以下の機能を持ったコードで紹介します。

・管理画面にメニューを追加
・メニューのページに任意の文字列を表示する

それとサンプルコードでは、wordpressのバージョンが古い場合エラーが出る可能性があります。

■今回の開発環境
xampp + wordpress
wordpressのバージョン4.0

ファイルの準備

作る際の場所はどこでもいいですが、wordpressのローカル開発環境を整えた状態が望ましいです。
私の場合はxampp+wordpressでローカル開発環境を整えています。

1、まずは、【任意のpluginの名前.php】でフォルダを作る。
2、フォルダの中に【任意のpluginの名前.php】のファイルを作る。
ここでひとつ注意が必要なのが、ファイルの名前には【既に公開されているplugin名】とかぶらない事です。

自作plugin作成の準備
自作plugin作成の準備
自作plugin作成の準備
自作plugin作成の準備

xamppの場合だと【xampp】→【htdocs】→【wordpress】→【wp-content】→【plugins】の中にフォルダを作成します。

pluginファイルに必要な記載を書く

作ったファイル【new-plugin.php】を開き、実際の動作を書く前に、必要な記載を書きます。

各入力項目は全て英語で記載する事。
入力内容は以下の通り。

項目 入力内容
Plugin Name プラグインの名前
Plugin URI プラグインのページ、無ければ自分のHPやblog等
Description プラグインの簡単な説明、英語で書かないとダメ
Version プラグインのバージョン
Author 開発者名
Author URI 開発者のページURL
License 著作権の表記

Descriptionの欄とか、英語で書かなきゃいけないので、苦労しそうだなと思ったけど、google翻訳とかで十分みたいです。
(以降、全て英語で文章を書かなきゃいけない所は、全て翻訳ツール使っています。)
なので英語苦手な人でも大丈夫!

LicenseはGPLとかMITとか色々ありますが、配布・公開目的ならGPLv2でOK。

ここで一旦保存してローカル環境でwordpress管理画面のプラグイン一覧から確認。

自作プラグイン作成
自作プラグイン作成

ちゃんと反映されていますね。
今はまだ動作部分を書いていないので、有効化は我慢しておきましょう。

実際の動作を記述していく

必要な記述が完了したら、その下にコードを書いていきます。

■簡単なコードの解説
まず最初にアクションフックの設定
add_action(‘admin_menu’ , ‘add_new_plugin_menu’);
第一引数の’admin_menu’は管理画面メニューを対象にする。
第二引数’add_new_plugin_menu’はユーザー定義関数です。

・function add_new_plugin_menuの中の解説。
add_menu_page(‘page_title’, ‘menu_title’, 8, ‘new_plugin_page’, ‘new_plugin_page’ , ‘dashicons-admin-plugins’);
add_menu_pageはトップレベルでの管理メニューの追加です。
上記の指定でしている引数は下記の通り。

引数 概要
page_title ページタイトル、タブに表示されるやつ
menu_title メニューに表示されるテキスト
8 必要なユーザーレベル
new_plugin_page メニュースラッグ
new_plugin_display メニューをクリックした際に呼び出される関数
dashicons-admin-plugins アイコンURLを指定する、サンプルではwordpress側で用意されているものを使用している
1 メニューの順番の指定

function new_plugin_displayの中の解説
これが表示用の関数です。
中身は簡単にechoさせているだけです。

さてここでプラグインを有効化して、ちゃんと出来てるか確認。

プラグイン動作の確認
プラグイン動作の確認
プラグイン動作の確認
プラグイン動作の確認

うん、ちゃんと出来てますね!
これでプラグインの動作部分は完成しました。

申請に必要なフォルダ・ファイルの作成

次に公式plugin申請時に必要なファイルを揃えておきます。
なかには必要じゃないファイルもありますが、予め準備しておいた方が効率いい気がしますし、申請も通りやすい気がします

翻訳ファイルの作成準備

まずはプラグインの動作ファイルに翻訳ファイルを読み込むようにコードを追記します。

次に日本語で文字を出力させる部分などのコードを修正します。

これでプラグインファイルの編集は完了です。

次にプラグインフォルダの中に【languages】フォルダを作成します。

languagesフォルダの作成
languagesフォルダの作成

次に公式wordpress POTファイルをダウンロードします。
ダウンロードしたファイルを【languages】フォルダの中に入れます。

POTファイルの配置
POTファイルの配置

Poeditで翻訳ファイルの作成

翻訳ファイルの作成にはPoedit – Gettext Translations Editorというアプリケーションを使います。

上記リンクからダウンロードして、インストールしてPoedit.exeを起動させる。

Poeditの起動
Poeditの起動

翻訳の編集をクリックし、【languages】フォルダの中に入れた【wordpress.pot】ファイルを開く。

poeditの使い方
poeditの使い方
wordpressのPOTファイルを開く
wordpressのPOTファイルを開く

上部のメニューから【カタログ】→【設定】を開く

カタログ設定
カタログ設定

翻訳の設定で以下の項目を設定していく。

翻訳の設定
翻訳の設定

プロジェクトの名前とバージョンは任意のものでOK
言語は日本語
翻訳チームは任意のチーム名か名前
翻訳チームのメールアドレスも任意
ソースコードの文字符号化法はUTF-8にしておきましょう。

続いて【ソースの検索パス】の設定。

ソースのパスの設定
ソースのパスの設定

ソースのパスには【.】ドットを、下のパスには新規項目をクリックし【..】ドット2つ入力する。
ソースの検索パスとソース中のキーワードの設定はしっかりしておかないと、後に嵌ることになります。

【ソース中のキーワード】の設定

ソース中のキーワード設定
ソース中のキーワード設定

新規項目をクリックし、【_e】と【__】アンダーバー2つを追加する。

ここまで設定できたら、一度更新を押す。

更新
更新

するとプラグインファイルで編集した_e()で囲った部分が表記されているダイアログボックスが出てくるので、OKを押す。

ダイアログ
ダイアログ

_e()で囲っている部分の文字列が表示されるので、翻訳したい文字列をクリック。
下の【翻訳】と書かれているテキストフィールド部分で、翻訳後の文章を書く。

翻訳作業
翻訳作業

翻訳作業が完了したら【ファイル】→【名前をつけて保存】で保存する。
この時つける名前にもルールがあり【プラグインネーム-ja.po】といった風に書く。
サンプルの例では【new-plugin-ja.po】

ja付け忘れて翻訳されないのなんでやっ!ってなってちょっと嵌った。

moファイルの生成
moファイルの生成

保存が完了すれば自動的にmoファイルが生成される。
翻訳が正常にされているか確認する。

翻訳確認
翻訳確認

ちゃんと翻訳されていますねー!
ここまでやって翻訳が正常にされていない場合は下記の事項をチェックしてみてください。

1、【翻訳ファイル(.mo)】の名前の確認
2、ソースのパス、ソース中のキーワードの設定がちゃんと保存されているか?
3、プラグインファイルの記述はちゃんとしているか?

たいていこれを確認するとミスが見つかります。

さあ翻訳ファイルの準備は終わったので、残りはあと少しです!

readme.txtの作成

これは英語で書かなきゃいけないのですが、エキサイト翻訳とかgoogle翻訳レベルの翻訳でも大丈夫そうなので、プラグインの説明とかはツールを使ってしまいましょう。

まずはプラグインフォルダの中に【readme.txt】を作成する。

readme.txtの作成
readme.txtの作成

次に便利なツールを使います。

WordPress.org Readme Generator

このジェネレーターを使ったらさくっとreademeファイルが作れます。

各入力項目は以下の通り。

項目 入力内容
Plugin name プラグインの名前
Contributors 作った人の名前
Donate link 寄付先のURL(paypalとか使ってるのをよく見かける)
Tags タグ、複数の場合は,(カンマ区切りで入力)
Requires at least プラグインに対応しているwordpressの最低のバージョン
Tested up to 対応している最新のwordpressのバージョン
Stable tag プラグインのバージョン
License ライセンス
License URI ライセンスの説明URL
Short description プラグインの簡単な説明
Description プラグインの説明、日本語も書ける
Installation プラグインのインストール方法
Frequently asked questions よくある質問
Screenshots スクリーンショットの下に入れる文章
Changelog 更新履歴、最新が一番上に来るように記述する
Upgrade notice プラグインを更新した時の概要を記載
Arbitrary section 1 追加項目の情報がある場合に記載

入力が完了すれば、ページ下部に【Genelate】ボタンがあるのでクリックすると右側の【Preview】に自動生成されます。

【Preview】に生成された文章をコピーし、以下のサイトでチェック。

WordPress/BBPress Plugin readme.txt Validator

問題がなければ、【Your readme.txt rocks. Seriously. Flying colors.】と表示されます。

readme.txt検証
readme.txt検証

公式ディレクトリへの申請

ようやく終わりが見えてきました。
まずは、wordpress.orgに登録します。

WordPress › Support
こちらのページから登録してアカウントを作成します。

勿論全て英語で入力する必要があります><
各入力項目は以下の通り。

項目 入力内容
Username 名前
Email メールアドレス
Website サイトURL
Location 住所
Occupation 職業
Interests 趣味
Zip/Postal Code 郵便番号
# of WordPress Sites I Run 公開しているwordpressのサイト数
I use WordPress at work 仕事でwordpressを使っているかどうか
I make my living using WordPress wordpressで生計を立てているかどうか
I am a WordPress consultant wordpressのコンサルタントかどうか

入力が完了したら、wordpress.orgからパスワードが記載されたメールが届くので、ログインする。

ログインした状態でWordPress › Requests « WordPress Pluginsにアクセスする。
入力項目は3つしかないので楽です。

・Plugin Name (required)
プラグインの名前
・Plugin Description (required)
プラグインの説明
結構短い説明文でも申請通りました。
・Plugin URL
zipで固めたpluginファイルを自分のサーバーにUPしておきます。
アクセスしてダウンロードできる状態のURLを記載する。

これで申請は完了です。

自分が申請したときは、審査待ちのプラグインが50個ほどあったんですが、24時間以内には結果のメールが来ました。
申請に通るとこんなメールが来ます。

申請結果
申請結果

なんて書いてあるのかは分りませんが、とりあえず【リポジトリURL】が書いてあるので大切に保存しておきましょう。
これは次の項目で使います。

SVNを使ってwordpress.orgにプラグインをUPする

SVNってなんぞや?
って本当に全然知らなかったし、ツールも使ってなかったのでここに時間をとられました。

どうやらgithubみたいにバージョンを管理してコミット出来るものらしいです(;´Д`)

Apache Subversion(アパッチ・サブバージョン; SVN)はプログラムのソースコードなどを管理する集中型バージョン管理システムの一つ。

Apache Subversion – Wikipedia

どうやらまずはアプリケーションをインストールする必要があるらしく、調べてみたらTortoiseSVNというのが使いやすいらしかったので、インストールしてみました。

TortoiseSVNのインストール・日本語化

TortoiseSVN – Downloads
上記ページから自分のOSに合ったバージョンをダウンロードする。
自分は64bitのwindowsなので、【TortoiseSVN 1.8.8 -64bit】をダウンロードしました。

TortoiseSVNダウンロード
TortoiseSVNダウンロード

続いて日本語化するためのファイルのダウンロード
同じページの下部に言語ファイルがずらーーーと並んでいます。
日本語化ファイルは18番ですね。

TortoiseSVN日本語化ファイル
TortoiseSVN日本語化ファイル

ダウンロードしたあとにTortoiseSVNをインストールします。
続いて日本語化ファイルもインストール。

インストールしても自動で日本語にはならないので、日本語化の設定をしていきます。
【デスクトップ上で右クリック】→【TortoiseSVN】が追加されているのでマウスオーバー→【seetings】を開きます。

TortoiseSVN日本語化の設定
TortoiseSVN日本語化の設定

開いたら【General】のメニューが開いてると思います。
【Language】の項目を【日本語】にして、適用→OK
これで日本語化は完了です。

プラグインをUPする

いよいよwordpressに作ったプラグインを公開する時がやってきました。

アップロードする空フォルダを作り【右クリック】→【SVN チェックアウト】をクリックする。

SVN チェックアウト
SVN チェックアウト

チェックアウトの入力ダイアログが出るので、wordpress.orgから届いたメールに記載されているリポジトリURLを入力する。

リポジトリURLの入力
リポジトリURLの入力

パスワード認証画面が出たら、【wordpress.org】のIDとパスワードを入力する。
そしてチェックアウトが完了すると、フォルダの中身が変わっているので確認してみましょう。

チェックアウト後の中身
チェックアウト後の中身

この中の【trunk】フォルダに、pluginのファイルを入れます。
※ここからの画像は公開した方のpluginのものです。

trunkフォルダに入れるファイル
trunkフォルダに入れるファイル

フォルダにファイルを入れたら、【trunk】を右クリックし【SVNコミット】を選択。

SVNコミット
SVNコミット

画像の【test】と書いてあるテキストボックスには何かしら文章を入れておかないとエラーになり、アップロードできないので注意。
これでOKを押すとファイルがwordpress.org上にアップされます。

数分待つと、wordpress公式ディレクトリに反映されています。
これで公開の手順は完了です!

アイキャッチ画像とスクリーンショット

プラグインページのアイキャッチ画像を配置するフォルダは【assets】の中です。
一応名前とサイズにルールがあるみたいなので、それも注意点の一つ。

自分は【banner-772×250.png】と【banner-1544×500.png】を入れました。
サイズはどうやら2種類使われるらしく、ページを開いた人の環境によって自動で使われるサイズが切り替わるみたいです。
xが全角だったり、サイズの表記が間違っていても反映されないみたいです。

スクリーンショットを入れるフォルダは【trunk】フォルダの直下です。
こちらも名前にルールがあります。

【screenshot-1.jpg】
【screenshot-2.jpg】

といった風に名前を付けないと反映されなかったです。
数字の番号は文字通り順番です。

備忘録

少々長めの記事となってしまいましたが、色々勉強になりました。
でもプラグインの開発と公開までの時間よりも、この記事の執筆にかけてる時間の方が長いってどういうことよw

現時点で8時間越えていますが、バグじゃありません、正確に執筆時間とれています。
んー、記事の執筆時間を短く出来るようになればなぁ~。。。

そんなこんなでここまで見てくださりありがとうございます。

参考サイト

以下のサイト様には大変お世話になりました。
おかげで始めてのpluginの作成が出来ました。

wordpress 自作プラグインをwordpress.orgに登録(前編) | gqevu6bsizのWordPress Plugins
自作プラグインをPlugin Directoryに登録する | モノについてのモノ語り
WordPress プラグインを公開するためにやったことまとめ
自作プラグインのWordPress.orgのプラグインディレクトリ登録手順 | Web制作・Webシステム(東京)の株式会社ワイワイエンジン
WordPressプラグインのreadme.txtを書く | へんな柳生
プラグインの作成 – WordPress Codex 日本語版

この記事が気に入ったら
『いいね』しよう!