WordPressカスタムフィールドプラグイン開発の8つのステップ

2026年6月1日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 WordPressカスタムフィールドプラグイン開発の基礎
2 開発環境の構築方法
- 2.1 ローカル環境構築の手順
- 2.2 WordPressのインストール確認
3 基本的なプラグイン構造とファイル作成
- 3.1 hello-world.phpのサンプルコード
- 3.2 ヘッダーコメントの書き方
4 プラグインのアクティベート処理
- 4.1 データベーステーブル作成例
5 カスタムフィールド用ショートコードの作成
- 5.1 shortcode_register関数の使い方
6 設定ページの実装方法
- 6.1 add_options_page関数の使用
- 6.2 フォーム入力項目の作成
7 バージョン管理とセキュリティ対策
- 7.1 プラグインバージョンの記録方法
8 テスト手順とトラブルシューティング
- 8.1 ローカル環境での基本チェック
- 8.2 エラー回避策
9 まとめ

スポンサードリンク

WordPressカスタムフィールドプラグイン開発の基礎

WordPressカスタムフィールドの必要性は、ブログ記事や商品情報などに独自データを柔軟に追加できる点にある。例えばECサイトでは商品の在庫数や特典情報を管理するのに最適だ。本記事ではPHPとWordPressの基本知識を持つ初心者向けに、ゼロからプラグインを開発する8つのステップを解説していく。

開発環境の構築方法

ローカルで安全に開発を行うためには、環境構築が不可欠だ。MAMPやXAMPPなど、Webサーバー・データベース・PHPのセットアップツールを活用する方法が効率的である。

ローカル環境構築の手順

XAMPPをダウンロードし、インストーラーを実行。ApacheとMySQLのチェックボックスに✓をつける
インストール後、htdocsフォルダ内にWordPressの解凍ファイルを配置する
ブラウザで http://localhost/ を開き、インストール画面からWordPressを初期化

WordPressのインストール確認

ローカル環境での動作テストは、wp-config.phpファイルにデータベース名やユーザー情報を正しく記述することが前提となる
実際に投稿ページでカスタムフィールドが表示されることを確認する

基本的なプラグイン構造とファイル作成

WordPressプラグインの最小構成は1つのPHPファイルで完了可能。以下に例として「hello-world.php」という名前のファイルを作成し、アクティベート時にメッセージを表示させる手順を解説する。

hello-world.phpのサンプルコード

&lt;?php
/*
Plugin Name: カスタムフィールドプラグイン
Description: 簡易なカスタムフィールド機能を提供します。
Version: 1.0
*/

function my_custom_field_activation() {
    // プラグインの初期処理（後述）
}
register_activation_hook(__FILE__, 'my_custom_field_activation');

function my_custom_field_enqueue_scripts() {
    wp_enqueue_script('custom-field-script', plugins_url('/js/script.js', __FILE__));
}
add_action('wp_enqueue_scripts', 'my_custom_field_enqueue_scripts');

<?php

Plugin Name: カスタムフィールドプラグイン

Description: 簡易なカスタムフィールド機能を提供します。

Version: 1.0

function my_custom_field_activation() {

// プラグインの初期処理（後述）

}

register_activation_hook(__FILE__, 'my_custom_field_activation');

function my_custom_field_enqueue_scripts() {

wp_enqueue_script('custom-field-script', plugins_url('/js/script.js', __FILE__));

}

add_action('wp_enqueue_scripts', 'my_custom_field_enqueue_scripts');

ヘッダーコメントの書き方

Plugin Nameは管理画面で表示される名前になる
Descriptionはプラグインの簡単な説明文として利用可能

プラグインのアクティベート処理

プラグインを有効化した際に実行する処理を定義するには、register_activation_hook関数を使用する。データベーステーブルを作成したり、初期設定値を登録したりする場面で活用される。

データベーステーブル作成例

function my_custom_field_create_table() {
    global $wpdb;
    $table_name = $wpdb-&gt;prefix . 'custom_fields';
    $charset_collate = $wpdb-&gt;get_charset_collate();

    $sql = &quot;CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        field_key varchar(255) NOT NULL,
        field_value longtext NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;&quot;;

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'my_custom_field_create_table');

function my_custom_field_create_table() {

global $wpdb;

$table_name = $wpdb->prefix . 'custom_fields';

$charset_collate = $wpdb->get_charset_collate();

$sql = "CREATE TABLE $table_name (

id mediumint(9) NOT NULL AUTO_INCREMENT,

field_key varchar(255) NOT NULL,

field_value longtext NOT NULL,

PRIMARY KEY (id)

) $charset_collate;";

require_once(ABSPATH . 'wp-admin/includes/upgrade.php');

dbDelta($sql);

}

register_activation_hook(__FILE__, 'my_custom_field_create_table');

注意: テーブル作成時にもエラーハンドリングを追加する。

if ($wpdb-&gt;get_var(&quot;SHOW TABLES LIKE '$table_name'&quot;) != $table_name) {
    // テーブル作成処理を実行
}

if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {

// テーブル作成処理を実行

}

カスタムフィールド用ショートコードの作成

投稿記事内にカスタムフィールドを表示させるには、ショートコードを使用するのが一般的。add_shortcode関数で登録し、get_post_meta関数でデータを取得する。

shortcode_register関数の使い方

function my_custom_field_shortcode($atts) {
    // 引数型チェック: idは整数, keyは文字列
    $atts = shortcode_atts(array(
        'id' =&gt; 0,
        'key' =&gt; ''
    ), $atts, 'custom-field');

    if (!is_numeric($atts['id'])) {
        return '無効なIDが指定されています。';
    }

    // 出力値にhtmlspecialchars()を適用してXSS対策
    return htmlspecialchars(get_post_meta($atts['id'], $atts['key'], true), ENT_QUOTES, 'UTF-8');
}
add_shortcode('custom-field', 'my_custom_field_shortcode');

function my_custom_field_shortcode($atts) {

// 引数型チェック: idは整数, keyは文字列

$atts = shortcode_atts(array(

'id' => 0,

'key' => ''

), $atts, 'custom-field');

if (!is_numeric($atts['id'])) {

return '無効なIDが指定されています。';

}

// 出力値にhtmlspecialchars()を適用してXSS対策

return htmlspecialchars(get_post_meta($atts['id'], $atts['key'], true), ENT_QUOTES, 'UTF-8');

}

add_shortcode('custom-field', 'my_custom_field_shortcode');

設定ページの実装方法

管理画面に設定ページを追加するには、add_options_page関数とフォーム作成を組み合わせる。

add_options_page関数の使用

function my_custom_field_menu() {
    add_options_page(
        'カスタムフィールド設定',
        'Custom Fields',
        'manage_options',
        'custom-fields-settings',
        'my_custom_field_settings_page'
    );
}
add_action('admin_menu', 'my_custom_field_menu');

function my_custom_field_menu() {

add_options_page(

'カスタムフィールド設定',

'Custom Fields',

'manage_options',

'custom-fields-settings',

'my_custom_field_settings_page'

);

}

add_action('admin_menu', 'my_custom_field_menu');

フォーム入力項目の作成

function my_custom_field_settings_page() {
    ?&gt;
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;h1&gt;カスタムフィールド設定&lt;/h1&gt;
        &lt;form method=&quot;post&quot; action=&quot;options.php&quot;&gt;
            &lt;?php settings_fields('custom-fields-settings-group'); ?&gt;
            &lt;?php do_settings_sections('custom-fields-settings'); ?&gt;
            &lt;table class=&quot;form-table&quot;&gt;
                &lt;tr valign=&quot;top&quot;&gt;
                    &lt;th scope=&quot;row&quot;&gt;デフォルト値&lt;/th&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;default_value&quot; value=&quot;&lt;?php echo esc_attr(get_option('default_value')); ?&gt;&quot; /&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;?php submit_button(); ?&gt;
        &lt;/form&gt;
    &lt;/div&gt;
    &lt;?php
}

function my_custom_field_settings_page() {

<h1>カスタムフィールド設定</h1>

<?php settings_fields('custom-fields-settings-group'); ?>

<?php do_settings_sections('custom-fields-settings'); ?>

<th scope="row">デフォルト値</th>

</tr>

</table>

<?php submit_button(); ?>

</form>

</div>

<?php

}

注意: CSRF保護としてwp_nonce_field()をフォームに追加する。

wp_nonce_field('custom_fields_settings', 'custom_fields_nonce');

1 2	wp_nonce_field('custom_fields_settings', 'custom_fields_nonce');

バージョン管理とセキュリティ対策

プラグインのバージョンを記録し、更新履歴を管理するにはupdate_option関数を使う。また、ユーザー入力値はhtmlspecialchars()でエスケープ処理を行うことで、XSS攻撃を防ぐことが重要だ。

プラグインバージョンの記録方法

function my_custom_field_activate() {
    update_option('my_custom_field_version', '1.0');
}
register_activation_hook(__FILE__, 'my_custom_field_activate');