我有一個wordpress主題,它用php創建的css代碼動態地注入到我的wordpress站點的html head部分。
實際的css代碼被定義為一個字符串變量,不同的css樣式信息被依次附加到這個變量上。這一切都嵌套在一個函數中,該函數通過wp_head鉤子加載到head部分,如下所示:
function dynamic_css() {
$header_options = get_option( 'header_opt' );
/*... more code here ...*/
$css = '<style>';
$css .= '.logo {
max-width:'. $header_options['logo_width'] .'px;
}';
$css .= '.header-center > .center-max-width {
height:'. $header_options['center_height'] .'px;
}';
/*... more code here ...*/
$css .= '</style>';
echo '' . $css;
}
add_action( 'wp_head', 'dynamic_css' );
我寧愿將這個動態css文件作為額外的樣式表加載,而不是在我的head部分中包含內聯代碼。 在兩次關于動態css的stackoverflow討論的幫助下([this][1]和[this][2]),我試圖修改現有的腳本,以便可以通過我的functions.php中的wp_enqueue_style鉤子將它作為css樣式表加載。dynamic_css.php如下所示:
header("Content-type: text/css; charset: UTF-8");
function dynamic_css() {
$header_options = get_option( 'header_opt' );
/*... more code here ...*/
$css = '.logo {
max-width:'. $header_options['logo_width'] .'px;
}';
$css .= '.header-center > .center-max-width {
height:'. $header_options['center_height'] .'px;
}';
/*... more code here ...*/
echo $css;
}
dynamic_css();
以及functions.php中的鉤子:
function my_theme_enqueue_styles() {
wp_enqueue_style( 'dynamic_style', get_stylesheet_directory_uri() . '/dynamic_css.php');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
不幸的是,這不起作用,我不知道為什么。沒有錯誤消息,并且在source.html中文件被正確列出。
<link rel='stylesheet' id='dynamic_style-css' href='...website_url.../dynamic_css.php?ver=...' type='text/css' media='all' />
但是,css樣式信息不會加載并應用到站點。對我來說,php文件似乎沒有被執行。我不明白為什么將樣式信息轉換成一個變量并直接將這個變量回顯到html head部分可以,但將它作為樣式表加載卻不行。
感謝任何提示和幫助!
這 [1]:用PHP實現動態CSS 【2】:如何使用php生成css?
也許可以這樣做:
function dynamic_css() {
$header_options = get_option( 'header_opt' );
/*... more code here ...*/
$css = '.logo {
max-width:'. $header_options['logo_width'] .'px;
}';
$css .= '.header-center > .center-max-width {
height:'. $header_options['center_height'] .'px;
}';
/*... more code here ...*/
$css_file_path = get_stylesheet_directory() . '/dynamic.css';
// Write the dynamic CSS to the file, replacing existing content
file_put_contents($css_file_path, $css);
}
然后:
function my_theme_enqueue_styles() {
dynamic_css();
wp_enqueue_style( 'dynamic_style', get_stylesheet_directory_uri() . '/dynamic.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');