WordPress主题通过function.php来加载js和css文件

WordPress主题通过function.php来加载js和css文件

243
2021-03-08 13:55:59

WordPress主题开发的时候可以直接将需要的js或css写在head标签中,但是现在已经不主张这种加载方式了,现在WordPress主题通过function.php来加载js和css文件。
WordPress主题通过function.php来加载js和css文件 (https://www.wpmee.com/) WordPress使用教程 第1张
基本架构

//加载css及js

function wpdie_add_scripts() {

wp_enqueue_style('style', get_template_directory_uri() . '/style.css');

$jq = get_template_directory_uri() . '/js/jquery.min.js';

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', $jq );

wp_enqueue_script( 'jquery' );

//在文章页加载prism.css

if(is_single()){

wp_enqueue_style('prism', get_template_directory_uri() . '/css/prism.css');

}

//在底部加载js,注意true。留空就在头部

wp_register_script( 'aosjs', get_template_directory_uri() . '/js/aos.js', array('jquery'), '' );

wp_enqueue_script( 'aosjs',false,array(),'',true );

wp_enqueue_style('fa', get_template_directory_uri() . '/css/font-awesome/font-awesome.css');

}

add_action('wp_enqueue_scripts', 'wpdie_add_scripts'); ​

有两种常用的 add_action 钩子可以加载 脚本和CSS到WordPress:

init: 确保始终为您的网站头部加载脚本和CSS(如果使用home.php,index.php或一个模板文件),以及其他“前端”文章、页面和模板样式。

wp_enqueue_scripts:“适当”的钩子方法,并不总是有效的,根据你的WordPress设置。

注意事项

使用这种方式加载css和js时,你会发现每个文件后面都暴露了你所使用的wordpress程序版本号。讲道理,这个东西为了安全是需要屏蔽掉的。看方法:

function wpdie_remove_cssjs_ver( $src ) {

if( strpos( $src, 'ver=' ) )

$src = remove_query_arg( 'ver', $src );

return $src;

}

add_filter( 'style_loader_src', 'wpdie_remove_cssjs_ver', 999 );

add_filter( 'script_loader_src', 'wpdie_remove_cssjs_ver', 999 );

通过如上代码,不仅将css和js正确加载了。

除此之外,你还需要注意的是,这种方法需要你的head标签里包括<?php wp_head();?>,底部的body尾标签前有 <?php wp_footer(); ?> 这样的函数才可以哦。

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持
成为会员