TCDテーマNOEL：カスタム投稿タイプ「キャンペーン」詳細ページ内において設定出来る色で、一項目の設定内容を他項目に連動させる方法

Q.質問内容

カスタム投稿タイプ「キャンペーン」の詳細ページで同じ初期値が設定されている以下の箇所において、1箇所変更したらすべての色が連動して変更されるようにすることは出来ますか。
■【段落の設定】キャッチフレーズの文字色
■【特徴一覧の設定】見出しの文字色、チェックマークの色
■【コンテンツ一覧の設定】見出しの枠線の色
■【サービス料金一覧の設定】見出しの背景色
 

A.管理画面【外観】→【テーマエディター】より該当のファイルを下記の通りカスタマイズしてください。

【段落の設定】内、「キャッチフレーズの文字色」で設定した色に連動します。変更後下書き保存もしくは公開していただくことで色が変わります。

編集するファイル：　campaign_cf.php (functions/campaign_cf.php)
編集する箇所：　102行目付近(【特徴一覧の設定】見出しの文字色)

 <li class="cf"><span class="label"><?php _e('Font color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_featured_list_headline_font_color" value="<?php if(!empty($campaign_featured_list_headline_font_color)){ echo esc_attr($campaign_featured_list_headline_font_color); } else { echo '#ff4b53'; }; ?>" data-default-color="#ff4b53" class="c-color-picker"></li>

　↓

 <li class="cf"><span class="label"><?php _e('Font color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_featured_list_headline_font_color" value="<?php if(!empty($campaign_catch_font_color)){ echo esc_attr($campaign_catch_font_color); } else { echo '#ff4b53'; }; ?>" data-default-color="#ff4b53" class="c-color-picker"></li>

編集する箇所：　104行目付近(【特徴一覧の設定】チェックマークの色)

<li class="cf"><span class="label"><?php _e('Color of check icon', 'tcd-w'); ?></span><input type="text" name="campaign_featured_list_check_color" value="<?php if(!empty($campaign_featured_list_check_color)){ echo esc_attr($campaign_featured_list_check_color); } else { echo '#ff4b53'; }; ?>" data-default-color="#ff4b53" class="c-color-picker"></li>

　↓

 <li class="cf"><span class="label"><?php _e('Font color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_featured_list_headline_font_color" value="<?php if(!empty($campaign_catch_font_color)){ echo esc_attr($campaign_catch_font_color); } else { echo '#ff4b53'; }; ?>" data-default-color="#ff4b53" class="c-color-picker"></li>

編集する箇所：　159行目付近(【コンテンツ一覧の設定】見出しの枠線の色)

<li class="cf"><span class="label"><?php _e('Border color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_content_list_headline_border_color" value="<?php if(!empty($campaign_content_list_headline_border_color)){ echo esc_attr($campaign_content_list_headline_border_color); } else { echo '#ff4b54'; }; ?>" data-default-color="#ff4b54" class="c-color-picker"></li>

　↓

 <li class="cf"><span class="label"><?php _e('Border color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_content_list_headline_border_color" value="<?php if(!empty($campaign_catch_font_color)){ echo esc_attr($campaign_catch_font_color); } else { echo '#ff4b54'; }; ?>" data-default-color="#ff4b54" class="c-color-picker"></li>

編集する箇所：　269行目付近(【サービス料金一覧の設定】見出しの背景色)

 <li class="cf"><span class="label"><?php _e('Background color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_price_list_headline_bg_color" value="<?php if(!empty($campaign_price_list_headline_bg_color)){ echo esc_attr($campaign_price_list_headline_bg_color); } else { echo '#f93c41'; }; ?>" data-default-color="#f93c41" class="c-color-picker"></li>

　↓

 <li class="cf"><span class="label"><?php _e('Border color of headline', 'tcd-w'); ?></span><input type="text" name="campaign_content_list_headline_border_color" value="<?php if(!empty($campaign_catch_font_color)){ echo esc_attr($campaign_catch_font_color); } else { echo '#ff4b54'; }; ?>" data-default-color="#ff4b54" class="c-color-picker"></li>