高度な機能を簡単に導入できるWordPressプラグインは便利ですよね。プラグインは、WordPressの圧倒的人気を支えているオプションの一つです。
プラグインが自作できると、WordPressを自由に拡張できるようになります。
本記事では、難しい印象をもたれがちなWordPressプラグインの作り方を超簡単に説明します。
ほぼ最小構成のWordPressプラグインをつくり、WordPress上で確認する
WordPressプラグインに最低限必要なものは、プラグインの設定を書いたPHPファイル1つのみです。
まず、自作プラグイン用のディレクトリを作り、ディレクトリの中に設定ファイルを作ります。本記事では、プラグインの名前を「minimum-wp-plugin」としてみます。
├ minimum-wp-plugin
└ minimum-wp-plugin.phpPHPファイルを作ったら、中を編集していきましょう。PHPタグの間に、上から順にプラグインの名前、説明、作者を書きます。
<?php
/*
Plugin Name: wp-minimum-plugin
Description: Almost minimum wordpress plugin for beginner.
Author: NAVIFOLIO
*/
?>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.jsJavaScriptファイルから編集します。少々難しいように見えますが、コピー&ペーストでもOKです。
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge)
} 上記コードは、GoogleのChrome拡張機能開発チュートリアルで紹介されているコード（ライセンスについて）です。
今回はChrome拡張をつくるわけではなく、単にカスタマイズ用のコードとして利用します。
内容を全て理解する必要はありませんが、ざっくりと、
① ページの、記事本文が書いてあるHTML要素（=article要素）を探す
② article要素中の文字数を数え、読了時間を計算する
③ 読了時間を表示するための要素を生成し、記事本文の前に挿入する
ということをやっています。
今はCSSとJSをプラグインから適用するのが目的だから、細かいとこは気にしなくてもいいんだぜ。
次に、CSSファイルを編集していきましょう。
.color-secondary-text{
font-weight: bold;
color: #333333;
}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()関数を使います。
<?php
/*
Plugin Name: ...
(省略)
*/
function load_your_customize(){
/* cssを読み込む関数 */
wp_enqueue_style(
'minimum-wp-plugin-style',
plugin_dir_url( __FILE__ ) . '/css/style.css',
array(),'',''
);
/* jsを読み込む関数 */
wp_enqueue_script(
'minimum-wp-plugin-script',
plugin_dir_url( __FILE__ ) . '/js/minimum-wp-plugin.js',
array(),'',true
);
}
?>wp_enqueue_style(), wp_enqueue_script()関数は共通して、第二引数に読み込みたいソースのパスを指定します。
他の引数については今は分からなくても大丈夫です。
wp_enqueue_style / wp_enqueue_script
第二引数に、読み込みたいソースのパスを指定する
CSS/JSファイルのパスの指定について説明します。パスの指定は2つの部分に分かれています。
plugin_dir_url()関数は、WordPressに用意された関数で、引数に__FILE__を指定すると、プラグインのディレクトリのURLを示します。
// ドメインがlocalhost、var/www/ ディレクトリにwordPressをインストールしている場合
plugin_dir_url( __FILE__ )
// http://localhost/var/www/wp-content/plugins/myplugin/ を表す再掲ですが、本記事のプラグインの構成は以下のような形でした。
├ 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に実行させる処理を書いていきます。
<?php
/*
Plugin Name: ... (省略)
*/
function load_your_customize(){ /* 省略 */ }
/* WordPressに実行させる */
add_action('wp_enqueue_scripts', 'load_your_customize');
?>add_action()関数は、WordPressに用意されている関数で、アクションフックと呼ばれます。CSSやJSを読み込む時には、’wp_enqueue_scripts’ を最初に指定します。
アクションフックは、Webページを表示する処理の中で、WordPressに適切なタイミングで自作関数を実行させるために必要なもの、と捉えて下さい。
初心者には難しく感じるかもしれませんが、一度覚えたら同じような関数しか使いませんので大丈夫です。
add_action(‘wp_enqueue_scripts’, 自作関数名)
CSSやJSの読み込み処理を書いた自作関数を、WordPressに実行させる
以上で、プラグインの設定ファイルminimum-wp-plugin.phpの編集も終わりました。
編集後のコードは以下のようになります。
<?php
/*
Plugin Name: minimum-wp-plugin
Description: Almost minimum wordpress plugin for beginner.
Author: NAVIFOLIO
*/
function load_your_customize(){
/* cssを読み込む関数 */
wp_enqueue_style(
'minimum-wp-plugin-style',
plugin_dir_url( __FILE__ ) . '/css/style.css',
array(),'',''
);
/* jsを読み込む関数 */
wp_enqueue_script(
'minimum-wp-plugin-script',
plugin_dir_url( __FILE__ ) . '/js/minimum-wp-plugin.js',
array(),'',true
);
}
add_action('wp_enqueue_scripts', 'load_your_customize');
?> それでは、プラグインのディレクトリごとサーバーにアップロードして、プラグインをWordPressに登録しましょう。
最終的なディレクトリ構成は以下のようになりますね。
├ wp-content/plugins
├ minimum-wp-plugin
├ minimum-wp-plugin.php
├ css
└ style.css
└ js
└ minimum-wp-plugin.jsプラグインを有効化したら、記事本文の前に読了時間が表示されているか確認してみて下さい。
表示が出ましたでしょうか。余裕のある人は、プラグインをあえて無効化して、読了時間の表示が消えることも確認できるといいですね。
以上で、WordPress自作プラグインの入門記事を終わります。お疲れ様でした。
