it-swarm.com.de

Wählen Sie im Admin-Panel die Option Box, um eine Verknüpfung zu CSS herzustellen

Ich möchte die Selectbox mit meinem CSS verknüpfen.

Wenn ich auf ein Element in der Liste klicke, ändert sich der Hintergrund meines Headers - die Farbe des Headers ist im CSS.

Die Auswahlbox befindet sich nicht im HTML-Code, sondern im options.php in der Designdatei und teilweise in der functions.php-Datei.

Der Punkt hier ist also, dass, wenn ich auf das Auswahlfeld klicke, 3 Namen angezeigt werden. Wenn ich auf einen klicke und ihn speichere, sollte die Farbe in diesen "Designstil" geändert werden.

Hat jemand eine Idee, wie man das hinbekommt?

Dies ist der zugehörige Teil der Datei 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>

Dies ist der zugehörige Teil der Datei 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
  ),
);

Wenn ich also "Stil 1" auswähle und die Optionen speichere, ändert sich beim Aufrufen der Website die Farbe der Kopfzeile.

1
Potatohead

Nicht empfohlen

  <?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" />

Verwenden Sie stattdessen wp enqueue style

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

Ich denke, dass es schwierig ist, eine Vielzahl von CSS-Dateien zu verwenden, vor allem, wenn Sie eine Datei mit dem Responsive Design haben. Außerdem ist es nicht gut, eine Datei mit den Grundlagen und dann eine andere Datei mit anderen Farben zu haben, da dadurch mehr Anforderungen an den Server gesendet werden, wenn nur eine Anforderung ausreicht.

In diesem Fall meine Lösung:

Verwenden Sie wp_enqueue_style in functions.php, um Ihr CSS-Stylesheet einzufügen. Entfernen Sie den Stil, den Sie variabel machen möchten, zum Beispiel:

body{/*color:blue*/}

In deiner header.php Datei:

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

Und ja, die Verwendung von CSS-Code aus einem CSS-Stylesheet ist nicht perfekt, generiert jedoch nur eine Anfrage an den Server. Es lohnt sich.

0
Gerard