高度な機能を簡単に導入できるWordPressプラグインは便利ですよね。プラグインは、WordPressの圧倒的人気を支えているオプションの一つです。
プラグインが自作できると、WordPressを自由に拡張できるようになります。
本記事では、難しい印象をもたれがちなWordPressプラグインの作り方を超簡単に説明します。
ほぼ最小構成のWordPressプラグインをつくり、WordPress上で確認する
WordPressプラグインに最低限必要なものは、プラグインの設定を書いたPHPファイル1つのみです。
まず、自作プラグイン用のディレクトリを作り、ディレクトリの中に設定ファイルを作ります。本記事では、プラグインの名前を「minimum-wp-plugin」としてみます。
.
└── minimum-wp-plugin/
└── minimum-wp-plugin.php
PHPファイルを作ったら、中を編集していきましょう。PHPタグの間に、上から順にプラグインの名前、説明、作者を書きます。
PHPにおいて、/**/で囲まれた記述はコメント扱いなのですが、WordPressはこの部分からプラグインの基本情報を読み取ります。
なんとこれだけで、最小構成のプラグインは完成です。確認してみましょう。
WordPressがインストールされているサーバーに、作ったminimum-wp-pluginディレクトリをアップロードします。アップロードする場所は、「wp-content」中の「plugins」ディレクトリです。
.
└── wp-content/plugins/
└── minimum-wp-plugin/
└── minimum-wp-plugin.php
アップロードできたら（※）ダッシュボードにログインして、「プラグイン→インストール済みプラグイン」からプラグインの一覧を確認しましょう。
一覧に「mimimum-wp-plugin」が追加されており、mimimum-wp-plugin.phpに記述した内容が反映されているはずです。
あとは有効化すればWordPressに反映されます。完成ですね。
作ったminimum-wp-plugin.phpは、PHPプログラムとしては何もしていないので、WordPressの他機能に特に影響を与えません。ただ、可能なら本番環境にいきなりアップロードするのではなく、ローカルのWordPress環境を作って試すのをおすすめします。
前章までで最小構成のプラグインは完成してしまいました。しかし、機能が何もないので、プラグインが有効になっていても特別な変化は起きません。
本章では、プラグインの機能として独自のCSS・JavaScriptをWordPressに適用して、記事に、目安の読了時間を表示する機能を作ってみましょう。
まずは、「css」「js」ディレクトリをつくり、その中にそれぞれ独自CSS・JavaScriptを作成していきます。
.
└── minimum-wp-plugin/
├── minimum-wp-plugin.php
├── css/
│ └── style.css
└── js/
└── minimum-wp-plugin.js
JavaScriptファイルから編集します。少々難しいように見えますが、コピー&ペーストでもOKです。
上記コードは、GoogleのChrome拡張機能開発チュートリアルで紹介されているコード（ライセンスについて）です。
今回はChrome拡張をつくるわけではなく、単にカスタマイズ用のコードとして利用します。
内容を全て理解する必要はありませんが、ざっくりと、
① ページの、記事本文が書いてあるHTML要素（=article要素）を探す
② article要素中の文字数を数え、読了時間を計算する
③ 読了時間を表示するための要素を生成し、記事本文の前に挿入する
ということをやっています。
今はCSSとJSをプラグインから適用するのが目的だから、細かいとこは気にしなくてもいいんだぜ。
次に、CSSファイルを編集していきましょう。
CSSファイルは、読了時間を表示する文字を太文字にして、文字色をややグレーにするというだけのものです。
以上で独自CSS・JSの準備は完了です。
本節のminimum-wp-plugin.jsには、 Apache License 2.0で配布されている製作物が含まれています。本記事で紹介しているコードは改変・再配布・商用利用が可能です。 ↑戻る
独自のCSS・JavaScriptファイルができたら、minimum-wp-plugin.phpを編集して、CSS・JSをプラグインから読み込む設定をしていきます。
① CSS・JSを読み込むための関数を作る
② WordPressに用意されている関数で、①の関数をWordPressに実行させる
① CSS・JSを読み込む関数を作る
まず、CSS・JSを読み込むためには、それぞれwp_enqueue_style()、wp_enqueue_script()関数を使います。
wp_enqueue_style(), wp_enqueue_script()関数は共通して、第二引数に読み込みたいソースのパスを指定します。
他の引数については今は分からなくても大丈夫です。
wp_enqueue_style / wp_enqueue_script
第二引数に、読み込みたいソースのパスを指定する
CSS/JSファイルのパスの指定について説明します。パスの指定は2つの部分に分かれています。
plugin_dir_url()関数は、WordPressに用意された関数で、引数に__FILE__を指定すると、プラグインのディレクトリのURLを示します。
再掲ですが、本記事のプラグインの構成は以下のような形でした。
.
└── minimum-wp-plugin/
├── minimum-wp-plugin.php
├── css/
│ └── style.css
└── js/
└── minimum-wp-plugin.js
まずminimum-wp-pluginディレクトリの場所を示して、その中にソースがどこにあるかを後ろに付け足して指定しているわけですね。
cssの指定を翻訳すると、minimum-wp-pluginディレクトリ配下の、cssディレクトリの中にあるstyle.cssですよ、と上から順に指定しているね。
plugin_dir_url( __FILE__) は、プラグイン自体のディレクトリを表す
JavaScriptファイルの指定も同様に行っています。
② CSS・JSを読み込む関数を、WordPressに実行させる
次に、①でつくった関数をWordPressに実行させる処理を書いていきます。
add_action()関数は、WordPressに用意されている関数で、アクションフックと呼ばれます。CSSやJSを読み込む時には、’wp_enqueue_scripts’ を最初に指定します。
アクションフックは、Webページを表示する処理の中で、WordPressに適切なタイミングで自作関数を実行させるために必要なもの、と捉えて下さい。
初心者には難しく感じるかもしれませんが、一度覚えたら同じような関数しか使いませんので大丈夫です。
add_action(‘wp_enqueue_scripts’, 自作関数名)
CSSやJSの読み込み処理を書いた自作関数を、WordPressに実行させる
以上で、プラグインの設定ファイルminimum-wp-plugin.phpの編集も終わりました。完成したコードは以下のようになります。
それでは、プラグインのディレクトリごとサーバーにアップロードして、プラグインをWordPressに登録しましょう。
最終的なディレクトリ構成は以下のようになりますね。
.
└── wp-content/plugins/
└── minimum-wp-plugin/
├── minimum-wp-plugin.php
├── css/
│ └── style.css
└── js/
└── minimum-wp-plugin.js
プラグインを有効化したら、記事本文の前に読了時間が表示されているか確認してみて下さい。
表示が出ましたでしょうか。余裕のある人は、プラグインをあえて無効化して、読了時間の表示が消えることも確認できるといいですね。
以上で、WordPress自作プラグインの入門記事を終わります。お疲れ様でした。
