web-dev-qa-db-ja.com

CSSにリンクしている管理パネル機能のボックスを選択

Selectboxを私のCSSにリンクしたいです。

リストの項目をクリックした場合と同様に、ヘッダーの背景が変わります。ヘッダーの色はCSSにあります。

選択ボックスはhtmlにはありませんが、テーマファイルのoptions.phpにあり、部分的にはfunctions.phpファイルにあります。

だからここで重要なのは、selectboxをクリックすると3つの名前が表示され、それをクリックして保存すると色がその「テーマスタイル」に変わるはずです。

どのようにこれを成し遂げるためのアイデアがありますか？

これは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>

これは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
  ),
);

だから私が "Style 1"を選択してオプションを保存すると、サイトに行くとヘッダの色が変わる。

phpcustomizationadmincsstheme-options
1
Potatohead

お勧めしません

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

代わりに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

CSSファイルを大量に使用すると、主にレスポンシブデザインのファイルが1つある場合、管理が困難になると思います。また、1つのファイルのみを作成してから別の色のファイルを作成するのは、1つの要求を作成するだけで十分な場合は、サーバーへの要求が増えるため、好ましくありません。

その場合は、私の解決策：

CSSスタイルシートを挿入するには、functions.phpでwp_enqueue_styleを使用してください。可変にするスタイルを削除します。次に例を示します。

body{/*color:blue*/}

Header.phpファイルでは、

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

そして、はい、CSSスタイルシートからCSSコードを使用することは完璧ではありませんが、それはサーバーへのリクエストを1つだけ生成します。それは価値がある。

0
Gerard