如何通过ACF值强制动态CSS在页面加载时更新?

时间:2020-10-17 作者:rconrad41

我正在尝试通过ACF颜色选择器将滚动帖子的背景颜色动态更改为帖子选项中设置的颜色。在本地开发时,我能够提供足够的代码示例使其正常工作(我认为),但现在我已经将其移动到了真正的服务器上,它的功能就不同了。

Problem: 颜色的改变在我看到的第一篇文章上起作用,但当我转到另一篇文章时,应该显示(或更改为)的背景色与第一篇文章相同。要使其显示正确的颜色,唯一的方法是进行硬刷新。

Test it 通过查看这两个页面。你会注意到,当你滚动时,它们在页面的顶部和底部都有相同的颜色(颜色再次改变)。但做一次艰难的刷新将改变这一点。(第一个链接应为桃色背景,第二个链接为蓝色)。https://www.conrad-design.com/dev/cd2020/projects/blush-salon-spa-website-design/https://www.conrad-design.com/dev/cd2020/projects/pantel-business-systems-website-design/

Here\'s how I have it set up so far:

JS for color changing on scroll effect:

jQuery(document).ready(function($) {
    
    $(window).scroll(function() {

  var $window = $(window),
      $body = $(\'body\'),
      $panel = $(\'.panel\');

  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);

    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\\s)color-\\S+/g) || []).join(\' \');
      });

      $body.addClass(\'color-\' + $(this).data(\'color\'));
    }
  });    
  
}).scroll();
    
});

It\'s enqueued like this in my functions.php file:

add_action( \'wp_enqueue_scripts\', \'add_my_script\' );
function add_my_script() {
    wp_register_script(
       \'child-theme-script\', 
       get_stylesheet_directory_uri() . \'/js/cdscripts.js\', 
       array(\'jquery\') 
    );

    wp_enqueue_script(\'child-theme-script\');
}
.color-accent {
  background-color:<?php the_field(\'accent-color\');?> !important;
}
.color-initial {
  background-color:<?php the_field(\'initial-color\');?> !important;
}

Function to convert PHP to CSS and enqueue it:

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . \'/inc/custom-styles.php\';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . \'/inc/custom-styles.css\', $css, LOCK_EX); // Save it as a css file
    
    wp_enqueue_style( \'custom-styles\', get_stylesheet_directory_uri() . \'/inc/custom-styles.css\' );
}
add_action( \'wp_enqueue_scripts\', \'generate_options_css\' );
在帖子模板中,当滚动到我想更改背景颜色的部分时,它们会被指定为;“面板”;类别和数据颜色=“”;XXXXXXX“;值取决于我要使用的ACF颜色。

我是否有其他方法来实现这一点,强制为每个页面/帖子加载新的CSS值?

1 个回复
SO网友:rconrad41

根据Tony的建议,在CSS版本中添加一个随机字符串就成功了。这是我用来做这件事的代码。

首先,此代码生成随机数。

// get theme version
function cd_get_version() {
    $theme_data = wp_get_theme();
    return $theme_data->Version;
}
$theme_version = cd_get_version();
global $theme_version;

// get random number
function cd_get_random() {
    $randomizr = \'-\' . rand(100,999);
    return $randomizr;
}
$random_number = cd_get_random();
global $random_number;
这个更新的代码将随机数添加到动态CSS文件中。

function generate_options_css() {
    ob_start(); // Capture all output into buffer
    require_once dirname( __FILE__ ) . \'/inc/custom-styles.php\';
    $css = ob_get_clean(); // Store output in a variable, then flush the buffer
    file_put_contents(dirname( __FILE__ ) . \'/inc/custom-styles.css\', $css, LOCK_EX); // Save it as a css file
    
    global $theme_version, $random_number;
    if (!is_admin()) {
        wp_register_style(\'custom_styles\', get_stylesheet_directory_uri() . \'/inc/custom-styles.css\', false, $theme_version . $random_number);
        wp_enqueue_style(\'custom_styles\');
    }
}
add_action( \'wp_print_styles\', \'generate_options_css\' );