/**
* テーマカスタマイザー - リアルタイムプレビュー
*
* @package AI_Creative_Studio
*/
(function() {
'use strict';
if (!wp || !wp.customize) {
return;
}
/**
* 色の明度を調整するヘルパー関数
*/
function aicsAdjustBrightness(hex, steps) {
// #を削除
hex = hex.replace('#', '');
// RGBに変換
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// 明度を調整
const newR = Math.max(0, Math.min(255, r + steps));
const newG = Math.max(0, Math.min(255, g + steps));
const newB = Math.max(0, Math.min(255, b + steps));
// HEXに戻す
const rr = newR.toString(16).padStart(2, '0');
const gg = newG.toString(16).padStart(2, '0');
const bb = newB.toString(16).padStart(2, '0');
return '#' + rr + gg + bb;
}
/**
* CSS変数を更新する関数
*/
function aicsUpdateCSSVariable(property, value) {
document.documentElement.style.setProperty(property, value);
}
// メインカラーのリアルタイム変更
wp.customize('aics_primary_color', function(value) {
value.bind(function(newValue) {
aicsUpdateCSSVariable('--color-primary', newValue);
aicsUpdateCSSVariable('--color-primary-dark', aicsAdjustBrightness(newValue, -20));
aicsUpdateCSSVariable('--color-primary-light', aicsAdjustBrightness(newValue, 20));
});
});
// アクセントカラーのリアルタイム変更
wp.customize('aics_accent_color', function(value) {
value.bind(function(newValue) {
aicsUpdateCSSVariable('--color-accent', newValue);
aicsUpdateCSSVariable('--color-accent-dark', aicsAdjustBrightness(newValue, -20));
});
});
// コピーライトテキストのリアルタイム変更
wp.customize('aics_copyright_text', function(value) {
value.bind(function(newValue) {
const copyrightElement = document.querySelector('.site-info .copyright p');
if (copyrightElement) {
if (newValue) {
copyrightElement.innerHTML = newValue;
} else {
// デフォルトのコピーライト表示に戻す
const currentYear = new Date().getFullYear();
const siteName = document.querySelector('.site-title a')?.textContent || 'Site';
copyrightElement.innerHTML = `© ${currentYear} ${siteName}. All rights reserved.`;
}
}
});
});
// ヒーローメインテキストのリアルタイム変更
wp.customize('aics_hero_main_text', function(value) {
value.bind(function(newValue) {
const heroMainElement = document.querySelector('.hero-main-text');
if (heroMainElement) {
heroMainElement.innerHTML = newValue.replace(/\n/g, '
');
}
});
});
// ヒーローサブテキストのリアルタイム変更
wp.customize('aics_hero_sub_text', function(value) {
value.bind(function(newValue) {
const heroSubElement = document.querySelector('.hero-sub-text');
if (heroSubElement) {
heroSubElement.innerHTML = newValue.replace(/\n/g, '
');
}
});
});
// ヒーローボタンテキストのリアルタイム変更
wp.customize('aics_hero_button_text', function(value) {
value.bind(function(newValue) {
const heroButtonElement = document.querySelector('.hero-button');
if (heroButtonElement) {
heroButtonElement.textContent = newValue;
}
});
});
})();