在自定义css中使用元数据

Question

我正在修改Wordpress主题，并希望添加自定义字段以将颜色代码添加到css中。 （请注意，我使用的是高级自定义字段）

目前我已经创建了custom.php

<?php

header("Content-type: text/css");
$color = get_field('color_code');

?>

.container {
  background: <?php echo $color; ?>;
}

模板中加载的内容如下：

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/custom.php">

问题是custom.php不能使用get_field（），我相信这是因为它与当前页面无关。

有人知道使用这些自定义字段注入CSS的方法吗？

BR / Henric

Answer 1

如果您已经将样式表排入队列，则可以使用wp_add_inline_style()，它会在排队样式之后添加样式。在functions.php：

add_action( 'wp_enqueue_scripts', function(){   
    wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/my-style.css' );
    $color = get_field('color_code');
    if( $color ) {
        $custom_css = ".singular .entry-title{ color: $color; }";
        wp_add_inline_style( 'custom', $custom_css );
    }
}, 11 );

my-style.css：

.singular .entry-title {
    color:#998F56;
}

如果帖子中设置了字段color_code：

，则打印此选项

---

另一种选择是使用wp_head手动打印，然后在</head>标记之前打印：

add_action( 'wp_head', function(){   
    $color = get_field('title_color');
    if( $color ) {
        echo "<style>.singular .entry-title{ color: $color; }</style>";
    }
}, 11 );