Hallo!
Ich habe nach einem Tutorial Optionen für Farbschemen in den Customizer meines ersten eigenen Themes eingebaut. Im Customizer funktioniert erstmal alles wie gewünscht, auch mit der Vorschau.
Wenn ich allerdings die dort eingestellten Farben mit "veröffentlichen" speichern will, werden die Einstellungen nicht übernommen. Es bleibt alles so, wie es in der styles.css vorgegeben ist.
Kann mir jemand auf die Sprünge helfen, woran das liegt?
PHP
/* customizer.php */
<?php
add_action( 'customize_register', 'cd_customizer_settings' );
function cd_customizer_settings( $wp_customize ) {
$wp_customize->add_section( 'cd_hintergrundfarbe' , array(
'title' => 'Hintergrundfarbe',
'priority' => 30,
) );
$wp_customize->add_setting( 'background_color' , array(
'default' => '#43C6E4',
'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
'label' => 'Background Color',
'section' => 'cd_hintergrundfarbe',
'settings' => 'background_color',
) ) );
add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
?>
<style type="text/css">
body { background: #<?php echo get_theme_mod('background_color', '#43C6E4'); ?>; }
</style>
<?php
}
add_action( 'customize_preview_init', 'cd_customizer' );
function cd_customizer() {
wp_enqueue_script(
'cd_customizer',
get_template_directory_uri() . '/customizer.js',
array( 'jquery','customize-preview' ),
'',
true
);
}
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
/******** textfarben **************************/
$wp_customize->add_section( 'textcolors' , array(
'title' => 'Color Scheme',
) );
// main color ( site title, h1, h2, h4. h6, widget headings, nav links, footer headings )
$txtcolors[] = array(
'slug'=>'color_scheme_1',
'default' => '#000',
'label' => 'Main Color'
);
// secondary color ( site description, sidebar headings, h3, h5, nav links on hover )
$txtcolors[] = array(
'slug'=>'color_scheme_2',
'default' => '#666',
'label' => 'Secondary Color'
);
// link color
$txtcolors[] = array(
'slug'=>'link_color',
'default' => '#008AB7',
'label' => 'Link Color'
);
// link color ( hover, active )
$txtcolors[] = array(
'slug'=>'hover_link_color',
'default' => '#9e4059',
'label' => 'Link Color (on hover)'
);
// add the settings and controls for each color
foreach( $txtcolors as $txtcolor ) {
// SETTINGS
$wp_customize->add_setting(
$txtcolor['slug'], array(
'default' => $txtcolor['default'],
'type' => 'option',
'capability' => 'edit_theme_options'
)
);
// CONTROLS
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
$txtcolor['slug'],
array('label' => $txtcolor['label'],
'section' => 'textcolors',
'settings' => $txtcolor['slug'])
)
);
}
function cptest_customize_colors() {
/**********************
text colors
**********************/
// main color
$color_scheme_1 = get_option( 'color_scheme_1' );
// secondary color
$color_scheme_2 = get_option( 'color_scheme_2' );
// link color
$link_color = get_option( 'link_color' );
// hover or active link color
$hover_link_color = get_option( 'hover_link_color' );
/****************************************
styling
****************************************/
?>
<style>
/* color scheme */
/* main color */
#site-title a, h1, h2, h2.page-title, h2.post-title, h2 a:link, h2 a:visited, .menu.main a:link, .menu.main a:visited, footer h3 {
color: <?php echo $color_scheme_1; ?>;
}
/* secondary color */
#site-description, .sidebar h3, h3, h5, .menu.main a:active, .menu.main a:hover {
color: <?php echo $color_scheme_2; ?>;
}
.menu.main,
.fatfooter {
border-top: 1px solid <?php echo $color_scheme_2; ?>;
}
.menu.main {
border-bottom: 1px solid <?php echo $color_scheme_2; ?>;
}
.fatfooter {
border-bottom: 1px solid <?php echo $color_scheme_2; ?>;
}
/* links color */
a:link, a:visited {
color: <?php echo $link_color; ?>;
}
/* hover links color */
a:hover, a:active {
color: <?php echo $hover_link_color; ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'cptest_customize_colors' );
}Code
/* customizer.js */
( function( $ ) {
wp.customize( 'background_color', function( value ) {
value.bind( function( newval ) {
$( 'body' ).css( 'background-color', newval );
} );
} );
wp.customize( 'blogname', function( value ) {
value.bind( function( newval ) {
$( '#intro h1' ).html( newval );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( newval ) {
$( '#intro h2' ).html( newval );
} );
} );
} )( jQuery );