首页 > 解决方案 > 将附加的 css 动态保存在单独的文件中 - Wordpress

问题描述

当我们在 WordPress 中自定义页面时,它会在左侧面板中显示附加 CSS 选项,通过点击“保存并发布”按钮保存自定义程序设置。这也保存了我们在 Additional CSS 部分中添加的自定义 CSS,此自定义添加的 CSS 放置在前端的 HTML 头部部分中,以便可以将更改应用到前端。(可以通过从前端查看源代码来检查。)

我的任务是,

  1. 将此 CSS 动态保存在上传文件夹中的文件中
  2. 从文件中渲染自定义 CSS。(这只是在上面的第一步中动态生成的。)
  3. 从 HTML 头部部分中删除它。否则,自定义 CSS 将被渲染两次。

但实际上它将整个 CSS 保存在数据库中,请有人建议一些代码来执行此操作吗?谢谢

这是一个屏幕截图

在此处输入图像描述

标签: phpwordpress

解决方案


function my_custom_css() {
$upload_dir = wp_upload_dir(); 
$base_dir = wp_get_upload_dir(); 
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) :
$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';

$file = file_put_contents($upload_dir['basedir']."/new-style-function.css", strip_tags( $styles ) );
move_uploaded_file($file, $upload_dir['baseurl']);

endif;
}

add_action( 'save_post', 'my_custom_css' );

$upload_path = wp_upload_dir(); 
wp_enqueue_style ('custom-style',$upload_path['baseurl'] .'/new-style-function.css');



remove_action('wp_head', 'wp_custom_css_cb', 101);

推荐阅读