本章で作成するプラグインじゃ、以下の通りです。
ショートコードの指定箇所に現在日時を設定するプラグインの作成手順を示します。 こでの作成例は、プラグイン作成の基本事項を理解するための最小手順を示しています。 本作成例では、プラグインの機能よりもプラグインの作成手順を主に理解してください。
プラグイン作成手順で出来るプラグインのインストールファイルは、以下からダウンロードできます。 プラグイン作成がうまくいかない場合は、ダウンロードして内容を確認してください。
ダウンロードしたファイルは、zip 圧縮をされています。インストールする場合は、そのままの状態で使用してください。
内容を確認する場合は解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
📁 plugin-date-time-1.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-date-time-1 // プラグインインフォルダ
└─ plugin-date-time-1.php // プラグイン処理ファイル
プラグイン作成の手順は、次の通りです。
作成するプラグインの仕様を決めます。
本章では、投稿や固定ページにショートコードを記述することで現在の日時を設定するプラグインを作成します。
ショートコードの記述形式は、以下の通りとします。
プラグイン用のフォルダ（plugin-date-time-1）を作成します。
📁 plugin-date-time-1 // プラグインインストールファイル（圧縮ファイル）
プラグイン用のフォルダ（pligin-date-time-1）内にプラグイン処理ファイル（plugin-date-time-1.php）を作成します。
PHP（plugin-date-time-1.php）
<?php
/*
Plugin Name: plugin-date-time-1
Description: プラグインサンプル：ショートコード plugin-date-time に現在の日時を表示します。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/
if (!defined('ABSPATH')) exit;
// ★ ショートコード登録
function plugin_date_time_init_1() {
add_shortcode('plugin-date-time-1', 'pluginDateTime_1');
}
add_action('init', 'plugin_date_time_init_1');
// ★ ショートコード処理
function pluginDateTime_1($atts) {
$out ='';
$atts = shortcode_atts(array('kind' => ''), $atts);
switch($atts['kind']) {
case '':
$out = date('Y/m/d H:i:s');
break;
case 'date':
$out = date('Y/m/d');
break;
case 'time':
$out = date('H:i:s');
break;
}
return($out);
}
プラグイン用フォルダを圧縮してプラグインファイルを作成します。
📁 plugin-date-time-1.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-date-time-1 // プラグインインフォルダ
└─ plugin-date-time-1.php // プラグイン処理ファイル
WordPress のダッシュボードにログインして作成したプラグイン（plugin-date-time-1.zip）のインストールと有効化を行います。
WordPress ダッシュボードで投稿または固定ページの編集画面にショートコードを記述します。
■属性なし
[plugin-date-time-1]
■属性：kind=date
[plugin-date-time-1 kind=date]
■属性：kind=time
[plugin-date-time-1 kind=time]
WordPress サイトを表示して表示内容を確認します。
ショートコードの指定箇所に現在日時を設定するプラグインの作成手順を示します。 本プラグインは「L7.2 現在日時プラグイン（設定画面なし）作成」で作成したプラグインに日時の表示形式を設定する画面を追加したものです。 本作成例では、設定画面の作成方法を主に理解してください。 設定画面を作成する場合の注意事項や色々な種類の項目を定義する方法は「L7.4 設定画面プラグイン作成」で説明していますので合わせて参照してください。
プラグイン作成手順で出来るプラグインのインストールファイルは、以下からダウンロードできます。 プラグイン作成がうまくいかない場合は、ダウンロードして内容を確認してください。
ダウンロードしたファイルは、zip 圧縮をされています。インストールする場合は、そのままの状態で使用してください。
内容を確認する場合は解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
📁 plugin-date-time-2.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-date-time-2 // プラグインインフォルダ
└─ plugin-date-time-2.php // プラグイン処理ファイル
プラグイン作成の手順は、次の通りです。
作成するプラグインの仕様を決めます。
本章では、投稿や固定ページにショートコードを記述することで現在の日時を設定するプラグインを作成します。
ショートコードの記述形式は、以下の通りとします。
表示する日時の形式は、設定画面で指定することができます。
プラグイン用のフォルダ（plugin-date-time-2）を作成します。
📁 plugin-date-time-2 // プラグインインストールファイル（圧縮ファイル）
プラグイン用のフォルダ（pligin-date-time-2）内にプラグイン処理ファイル（plugin-date-time-2.php）を作成します。
PHP（plugin-date-time-2.php）
<?php
/*
Plugin Name: plugin-date-time-2
Plugin URI:
Description: プラグインサンプル：ショートコード plugin-date-time に現在の日時を表示します。設定メニュー（パネル）の表示や 独自 CSS、独自 JS の読み込みを行います。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/
if (!defined('ABSPATH')) exit;
// ★ メニュー登録処理
function plugin_date_time_2_menu() {
add_menu_page( // トップメニューへの追加
'日時表示設定', // ページタイトル
'日時表示設定', // メニュータイトル
'manage_options', // メニュー権限
'plugin_date_time_2', // スラッグ名
'plugin_date_time_2_page', // コールバック関数
'dashicons-admin-settings', // メニューアイコン
99); // メニュー表示位置
}
add_action('admin_menu', 'plugin_date_time_2_menu'); // メニュー追加アクション
// ★ 設定項目登録
function plugin_date_time_2_settings() {
register_setting('plugin_date_time_2_group', 'plugin_date_time_2_format');
add_settings_section('plugin_date_time_2_section', '表示形式設定', '', 'plugin_date_time_2_page');
add_settings_field('radio_button','表示形式', 'plugin_date_time_2_radio_button_callback', 'plugin_date_time_2_page', 'plugin_date_time_2_section', ['name' => 'plugin_date_time_2_format', 'options' => ['format1' => 'yyyy/mm/dd hh:mm:ss', 'format2' => 'yyyy年mm月dd日 hh時mm分ss秒', 'format3' => 'yy/mm/dd/ h:mm']]);
}
add_action('admin_init', 'plugin_date_time_2_settings');
// ★ ラジオボタン表示（HTML生成）処理
function plugin_date_time_2_radio_button_callback($args) {
$option = get_option($args['name']);
foreach ($args['options'] as $value => $label) {
$checked = checked($option, $value, false);
echo '<label><input type="radio" name="' . esc_attr($args['name']) . '" value="' . esc_attr($value) . '" ' . $checked . '> ' . esc_html($label) . '</label><br>';
}
}
// ★ 設定ページ表示
function plugin_date_time_2_page() {
echo '<h1>日時表示設定</h1>';
echo '<p style="font-size: 14px;">指定されたショートコード（plugin-date-time-2）の位置に現在の日時を表示します。</p>';
echo '<p style="font-size: 14px;">ショートコードの記述によって表示内容を指定できます。</p>';
echo '<ul style="margin-left: 20px; list-style: disc; font-size: 14px;">';
echo '<li>[plugin-date-time-2]<br>yyyy/mm/dd hh:mm:ss</li>';
echo '<li>[plugin-date-time-2 kind=date]<br>yyyy/mm/dd</li>';
echo '<li>[plugin-date-time-2 kind-time]<br>hh:mm:ss</li>';
echo '</ul>';
echo '<form action="options.php" method="post">';
settings_fields('plugin_date_time_2_group'); // 設定項目登録
do_settings_sections('plugin_date_time_2_page'); // ページ表示
submit_button('保存設定'); // 保存ボタン表示
echo '</form>';
}
// ★ ショートコード登録
function plugin_date_time_2_init() {
add_shortcode('plugin-date-time-2', 'plugin_date_time_2_shortcode');
}
add_action('init', 'plugin_date_time_2_init');
// ★ ショートコード処理
function plugin_date_time_2_shortcode($atts) {
$out ='';
$option = get_option('plugin_date_time_2_format');
switch($option) {
case 'format1':
$date_format = 'Y/m/d';
$time_format = 'H:i:s';
break;
case 'format2':
$date_format = 'Y年m月d日';
$time_format = 'H時i分s秒';
break;
case 'format3':
$date_format = 'y/n/j';
$time_format = 'G:i';
break;
default:
$date_format = 'Y/m/d';
$time_format = 'H:i:s';
break;
}
$atts = shortcode_atts(array('kind' => ''), $atts);
switch($atts['kind']) {
case '':
$out = date($date_format . ' ' . $time_format);
break;
case 'date':
$out = date($date_format);
break;
case 'time':
$out = date($time_format);
break;
}
return($out);
}
プラグイン用フォルダを圧縮してプラグインファイルを作成します。
📁 plugin-date-time-2.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-date-time-2 // プラグインインフォルダ
└─ plugin-date-time-2.php // プラグイン処理ファイル
WordPress のダッシュボードにログインして作成したプラグイン（plugin-date-time-2.zip）のインストールと有効化を行います。
WordPress ダッシュボードで投稿または固定ページの編集画面にショートコードを記述します。
■属性なし
[plugin-date-time-1]
■属性：kind=date
[plugin-date-time-1 kind=date]
■属性：kind=time
[plugin-date-time-1 kind=time]
WordPress ダッシュボードの日時表示設定メニューから表示形式を指定します。
WordPress サイトを表示して表示内容を確認します。
WordPress のダッシュボードにメニュー追加および設定画面の作成手順を示します。 本作成例では、メニューの追加および設定画面の作成方法の例を示すものでありプラグインとしての機能を提供するものではありません。
プラグイン作成手順で出来るプラグインのインストールファイルは、以下からダウンロードできます。 プラグイン作成がうまくいかない場合は、ダウンロードして内容を確認してください。
ダウンロードしたファイルは、zip 圧縮をされています。インストールする場合は、そのままの状態で使用してください。
内容を確認する場合は解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
📁 plugin-setthing-page.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-setthing-page // プラグインインフォルダ
└─ plugin-setthing-page.php // プラグイン処理ファイル
プラグイン作成の手順は、次の通りです。
作成するプラグインの仕様を決めます。
本章では、ダッシュボードへのメニュー追加と設定画面の作成を行います。
メニューの追加は、以下を定義を行います。
設定画面での項目は、以下の例を定義します。
プラグイン用のフォルダ（plugin-setthing-page）を作成します。
📁 plugin-setting-page // プラグインインストールファイル（圧縮ファイル）
プラグイン用のフォルダ（pligin-setting-page）内にプラグイン処理ファイル（plugin-setting-page.php）を作成します。
PHP（plugin-setting-page.php）
<?php
/*
Plugin Name: plugin-setting-page
Description: プラグインの設定画面サンプルです。単一行テキスト、チェックボックス、ラジオボタン、セレクトボックス、複数行テキスト項目の作成例になっています。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/
if (!defined('ABSPATH')) exit;
// ★ メニュー追加
function my_plugin_menu() {
// メニューをトップメニューに追加するかサブメニューに追加するかによって下記の指定を使い分けてください。
add_menu_page( // トップメニューへの追加
'設定サンプル', // ページタイトル
'設定サンプル', // メニュータイトル
'manage_options', // メニュー権限
'my_plugin_setting', // メニュースラッグ名
'my_plugin_setting_page', // コールバック関数
'dashicons-admin-settings', // メニューアイコン
99); // メニュー表示位置
add_submenu_page( // サブメニューの追加
'options-general.php', // 親メニューのスラッグ名（例は設定メニュー）
'設定サンプル', // ページタイトル
'設定サンプル', // メニュータイトル
'manage_options', // メニュー権限
'my_plugin_setting', // メニュースラッグ名
'my_plugin_setting_page', // コールバック関数
99); // メニュー表示位置
}
add_action('admin_menu', 'my_plugin_menu'); // メニュー追加アクション
// ★ セクション・項目名・項目情報登録処理
function my_plugin_register_setting() {
// 項目名登録：ページに対して項目の割り当てを行います。
// register_setting(ページ名, 項目名);
register_setting('my_plugin_setting_group', 'text_field_1');
register_setting('my_plugin_setting_group', 'text_field_2');
register_setting('my_plugin_setting_group', 'text_field_3');
register_setting('my_plugin_setting_group', 'check_box');
register_setting('my_plugin_setting_group', 'radio_button');
register_setting('my_plugin_setting_group', 'select_box');
register_setting('my_plugin_setting_group', 'textarea');
// セクション登録：セクションの生成を行いセクションタイトルとセクションの ID 名の割り当てを行います。
// add_settings_section(セクション名（ID 名）, セクションタイトル, コールバック関数, ページスラッグ名);
add_settings_section('text_section', '単一行テキスト', '', 'my_plugin_setting_page');
add_settings_section('check_section', 'チェックボックス', '', 'my_plugin_setting_page');
add_settings_section('radio_section', 'ラジオボタン', '', 'my_plugin_setting_page');
add_settings_section('select_section', 'セレクトボックス', '', 'my_plugin_setting_page');
add_settings_section('textarea_section', '複数行テキスト', '', 'my_plugin_setting_page');
// 項目情報登録：個々の項目情報の割り当てを行います。
// チェックボックス、ラジオボタン、セレクトボックスの例ではコールバック関数引数で選択肢を列挙するように作成してあります。
// add_settings_field(項目名（ID 名）, 項目タイトル, コールバック関数, ページスラッグ名, セクション名, コールバック関数引数);
add_settings_field('text_field_1', 'テキストボックス 1', 'text_field_callback', 'my_plugin_setting_page', 'text_section', ['name' => 'text_field_1']); // コールバック関数引数
add_settings_field('text_field_2', 'テキストボックス 2', 'text_field_callback', 'my_plugin_setting_page', 'text_section', ['name' => 'text_field_2']);
add_settings_field('text_field_3', 'テキストボックス 3', 'text_field_callback', 'my_plugin_setting_page', 'text_section', ['name' => 'text_field_3']);
add_settings_field('check_box', 'チェックボックス', 'check_box_callback', 'my_plugin_setting_page', 'check_section', ['name' => 'check_box', 'options' => ['option1' => 'オプション 1', 'option2' => 'オプション 2']]);
add_settings_field('radio_button','ラジオボタン', 'radio_button_callback', 'my_plugin_setting_page', 'radio_section', ['name' => 'radio_button', 'options' => ['option1' => 'オプション 1', 'option2' => 'オプション 2']]);
add_settings_field('select_box', 'セレクトボックス', 'select_box_callback', 'my_plugin_setting_page', 'select_section', ['name' => 'select_box', 'options' => ['option1' => 'オプション 1', 'option2' => 'オプション 2']]);
add_settings_field('textarea', 'テキストエリア', 'textarea_callback', 'my_plugin_setting_page', 'textarea_section', ['name' => 'textarea']);
}
add_action('admin_init', 'my_plugin_register_setting'); // 設定ページ登録アクション
// ★ 単一行テキスト表示（HTML生成）処理
function text_field_callback($args) {
$option = get_option($args['name']); // 項目名（name 属性値）
echo '<input type="text" name="' . esc_attr($args['name']) . '" value="' . esc_attr($option) . '" style="width: 300px;">';
}
// ★ チェックボックス表示（HTML生成）処理
function check_box_callback($args) {
$option = get_option($args['name']); // 項目名（name 属性値）
$option = isset($args) ? (array) $option : [];
$option = array_map('esc_attr', $option);
foreach ($args['options'] as $value => $label) {
$checked = in_array($value, $option) ? 'checked' : "";
echo '<label><input type="checkbox" name="' . esc_attr($args['name']) . '[]"' . $checked . ' value="' . esc_attr($value) . '">' . esc_html($label) . '</label><br>';
}
}
// ★ ラジオボタン表示（HTML生成）処理
function radio_button_callback($args) {
$option = get_option($args['name']); // 項目名（name 属性値）
foreach ($args['options'] as $value => $label) {
$checked = checked($option, $value, false);
echo '<label><input type="radio" name="' . esc_attr($args['name']) . '" value="' . esc_attr($value) . '" ' . $checked . '> ' . esc_html($label) . '</label><br>';
}
}
// ★ セレクトボックス表示（HTML生成）処理
function select_box_callback($args) {
$option = get_option($args['name']); // 項目名（name 属性値）
echo '<select name="' . esc_attr($args['name']) . '" style="width: 300px;">';
foreach ($args['options'] as $value => $label) {
$selected = selected($option, $value, false);
echo '<option value="' . esc_attr($value) . '" ' . $selected . '>' . esc_html($label) . '</option>';
}
echo '</select>';
}
// ★ 複数行テキスト表示（HTML生成）処理
function textarea_callback($args) {
$option = get_option($args['name']); // 項目名（name 属性値）
echo '<textarea name="' . esc_attr($args['name']) . '" style="width: 300px; height: 100px;">' . esc_textarea($option) . '</textarea>';
}
// ★ 設定ページ表示（HTML生成）処理
function my_plugin_setting_page() {
echo '<div class="wrap">';
echo '<h2>設定ページサンプル</h2>';
echo '<form method="post" action="options.php">';
settings_fields('my_plugin_setting_group'); // 設定項目登録（グループ名）
do_settings_sections('my_plugin_setting_page'); // ページ表示（ページ名）
submit_button('保存設定'); // 保存ボタン表示
echo '</form>';
echo '</div>';
}
プラグイン用フォルダを圧縮してプラグインファイルを作成します。
📁 plugin-setting-page.zip // プラグインインストールファイル（圧縮ファイル）
└─📁 plugin-setthing-page // プラグインインフォルダ
└─ plugin-setthing-page.php // プラグイン処理ファイル
WordPress のダッシュボードにログインして作成したプラグイン（plugin-setthing-page.zip）のインストールと有効化を行います。
WordPress ダッシュボードの設定サンプルメニューで設定画面を開いて各項目の設定・表示を確認します。
