'', //サイト背景画像
);
//Cocoon設定 > 全体 > サイト背景色の適用箇所を変更
add_action('get_template_part_tmp/css-custom','css_custom');
function css_custom() {
$content_color = get_site_background_color() ?: '#f0f0e8';
echo '
.container, .sidebar-menu-content, .navi-menu-content, .mobile-menu-buttons {
background-color: '.$content_color.';
}
@media screen and (max-width: 1023px) {
#navi .navi-in > .menu-mobile li {
background-color: '.$content_color.';
}
}
.single .main, .page .main, .error404 .main, .list {
box-shadow: 0 0 0 10px '.$content_color.' inset;
}
.single .main:before, .page .main:before, .error404 .main:before, .list:before,
.single .main:after, .page .main:after, .error404 .main:after, .list:after,
.widget-sidebar::before, .appeal-content::before {
border-top-color: '.$content_color.';
}';
}
/*******************************
* WEBフォント設定
*******************************/
// Googleフォント読み込み（非同期化）
add_action('wp_head', 'adds_head');
function adds_head() {
$font_family = get_theme_mod('font_pattern_control', 'font_klee');
$font_url = generate_font_url($font_family);
if ($font_family !== 'font_none') {
echo ''."\n";
echo ''."\n";
}
}
// フォントのURLを生成する関数
function generate_font_url($font_family) {
$font_families = array(
'font_klee' =>'Klee+One:wght@600&display=swap',
'font_kaisei_decol' => 'Kaisei+Decol:wght@700&display=swap',
'font_zen_kusenaido' => 'Zen+Kurenaido&display=swap',
'font_zen_kaku_gothic' => 'Zen+Kaku+Gothic+New:wght@500&display=swap',
'font_zen_maru_gothic' => 'Zen+Maru+Gothic:wght@500&display=swap',
'font_kiwi' => 'Kiwi+Maru:wght@500&display=swap',
'font_none' => '', // 読み込むフォントがない場合は空文字にする
);
if (isset($font_families[$font_family]) && $font_family !== 'font_none') {
return 'https://fonts.googleapis.com/css2?family=' . $font_families[$font_family];
}
return ''; // 該当するフォントが見つからない場合も空文字にする
}
/*******************************
* カスタマイザーで
* 日本語フォントを変更
*******************************/
//カスタマイザー設定
add_action('customize_register', 'font_pattern');
function font_pattern($wp_customize) {
$wp_customize->add_section(
'font_pattern_section',
array(
'title' => __( '【スキン】日本語フォント設定', THEME_NAME ),
'priority' => 1000,
)
);
$wp_customize->add_setting(
'font_pattern_control',
array(
'default' => 'font_klee'
)
);
$wp_customize->add_control(
'font_pattern_control',
array(
'label' => __( 'ロゴフォント設定', THEME_NAME ),
'description' => __( 'ロゴテキストや記事タイトルなどのロゴフォントを設定できます。「設定なし」にするとCocoon設定 > 全体設定 > サイトフォント の設定を継承します。', THEME_NAME ),
'setting' => 'font_pattern_control', //紐づけるセッティングID
'section' => 'font_pattern_section', //紐づけるセクション名
'type' => 'radio', //コントロールタイプ
'choices' => array(
'font_klee' => __( 'クレー（デフォルト）', THEME_NAME ),
'font_zen_kusenaido' => __( 'ZEN紅道', THEME_NAME ),
'font_zen_kaku_gothic' => __( 'ZEN角ゴシック', THEME_NAME ),
'font_zen_maru_gothic' => __( 'ZEN丸ゴシック', THEME_NAME ),
'font_kiwi' => __( 'キウイ丸', THEME_NAME ),
'font_none' => __( '設定なし', THEME_NAME ),
),
)
);
}
// head内にCSSを追加
add_action( 'wp_head', 'font_css');
function font_css() {
$style_template = '
';
$style_font = '';
if (get_theme_mod('font_pattern_control','font_klee') === 'font_klee') {
$style_font = '"Klee One", sans-serif';
} elseif (get_theme_mod('font_pattern_control','font_klee') === 'font_zen_kusenaido') {
$style_font = '"Zen Kurenaido", sans-serif';
} elseif (get_theme_mod('font_pattern_control','font_klee') === 'font_zen_kaku_gothic') {
$style_font = '"Zen Kaku Gothic New", sans-serif';
} elseif (get_theme_mod('font_pattern_control','font_klee') === 'font_zen_maru_gothic') {
$style_font = '"Zen Maru Gothic", sans-serif';
} elseif (get_theme_mod('font_pattern_control','font_klee') === 'font_kiwi') {
$style_font = '"Kiwi Maru", sans-serif';
} else {
$style_font = 'inherit';
}
echo sprintf($style_template, $style_font);
}
/*******************************
* カスタマイザーで
* 背景パターンを変更
*******************************/
//カスタマイザー設定
add_action('customize_register', 'bg_pattern');
function bg_pattern($wp_customize) {
$wp_customize->add_section(
'bg_image_section',
array(
'title' => __( '【スキン】背景パターン設定', THEME_NAME ),
'priority' => 1000,
)
);
$wp_customize->add_setting(
'bg_image_control',
array(
'default' => 'bg_grid'
)
);
$wp_customize->add_control(
'bg_image_control',
array(
'label' => __( '背景パターン設定', THEME_NAME ),
'description' => __( '背景のパターンをお選びください。「設定なし」にすると背景のパターンは削除され色のみになります。', THEME_NAME ),
'setting' => 'bg_image_control', //紐づけるセッティングID
'section' => 'bg_image_section', //紐づけるセクション名
'type' => 'radio', //コントロールタイプ
'choices' => array(
'bg_grid' => __( 'グリッド（デフォルト）', THEME_NAME ),
'bg_grid_paper' => __( '方眼紙', THEME_NAME ),
'bg_line' => __( '罫線', THEME_NAME ),
'bg_dot' => __( 'ドット', THEME_NAME ),
'bg_img_none' => __( '設定なし', THEME_NAME ),
),
)
);
}
// head内にCSSを追加
add_action( 'wp_head', 'bg_image_css');
function bg_image_css() {
$style_template = '
';
$style_image = '';
$style_size = '';
if (get_theme_mod('bg_image_control','bg_grid') === 'bg_grid') {
$style_image = 'linear-gradient(180deg, rgba(var(--white-color), 0) 93%, rgba(var(--white-color), 1) 100%),linear-gradient(90deg, rgba(var(--white-color), 0) 93%, rgba(var(--white-color), 1) 100%)';
$style_size= '15px 15px';
} elseif (get_theme_mod('bg_image_control','bg_grid') === 'bg_grid_paper') {
$style_image = 'linear-gradient(rgba(var(--white-color), .7) 1%, rgba(var(--white-color), .7) 1%, transparent 1%, transparent 99%, rgba(var(--white-color), .7) 99%, rgba(var(--white-color), .7) 100%), linear-gradient(90deg, rgba(var(--white-color), .7) 1%, rgba(var(--white-color), .7) 1%, transparent 1%, transparent 99%, rgba(var(--white-color), .7) 99%, rgba(var(--white-color), .7) 100%), linear-gradient(transparent, transparent 25%, rgba(var(--white-color), .4) 25%, rgba(var(--white-color), .4) 26%, transparent 26%, transparent 50%, rgba(var(--white-color), .4) 50%, rgba(var(--white-color), .4) 51%, transparent 51%, transparent 75%, rgba(var(--white-color), .4) 75%, rgba(var(--white-color), .4) 76%, transparent 76%, transparent 100%), linear-gradient(90deg, transparent, transparent 25%, rgba(var(--white-color), .4) 25%, rgba(var(--white-color), .4) 26%, transparent 26%, transparent 50%, rgba(var(--white-color), .4) 50%, rgba(var(--white-color), .4) 51%, transparent 51%, transparent 75%, rgba(var(--white-color), .4) 75%, rgba(var(--white-color), .4) 76%, transparent 76%, transparent 100%)';
$style_size = '80px 80px';
} elseif (get_theme_mod('bg_image_control','bg_grid') === 'bg_line') {
$style_image = 'linear-gradient(rgba(var(--white-color), 1) .1px, rgba(var(--white-color), 0) .05em)';
$style_size = 'auto 1em';
} elseif (get_theme_mod('bg_image_control','bg_grid') === 'bg_dot') {
$style_image = 'radial-gradient(rgba(var(--white-color), 1) 3px, rgba(var(--white-color), 0) 3px)';
$style_size= '25px 25px';
} else {
$style_image= 'none';
$style_size= 'unset';
}
echo sprintf($style_template, $style_image, $style_size);
}
/*******************************
* カスタマイザーで
* ロゴテキストの傍点変更
*******************************/
//カスタマイザー設定
add_action('customize_register', 'logo_text_dot');
function logo_text_dot($wp_customize) {
$wp_customize->add_section(
'logo_text_dot_section',
array(
'title' => __( '【スキン】ロゴテキストの傍点設定', THEME_NAME ),
'priority' => 1000,
)
);
$wp_customize->add_setting(
'logo_text_dot_control',
array(
'default' => 'dot_point'
)
);
$wp_customize->add_control(
'logo_text_dot_control',
array(
'label' => __( 'ロゴテキストの傍点デザイン', THEME_NAME ),
'description' => __( 'ロゴテキストの傍点をお選びください。「設定なし」にすると傍点は削除されます。', THEME_NAME ),
'setting' => 'logo_text_dot_control',//紐づけるセッティングID
'section' => 'logo_text_dot_section', //紐づけるセクション名
'type' => 'select', //コントロールタイプ
'choices' => array(
'dot_point' => __( '点（デフォルト）', THEME_NAME ),
'dot_point_open' => __( '点 白抜き', THEME_NAME ),
'dot_circle' => __( '丸', THEME_NAME ),
'dot_circle_open' => __( '丸 白抜き', THEME_NAME ),
'dot_double_circle' => __( '二重丸', THEME_NAME ),
'dot_double_circle_open' => __( '二重丸 白抜き', THEME_NAME ),
'dot_triangle' => __( '三角', THEME_NAME ),
'dot_triangle_open' => __( '三角 白抜き', THEME_NAME ),
'dot_sesame' => __( 'ゴマ', THEME_NAME ),
'dot_sesame_open' => __( 'ゴマ 白抜き', THEME_NAME ),
'dot_none' => __( '設定なし', THEME_NAME ),
),
)
);
$wp_customize->add_setting(
'logo_text_dot_potision',
array(
'default' => 'dot_under'
)
);
$wp_customize->add_control(
'logo_text_dot_potision',
array(
'label' => __( 'ロゴテキストの傍点位置', THEME_NAME ),
'description' => __( 'ロゴテキストの傍点の位置をお選びいただけます。', THEME_NAME ),
'setting' => 'logo_text_dot_potision',//紐づけるセッティングID
'section' => 'logo_text_dot_section', //紐づけるセクション名
'type' => 'radio', //コントロールタイプ
'choices' => array(
'dot_under' => __( '下（デフォルト）', THEME_NAME ),
'dot_over' => __( '上', THEME_NAME ),
),
)
);
}
// head内にCSSを追加
add_action( 'wp_head', 'logo_text_dot_css');
function logo_text_dot_css() {
$style_template = '
';
$style_value = '';
$style_position = '';
if (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_point') {
$style_value = 'dot';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_point_open') {
$style_value = 'open dot';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_circle') {
$style_value = 'circle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_circle_open') {
$style_value = 'open circle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_double_circle') {
$style_value = 'double-circle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_double_circle_open') {
$style_value = 'open double-circle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_triangle') {
$style_value = 'triangle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_triangle_open') {
$style_value = 'open triangle';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_sesame') {
$style_value = 'sesame';
} elseif (get_theme_mod('logo_text_dot_control','dot_point') === 'dot_sesame_open') {
$style_value = 'open sesame';
} else {
$style_value = 'none';
}
if (get_theme_mod('logo_text_dot_potision','dot_under') === 'dot_under') {
$style_position = 'under left';
} else {
$style_position = 'over left';
}
echo sprintf($style_template, $style_value, $style_value, $style_position, $style_position);
}
/*******************************
* 【スキン】モバイルのグローバルナビ カード装飾の制御
* グローバルナビの色（背景色・文字色）を設定すると、その色がカード背景や
* 文字色と干渉してスマホでメニューが見えなくなる場合があるため、
* 色設定時はカード装飾を解除して通常表示に切り替える（チェックで切替可）。
*******************************/
add_action('customize_register', 'skin_global_nav_settings');
function skin_global_nav_settings($wp_customize) {
$wp_customize->add_section(
'skin_global_nav_section',
array(
'title' => __( '【スキン】グローバルナビ設定', THEME_NAME ),
'priority' => 1001,
)
);
$wp_customize->add_setting(
'skin_mobile_nav_uncardify',
array(
'default' => '1',
'sanitize_callback' => 'skin_uncardify_sanitize',
)
);
$wp_customize->add_control(
'skin_mobile_nav_uncardify',
array(
'label' => __( 'グローバルナビ色を設定したらカード装飾を解除', THEME_NAME ),
'description' => __( 'チェックを入れると、グローバルナビの色（背景色・文字色）を設定した際に、スマホのカード型メニューを通常表示に切り替えます（文字が見えなくなるのを防ぎます）。カード型を維持したい場合はチェックを外してください。', THEME_NAME ),
'setting' => 'skin_mobile_nav_uncardify',
'section' => 'skin_global_nav_section',
'type' => 'checkbox',
)
);
}
// チェックボックスのサニタイズ
function skin_uncardify_sanitize($input) {
return ($input === '1' || $input === 1 || $input === true) ? '1' : '';
}
// head内にCSSを追加：条件を満たす時だけカード装飾を解除
add_action('wp_head', 'skin_mobile_nav_css');
function skin_mobile_nav_css() {
// グローバルナビの色（背景 or 文字）が設定されているか
$nav_color_set = get_global_navi_background_color() || get_global_navi_text_color();
// 解除チェックON（デフォルトON）かつ色設定ありのときだけ
if ( get_theme_mod('skin_mobile_nav_uncardify', '1') && $nav_color_set ) {
echo '';
}
}