当サイトはアフィリエイト広告を利用しています

[WordPress]自作ウィジェットをプラグイン化した手順

SHARE

前回作成したウィジェット「広告用２カラムのカスタムHTML」をプラグイン化するにあたって、どのように行ったかを記していきます。

SANGO SANGOで２カラムレイアウトで広告を貼り付けるウィジェットを作ってみました

SANGO [SANGO]２カラム広告ウィジェットをプラグイン化しました

完成したプラグインも上記記事にダウンロードリンクがあります。

ファイルの置き場所

プラグインファイルは下記のパスに配置されています。
wordpress/wp-content/plugins/

MAMPなどのローカル環境でプラグイン作成を行っていく場合、上記フォルダに自作するためのフォルダを作成します。
wordpress/wp-content/plugins/peralab-w2cch/

フォルダ名は、世界中にある他のWordPressプラグインと被らないよう、シンプルなものは避けます。
自分のサイト名や名前などを接頭語にすれば被りづらくなります。

プラグイン作成にあたって、最低限必要なファイルはphpファイルひとつです。
必要に応じてCSSや画像ファイルなどを追加します。
今回、僕がプラグイン化するウィジェットではphpファイルの他に、cssファイルをひとつ同梱します。

フォルダ構成はこのようになっています。
赤字はフォルダです。
peralab-w2cch/peralab-w2cch.php
peralab-w2cch/style/style.css

cssファイルをstyleフォルダの中に入れていますが、特に決まりがあるわけではないです。
将来的な管理がしやすいようにstyleフォルダを作っています。

PHPファイルにヘッダー情報をつける

WordPress側にプラグインを認識させるために、phpファイルの最初に下記コメントを記述します。

peralab-w2cch.php

<?php
/*
Plugin Name: (プラグインの名前)
Plugin URI: (プラグインの説明と更新を示すページの URI)
Description: (プラグインの短い説明)
Version: (プラグインのバージョン番号。例: 1.0)
Author: (プラグイン作者の名前)
Author URI: (プラグイン作者の URI)
License: (ライセンス名の「スラッグ」 例: GPL2)
*/
?>

これに従って記述した結果がこちら。

peralab-w2cch.php

<?php
/*
Plugin Name: カスタムHTML2カラムウィジェット（広告貼り付け用）
Plugin URI: https://pera-lab.com/archives/914
Description: テーマ「SANGO」でカスタムHTMLを2カラムレイアウトで表示します。（主に広告貼付けを目的としたものです）
Version: 1.0
Author: pera-lab
Author URI: https://pera-lab.com/
License: GPL2

<カスタムHTML2カラムウィジェット（広告貼り付け用）> is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.
 
<カスタムHTML2カラムウィジェット（広告貼り付け用）> is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with <カスタムHTML2カラムウィジェット（広告貼り付け用）>. If not, see <http://www.gnu.org/licenses>.
*/

これでWordPress側がプラグインを認識し、プラグイン画面に出現するようになります。

ライセンスについて

Licenseは前述したコードの赤字部分です。
特に理由がない限り、WordPressと同じGPL2ライセンスを適用します。
ただしGPL2ライセンスは、GPL2と書いただけではダメで、下記の文面を含める必要があります。

コード

{Plugin Name} is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.
 
{Plugin Name} is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
 
You should have received a copy of the GNU General Public License
along with {Plugin Name}. If not, see {License URI}.

この文面は適時更新されているようで、プラグイン作成時はこちらのページで確認してください。
※たぶん、これであっているとは思いますが英語が読めないので正直不安。日本語版Codexでは別の書き方が紹介されています(2018/02/26時点)。そもそも英語版のページも前述の日本語版Codexに貼られていたリンクから飛んだわけですが…。参考するにしても自己責任でお願いします。jetpackに含まれている一部のプラグインは、紹介した書き方をしていますね。


参考
Including a Software LicenseWORDPRESS.ORG


参考
プラグインの作成Codex

PHPファイルの中身

ヘッダー情報を書いた後は、functions.phpに書くのと同じです。
今回はウィジェットの移植なので、こちらの記事でfunctions.phpに記述した内容を丸々コピペして完了です。

CSSファイルの読み込み

CSSファイルを同梱するので、phpにCSSロード処理を付け足します。

peralab-w2cch.php

//-----------------------
//	CSSファイルの読み込み
//-----------------------
add_action(
	'wp_enqueue_scripts', 
	function(){
		wp_enqueue_style('PeralabW2cchStyle', plugins_url('style/style.css', __FILE__));
	}
);

wp_enqueue_style
CSS スタイルファイルを安全に (キューへ) 追加します。
第1引数：ハンドルとして使われる名称になります。他のプラグイン、CSSと被らないような名称をつけます。
第2引数：スタイルシート（CSS）のURLを記述します。plugins_url関数を使って取得した値を渡しています。

plugins_url
pluginsフォルダへのURLを取得します。
第1引数：(オプション)URLを取得したいプラグインファイルへのパス。
第2引数：(オプション)第1引数が相対パスの起点とする親ディレクトリ。
plugins_url('style/style.css', __FILE__)の例で言うと、第2引数を指定しているので、__FILE__からの相対パスになっています。
__FILE__はPHPのマジック定数で、現在のファイル(peralab-w2cch.php)のフルパスに置き換わります。
例）
plugins_url()
取得結果：http://pera-lab.com/wp-content/plugins
plugins_url('style/style.css')
取得結果：http://pera-lab.com/wp-content/plugins/style/style.css
plugins_url('style/style.css', __FILE__)
取得結果：http://pera-lab.com/wp-content/plugins/peralab-w2cch/style/style.css

アクションフック（wp_enqueue_scripts）
ここが一番迷った所。CSSのロードはwp_enqueue_styleで読み込めますが、どのフックのタイミングで実行すればよいのか。
Codexのアクションフック一覧でそれっぽい所を探してみると、
admin_enqueue_scripts HTML ヘッダーで実行し、プラグインまたはテーマが JavaScript および CSS をすべての管理画面で enqueue できるようにする。
これがそれっぽいですね。しかし管理画面用のフックなので、enqueue_scriptsで探して見つけたのがwp_enqueue_scriptsです。こちらは説明が全く書いていませんが…。
wp_enqueue_style関数のサンプル例でもwp_enqueue_scriptsが使われているので、大丈夫そうと思って実行。
出力されたHTMLソースを確認すると<head>要素内の<style>でCSSがきちんとロードされていたので正解でした。


参考
関数リファレンス/wp enqueue styleCodex


参考
関数リファレンス/plugins urlCodex


参考
プラグイン API/アクションフック一覧Codex

style/style.css

CSSファイルの中身も、移植なのでこちらの記事でstyle.cssに記述した内容を丸々コピペして完了です。
ただし、CSSは1行目に文字コードを書くルールがあるので、

@charset "utf-8";

これを先頭に記述して、後はコピペです。

まとめ

長々と書きましたが、これでプラグイン化が完了です。
ウィジェットの移植はほとんどコピペで終わります。

今回、プラグイン化するのに時間がかかったのはライセンスとCSSのロード処理を調べていたところですね。

下記の参考リンクに、ヘッダーに記述したライセンスの一部翻訳があります。


参考
GNUライセンスに関してよく聞かれる質問GNUプロジェクト

 

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

SANGO
[SANGO]２カラム広告ウィジェットをプラグイン化しました

次の記事

Parallels13のトライアル期間終了後の話
Parallelsロゴ