MENU

カスタムフィールドを自作してみよう！

ワードプレス PHP
のすけ
  1. ホーム
  2. ワードプレス
  3. カスタムフィールドを自作してみよう！

カスタムフィールドのプラグインはとても便利だけど…機能が制限されていたりで使いづらいときもあるなぁ…

実は、簡単な機能であればだれでも自作できます！

目次

カスタムフィールド作成の流れ

まずはカスタムフィールドがどういう機能なのか改めて確認しておきましょう

カスタムフィールドとは？

簡単にまとめると、「データベースに入力した値を名前を付けて保存」しているものです。
例えば「sample_text_field」のような名前を付けて「こんにちは！」という入力内容を保存しているようなイメージです。

実際の流れ

STEP
カスタムフィールドをWordPressに設定

functions.phpに「こんなカスタムフィールドを使うよ」という内容を設定

STEP
入力のためのオプションページを作成

カスタムフィールドを入力するためのページをWordPressの管理画面に作成します。

STEP
入力値を呼び出す

入力した値を実際にPHPファイルで呼び出します。

では、実際にテキストを保存し、呼び出せるカスタムフィールドを自作してみましょう。

①カスタムフィールドを設定しよう

まずは、functions.phpを編集しましょう。

functions.phpにカスタムフィールドを設定
// 設定フィールドとセクションを登録
function sample_custom_settings_init()
{
    // 設定を登録
    register_setting('sample_custom_options_group', 'sample_custom_text');

    // セクションを追加
    add_settings_section(
        'sample_custom_section',          // セクションID
        'テキスト入力セクション',     // セクションタイトル
        'sample_custom_section_callback', // コールバック関数
        'sample-custom-options'           // ページスラッグ
    );

    // フィールドを追加
    add_settings_field(
        'sample_custom_text_field',      // フィールドID
        'カスタムテキストフィールド', // フィールドタイトル
        'sample_custom_text_field_html', // コールバック関数
        'sample-custom-options',         // ページスラッグ
        'sample_custom_section'          // セクションID
    );
}
add_action('admin_init', 'sample_custom_settings_init');

// フィールドのHTML
function sample_custom_text_field_html()
{
    $value = get_option('sample_custom_text', ''); // 保存された値を取得
?>
    <input type="text" name="sample_custom_text" value="<?php echo esc_attr($value); ?>" style="width: 300px;">
<?php
}

function sample_custom_section_callback()
{
    echo '<p>ここではカスタムテキストを設定できます。</p>';
}

ここでは、

  • 設定の登録
  • セクションの追加
  • フィールドの追加

を行っています。

1.設定の登録

register_setting(‘sample_custom_options_group’, ‘sample_custom_text’);

では、wordpressに、「sample_custom_options_group」というグループの「sample_custom_text」という名前のついた内容を保存してもらうための記述です。本来はテキスト1つではなく沢山の内容を登録したりするため、グループが必要になっています。

2.セクションの追加

ここからは、この後作成する入力用ページであるオプションページで必要になる部分です。イメージとしては、「カスタムフィールド専用の入力欄を作成している」と考えましょう。

入力欄の作成には、「入力セクションの作成」「入力欄の作成」両方が必須になります。

ここでは「入力セクションの作成」を行います。

// セクションを追加
    add_settings_section(
        'sample_custom_section',          // セクションID
        'テキスト入力セクション',     // セクションタイトル
        'sample_custom_section_callback', // コールバック関数
        'sample-custom-options'           // ページスラッグ
    );

色々と書いていますが、

セクションID

CSSのクラスやIDと同じように、セクションを区別するための名前付けです。自由に設定できます。

セクションタイトル

入力しておくことで、H2要素でタイトルが表示されます。

コールバック関数

難しそうな名前をしていますが、「この関数が呼び出されたら自動的にここで設定した内容を実行（出力）する」という意味です。
ここでいう「呼び出されたら」は概ね「カスタムフィールド入力用の画面を開いたとき」をイメージして良いです。つまり、「カスタムフィールド入力用のオプションページを開いたときに出力されるHTML」をここに設定します。

function sample_custom_section_callback()
{
    echo '<p>ここではカスタムテキストを設定できます。</p>';
}

ここは説明文を置くだけなのでHTMLをechoするのみです。

ページスラッグ

どのオプションページに設置するか？を指定します。今回はオプションページのURLを

「ドメイン/wp-admin/admin.php?page=sample-custom-options」にするので、

‘sample-custom-options’ になっています。

こうすることで、

オプションページにこのように出力されます。

3.フィールドの追加

ここで、2.と同じよう流れでカスタムフィールドの値を入力する入力欄を作成します。

// フィールドを追加
    add_settings_field(
        'sample_custom_text_field',      // フィールドID
        'カスタムテキストフィールド', // フィールドタイトル
        'sample_custom_text_field_html', // コールバック関数
        'sample-custom-options',         // ページスラッグ
        'sample_custom_section'          // セクションID
    );
// フィールドのHTML
function sample_custom_text_field_html()
{
    $value = get_option('sample_custom_text', ''); // 保存された値を取得
?>
    <input type="text" name="sample_custom_text" value="<?php echo esc_attr($value); ?>" style="width: 300px;">
<?php
}
セクションID

CSSのクラスやIDと同じように、セクションを区別するための名前付けです。自由に設定できます。

セクションタイトル

入力しておくことで、H2要素でタイトルが表示されます。

コールバック関数

解説は上記と同じなので省略しますが、呼び出す関数がこちらになっています。

// フィールドのHTML
function sample_custom_text_field_html()
{
    $value = get_option('sample_custom_text', ''); // 保存された値を取得
?>
    <input type="text" name="sample_custom_text" value="<?php echo esc_attr($value); ?>" style="width: 300px;">
<?php
}

入力欄としてinput要素をechoしています。

ページスラッグ

どのオプションページに設置するか？を指定します。今回はオプションページのURLを

「ドメイン/wp-admin/admin.php?page=sample-custom-options」にするので、

‘sample-custom-options’ になっています。

フィールドID/タイトル

こちらは、セクション同様に区別のためにフィールドに名前付けをしている部分です。

作成後は、オプションページにこのような入力欄ができます。

②入力用のオプションページを作成しよう

次に、先ほど設定した項目を出力し、入力を行うためのページを作成します。

functions.php
// オプションページの作成
function sample_custom_options_page()
{
    // オプションページを追加
    add_menu_page(
        'カスタムオプション',       // ページタイトル
        'カスタムオプション',       // メニュータイトル
        'manage_options',           // 権限
        'sample-custom-options',        // スラッグ
        'sample_custom_options_page_html', // コールバック関数
        'dashicons-admin-generic',  // アイコン
        100                         // メニュー位置
    );
}
add_action('admin_menu', 'sample_custom_options_page');

// オプションページのHTMLを表示
function sample_custom_options_page_html()
{
    // 権限チェック
    if (!current_user_can('manage_options')) {
        return;
    }

    // 保存通知
    if (isset($_GET['settings-updated'])) {
        add_settings_error('sample_custom_messages', 'sample_custom_message', '設定が保存されました。', 'updated');
    }

    // 設定エラーを表示
    settings_errors('sample_custom_messages');
?>
    <div class="wrap">
        <h1>カスタムオプション</h1>
        <form method="post" action="options.php">
            <?php
            // 設定フィールドとセクションを出力
            settings_fields('sample_custom_options_group');
            do_settings_sections('sample-custom-options');
            submit_button();
            ?>
        </form>
    </div>
<?php
}

1.オプションページを設定

// オプションページの作成
function sample_custom_options_page()
{
    // オプションページを追加
    add_menu_page(
        'カスタムオプション',       // ページタイトル
        'カスタムオプション',       // メニュータイトル
        'manage_options',           // 権限
        'sample-custom-options',        // スラッグ
        'sample_custom_options_page_html', // コールバック関数
        'dashicons-admin-generic',  // アイコン
        100                         // メニュー位置
    );
}
add_action('admin_menu', 'sample_custom_options_page');

オプションページの作成を宣言しています。ここまで出てきていないもので、「メニュータイトル」はWordpressの管理画面におけるメニューの名前です。

「アイコン」はメニュータイトル横のアイコンを選択できます。

WordPress Developer Resources
Dashicons | Developer.WordPress.org Dashicons is the official icon font of the WordPress admin as of 3.8. The Dashicons project is no longer accepting icon requests. Here’s…

「メニュー位置」は管理画面の何番目に項目を置くか指定できます。

2.オプションページの出力を指定

// オプションページのHTMLを表示
function sample_custom_options_page_html()
{
    // 権限チェック
    if (!current_user_can('manage_options')) {
        return;
    }

    // 保存通知
    if (isset($_GET['settings-updated'])) {
        add_settings_error('sample_custom_messages', 'sample_custom_message', '設定が保存されました。', 'updated');
    }

    // 設定エラーを表示
    settings_errors('sample_custom_messages');
?>
    <div class="wrap">
        <h1>カスタムオプション</h1>
        <form method="post" action="options.php">
            <?php
            // 設定フィールドとセクションを出力
            settings_fields('sample_custom_options_group');
            do_settings_sections('sample-custom-options');
            submit_button();
            ?>
        </form>
    </div>
<?php
}

実際に表示されるHTMLなどを設定しています。「権限チェック」ではユーザーの権限が操作できるものかをチェック、「保存通知」では保存時に「ほぞんしました」というメッセージを出す設定をしています。

下部のHTMLがまさにオプションページにおいて入力欄を出すための記述です。

settings_fields(‘sample_custom_options_group’);

で、先ほどの

register_setting(‘sample_custom_options_group’, ‘sample_custom_text’);

で設定した項目を読み込んでいます。

do_settings_sections(‘sample-custom-options’);

で項目を実際に出力し、input欄を呼び出しています。

これにより、

このような入力欄を作ることができます！もちろん、保存も可能です。

③入力した値を呼び出してみよう

呼び出すのは、とても簡単です。PHPファイルに

<?php
$custom_text = get_option('sample_custom_text', 'デフォルト値');
echo '<p>保存されたカスタムフィールドの値: ' . esc_html($custom_text) . '</p>';
?>

get_option()を利用し、$custom_text変数に代入、echoすることで出力できます。

まとめ

簡単な入力のみであれば、入力用のページを別に設けることはそこまで難しくないことがご紹介できたと思います。

プラグインによっては、このオプションページ作成が有料機能になっていたりします。今回の例のように入力欄が少ない場合は自作もお手軽ですが、複数種類のフィールドや条件を組み合わせるとなれば時間もかかります。

自作するか、有料機能を使用するかは作りたい機能に合わせてよく検討することをお勧めします。

このブログ記事はお役に立てましたか？

ワードプレス PHP
よかったらシェアしてね！
  • URLをコピーしました！

このブログ記事を執筆したパソコン講師

のすけのアバター のすけ

HTML/CSS、PHPでWordPressを扱うことの多いITエンジニア駆け出しです。まだまだ勉強中のことも多いですが、頑張ります！

この著者の記事一覧へ

この記事を読んだ方は以下の記事も読んでいます

質問などあれば気軽に書き込んでくださいね♪

コメントする

目次