使用高级自定义字段控制CSS悬停颜色

时间:2013-04-20 作者:gil hamer

这对我来说有点挑战:我正在使用Advanced Custom Field 在我的网站上添加插件,为我的每个分类法创建不同的颜色方案。

我创建了一个名为taxonomy_color 并发出这样的回声:

<h4 style="color: <?php the_field(\'taxonomy_color\', \'magazine_\'. $tax_term->term_id); ?>;">Hello</h4>

* magazine_ is the name of my taxonomy.

这是相当容易的,它工作得很完美,然而,当我想改变我的hoveractive 我也是。

由于更改悬停和/或活动状态需要引用样式表,我正在考虑创建一个动态样式表,名为:style.php尝试将自定义字段传递到该样式表并使用此方法将允许我控制悬停和活动状态。

这是我为style.php:

<?php
    header("Content-type: text/css; charset: UTF-8");
?>
.slider-mag-template .bottom .nav li.activeSlide a,.slider-mag-template .bottom .nav li a:hover { color: <?php the_field(\'taxonomy_color\', \'magazine_\'. $tax_term->term_id); ?>;}
我可以在站点中看到该页面与我的动态样式相连接。php,但它不读取字段taxonomy_color 从那里开始。

有人能建议吗?甚至使用不同的方法?

非常感谢

2 个回复
SO网友:Mihai Papuc

style.php 无法访问WP变量、循环等。如果您想这样做,您需要至少重复主页上使用的一些查询,并且您还需要为浏览器添加一个新的请求,因为您有单独的文件。

我宁愿根据颜色生成一个类,将其用于标题,然后在同一页面中以<style> 标记:

<?php
$colors = array(
  0 =>  the_field(\'taxonomy_color\', \'magazine_\'. $tax_term->term_id),
  \'hover\' =>  the_field(\'taxonomy_hover\', \'magazine_\'. $tax_term->term_id),
  \'active\' =>  the_field(\'taxonomy_active\', \'magazine_\'. $tax_term->term_id),
);
//get an unique class name with the allowed syntax - eg: _0000FF_000099_FF0000
$class = \'_\' + str_replace(\'#\',\'\', implode(\'_\', $colors));
//create the CSS code 
$style = \'\';
foreach ( $colors as $key => $color ) {
  $style .= \'a.\' . $class;
  if ( $key > 0 ) { $style .= \':\' . $key; }
  $style .= \'{ color: \' . $color . \';}\';
}
?>
<h4 class="<?= $class ?>">Hello</h4>
...
<!-- before the end of the page -->
<style><?= $style ?></style>
此代码适用于命名颜色或十六进制值。如果还希望使用RGB和或RGBA,则在计算类名时还应删除/替换以下字符:“(“,”),”和“,”。如果使用循环,还应存储每个$style 在数组中设置值,并在末尾以单个<style>...</style> 加成

SO网友:ArleyM

我认为the_field 功能只会让您走到这一步。你可以用WordPressget_post_meta function 只获取分类名称,并将其用于样式表。

<?php if ( get_post_meta(get_the_ID(), \'term_id\', true) ) : // I think the custom field is called Term ID ?>

    <link rel="stylesheet" href="<?php bloginfo(\'template_directory\'); ?>/css/<?php echo( get_post_meta(get_the_ID(), \'term_id\', true) ); ?>">

<?php endif; ?>

结束