web-dev-qa-db-fra.com

Sélectionnez Box dans la fonction du panneau d'administration liée au CSS

Je veux lier la zone de sélection à mon CSS.

Comme si je clique sur un élément de la liste, l'arrière-plan de mon en-tête changera - la couleur de l'en-tête est dans le CSS.

La zone de sélection ne figure pas dans le code HTML, mais dans le options.php du fichier de thème et partiellement dans le fichier functions.php.

Donc, le point ici est que si je clique sur la zone de sélection, 3 noms apparaîtront et si je clique sur un nom et le sauve, il devrait changer la couleur en ce "style de thème".

Quelqu'un a une idée comment faire cela?

Voici la partie liée du fichier header.php:

<div id="theme-main">
<div class="cleared reset-box"></div>
<div class="theme-box theme-sheet">
<div class="theme-box-body theme-sheet-body">
    <div class="theme-header">
    <div class="theme-logo">
        <?php if(theme_get_option('theme_header_show_headline')): ?>
        <?php $headline = theme_get_option('theme_'.(is_single()?'single':'posts').'_headline_tag'); ?>
        <<?php echo $headline; ?> class="theme-logo-name"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></<?php echo $headline; ?>>
        <?php endif; ?>
        <?php if(theme_get_option('theme_header_show_slogan')): ?>
        <?php $slogan = theme_get_option('theme_'.(is_single()?'single':'posts').'_slogan_tag'); ?>
        <<?php echo $slogan; ?> class="theme-logo-text"><?php bloginfo('description'); ?></<?php echo $slogan; ?>>
        <?php endif; ?>
    </div>
    </div>

Voici la partie liée du fichier options.php:

$header_styles_options = array(
  'style1'        =>  __('Style 1', THEME_NS),
  'style2'        =>  __('Style 2', THEME_NS),
  'style3'        =>  __('Style 3', THEME_NS),
);

array(
  'id'    =>  'theme_style_options',
  'name'  =>  __('Theme styles', THEME_NS),
  'type'  =>  'select',
  'options'   =>  $header_styles_options
  ),
);

Donc, si je sélectionne "Style 1" et que je sauvegarde les options, la couleur de l'en-tête est modifiée lorsque je vais sur le site.

phpcustomizationadmincsstheme-options
1
Potatohead

Non recommandé

  <?php if(theme_get_option('theme_style_options') == 'style1'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style1.css" />
    <?php elseif(theme_get_option('theme_style_options') == 'style2'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style2.css" />
    <?php elseif(theme_get_option('theme_style_options') == 'style3'): ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style3.css" />
    <?php endif;?>

OR

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/<?php echo theme_get_option('theme_style_options');?>.css" />

Utilisez le style de mise en file d'attente wp à la place

function my_theme_styles(){ 
    $style = theme_get_option('theme_style_options');
    wp_register_style( 'custom-style', get_template_directory_uri() . '/css/'.$style);

    // enqueing:
    wp_enqueue_style( 'custom-style' );
}
add_action('wp_print_styles', 'my_theme_styles');
1
Gembel Intelek

Je pense que l'utilisation d'un grand nombre de fichiers CSS rend la maintenance difficile, principalement lorsque vous avez un seul fichier avec Responsive Design. De plus, avoir un fichier contenant les bases, puis un autre avec des couleurs différentes, n’est pas une bonne chose, car il crée plus de requêtes sur le serveur; une seule requête suffirait.

Dans ce cas, ma solution:

Utilisez wp_enqueue_style dans functions.php pour insérer votre feuille de style CSS. Supprimez le style que vous souhaitez rendre variable, par exemple:

body{/*color:blue*/}

Dans votre fichier header.php:

<style type="text/css">
body{color:<?php echo get_option('option_id', 'blue'); ?>}
</style>

Et oui, utiliser du code CSS en dehors d'une feuille de style CSS n'est pas parfait, mais cela ne générera qu'une requête au serveur. Ça vaut la peine.

0
Gerard