在开发wordpress主题或是插件时,引用JavaScript和CSS的问题经常困扰开发者,因此从现在开始,我现在可以为您提供本教程。 老实说,我没有找到关于此问题的任何新颖的好教程。
在继续阅读本指南之前,我想让您知道,您绝对不要将外部CSS和JS直接添加到WordPress模板文件(例如header.php,footer.php等)中。在某些情况下,可以使用< style>和<script>标记,但也不建议使用。
内部CSS和JavaScript文件
在这里需要详细说明-内部CSS是直接使用在HTML中<style>标记之间,内部JS是使用在<script>标记之间。WordPress有4个action hook,可用于内部CSS和JavaScript:
- wp_head –使用此hook,您可以在</head>结束标记之前添加内部CSS/JS或所需的任何内容,
- admin_head –同上,但仅适用于WordPress管理仪表盘,
- wp_footer –使用此hook,您可以在</body>标记之前添加内部CSS/JS或所需的任何内容,
- admin_footer –同上,但仅适用于WordPress管理仪表盘;
1.使用admin_head动作hook将自定义CSS添加到管理仪表盘
让我给你看一个简单的例子:
add_action( 'admin_head', 'ietheme_custom_internal_css' );
function ietheme_custom_internal_css(){
echo '<style>
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
background: #a73fe0;
}
</style>';
}
把上面的代码放在您主题的functions.php里面保存。刷新后可以得到下面的效果:
2.使用admin_footer将JavaScript添加到管理仪表盘
这段代码与前面的示例非常相似,唯一的变化是我们使用JavaScript而不是CSS:
add_action( 'admin_footer', 'ietheme_custom_internal_javascript' );
function ietheme_custom_internal_javascript(){
echo '<script>
jQuery( function( $ ) {
alert( \'hello\' );
} );
</script>';
}
需要说明的是,这种内部加入css或是js的方法已经过时了。如果你非要用。当然也可以。
外部CSS和JavaScript文件
外部CSS/JS是当文件.js或.css且不一定在您的域上时,它可以在您的域上,也可以是其它cdn上。
当必须引用一些外部CSS或JavaScript文件时,必须始终使用以下操作hook:
- wp_enqueue_scripts
- admin_enqueue_scripts–用于WordPress管理仪表盘
但这并不是全部! 您不仅可以在这些hook中打印<script>或<link>标记,还必须使用特殊功能,这是大多数开发者经常使用的列表:
wp_register_script()
/wp_register_style()
wp_deregister_script()
/wp_deregister_style()
wp_enqueue_script()
/wp_enqueue_style()
wp_localize_script()
wp_add_inline_script()
还有更多功能。 但是使用这些功能通常绰绰有余! 我将在以下示例中向您展示如何处理它们:
但是如何将文件添加到主题的HTML模板中? 当然,它将通过wp_head()和()函数自动完成,它们必须在模板文件中,然后相应地关闭</head>和</body>标记。
1.引用主要主题style.css
add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css' );
function ietheme_main_theme_css() {
wp_enqueue_script( 'ietheme-css', get_stylesheet_uri() );
}
实际上,您可以通过3种方式获取主题的style.css网址:
get_stylesheet_uri()
,get_stylesheet_directory_uri() . 'https://cdn.ietheme.com/style.css'
,get_template_directory_uri() . 'https://cdn.ietheme.com/style.css'
2.使用预注册的脚本
请打开wp-includes/js目录。 您看到那里有很多文件吗? 您可以在此处找到jQuery和一些常用的JS插件。 那是什么意思?这意味着大多数脚本已被注册,如果要使用它们,可以通过以下方式进行操作:
add_action( 'wp_enqueue_scripts', 'ietheme_include_jquery' );
function ietheme_include_jquery() {
wp_enqueue_script( 'jquery' ); // you just have to know a script handle
}
您还可以预先注册自己的脚本和样式,例如在某些主题或插件中,您可以找到此方法来实现:
add_action( 'wp_enqueue_scripts', 'ietheme_register_and_enqueue' );
function ietheme_register_and_enqueue() {
wp_register_script( 'some-script', $url );
wp_enqueue_script( 'some-script' );
}
3.依存关系
您知道样式,尤其是脚本的顺序很重要吗?因此,如果您使用的是jQuery库,则必须在其后包含.js文件。 有时CSS文件的顺序也很重要。
如果仅使用hook wp_enqueue_scripts并且所有脚本均在此处列出,则可以跳过依赖关系参数。 但是,如果您创建一个自定义插件,并且此插件需要jQuery库,则必须这样做。
add_action( 'wp_enqueue_scripts', 'ietheme_custom_js_with_dependency' );
function ietheme_custom_js_with_dependency() {
wp_enqueue_script(
'script-2',
plugin_dir_url( __FILE__ ) . 'assets/script.js',
array( 'jquery', 'script-1' )
);
}
因此,hook优先级是什么,在插件或主题文件中使用此代码都没有关系–在所有情况下,只有在jquery和script-1之后,script-2才会添加到HTML文档中。
4.防止缓存CSS和JavaScript文件
add_action( 'wp_enqueue_scripts', 'ietheme_main_theme_css_cache_refresh' );
function ietheme_main_theme_css_cache_refresh() {
wp_enqueue_style(
'ietheme-css',
get_stylesheet_uri(),
array(),
filemtime( dirname( __FILE__ ) . 'https://cdn.ietheme.com/style.css' )
);
}
add_action( 'wp_enqueue_scripts', 'ietheme_plugin_javascript_cache_refresh' );
function ietheme_plugin_javascript_cache_refresh() {
wp_enqueue_script(
'ietheme-plugin-js',
plugin_dir_url( __FILE__ ) . 'assets/script.js', // no slashes
array( 'jquery' ),
filemtime( dirname( __FILE__ ) . 'https://cdn.ietheme.com/assets/script.js )
);
}
我们有两种方法可以防止永远永久地缓存包含的CSS和JavaScript文件:
- time()–返回自1970年以来的当前时间(以秒为单位)。因此,每一秒都有一个不同的值,
- filemtime()–返回上次修改该文件的时间(以秒为单位)。
我们可以将此参数设置为null以完全删除查询字符串,因为默认情况下它将显示WordPress安装的当前版本!
5.将jQuery从页眉移动到页脚
如果您曾经使用Google PageSpeed扫描过您的网站,您就会知道,它始终建议您在关闭</body>标记之前将所有JavaScript甚至CSS文件移动到网站页脚。 以我的经验,我可以说,这对网站性能而言并不重要。 但是有时将jQuery和您自定义的.js文件移动到网站页脚可能是个好办法,只是你可以获得高分的谷歌测速。
add_action( 'wp_enqueue_scripts', 'ietheme_jquery_in_footer' );
function ietheme_jquery_in_footer() {
wp_deregister_script( 'jquery' );
wp_register_script(
'jquery',
includes_url( 'https://cdn.ietheme.com/js/jquery/jquery.js' ),
false, // no dependencies
NULL, // no version to show
true // in footer? yes
);
wp_enqueue_script( 'jquery' );
}
具体使用方法请看上面代码片段的注释。
6.如何仅在特定页面上添加脚本
使用条件标签为ON。 您可以在此处找到官方WordPress文档中的标签列表。
add_action( 'wp_enqueue_scripts', 'ietheme_js_for_homepage_only' );
function ietheme_js_for_homepage_only() {
if( is_front_page() ) { // if on a website homepage
wp_enqueue_script( 'homepage-js', $url, 'jquery', null, true );
}
}
这就是基本教程的全部内容,如有任何疑问,欢迎在下面发表评论。
本文已在Ie主题由99839发布
文章来源:https://ietheme.com/include-css-and-javascript.html