1. HOME
  2. WEB制作
WEB制作 公開

記事更新日

記事の執筆時間の記録・表示が出来るWordPress pluginを公式ディレクトリにて公開出来たので、そこに至るまでに学んだことの覚書です。

そんなにWordPress pluginを頻繁に作ることも無いかと思うので、次作るときには【多分忘れてる】と思うので、plugin作成から公式ディレクトリ登録までの流れをここに記録しておきますw

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

自作plugin作成

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

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

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

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

ファイルの準備

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

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

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

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

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


<?php
/*
Plugin Name: add original menu
Plugin URI: https://11neko.com/
Description: add menu to display original page contents.
Version: 1
Author: shinji yonetsu
Author URI: https://11neko.com/
License: GPLv2
*/
?>

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

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

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

なので英語苦手な人でも大丈夫!

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

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

今はまだ動作部分を書いていないので、有効化は我慢しておきましょう。

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

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


// add menu
add_action('admin_menu' , 'add_new_plugin_menu');
function add_new_plugin_menu(){
	add_menu_page('page_title', 'menu_title', 8, 'new_plugin_page', 'new_plugin_display' , 'dashicons-admin-plugins', 1);
}

// display page
function new_plugin_display(){
	echo '<h1>plugin</h1>';
	echo '<p>this is plugin setting page or Description page</p>';
}

■簡単なコードの解説
まず最初にアクションフックの設定
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申請時に必要なファイルを揃えておきます。
なかには必要じゃないファイルもありますが、予め準備しておいた方が効率いい気がしますし、申請も通りやすい気がします

翻訳ファイルの作成準備

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


add_action( 'plugins_loaded', 'new_plugin_load_textdomain' );
function new_plugin_load_textdomain() {
    load_plugin_textdomain( 'new-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/');
}

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


// display page
function new_plugin_display(){
	echo _e('<h1>plugin</h1>' , 'new-plugin');
	echo _e('<p>this is plugin setting page or Description page</p>' , 'new_plugin');
}

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

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

次に公式wordpress POTファイルをダウンロードします。

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

Poeditで翻訳ファイルの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

readme.txtの作成

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

まずはプラグインフォルダの中に【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 Plugin readme.txt Validator

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

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

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

WordPress.org

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

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

項目入力内容
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 WordPresswordpressで生計を立てているかどうか
I am a WordPress consultantwordpressのコンサルタントかどうか

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

ログインした状態でAdd Your Pluginにアクセスする。
入力項目は3つしかないので楽です。

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

これで申請は完了です。

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

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

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

SVNってなんぞや?
って本当に全然知らなかったし、ツールも使ってなかったのでここに時間をとられました。どうやらgithubみたいにバージョンを管理してコミット出来るものらしいです(;´Д`)

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

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

TortoiseSVN

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

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

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

インストールしても自動で日本語にはならないので、日本語化の設定をしていきます。

【デスクトップ上で右クリック】→【TortoiseSVN】が追加されているのでマウスオーバー→【seetings】を開きます。

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

プラグインをUPする

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

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

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

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

この中の【trunk】フォルダに、pluginのファイルを入れます。

フォルダにファイルを入れたら、【trunk】を右クリックし【SVNコミット】を選択。これで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のプラグインディレクトリ登録手順

プラグインの作成