WP Customizer color picker resultaat gebruiken in css

  • AlwinVerduijn

    (@alwinverduijn)


    8 jaren, 10 maanden geleden

    Ik ben bezig om een template te ontwikkelen. Hierbij is het de bedoeling dat de kleuren ingesteld kunnen worden in de Customizer van WP zelf. Ik heb de kleurmogelijkheden toegevoegd aan de customizer, maar hoe zorg ik er nu voor dat de kleuren die ik opgeef ook daadwerkelijk getoond worden op de website.

    Voorbeeld:
    Ik geef de mogelijkheid om de kleur van de tekst van het menu en de kleur van de achtergrond van het menuitem in te stellen. Maar hoe zorg ik ervoor dat de tekst van het menu ook daadwerkelijk die kleur krijgt?

    De code die ik gebruik is alsvogt:

    function menu_customize( $wp_customize ){
	$wp_customize->add_section(
		'menu_customize',
		array(
			'title' => 'Menu instellingen',
			'section' => 'Pas hier de kleuren van het menu aan',
			'priority' => 45,
		)
	);
	$wp_customize->add_setting(
		'color-setting',
		array(
			'default' => '#000000',
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'color-setting',
			array(
				'label' => 'Menu tekst kleur',
				'section' => 'menu_customize',
				'settings' => 'color-setting',
			)
		)
	);

	/* menu tekst kleur geselecteerd*/
	$wp_customize->add_setting(
		'color-setting-selected',
		array(
			'default' => '#ffffff',
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'color-setting-selected',
			array(
				'label' => 'Menu tekst kleur geselecteerd',
				'section' => 'menu_customize',
				'settings' => 'color-setting-selected',
			)
		)
	);

	/* menu knop kleur*/
	$wp_customize->add_setting(
		'background-color',
		array(
			'default' => 'transparent',
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'background-color',
			array(
				'label' => 'Menu knop kleur',
				'section' => 'menu_customize',
				'settings' => 'background-color',
			)
		)
	);

	/* menu knop kleur geselecteerd*/
	$wp_customize->add_setting(
		'background-color-selected',
		array(
			'default' => '#533f34',
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'background-color-selected',
			array(
				'label' => 'Menu knop kleur geselecteerd',
				'section' => 'menu_customize',
				'settings' => 'background-color-selected',
			)
		)
	);
}
add_action( 'customize_register', 'menu_customize' );

    Het thema is te zien op:
    http://duijnweb.nl/white-lion/

    Kan iemand mij hierbij helpen ik kom er zelf niet uit!

    Bij voorbaat dank!

1 reactie aan het bekijken (van in totaal 1)
  • peterdewith

    (@peterdewith)

    8 jaren, 9 maanden geleden

    Heb het zo gedaan

    Gebruik deze color picker “jscolor.js”

    heb een extra css gemaakt die geen css maar .php heet

    eerst moet je de color picker laden, staat bij mij in de plugin map

    <?php /** Color picker laden **/ ?>
<script src="<?php print plugins_url();?>/Radio-settings/color_picker/jscolor.js"></script>

    Dan in je template een input maken
    <input class="jscolor" name="radiosettings_settings[css_menu_color_1]" value="<?php echo $radiosettings_options['css_menu_color_1']; ?>" />

    Dan in de extra css roep je hem op:
    <!– Oproepen radio settings –>
    <?php $radiosettings_options = get_option(‘radiosettings_settings’);?>

    .button_generator_1{
	color: #<?php print $radiosettings_options['css_menu_color_1']; ?> !important;
	}

    Dan moet je de nieuwe css includen echter dit mag niet overal is mij opgevallen, ik laad hem in de sidebar 

    <!-- Oproepen custom style in radio settings -->
<?php include( get_stylesheet_directory() . '/sidebar/Style.php'); ?>
1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘WP Customizer color picker resultaat gebruiken in css’ is gesloten voor nieuwe reacties.