在我的Wordpress主题中,我一直在使用一个排队脚本函数,该函数将我的jQuery脚本和样式表添加到我的网站中。因为我有一个单独的页面模板和我的标准page.php,所以我一直在使用下面代码中写的"if"answers"else"命令来区分这两个样式表。
<?php
/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function mywebsite_scripts() {
/* JAVASCRIPT ----------- */
wp_enqueue_script(
'mywebsite_scripts-menu-toggle',
get_template_directory_uri() . '/js/menu-toggle.js' );
wp_enqueue_script(
'mywebsite_scripts-add-submenu',
get_template_directory_uri() . '/js/add-submenu.js' );
wp_enqueue_script(
'mywebsite_scripts-upanddown',
get_template_directory_uri() . '/js/upanddown.js' );
/* END JAVASCRIPT ----------- */
/* PAGE TEMPLATE STYLESHEETS ----------- */
if (is_page_template('page-templates/full-page.php'))
{ wp_enqueue_style( 'mywebsite_scripts-full-page' ,
get_template_directory_uri() . '/css/full-page.css'); }
/* END PAGE TEMPLATE STYLESHEETS ----------- */
/* MAIN STYLESHEET ----------- */
else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() ); } }
/* END MAIN STYLESHEET ----------- */
add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );
/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
当我开始尝试使我的主题与早期版本的Internet Explorer兼容时,我遵循了以下教程:https://gist.github.com/wpscholar/4947518
当我把它添加到函数文件夹时,这段代码就可以工作了,但不允许使用我需要的javascript队列或额外的页面模板样式表。
<?php
function enqueue_my_styles()
{
global $wp_styles;
// LOAD THE MAIN STYLESHEET
wp_enqueue_style('mywebsite_scripts_style', get_stylesheet_uri());
wp_enqueue_style('mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array(
'mywebsite_scripts_style'
));
$wp_styles->add_data('mywebsite_scripts_style_ie8', 'conditional', 'IE 8');
wp_enqueue_style('mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array(
'mywebsite_scripts_style'
));
$wp_styles->add_data('mywebsite_scripts_style_ie9', 'conditional', 'IE 9');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');
我试着把这两个代码结合起来,最后得到了下面的代码。虽然它没有给我任何PHP错误,但它没有加载IE样式表,而且似乎只是恢复到上面的第一段代码。有人能帮我指出我做错了什么吗?我想通过组合这些代码来实现的是能够为多个页面模板添加样式表,并且还具有依赖于IE的样式表,这些样式表继承了我的style.css中的样式,并且只覆盖在旧浏览器上工作所需的css规则。我也需要我的Javascript来工作。
我希望这一切都是可能的,任何帮助都将不胜感激,因为我已经尽了最大努力让它发挥作用,我不确定我哪里出了问题。
/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function mywebsite_scripts_scripts() {
/* JAVASCRIPT ----------- */
wp_enqueue_script(
'mywebsite_scripts-menu-toggle',
get_template_directory_uri() . '/js/menu-toggle.js' );
wp_enqueue_script(
'mywebsite_scripts-add-submenu',
get_template_directory_uri() . '/js/add-submenu.js' );
wp_enqueue_script(
'mywebsite_scripts-upanddown',
get_template_directory_uri() . '/js/upanddown.js' );
/* END JAVASCRIPT ----------- */
/* PAGE TEMPLATE STYLESHEETS ----------- */
if (is_page_template('page-templates/full-page.php'))
{ wp_enqueue_style( 'mywebsite_scripts-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
wp_enqueue_style( 'mywebsite_scripts-full-page_ie', get_stylesheet_directory_uri() . '/css/full-page-ie8.css',
array( 'mywebsite_scripts-full-page' ) ); $wp_styles->add_data( 'mywebsite_scripts-full-page_ie', 'conditional', 'IE 8' );
}
/* END PAGE TEMPLATE STYLESHEETS ----------- */
/* MAIN STYLESHEET ----------- */
else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );
wp_enqueue_style( 'mywebsite_scripts_style_ie8’, get_stylesheet_directory_uri() . '/css/ie8.css',
array( 'mywebsite_scripts_style' ) ); $wp_styles->add_data( 'mywebsite_scripts_style_ie8’, 'conditional', 'IE 8' );
} }
/* END MAIN STYLESHEET ----------- */
add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );
/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
***更新
<?php
/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function mywebsite_scripts_scripts() {
/* JAVASCRIPT ----------- */
wp_enqueue_script(
'mywebsite_scripts-menu-toggle',
get_template_directory_uri() . '/js/menu-toggle.js' );
wp_enqueue_script(
'mywebsite_scripts-add-submenu',
get_template_directory_uri() . '/js/add-submenu.js' );
wp_enqueue_script(
'mywebsite_scripts-upanddown',
get_template_directory_uri() . '/js/upanddown.js' );
/* END JAVASCRIPT ----------- */
if (is_page_template('page-templates/full-page.php'))
{ wp_enqueue_style( 'mywebsite_scripts-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );
wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css',
array( 'mywebsite_scripts_style' ) );
wp_style_add_data( 'mywebsite_scripts-style_ie9', 'conditional', 'IE 9' );
} }
add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );
***更新
好的,我已经设法让它工作了,但只使用了第一个使用全局样式的方法。我仍然不确定为什么更新的版本不起作用。
/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function mywebsite_scripts_scripts() {
/* JAVASCRIPT ----------- */
wp_enqueue_script(
'mywebsite_scripts-menu-toggle',
get_template_directory_uri() . '/js/menu-toggle.js' );
wp_enqueue_script(
'mywebsite_scripts-add-submenu',
get_template_directory_uri() . '/js/add-submenu.js' );
wp_enqueue_script(
'mywebsite_scripts-upanddown',
get_template_directory_uri() . '/js/upanddown.js' );
/* END JAVASCRIPT ----------- */
/* PAGE TEMPLATE STYLESHEETS ----------- */
global $wp_styles;
if (is_page_template('page-templates/full-page.php'))
{ wp_enqueue_style( 'mywebsite_scripts-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
/* END PAGE TEMPLATE STYLESHEETS ----------- */
/* MAIN STYLESHEET ----------- */
else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );
wp_enqueue_style( 'mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array( 'mywebsite_scripts_style' ) );
$wp_styles->add_data( 'mywebsite_scripts_style_ie8', 'conditional', 'IE 8' );
wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array( 'mywebsite_scripts_style' ) );
$wp_styles->add_data( 'mywebsite_scripts_style_ie9', 'conditional', 'IE 9' );
} }
/* END MAIN STYLESHEET ----------- */
add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );
/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
对于IE条件样式表
将脚本排入队列后,可以使用以下命令:
wp_style_add_data( 'ie-theme', 'conditional', 'IE' );
因此,对于上面的示例,假设您有一个脚本,它按照如下方式排队。
wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css" );
您可以在排队后添加以上内容,即使完整声明出现的主题:
wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css" );
wp_style_add_data( 'ie-theme', 'conditional', 'IE' );
看起来你读了要点的顶部,但没有往下读。作为WordPress的最新版本,有一个更新,你应该使用wp_style_add_data()
函数,而不是$wp_styles->add_data();
示例
模板特定样式
要对单个模板的样式表进行排队,您需要将wp_enque_style方法包装在check 中
if ( is_page( 'landing-page-template-one' ) ) {
/** Call landing-page-template-one enqueue */
}
请参阅此堆栈交换问题以获取参考