LoginSignup
2
2

More than 5 years have passed since last update.

Wordpressテーマ(Xeory Extension)のテーマカラーをカスタマイズする

Last updated at Posted at 2016-09-10

WordpressテーマXeory Extension(https://xeory.jp/template/xeory-extension/)
のテーマカラーで望んだ色がなかったため、追加してみた。

編集するファイルは以下のとおりです。
1.lib/admin/init.php
2.style.css
3.sass/style.scss

全てXeoryExtension内のファイルです。

init.phpの編集

230行目辺りからカラーの設定
配列に以下のようにセット

init.php
<?php
        $colors = array(
          0 => 'default',
          1 => 'color01',
          2 => 'color02',
          3 => 'color03',
          4 => 'color04',
          5 => 'color05',
        );

        $color_scheme = trim(get_option('color_scheme'));
        if(isset($color_scheme) && $color_scheme !== ''){
          $color_scheme = trim(get_option('color_scheme'));
        }else{
          $color_scheme = 'default';
        }

      $active_template_name = basename(get_stylesheet_directory());


    ?>

そして、256行目辺りの「カラー設定」に以下のように追記


<h4>カラー設定</h4>
    <p class="setting_description"><small>ベースとなる配色を選択して下さい。</small></p>
    <ul class="color-radio cmb_id_bzb_color_scheme">
    <li id="color-1" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme1" value="default" <?php checked($color_scheme, 'default');?> /> 
    <label for="color_scheme1">デフォルト</label>
    </li>
    <li id="color-2" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme2" value="color01" <?php checked($color_scheme, $colors[1]);?> /> 
    <label for="color_scheme2">水色</label>
    </li>
    <li id="color-3" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme3" value="color02" <?php checked($color_scheme, $colors[2]);?> /> 
    <label for="color_scheme3"></label>
    </li>
    <li id="color-4" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme4" value="color03" <?php checked($color_scheme, $colors[3]);?> /> 
    <label for="color_scheme4"></label>
    </li>
    <li id="color-5" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme5" value="color04" <?php echo ($color_scheme == $colors[4]);?> /> 
    <label for="color_scheme5"></label>
    </li>
<!-- ここから↓追加 -->
    <li id="color-6" style="display:inline-block;padding-right:18px;">
    <input type="radio" name="color_scheme" id="color_scheme5" value="color05" <?php echo ($color_scheme == $colors[5]) ? 'checked' : '';?> /> 
    <label for="color_scheme6">ピンク(#ffd1e8)</label>
    </li>
<!-- ここまで↑ -->
    </ul>

そうすると、こんな感じで追加されます。
スクリーンショット 2016-09-10 17.35.57.png

style.css, scssの編集

4128行目あたりから始まるカラースキームのcolor04のスタイルをパクってcolor05を新しく作成します。

スクリーンショット 2016-09-10 17.25.46.png

あとは、一応.scssにも追加しておきます。
スクリーンショット 2016-09-10 17.43.01.png

後は変更保存すればこのように表示されます。
スクリーンショット 2016-09-10 17.43.46.png

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2