1. TOP
  2. WordPress
  3. 管理画面にオリジナルメニューと独自の設定ページを作成する - WordPress
詳しくはこちら
WordPress
 | 

管理画面にオリジナルメニューと独自の設定ページを作成する - WordPress

この記事では以下の解説しています。

  1. 管理画面にオリジナルメニューを追加
  2. そこに設定ページを作る
  3. 設定ページに入力した内容は保存できるようになっており、好きなページに出力できる

例えば、サイト全体で使う共通情報（電話番号など）を設定ページに入力して保存しておきます。そして、フッターや会社概要ページではget_option('tel')のように値を呼び出します。そうすれば、管理画面上で値を修正できる、かつ修正すればサイト全体の値が書き換わります。

言葉では伝わりにくいと思うので、サンプル画面を用意しました。このように入力欄を管理画面に作り、好きなページで呼び出せる仕組みを作ります。

 

本記事で使っている関数（もしうまくいかなかったら、これらの関数を調べてみてください）

  • add_menu_page()
  • register_setting()
目次

functions.phpに設定を追加

以下コードをfunctions.phpに追加します。

/**
 * 設定ページの初期設定
 */
add_action('admin_menu', 'my_add_admin_setting_page');
function my_add_admin_setting_page() {
  add_menu_page('テーマ設定', 'テーマ設定', 'manage_options', 'custom-setting', 'my_setting_file_path', 'dashicons-admin-generic', 90);
  add_action('admin_init', 'my_register_setting');
}
function my_setting_file_path() {
  $return_url = '../wp-content/themes/blank_themes/admin-theme-setting-page.php';
  require $return_url;
}

/**
 * 入力欄を追加したら register_setting() を増やす
 */
function my_register_setting() {
  register_setting('custom-menu-group', 'general');
  // register_setting('custom-menu-group', '2つ目のname値');
  // register_setting('custom-menu-group', '3つ目のname値');
}

/**
 * メディアアップローダーAPIを管理画面へ読み込ませる
 */
add_action('admin_print_scripts', 'my_add_setting_media_api_scripts');
function my_add_setting_media_api_scripts() {
  wp_enqueue_media();
}

add_menu_page()という関数を使うと、管理画面にメニューを追加できます。引数を変えることで、メニュー名やメニューの順番を変えれます。

my_setting_file_path()の$return_urlには「設定ページ」のファイルパスを指定します。

functions.phpの他の記述は後ほど解説します。

 

次に、「設定ページ」を作ります。

設定ページを作る

設定ページを作ります。ファイル名は何でも大丈夫ですが、今回は「admin-theme-setting-page.php」にします。

以下コードを追加します。

<div class="wrap">
  <h2>テーマ設定</h2>

  <?php
  if (isset($_GET['settings-updated'])) :
    if (true == $_GET['settings-updated']) :
      echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました。</strong></p></div>';
    endif;
  endif;
  ?>

  <form method="post" action="options.php" enctype="multipart/form-data" encoding="multipart/form-data">
    <?php
      settings_fields('custom-menu-group');
      do_settings_sections('custom-menu-group');
    ?>
    <div class="metabox-holder" data-tab-content="general">
      <div class="postbox">
        <?php $value_general = get_option('general'); ?>
        <div class="inside">
          <table class="form-table">
            <tbody>
              <tr>
                <th scope="row"><label>テキスト</label></th>
                <td>
                  <input type="text" class="large-text" name="general[text]" value="<?php echo $value_general['text']; ?>">
                </td>
              </tr>
              <tr>
                <th scope="row"><label>テキストエリア</label></th>
                <td>
                  <textarea class="large-text" name="general[textarea]" rows="6"><?php echo $value_general['textarea']; ?></textarea>
                </td>
              </tr>
              <tr>
                <th scope="row"><label>画像</label></th>
                <td>
                  <input type="text" id="general_img" name="general[img]" value="<?php echo $value_general['img']; ?>" readonly class="regular-text">
                  <input type="button" name="general_img__slect" value="選択">
                  <input type="button" name="general_img__clear" value="クリア">
                  <div id="general_img__thumb" class="uploded-thumb">
                    <?php if ($value_general['img']) : ?>
                      <img src="<?php echo $value_general['img']; ?>" alt="選択中の画像" width="500">
                    <?php endif ?>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <?php submit_button(); ?>
  </form>
</div>

<script>
  (function($) {
    /**
     * WP アップローダー
     */
    function new_wp_uploader(_uniq_id) {
      var custom_uploader;
      $('input:button[name=' + _uniq_id + '__slect]').click(function(e) {
        e.preventDefault();
        if (custom_uploader) {
          custom_uploader.open();
          return;
        }
        custom_uploader = wp.media({
          title: '画像を選択してください',
          // ライブラリの一覧は画像のみにする
          library: {
            type: 'image'
          },
          button: {
            text: '画像の選択'
          },
          // 選択できる画像を1枚のみにする => false
          multiple: false
        });
        /**
         * 画像選択時
         */
        custom_uploader.on('select', function() {
          var images = custom_uploader.state().get('selection');
          images.each(function(file) {
            // リセット
            $('#' + _uniq_id + '__thumb').empty();
            $('#' + _uniq_id).val('');
            // 画像取得してセット
            $('#' + _uniq_id).val(file.attributes.sizes.full.url);
            $('#' + _uniq_id + '__thumb').append('<img src="' + file.attributes.sizes.full.url + '">');
          });
        });
        custom_uploader.open();
      });
      /**
       * クリアボタン クリック時
       */
      $('input:button[name=' + _uniq_id + '__clear]').click(function() {
        $('#' + _uniq_id).val('');
        $('#' + _uniq_id + '__thumb').empty();
      });
    };
    new_wp_uploader('general_img');
  })(jQuery);
</script>

ここまでの手順が終われば、管理画面に「テーマ設定」というメニューが増えて、そのページに入力欄が作られているはずです。

使い方（値の出力方法など）

レイアウトは自由に変更できます。サンプルコードでは、WordPressのデフォルトスタイル（CSS）を使っています。必要に応じてCSSを読み込ませたりも可能です。

 

基本的には、以下の形式で入力欄をどんどん作っていきます。

<input type="text" name="general[text]" value="<?php echo $value_general['text']; ?>">

※必要な属性のみ書いています。class名などは設定に直接関係ないので省略しています。

 

上記の入力欄に値を入力して保存ボタンをクリックしたら、DB上に値が保存されます。この場合、generalがキーになります。

■値の出力方法
固定ページなどで出力する場合、<?php echo get_option('general')['text']; ?>のように書きます。

 

name属性のgeneralのキー名は自由に変えれます。変えた場合は、<input type="text" name="general[text]" value="<?php echo $value_general['text']; ?>">の$value_generalの、<?php $value_general = get_option('general'); ?>の部分も変えなければいけません。

また、複数のキー名を扱う（他のキー名の入力欄を追加する）こともできます。その場合、functions.phpのmy_register_setting()の中でregister_setting('custom-menu-group', 'キー名');も追加してあげます。そうしないとDBに値が保存されません。

メディアアップローダーについて

テキストをDBに保存するなら、inputやtextareaを追加するだけで良いのですが、画像を保存する場合は少し作業が必要です。

画像の入力欄は、以下を1セットとして扱います。

<input type="text" id="general_img" name="general[img]" value="<?php echo $value_general['img']; ?>" readonly class="regular-text">
<input type="button" name="general_img__slect" value="選択">
<input type="button" name="general_img__clear" value="クリア">
<div id="general_img__thumb" class="uploded-thumb">
  <?php if ($value_general['img']) : ?>
    <img src="<?php echo $value_general['img']; ?>" alt="選択中の画像">
  <?php endif ?>
</div>

この中には、メディアアップローダー（画像を選択するモーダル）を起動するボタンや画像のクリアボタンなどが含まれています。

HTMLを追加したら、ファイル下部のjsで以下を実行します。

new_wp_uploader('general_img');

 

general_imgの文字列がHTMLに4箇所、jsのnew_wp_uploader()の引数に1箇所あります。この文字はユニークな値にしてください。

例えば、画像アップロードの入力欄が2つある場合は、片方はgeneral_img、もう片方はhoge_imgのように値を変えなければいけません。

まとめ

この仕組みをマスターすれば、管理画面内でサイトの文言を自由に変更できるサイトを作れるようになります。

今回紹介したコードはかなり長いですが、本記事のコードをコピペすれば実現可能なので難易度はそんなに高くないはずです。もしうまくいかなかったら、一箇所ずつ確認して関数の仕様などを調べてみたりしてください。

ちなみに、管理画面上で文言などを編集できるような機能は、今回紹介した他にも「カスタマイザー」や「ウィジェット」もあるので要件に合わせて使い分けましょう。

 

 

こちらの初期構築用テーマを使えば、設定ページをはじめ人気記事やページャーなど様々な機能が実装済みなので、WordPressの開発案件で0からテーマを作る時にかなりの工数削減になります。是非ご覧ください！

関連記事