高级自定义字段 (ACF) css

Question

我一直在尝试找出如何从 ACF 添加 PHP 来为 CSS 中的一些文本设置样式。使用：https://www.advancedcustomfields.com/resources/color-picker/

.special-color {
    background-color: <?php the_field('color'); ?>;
}

Answer 1

要将 php 回显到可行的 CSS，您必须在网站的 php 部分中包含 CSS（或者更高级的东西，可能使用 functions.php)。如果您只需添加：

，这将起作用

<style>
 .special-color {
  background-color: <?php the_field('color'); ?>;
 }
</style>

..到（比如说）循环内的 single.php 文件。

顺便说一句，我认为这不是更改网站颜色的可行方法（如果这是您想要做的？），但更像是一种（比方说）为网站指定特定颜色的方式一个 post.

的标题

那么你可能会想到包含样式INLINE（伪代码）：

<h1 style="color: <?php the_field('color'); ?>">Post title</h1>

Answer 2

只是我得到了当前 post 的 "advanced custom field" 值（对于一个元素来说是 custom_color），然后使用 JQuery 改变元素的颜色。

所以我在子主题中新建了一个js文件（custom_css.js），代码如下：

jQuery(document).ready(function($) {
    console.log(css.custom_color);
    // add dynamic css to the elements

});

那么这里是 functions.php 文件中的代码：

add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
    wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
    wp_localize_script('custom_css', 'css', array(
        'admin_url'     => admin_url(),
        'custom_color'  => get_field('custom_color', get_queried_object_id() )
    ));

}

高级自定义字段 (ACF) css

Advanced Custom Fields (ACF) css

css

wordpress

advanced-custom-fields