オリジナルのWordPressのプラグインを作る

オリジナルのWordPressプラグインを作る

WordPressは豊富なプラグインが用意されていますが、必要なプラグインを自分で作成することもできます。
こちらのワークショップでは、実際に使うことができるWordPressのプラグインを作りながら、作り方を解説していきます。
ワークショップを一通り終えると、オリジナルのWordPressプラグインの基本的な作り方を習得することができます。

これから作っていくプラグインはサイトのお問い合わせページで送られたお問い合わせを管理する「Contact Manager」です。
WordPressの管理画面より寄せられたお問い合わせを確認、編集、削除する機能を実装していきます。

今回はイントロダクションとして開発環境と作成する流れを紹介していきます。

ワークショップの対象者と目標

当ワークショップの対象者と目標はそれぞれ以下のような想定をしています。

ワークショップの対象者

• WordPressに興味がある方
• PHPの基礎を学習した後の次のステップとして実用的なものを作ってみたい方
• WordPressで必要なプラグインを自分で作りたい方

ワークショップの目標

• WordPressのデータベースの扱い方を習得する
• WordPressプラグインを自作できるようになる

ライセンスについて

当ワークショップで作成するコードはGPL バージョン2に準拠します。
作成したWordPressのプラグインやお問い合わせページのテーマファイルを使用いただくことは商用・非商用問わず利用可能です。

ワークショップのコンテンツ（テキスト、画像、その他のリソースファイル）は営利、非営利、イントラネット等、目的や形態を問わず無断転載は認めておりません。
引用につきましては著作権法が規定する範囲で可能です。

プラグインの機能

これから作っていくWordPressプラグイン「Contact Manager」は以下の3つの機能を実装します。

• お問い合わせフォームで入力されたお問い合わせ内容の表示
• お問い合わせの編集
• お問い合わせの削除

お問い合わせを入力するフォームは、プラグインとは別にWordPressの標準テーマである「Twenty Twenty-Two」にページを追加する形で作成します。
また、お問い合わせページで入力されたデータはMySQL、または　MariaDBのデータベースに保存していきますが、開発時にデータベースにテーブルを作成したりデータを確認するためにphpMyAdminを使用します。

動作環境

これから作るプラグインはWordPressで動作するため、WordPressが動く環境を想定しています。

• PHP　バージョン7.4以上
• MySQL バージョン7.5以上、またはMariaDB バージョン10.2以上

WebサーバーはApache、Nginxのいずれも動作します。

動作検証は下記の環境にて行っています。

• CentOS バージョン7
• PHP バージョン7.4.19
• MariaDB バージョン10.7.3
• Apache バージョン2.4.6

ワークショップの流れ

当ワークショップでは、WordPressプラグイン「Contact Manager」を以下の流れで作成していきます。

1. オリジナルのWordPressのプラグインを作る

いま開いているこちらのページです。
これから作っていくプラグインの概要と、全体の流れを紹介します。

1. オリジナルのWordPressプラグインを作る
2. ワークショップの対象者と目標
3. ライセンスについて
4. プラグインの機能
5. 動作環境
6. ワークショップの流れ

2. 最小構成のWordPressプラグインを作る

プラグインの土台を作成していきます。

1. 作成するプラグインのファイル構成を確認する
2. 最小構成のプラグインを作成する

3. WordPressにお問い合わせページを作成する(1)

プラグインで管理するためのお問い合わせのデータを作成するために、WordPressのサイトに表示するお問い合わせページを作成します。
お問い合わせページは管理ページの固定ページを1ページ作成し、さらにテンプレートファイルをWordPressの標準テーマ「Twenty Twenty Two」に追加する形で作成します。

1. お問い合わせを入力するページを作成する
2. お問い合せページについて
3. テーマにお問い合わせページのテンプレートファイルを作成する

4. WordPressにお問い合わせページを作成する(2)

お問い合わせページにフォーム入力するページに加えて、入力内容を確認するページと完了ページを作成していきます。

1. お問い合わせページに確認ページ、完了ページを表示する
2. 入力内容を確認するページを作成する
3. 完了ページを作成する
4. 入力ページに入力した値を引き継ぐ

5. WordPressにお問い合わせページを作成する(3)

お問い合わせページのフォームに入力された内容に対して、未入力の項目が無いかを確認する「バリデーション」機能を実装していきます。

1. お問い合わせページに入力漏れがないか確認する
2. 入力漏れを確認するバリデーションを実装する
3. 入力漏れがあったときにエラーメッセージを表示する
4. バリデーションを関数にする

6. WordPressにお問い合わせページを作成する(4)

お問い合わせページに実装したバリデーションに、入力された文字数が上限を超えていないか確認する機能を追加します。

1. お問い合わせページに入力漏れがないか確認する
2. 入力漏れを確認するバリデーションを実装する
3. 入力漏れがあったときにエラーメッセージを表示する
4. バリデーションを関数にする

7. WordPressにお問い合わせページを作成する(5)

お問い合わせページでフォームに入力された内容をデータベースに保存する機能を実装していきます。

1. お問い合わせに入力した内容をデータベースに保存する
2. お問い合わせ内容のデータを保存するテーブルを作成する
3. データベースにデータを保存する

8. WordPressにお問い合わせページを作成する(6)

お問い合わせページにCSRF対策と、多重送信対策としてセッショントークンを導入します。

1. セッショントークンでCSRF対策を行う
2. セッションを使用できる状態にする
3. セッショントークンを確認するバリデーションを実装する

9. プラグインのページを表示する

プラグインをWordPress管理ページの左メニューに表示し、さらにメニューで選択したらプラグインのページを表示するように設定します。

1. 作成しているプラグインのページを表示する
2. WordPressのメニューにプラグインを表示する
3. プラグインのページを表示する

10. プラグインのトップページを表示する

プラグインのページをビューファイルから表示するようにしていきます。
プラグインのトップページの作り込みに加えて、ページの表示を機能的に切り分けることでプラグイン内の構造が分かりやすくなるようにします。

1. プラグインのトップページを作成する
2. トップページのビューファイルを作成する
3. リソースファイルを読み込む

11. お問い合わせのデータをデータベースから取得する

データベースからお問い合わせのデータを取得し、プラグインのトップページにお問い合わせの一覧を表示します。

1. データベースからお問い合わせのデータを取得する
2. データベースの処理を担当するクラスを作成する
3. トップページにデータを表示する

12. お問い合わせの編集ページを作成する

トップページの一覧から選択したお問い合わせの内容を編集する機能を実装していきます。
この回ではまず編集ページのビューファイルを作成し、さらにデータベースから編集するお問い合わせのデータのみを取得して表示できるところまで進めます。

1. お問い合わせを編集できるようにする
2. 編集ページのビューファイルを作成する
3. 編集するデータを取得するメソッドを作成する
4. 編集ページに取得したお問い合わせデータを表示する
5. 編集ページにセッショントークンを入れる

13. 編集した内容をデータベースに登録する(1)

編集ページに入力された内容について、未入力確認と文字数を確認するバリデーションを実装します。

1. 編集ページに入力した内容を確認する
2. 編集ページから送信したデータを受け取る
3. 入力したデータをバリデーションで確認する
4. 編集ページにエラーメッセージを表示する

14. 編集した内容をデータベースに登録する(2)

編集ページで更新ボタンを押したら、フォームに入力された内容をデータベースに反映する機能を実装します。

1. 編集内容をデータベースに反映する
2. データを更新するメソッドを作成する
3. データを更新する

15. お問い合わせの削除ページを作成する

トップページの一覧から選択したお問い合わせについて、削除する機能を実装していきます。
この回では一覧から選択された後に、削除するお問い合わせ内容を確認するためのページのビューファイルを作成します。

1. 選択したお問い合わせの内容を削除する
2. 削除ページのビューファイルを作成する
3. 削除ページにセッショントークンを入れる

16. お問い合わせのデータを削除する

ワークショップの最終回です。
削除ページで削除ボタンを押すと、データベースから選択されたお問い合わせのデータを削除する機能を実装します。

1. 選択したお問い合わせのデータを削除する
2. データを削除するメソッドを実装する
3. 削除ページからPOSTパラメータを受け取る
4. 削除ページにエラーメッセージを表示する

以上が全体の流れになります。
機能を1つずつ実装していき、最終的にはお問い合わせを管理するWordPressプラグインが完成する構成です。

コードはGithubの下記のリポジトリに入っておりますので、必要に応じて参照してください。
gray-code/contactManager – Github.com

もし作っていて分からないことがあったり、お気付きの点がありましたら、ページ下部にある「Good」「Bad」ボタンを押した後に表示されるメッセージ入力欄からフィードバックをお送りいただくか、お問い合せページよりお気軽にご連絡ください。