はじめに
「入力されたデータを簡単に保存したいな〜」
「ユーザーにコード触らせたくないし、Django使うのも大げさだし…」
ってWordPress最初からデータベースが使えるじゃん！
それなら、フォーム作って、データ保存して、表示する仕組みも全部WordPressの中で完結できる！
ということで、今回はWordPressプラグインとしてまとめてみた覚書きです。
プラグインってどこに置くの？
いつもwordpressの管理画面からプラグインをインストールしている時は気づいていないかもしれませんが、
WordPressのプラグインは、wp-content/plugins/ フォルダ内に置くことで認識されます。
自作プラグインは、まずこのフォルダに専用のディレクトリを作るところからスタートです。
wp-content/plugins/my-plugin/
└── my-plugin.php
この my-plugin.php がプラグインの本体になります。
プラグインとして認識させるには？
ファイルの先頭に以下のようなコメントを書くだけです。
これだけでWordPressが「これはプラグインだ！」と認識してくれます。
<?php
/*
Plugin Name: わたしのプラグイン
Description: WordPressプラグイン作成の練習用です。
Version: 1.0
Author: あなたの名前
*/
これで管理画面の「プラグイン」一覧に表示されるようになります。
管理画面にメニューを追加するには？
管理画面内にページを割いて機能を表示させたい時は、以下のように書きます。
// 管理画面にメニューを追加
function add_admin_menu() {
add_menu_page(
'わたしのプラグイン', // ページのタイトル
'わたしのプラグイン', // メニューに表示される名前
'manage_options', // アクセスできるユーザーの権限。manage_optionsは管理者のみ
'my-plugin', // ページのスラッグ（URLの一部になる）
'add_plugin_page', // 管理画面の中身の関数。この後書きます。
'dashicons-edit-page', // メニューアイコン
20 // メニューの表示順
);
};
add_action('admin_menu', 'add_admin_menu');
メニューアイコンは
developer.wordpress.org
に たくさんあるので、見てみると楽しいです。
とりあえず、中身を作っておきましょう。
// 管理画面の中身
function add_plugin_page() {
echo '<h1>わたしのプラグイン</h1>';
}
ここまで来たら、プラグインを「有効化」
（既に有効化した方は、一旦無効化してから有効化）
すると、管理画面内でプラグインにアクセスできるようになりました。
管理画面にフォームを追加してみる
フォームから入力したメッセージを保存して、後で表示できるようにしてみます。
※ 今回の趣旨とは異なるのでコードの説明は簡易なものとします。
// 管理画面の中身
function add_plugin_page() {
echo '<h1>わたしのプラグイン</h1>';
?>
<div class="wrap">
<p>メッセージを入力してください。</p>
<form method="post">
<?php wp_nonce_field('my_plugin_nonce_action', 'my_plugin_nonce_field'); ?>
<label for="message">メッセージ:</label><br>
<input type="text" name="message" value="<?php echo esc_attr(get_option('my_plugin_message', '')); ?>"><br><br>
<input type="submit" name="save_message" value="保存">
</form>
</div>
<?php
}
// メッセージ保存処理
function message_save() {
if (isset($_POST['save_message']) && check_admin_referer('my_plugin_nonce_action', 'my_plugin_nonce_field')) {
$message = sanitize_text_field($_POST['message']);
update_option('my_plugin_message', $message);
}
}
add_action('admin_init', 'message_save');
?>
ポイント：
- wp_nonce_field() と check_admin_referer() はCSRF対策
- update_option() で保存、get_option() で取得
プラグインページを再読み込みするとフォームが表示されます。
「こんにちは」と、保存してみました。
wordpressのデータベースを確認すると、データが入っていることが分かります。
固定ページに表示するには？
保存したメッセージを固定ページに表示するには、ショートコードを使います。
function call_message() {
$message = get_option('my_plugin_message');
return '<h1 id="view_message">' . esc_html($message) . '</h1>';
}
add_shortcode('my_form', 'call_message');
functionでショートコードを設置したページでの振る舞いを設定、
add_shortcode('my_form', 'call_message');の部分でショートコードとして登録しています。
これで [my_form] と書くだけで、保存されたメッセージが表示されます！
ショートコードを設定したページに、「こんにちは」と表示されました。
違うメッセージを保存して、ページを再読み込みするとメッセージが変わりますので、実感が湧くかもしれません。
functions.phpを触らずにJSやCSSを読み込むには？
プラグインとして独立したものにするなら、JavaScriptやCSSも functions.php を使わずに読み込みたいですよね。
WordPressでは、プラグイン内で wp_enqueue_script() や wp_enqueue_style() を使って、JSやCSSを読み込むことができます。
管理画面と固定ページでは読み込み方法が異なるので注意しましょう。
管理画面用（admin_enqueue_scripts）
function my_plugin_enqueue_admin_assets() {
wp_enqueue_script('my-plugin-admin-js', plugins_url('js/admin.js', __FILE__), array('jquery'), null, true);
wp_enqueue_style('my-plugin-admin-css', plugins_url('css/admin.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'my_plugin_enqueue_admin_assets');
固定ページ・投稿用（wp_enqueue_scripts）
function my_plugin_enqueue_assets() {
wp_enqueue_script('my-plugin-js', plugins_url('js/script.js', __FILE__), array('jquery'), null, true);
wp_enqueue_style('my-plugin-css', plugins_url('css/style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_assets');
ファイル構成の例
上記のコードは、以下のような構成でファイルを配置することを前提としています：
wp-content/plugins/my-plugin/
├── my-plugin.php
├── js/
│ ├── admin.js
│ └── script.js
└── css/
├── admin.css
└── style.css
読み込みさえできれば、好きにカスタマイズできますね！
サンプルコードはこちら
https://github.com/nyaataco/wp-my-plugin/tree/main
まとめ
今回は「WordPressプラグインってどうやって作るの？」という基本のきを紹介しました。
- プラグインは
wp-content/plugins/に置く - ヘッダーコメントでWordPressに認識させる
- 管理画面にメニューを追加できる
- ショートコードで表示できる
- JS/CSSも独立してプラグイン内で読み込める
基本のきなので、ただメッセージを表示するだけのプラグインになりましたが、様々に応用可能だと思います！
この記事が誰かの助けになれば幸いです