サイトカラーなどサイト全体に関係する一般情報を設定するメニューを管理メニューに追加する

たとえば自分たちで作ったWordPressテーマを複数の企業に対して販売したい、という場合、WordPressの管理画面内でサイト全体に関係する一般情報は簡単に設定できたほうがクライアントにとっては優しいですよね。
たとえば
・サイトの基調色
・会社名
・会社のロゴ
・…

このぐらいはクライアント側でパパッと設定できるようにしたい。
　
そこで今回は、これらの設定ができるメニューを管理画面に追加する方法についてご紹介します。

例として、「サイトの基調色」、「会社名」、「会社のロゴ」を設定できる「サイト設定」という名前のメニューを管理画面に追加してみます。
　
テーマのfunctions.phpに以下を記述します。

// admin_menu でメニューに追加
add_action('admin_menu', 'register_custom_menu_page');
//メニューを定義
function register_custom_menu_page() {
    add_menu_page('サイト設定', 'サイト設定', 'manage_options', 'site_settings', 'create_custom_menu_page', '', 3);
    //（ページ名、メニュー名、権限、スラッグ、function名、アイコン、並び順）
}

// カスタムメニューページを読み込むfunction
function create_custom_menu_page() {
    require TEMPLATEPATH.'/admin/site_settings.php'; //テンプレートのパス
}

ここまででまず管理画面に新しいメニュー「サイト設定」が作れました。
　
次に、基調色選択のためのカラーピッカーと、ロゴを登録するためのWordPressメディアアップロード機能を追加します。
テーマのfunctions.phpに以下を記述します。上の記述に続けて書いてOKです。

//カラーピッカーの生成関数
function genelate_color_picker_tag_demo($name, $value, $label){?>
    <p><label for="<?php echo $name; ?>"><?php echo $label; ?></label></p>
    <p><input type="text" name="<?php echo $name; ?>" value="<?php echo $value; ?>" ></p>
    <?php wp_enqueue_script( 'wp-color-picker' );
    $data = '(function( $ ) {
      var options = {
          defaultColor: false,
          change: function(event, ui){},
          clear: function() {},
          hide: true,
          palettes: true
      };
      $("input:text[name='.$name.']").wpColorPicker(options);
  })( jQuery );';
    wp_add_inline_script( 'wp-color-picker', $data, 'after' ) ;

}
add_action('admin_print_styles', 'my_admin_print_styles_demo');
function my_admin_print_styles_demo() {
    wp_enqueue_style( 'wp-color-picker' );
}

//WordPressメディアアップロード機能
function generate_upload_image_tag($name, $value){?>
    <input name="<?php echo $name; ?>" type="text" value="<?php echo $value; ?>" />
    <input type="button" name="<?php echo $name; ?>_slect" value="選択" />
    <input type="button" name="<?php echo $name; ?>_clear" value="クリア" />
    <div id="<?php echo $name; ?>_thumbnail" class="uploded-thumbnail">
        <?php if ($value): ?>
            <img src="<?php echo $value; ?>" alt="選択中の画像">
        <?php endif ?>
    </div>

    <script type="text/javascript">
        (function ($) {
            var custom_uploader;
            $("input:button[name=<?php echo $name; ?>_slect]").click(function(e) {
                e.preventDefault();
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }

                custom_uploader = wp.media({
                    title: "画像を選択してください",
                    /* ライブラリの一覧は画像のみにする */
                    library: {
                        type: "image"
                    },
                    button: {
                        text: "画像の選択"
                    },
                    /* 選択できる画像は 1 つだけにする */
                    multiple: false
                });

                custom_uploader.on("select", function() {
                    var images = custom_uploader.state().get("selection");

                    /* file の中に選択された画像の各種情報が入っている */
                    images.each(function(file){

                        /* テキストフォームと表示されたサムネイル画像があればクリア */
                        $("input:text[name=<?php echo $name; ?>]").val("");
                        $("#<?php echo $name; ?>_thumbnail").empty();

                        /* テキストフォームに画像の URL を表示 */
                        $("input:text[name=<?php echo $name; ?>]").val(file.attributes.sizes.full.url);

                        /* プレビュー用に選択されたサムネイル画像を表示 */
                        $("#<?php echo $name; ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" />');

                    });
                });
                custom_uploader.open();
            });

            /* クリアボタンを押した時の処理 */
            $("input:button[name=<?php echo $name; ?>_clear]").click(function() {

                $("input:text[name=<?php echo $name; ?>]").val("");
                $("#<?php echo $name; ?>_thumbnail").empty();

            });

        })(jQuery);
    </script>
    <?php
}
function my_admin_scripts() {
    //メディアアップローダの javascript API
    wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );

これですべての機能がそろいました。
　
それでは、メニューの中身を定義します。
上で書かれたファイル “テーマのディレクトリ/admin/site_settings.php” を作成し、以下のように記述します。

<?php
    add_option('site_main_color');
    add_option('company_name');
    add_option('logo_image_url');

    // update_option
    if ($_REQUEST['site_main_color']) update_option('site_main_color', $_REQUEST['site_main_color']);
    if ($_REQUEST['company_name']) update_option('company_name', $_REQUEST['company_name']);
    if ($_REQUEST['logo_image_url']) update_option('logo_image_url', $_REQUEST['logo_image_url']);
?>

<div class="wrap">
    <h2>サイト色の登録</h2>

    <form method="post" action="admin.php?page=site_settings">
<?php
genelate_color_picker_tag_demo( //カラーピッカー生成関数
    'site_main_color',
    get_option('site_main_color'),
    'サイト色を入力してください。'
);

?>

        <p>会社名</p>
        <p><input name="company_name" type="text" value="<?php echo get_option('company_name'); ?>" class="regular-text"></p>
        <p>ロゴ</p>
        <?php
        generate_upload_image_tag('logo_image_url', get_option('logo_image_url')); //WordPressメディアアップロード機能
        ?>

        <?php submit_button(); //保存ボタン ?>

    </form>
</div>

これで完成です。
管理画面にアクセスしてみてください。
管理メニューに「サイト設定」というメニューが現れ、サイトの基調色、会社名、会社のロゴを登録できるフォームができあがっているはずです。
　
　
最後に、登録した項目を取得してサイトに表示する記述。

<?php
$company_name = get_option('company_name');
$logo_image_url = get_option('logo_image_url');
$site_main_color = get_option('site_main_color');
?>

<body style="background-color:<?php echo $site_main_color; ?>;">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" ><img src="<?php echo $logo_image_url; ?>" alt="<?php echo $company_name; ?>"></a></h1>
・・・
</body>

こんな感じです。
　
いかがですか？
これで自作のテーマを汎用化していろんな企業に導入してもらえますね。

---