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

WordPress主题开发的时候可以直接将需要的js或css写在head标签中，但是现在已经不主张这种加载方式了，现在WordPress主题通过function.php来加载js和css文件。

基本架构

//加载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(); ?> 这样的函数才可以哦。