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(); ?> 這樣的函數才可以哦。

總結

以上是生活随笔為你收集整理的wordpress home.php,WordPress主题通过function.php来加载js和css文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。