WordPress自作プラグイン 超入門

高度な機能を簡単に導入できるWordPressプラグインは便利ですよね。プラグインは、WordPressの圧倒的人気を支えているオプションの一つです。

プラグインが自作できると、WordPressを自由に拡張できるようになります。

本記事では、難しい印象をもたれがちなWordPressプラグインの作り方を超簡単に説明します。

できること

ほぼ最小構成のWordPressプラグインをつくり、WordPress上で確認する

プラグインの最小構成

WordPressプラグインに最低限必要なものは、プラグインの設定を書いたPHPファイル1つのみです。

まず、自作プラグイン用のディレクトリを作り、ディレクトリの中に設定ファイルを作ります。本記事では、プラグインの名前を「minimum-wp-plugin」としてみます。

.
└── minimum-wp-plugin/
└── minimum-wp-plugin.php

PHPファイルを作ったら、中を編集していきましょう。PHPタグの間に、上から順にプラグインの名前、説明、作者を書きます。

{"filename":"minimum-wp-plugin.php","code":"<?php \n\/*\n Plugin Name: wp-minimum-plugin\n Description: Almost minimum wordpress plugin for beginner.\n Author: NAVIFOLIO\n*\/\n?>","language":"php","id":14}

PHPにおいて、/**/で囲まれた記述はコメント扱いなのですが、WordPressはこの部分からプラグインの基本情報を読み取ります。

なんとこれだけで、最小構成のプラグインは完成です。確認してみましょう。

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・JavaScriptの作成

まずは、「css」「js」ディレクトリをつくり、その中にそれぞれ独自CSS・JavaScriptを作成していきます。

.
└── minimum-wp-plugin/
├── minimum-wp-plugin.php
├── css/
│ └── style.css
└── js/
└── minimum-wp-plugin.js

JavaScriptファイルから編集します。少々難しいように見えますが、コピー&ペーストでもOKです。

{"filename":"minimum-wp-plugin.js","code":"const article = document.querySelector(\"article\");\n\n\/\/ `document.querySelector` may return null if the selector doesn't match anything\nif (article) {\n    const text = article.textContent;\n    const wordMatchRegExp = \/[^\\s]+\/g; \/\/ Regular expression\n    const words = text.matchAll(wordMatchRegExp);\n    \/\/ matchAll returns an iterator, convert to array to get word count\n    const wordCount = [...words].length;\n    const readingTime = Math.round(wordCount \/ 200);\n    const badge = document.createElement(\"p\");\n    \/\/ Use the same styling as the publish information in an article's header\n    badge.classList.add(\"color-secondary-text\", \"type--caption\");\n    badge.textContent = `\u23f1\ufe0f ${readingTime} min read`;\n\n    \/\/ Support for API reference docs\n    const heading = article.querySelector(\"h1\");\n    \/\/ Support for article docs with date\n    const date = article.querySelector(\"time\")?.parentNode;\n    (date ?? heading).insertAdjacentElement(\"afterend\", badge)\n} ","language":"javascript","id":1}

上記コードは、GoogleのChrome拡張機能開発チュートリアルで紹介されているコード(ライセンスについて)です。

今回はChrome拡張をつくるわけではなく、単にカスタマイズ用のコードとして利用します。

内容を全て理解する必要はありませんが、ざっくりと、

minimum-wp-plugin.js

① ページの、記事本文が書いてあるHTML要素(=article要素)を探す

② article要素中の文字数を数え、読了時間を計算する

③ 読了時間を表示するための要素を生成し、記事本文の前に挿入する

ということをやっています。

ダテネコ
ダテネコ

今はCSSとJSをプラグインから適用するのが目的だから、細かいとこは気にしなくてもいいんだぜ。

次に、CSSファイルを編集していきましょう。

{"filename":"style.css","code":".color-secondary-text{\n    font-weight: bold;\n    color: #333333;\n}","language":"css","id":4}

CSSファイルは、読了時間を表示する文字を太文字にして、文字色をややグレーにするというだけのものです。

以上で独自CSS・JSの準備は完了です。

本節のminimum-wp-plugin.jsには、 Apache License 2.0で配布されている製作物が含まれています。本記事で紹介しているコードは改変・再配布・商用利用が可能です。 ↑戻る

プラグイン設定ファイルの編集

独自のCSS・JavaScriptファイルができたら、minimum-wp-plugin.phpを編集して、CSSJSをプラグインから読み込む設定をしていきます。

プラグインから独自CSS・JSを読み込む手順

① CSS・JSを読み込むための関数を作る

② WordPressに用意されている関数で、①の関数をWordPressに実行させる

① CSS・JSを読み込む関数を作る

まず、CSS・JSを読み込むためには、それぞれwp_enqueue_style()wp_enqueue_script()関数を使います。

{"filename":"minimum-wp-plugin.php","code":"<?php\n\/*\nPlugin Name: ...\n(\u7701\u7565)\n*\/\nfunction load_your_customize(){\n    \/* css\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570 *\/\n     wp_enqueue_style(\n         'minimum-wp-plugin-style',\n         plugin_dir_url( __FILE__ ) . '\/css\/style.css',\n         array(),'',''\n     );\n    \/* js\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570 *\/\n     wp_enqueue_script(\n         'minimum-wp-plugin-script',\n         plugin_dir_url( __FILE__ ) . '\/js\/minimum-wp-plugin.js',\n         array(),'',true\n     );\n}\n?>","language":"php","id":14}

wp_enqueue_style(), wp_enqueue_script()関数は共通して、第二引数に読み込みたいソースのパスを指定します。

他の引数については今は分からなくても大丈夫です。

wp_enqueue_style / wp_enqueue_script
第二引数に、読み込みたいソースのパスを指定する

CSS/JSファイルのパスの指定について説明します。パスの指定は2つの部分に分かれています。

plugin_dir_url()関数は、WordPressに用意された関数で、引数に__FILE__を指定すると、プラグインのディレクトリのURLを示します。

{"code":"\/\/ \u30c9\u30e1\u30a4\u30f3\u304clocalhost\u3001var\/www\/ \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bwordPress\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u308b\u5834\u5408\nplugin_dir_url( __FILE__ )\n\/\/  http:\/\/localhost\/var\/www\/wp-content\/plugins\/myplugin\/ \u3092\u8868\u3059","language":"php","id":14,"filename":""}

再掲ですが、本記事のプラグインの構成は以下のような形でした。

.
└── 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に実行させる処理を書いていきます。

{"filename":"minimum-wp-plugin.php","code":"<?php\n\/*\nPlugin Name: ... (\u7701\u7565)\n*\/\nfunction load_your_customize(){  \/* \u7701\u7565 *\/  }\n\/* WordPress\u306b\u5b9f\u884c\u3055\u305b\u308b *\/\nadd_action('wp_enqueue_scripts', 'load_your_customize');\n?>","language":"php","id":14}

add_action()関数は、WordPressに用意されている関数で、アクションフックと呼ばれます。CSSやJSを読み込む時には、’wp_enqueue_scripts’ を最初に指定します。

アクションフックは、Webページを表示する処理の中で、WordPressに適切なタイミングで自作関数を実行させるために必要なもの、と捉えて下さい。

初心者には難しく感じるかもしれませんが、一度覚えたら同じような関数しか使いませんので大丈夫です。

add_action(‘wp_enqueue_scripts’, 自作関数名)
CSSやJSの読み込み処理を書いた自作関数を、WordPressに実行させる

以上で、プラグインの設定ファイルminimum-wp-plugin.phpの編集も終わりました。完成したコードは以下のようになります。

{"filename":"minimum-wp-plugin.php","code":"<?php\n \/*\n Plugin Name: minimum-wp-plugin\n Description: Almost minimum wordpress plugin for beginner.\n Author: NAVIFOLIO\n *\/\n \n function load_your_customize(){\n    \/* css\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570 *\/\n    wp_enqueue_style(\n        'minimum-wp-plugin-style',\n        plugin_dir_url( __FILE__ ) . '\/css\/style.css',\n        array(),'',''\n    );\n    \/* js\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570 *\/\n    wp_enqueue_script(\n        'minimum-wp-plugin-script',\n        plugin_dir_url( __FILE__ ) . '\/js\/minimum-wp-plugin.js',\n        array(),'',true\n    );\n }\n add_action('wp_enqueue_scripts', 'load_your_customize');\n ?>","language":"php","id":14}

機能を追加したプラグインを、WordPressで確認しよう

それでは、プラグインのディレクトリごとサーバーにアップロードして、プラグインをWordPressに登録しましょう。

最終的なディレクトリ構成は以下のようになりますね。

.
└── wp-content/plugins/
└── minimum-wp-plugin/
├── minimum-wp-plugin.php
├── css/
│ └── style.css
└── js/
└── minimum-wp-plugin.js

プラグインを有効化したら、記事本文の前に読了時間が表示されているか確認してみて下さい。

表示が出ましたでしょうか。余裕のある人は、プラグインをあえて無効化して、読了時間の表示が消えることも確認できるといいですね。

以上で、WordPress自作プラグインの入門記事を終わります。お疲れ様でした。

コメントを残す

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

CAPTCHA


error: Content is protected !!