管理画面から配色を変えられるようにする

2017/1/3 2020/10/15 WordPress

オリジナルのテーマオプションを作成して、サイトを動的に変更できるテーマを作成する。

簡単に管理画面から配色を選べるようにする。

1.テーマフォルダ内にadmin-option.php を作成する。

2.管理画面に専用メニューを作成
　① メニューを作成する関数
　② admin_menu アクションにフックして、①の関数を登録
　③ メニューがクリックされた時に表示される設定ページの出力

＞function.phpに以下を記述

add_action('init', 'rainbow');

function rainbow() {
    add_option('color'); // オプション追加
    add_action('admin_menu', 'option_menu_create'); // 管理メニュー追加
    function option_menu_create() {
        add_theme_page('配色', '配色', 'edit_themes', basename(__FILE__), 'option_page_create'); // 概観メニューのサブメニューとして追加
    }
    function option_page_create() { // 設定ページ生成
        $saved = save_option();
        require TEMPLATEPATH.'/admin-option.php';
    }
}
function save_option() { // オプション保存
    if (empty($_REQUEST['color'])) return;
    $save = update_option('color', $_REQUEST['color']);
    return $save;
}

＞admin-option.php

<div id="icon-themes" class="icon32"></div>
<h2>カスタムカラーズ</h2>
<p>現在の配色は、<b><?php echo get_option('color'); ?></b> です。</p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=red">Red</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=orange">Orange</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=yellow">Yellow</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=green">Green</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=blue">Blue</a></p>
<p><a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=functions.php&color=purple">Purple</a></p>

＞header.php

<body class="<?php echo get_option('color'); ?>">