【初心者必見!】本格的なWordPressプラグインを自作する方法

2023.04.21
2023.04.21

みなさんこんにちは!エンジニアの高澤です! 今回はWordPressのプラグインを自作する方法について解説します。

この記事で作れるもの

この記事では以下の機能を備えたプラグインが自作で作成できます。

・オリジナルの管理画面を作成
・自作したオリジナルの管理画面へテキスト入力、画像アップロード機能を追加
・最後にショートコード化し、管理画面で設定した内容をサイトに表示

今回のプラグインの解説を通して、上記のプラグインを作成できます。

今回の記事でWordPressエンジニアの初心者の方から中級者の方までを対象に、筆者のプラグイン開発の経験からプラグイン開発に必要な知識を一通り学べる構成で記事を執筆いたしました。

理解が難しい箇所も補足を入れるなどしてサポートしておりますので、無理なく読み進めることができますので、ぜひご参考にして下さい。

WordPressを自作するメリット

 

WordPressプラグインとは

WordPressのプラグインとは、WordPressの元々備わっている機能に様々な機能を追加、拡張できる機能です。

WordPressはインストール直後の状態では、運営者側によっては機能が物足りなかったりします。その際に、プラグインを利用して欲しい機能を追加します。

WordPressはすでに公式で5万以上のプラグインが公開されており、多くの高機能なプラグインが無料で公開されています。

プラグインを自作してみよう

それでは早速、プラグインを自作してみましょう!

プラグインを作ることは実はとても簡単です。プラグインを自作するには下記の手順で進めていきます。

・プラグイン用のフォルダを作成
・プラグインのPHPファイルを作成
・PHPファイルにプラグイン情報を記述
・FTPで作成したプラグインフォルダをサーバーへアップロード
・管理画面から有効化

上記の手順で進めることで、プラグイン自体が簡単に作れます。 プラグインの機能の作り方はこの作業が完了した後に解説いたしますので、よろしければチェックしていただけますと幸いです。

プラグインのフォルダを作ろう

まずは、プラグインのフォルダを作りましょう。 フォルダはそのまま本当にフォルダを作成するだけです。 この時フォルダの名前はプラグイン名で作成しましょう。 当記事では「Sample Plugin」というプラグイン名で作っていきますので、「sample-plugin」という名前でフォルダを作成します。

今回のポイント

プラグイン名は公開済みのプラグイン名と重複しないように!

プラグインを自作する際にご自身でプラグイン名を決めることになりますが、この時必ず公開済みのプラグイン名と重複しないか確認しましょう。 理由は、プラグイン名が重複するとWordPressにインストールした際に強制的に管理画面上からアップデートがアナウンスされて、すでに公開済みのプラグインデータに上書きされて実質消えてしまいます。 また不具合の原因にもなるため、必ず事前にネットや管理画面のプラグイン検索ページから確認しましょう。

PHPファイルを作成しよう

次は、PHPファイルを作成しましょう。要はこのファイルがプラグインの本体ファイルになります。 PHPファイルもプラグイン名で作成してください。 当記事では「sample-plugin.php」で作成します。

今回はファイルはこの1つになりますが、プラグインの規模が大きくなった場合管理しやすくなどの目的でファイル数が増えることになります。今回は解説しませんが、テーマ開発を経験された方はheader.phpやfront-page.phpなど分けるイメージと同じと思っていただけるとわかりやすいかと思います。

プラグイン情報の記述方法

作成いただいたPHPファイル(sample-plugin.php)の一番上に下記のコードを記述して下さい。

これがプラグインとして機能させるための大変重要なコードになります。 内容はプラグイン名やプラグインの説明、バージョンなどとなっており、これがなければプラグインとして機能しません。 また、こちらの内容がWordPressの管理画面やWordPressの公式プラグインディレクトリに表示されるため、正確にかつ詳細に記述することが重要です。

今回はチュートリアルですので、下記のように最低限の記述で作ります。

記述も完了したら、このPHPファイルを作成したファイル(sample-plugin)の中に入れましょう。 ここまでで、プラグインファイルができました。

FTPで作成したフォルダをサーバーへアップする方法

次に、FTPを利用してサーバーへ作成したプラグインファイルをアップロードしましょう。アップロードする場所は下記になります。

/【利用されているドメイン】.com/public_html/【サイトディレクトリ名】/wp-content/plugins

※レンタルサーバーを想定しております。
※お使いのサーバーによって多少違いがある可能性があるため、必ずご確認をお願いいたします。
※アップロードする前に必ずバックアップをお取り下さい。

どのサーバーも共通で、WordPress本体ファイルの中の「plugins」フォルダの中にアップロードして下さい。 MAMPやXAMPPを利用されている方も共通です。

プラグインを管理画面から有効化

FTPからアップロードが完了したら、次は管理画面から有効化してみましょう。 WordPressのプラグイン管理画面を確認します。すると作成したプラグイン名で項目に追加されているのがわかります。

「有効化」とあるので、こちらをクリックします。

すると、無事有効化されてプラグインのPHPファイルが起動します。 今は何の処理も記述していないため、何も起こりません。

ここまでで、プラグインの雛形は完成です!お疲れ様でした。 あとは処理を書いていくだけなので、この後解説し実装していきます。

プラグインの機能を作ろう

それではここからはプラグインの機能を作っていきたいと思います。 前述した通り、まず「テキスト入力欄と画像のアップロードができるオリジナルの管理画面」を作成していきます。 <最後に「設定した内容をショートコード化し、サイト上に表示できるようにする」ところまで実装していきたいと思います。

ただその前に…プラグイン開発に必要な知識をここで事前に解説します! 理由は単純で、プラグイン開発で使用する技術の幅は広く、知識0で対応できるかというとそうではありません。 ましてや、今回作成するプラグインは本格的なプラグインになるため、必要な知識は抑えておく必要があります。

ただし当記事で解説する内容を学んでいただければ、どれも頻繁に使われる技術なので今後のプラグイン開発に役立ちます! また、プラグイン開発のみならずテーマ開発にも生きてくる部分が多いため、ぜひご参考にしていただければ幸いです。

本格的なプラグイン作成前の基礎知識

大きく分けて「アクションフック、フィルターフック」「Settings API」「ショートコード」の3点について解説いたします。 かなり重要な内容になりため、必ずおさえておきましょう。

アクションフック、フィルターフックとは

まずはじめに、アクションフックとフィルターフックについて解説します。 アクションフック、フィルターフックとは、ともにWordPressの機能を拡張するための関数を指定するためのコードのことをいいます。

アクションフックとは

アクションフックとは、WordPressで実行される特定のイベント(処理)のタイミングで、自作した処理(関数)を追加するための仕組みです。

例えば、管理画面から記事を投稿する際に「保存」ボタンを押すかと思います。この「保存」ボタンを押したときに保存の処理が行われますが、この保存の処理のタイミングで「自分で考えた他の処理」も行われるようにできるのがアクションフックです。 関数はadd_action()を使用します。

下記がアクションフックの簡単な例です。 サンプルコードは皆様のWordPressデータベースを汚してしまう可能性があるため処理は記述しておりません。

フィルターフックとは

フィルターフックとは、WordPressの既存の機能(処理)をフィルタリング、つまり拡張・変更するための仕組みです。

例えば、WordPressのテンプレートタグに「the_title()」という関数でタイトルを表示させることがあるかと思いますが、出力させるタイトルの前後に任意の文字を追加したりすることができるのがフィルターフックです。 関数はadd_filter()を使用します。

下記がフィルターフックの簡単な例です。 試しにテーマファイル内のfunctions.phpにコピー&ペーストしてみて挙動を確認してみて下さい。 データベースへの影響はないため、確認後は速やかに削除していただければ大丈夫です。

以上がアクションフック、フィルターフックについての解説となりましたが、少しでもご理解いただけましたでしょうか? もしより詳しく知りたいという方は下記の公式ドキュメントからご確認くださいませ。

WordPress公式ドキュメント プラグイン API/アクションフック一覧 プラグイン API/アクションフック一覧

今回のポイント

実はfunctions.phpの内容はそのままプラグインにできちゃいます

ここで解説したアクションフック、フィルターフックですが、このフックはテーマ開発においても頻繁に利用されます。 そのため、テーマ開発者の方にはfunctions.phpによく書くよな〜といった具合に見覚えがあったかと思いますが、functions.phpに記述していたアクションフック、フィルターフックはそのままプラグインファイルに書き写せばそれがもうプラグインになってしまいます。

なので、プラグイン開発はテーマ開発者にとっては難しくないということが言えます。

Settings APIとは

Settings APIとは、WordPressでオリジナルの設定画面を作成するための公式のAPIです。

このAPIを利用することで、プラグイン開発やテーマ開発の時に設定画面を作ることができ、独自の項目データを保存することができます。 ここでいう独自の項目とは、テキストや画像、チェックボックスやラジオボタンなどのことをいいます。

Settings APIを利用することによって、手軽に設定画面が作成できWordPress側でセキュリティやデザインの制御をある程度してくれるため、実装時のエラー等が起きにくいというメリットがあります。

Settings APIで使用する関数は以下になります。具体的な使い方はこのあと解説させていただきます。

register_setting()
settings_fields()
do_settings_sections()
add_settings_field()
add_settings_section()
など

より詳しく知りたいという方は下記の公式ドキュメントからご確認くださいませ。

WordPress公式ドキュメント プラグイン Settings API Settings API

ショートコードとは

WordPressにおけるショートコードとは、短いコードの記述を投稿記事のコンテンツ内など任意の箇所に埋め込んで、PHPの処理などを追加することができる機能です。

具体的には下記のようなPHPコードで作成が可能です。 下記は任意のpタグのテキストを表示させるための記述例です。 試しにテーマファイル内のfunctions.phpにコピー&ペーストしてみて挙動を確認してみて下さい。 新規でサンプルの投稿記事を追加し、本文コンテンツ欄の中に[sample_shortcode]というコード(ショートコード)を記述してプレビューしてみて下さい。 確認後は速やかに削除していただければ大丈夫です。

ショートコードは、使い方、工夫次第でさまざまな使い方が可能です。 例えば、すべての記事でバナー画像を共通化させたい時は、リンクつきのバナー画像をショートコードとして作成しそのショートコードを埋め込めば共通化させることができます。 また、その際の大きなメリットとして、例えばそのバナー画像を変更したいとなればショートコードの中身を変更するだけなので、工数がかなり削減され実装効率が格段に上がります。

ここまでで、プラグイン開発のための基礎知識が頭に入ったかと思います。 次からはいよいよ機能を実装いたします。

オリジナルの管理画面を作ろう

それでは、最後の作業としてプラグインの中身を実装していきましょう。 当記事で作成するプラグインの内容を改めて示しておきます。

・オリジナルの管理画面を作成
・自作したオリジナルの管理画面へテキスト入力、画像アップロード機能を追加
・最後にショートコード化し、管理画面で設定した内容をサイトに表示

上記の順番通りに解説していきます。まずはオリジナルの管理画面を作成しましょう!

Settings APIで管理画面を作成する方法

テキスト入力機能を自作する方法

まずはSettings APIでテキストの入力機能を作っていきたいと思います。 先に下記のPHPコードを先ほど作成したsample-plugin.phpにコピー&ペーストして下さい。

下記のようにプラグイン情報の記述の直下に追加するイメージです。

コピー&ペーストした後に管理画面を更新していただきますと、管理画面左メニューに「Sample Plugin」というメニューが追加されたのが確認できたかと思います。また、設定ページを開くとテキストを入力できる画面も確認できたかと思います。 これで、下記のようにテキストを保存するためのプラグイン専用管理画面を作成することができました。

画像アップロード機能を自作

次に、作成した管理画面に画像アップロードし保存する機能を実装していきます。 下記のコードをそれぞれ指定の場所に追加して下さい。

add_settings_field()関数の下にもう1つ下記のコードを追加

sample_text_fields_func()関数の下に下記のコードを追加

register_setting()関数の下にもう1つ下記のコードを追加

それぞれコードを追加していただくことで、下記のように管理画面に画像アップロード機能が追加されたかと思います。

この画像アップロードの実装ではWordPressのAPIであるメディアアップローダーを利用しております。

メディアアップローダーとは

メディアアップローダーとは、WordPressの管理画面内で画像やファイルをアップロードする際に使いやすいインターフェースを提供してくれる機能です。

また、このメディアアップローダーのPHPとJavaScript(jQuery)のコードを利用することで、簡単に画像アップロード機能を実装することができます。

例えば、ファイル制限をしたい場合は下記の「wp.media」のパラメーターに「library: { type: ‘image’ }」のような記述を追加するだけで画像のみを許可するように指定することができますし、ファイル形式を制限する場合は「library: { type: ‘application/pdf’ }」のようにMIMEタイプを指定して制限することができます。

ここまでの説明にありましたSettings APIとメディアアップローダーの技術はかなり汎用性がありプラグイン開発にはしばしば使われる技術なので、必ずお役に立てるかと思います! 次は最後に、作成した管理画面の設定の内容をショートコードとして実装してサイト上に表示してみましょう。

管理画面で設定した内容をサイトに反映しよう

ここまでで、管理画面の作成は完了しました。 次は設定画面で保存したデータを表示させるための機能を実装します。 事前に設定画面では下記のように設定しております。

下記のコードをsample-plugin.phpの末尾に追加して下さい。

下記のようにsample-plugin.phpファイルの末尾に追加するイメージです。

投稿管理画面からショートコードを追加してみよう

上記のコードを追加したら、WordPress管理画面の記事の投稿画面から新規作成していただき、試しに本文コンテンツの入力欄に[sample_shortcode]をコピー&ペーストしてみて下さい。

保存をしていただけますと、下記のように管理画面で設定したテキストと画像が表示されているかと思います。 CSSを記述していないため、任意にCSSでレイアウトを整えて下さい。

PHPテンプレートファイルへショートコードを追加してみよう

また、2パターン目として、PHPテンプレートファイルにショートコードを追加してみましょう。 テーマファイルの中の任意のファイル(今回の例ではsidebar.php)に下記のコードを追加してみて下さい。

下記のようにsidebar.phpなど任意の場所に追加していただくイメージです。

ショートコードをPHPテンプレートに追加する場合、do_shortcode()関数を利用します。この時必ずdo_shortcode()関数の手前でechoを記述して下さい。

コードを追加していただくと下記のようにサイドバーに表示されているかと思います。

ここまでで、プラグイン開発についての解説が終わりました。本当にお疲れ様でした。 途中わからない関数など出てきたかと思いますが、プラグインを作ったことには変わりありません。自信を持って下さい! まずは作ってしまってから、わからないことは後から調べて肉付けしていくイメージで大丈夫です。

ここまで読んで下さったあなたは、WordPressエンジニアとしてレベルが上がったはずです。 それもそのはず、先ほどお伝えした通り当記事のノウハウはプラグイン開発の基礎になることはもちろん、テーマ開発にも活かすことができます。 今回当記事で仕事に役立つノウハウを手に入れたあなたは、クライアントの要望に応える幅が広がったかと思います。

必ず脆弱性、セキュリティにご注意ください!

最後にお断りしたいこととしては、プラグイン開発には必ずセキュリティには注意してください。 今回最低限の配慮をいたしましたが、プラグインの内容によっては脆弱性が見られたり、セキュリティが弱かったりしてせっかく作り上げたプラグイン、ウェブサイトをハッキングされてしまう可能性があります。 そのため、プラグインを開発する場合は必ず脆弱性、セキュリティを意識して開発してください。

最後にこれまで実装してきたプラグインのPHPファイル(sample-plugin.php)のソースコードを掲載させていただきます。 どうしてもうまくいかない方は、下記のソースコードを丸々コピー&ペーストして下さい。

まとめ

以上で、プラグインを自作する方法の解説を終わります。

整理しますと、プラグイン開発に必要なノウハウはこれまで解説してきた通り、「アクションフック、フィルターフック」、「Settings API」、「ショートコード」が基本になります。 また、場合によっては作りたい機能によって「メディアアップローダー」だったり、他にも多くの技術が必要になることもあります。

ですが、当記事の内容を読んでいただくことによってプラグイン開発の基礎は身についたはずなので、今回の知識を軸に今後もたくさん作って深掘りして学習をしていきましょう。

当サイトでは、こうしたプラグイン開発に必要なノウハウだったり、それ以外のWordPress周りの情報をたくさん発信しているので、よろしければぜひお役立て下さい。

2023.04.21
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ