詳解WordPress主題開發(fā)中添加CSS樣式和Javascript腳本

在這篇文章中，將和大家分享如果以正確的方式在WordPress主題中引入css樣式和Javascript。 如果你以前沒有使用Wordpress來創(chuàng)建過網(wǎng)站，你可能習(xí)慣于使用 <link href = “”> 和 <script src = “”>  標(biāo)簽。雖然這些標(biāo)簽可以直接插入到主題中，但這是WordPress開發(fā)中的“壞習(xí)慣”。

WordPress 通過wp_enqueue_style()和wp_enqueue_script()函數(shù)來通過自己的特定方式來處理CSS樣式和Javascript 。

使用WordPress的方式來添加CSS和Javascript可能代碼量多一些，但是與直接使用標(biāo)簽相比，它具有一些真正的優(yōu)勢，例如代碼的可重用性，基本的依賴項管理以及以下事實：如果正確插入Css樣式和Javascript ，插件可以出于各種目的（如壓縮和合并）對其進(jìn)行控制。

讓我們開始來學(xué)習(xí)WordPress的方式吧！

在WordPress主題中添加CSS樣式

要添加樣式表，我們首先要通過鉤子來添加到WordPress。如果您想了解有關(guān)WordPress 鉤子的所有細(xì)節(jié)，可以看下我們之前分享的教程：

• 50個 WordPress 動作掛鉤
• 50個 WordPress 過濾鉤子

總之……掛鉤就像在烹飪過程中的某個特定時刻要求廚師打電話給你。例如，當(dāng)他需要在湯中添加蔬菜時，叫他打電話給你，這樣你就可以添加自己喜歡的蔬菜了。在我們的例子中，WordPress 正在編寫網(wǎng)頁，我們希望在它需要收集樣式和腳本（enqueue_scripts）時來聯(lián)系我們，以便我們可以添加自己的樣式和腳本。

掛載到 WordPress

將以下代碼添加到主題的functions.php中

<?php
/* Add a action to enqueue styles */
function my_theme_enqueue_styles()
{
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

你可以使用 Filter 過濾鉤子或 Action 動作鉤子來連接WordPress。 Filter 過濾鉤子使你可以更改某些內(nèi)容（我們將在稍后進(jìn)行介紹），而 Action 動作鉤子使你可以執(zhí)行某些操作。在我們的例子中，我們需要做一些事情（添加樣式），因此我們使用 add_action()函數(shù)向wp_enqueue_scripts鉤子添加一個動作，并注冊回調(diào)函數(shù)my_theme_enqueue_styles()，該回調(diào)函數(shù)將在從你的主題中收集Css樣式或Javascript時執(zhí)行。

add_action() 函數(shù)需要以下4 個參數(shù)：

• $tag:  用于掛載回調(diào)函數(shù)的動作鉤子的名稱
• $function_to_add:  你希望被調(diào)用的回調(diào)函數(shù)的名稱
• $priority:  用于指定執(zhí)行與特定操作關(guān)聯(lián)的功能的順序
• $accepted_args:  回調(diào)函數(shù)接受的參數(shù)數(shù)量

請注意，在這種情況下，我們不需要最后兩個參數(shù)，因此我們不會傳遞它們，但是稍后我們將介紹它們。

為了避免名稱沖突，最好在函數(shù)名稱前加上主題名稱。因此，如果你的主題稱為“personal-theme”，則將上述回調(diào)函數(shù)重命名為“ personal_theme_enqueue_styles ”，并相應(yīng)地在add_action()函數(shù)中更改名稱。

這段代碼并不會做太多，所以讓我們開始添加樣式表。作為本教程的示例，我將添加PureCss框架。您可以將其更改為Bootstrap或任何您喜歡的CSS。

引入遠(yuǎn)程CSS樣式文件

更新您的functions.php中的代碼，并從下面的第6行添加代碼：

<?php
function my_theme_enqueue_styles()
{
  /* 添加一個 purecss framework stylesheet */
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

要添加我們的樣式表文件，我們使用了 wp_enqueue_style() 函數(shù)，它接受5個參數(shù)：

• $handle:  WordPress中的每個樣式表（或腳本）都需要一個唯一的名稱，以便您（或一個插件）以后可以引用它。在這里，最好在主題名稱前添加前綴。
• $src:  樣式表的URL。這也可以是本地路徑，但我們稍后會介紹。
• $deps:  樣式表數(shù)組，用于處理該樣式表所依賴的樣式。
• $ver:  一個指定樣式表版本號的字符串，它將作為查詢字符串添加到URL中，以消除瀏覽器和CDN的緩存。
• $media:  這個樣式表的介質(zhì)類型。比如 ‘a(chǎn)ll’, ‘print’ 和 ‘screen’, 或媒體查詢，比如 ‘(orientation: portrait)’ 和 ‘(max-width: 640px)’ 。

上面的代碼會“排入/添加”新的樣式表，而WordPress會將以下鏈接標(biāo)記輸出到你的網(wǎng)頁頂部：

<link rel='stylesheet' id='my-theme-purecss-css'  type='text/css' media='screen' />

添加條件樣式表

PureCss需要兩個條件樣式表才能使其響應(yīng)網(wǎng)格起作用。一種樣式表用于Internet Explorer 8，一種樣式表用于IE8以上的任何瀏覽器

更改您的functions.php中的代碼，并將代碼添加到第8至12行。

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  /* Add conditional framework stylesheets */
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在這里，我們像之前一樣簡單地加入了兩個樣式表，但是緊接著我們通過wp_style_add_data()函數(shù)添加了條件。該函數(shù)接受三個參數(shù)：

• $handle:  樣式表的名稱/句柄
• $key:  我們要為其存儲值的數(shù)據(jù)點的名稱。 接受 ‘conditional’, ‘rtl’ , ‘suffix’, ‘a(chǎn)lt’ 和 ‘title’
• $value:  包含要添加的數(shù)據(jù)的字符串

現(xiàn)在，該代碼將在網(wǎng)頁頂部加入并輸出兩個帶有條件注釋的樣式表：

<link rel='stylesheet' id='my-theme-purecss-css'   type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'   type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'   type='text/css' media='screen' />
<![endif]-->

引入本地CSS樣式文件

要引入本地CSS文件，其實和上面基本一樣的操作，只是有一個地方不一樣。

更新您的functions.php中的代碼，并從下面的第14行添加代碼：

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
  /* 添加本地css */
  wp_enqueue_style( 'my-theme-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在這里，你看到的過程是相同的。我們再次使用wp_enqueue_style()函數(shù)，但在$src參數(shù)中使用get_template_directory_uri()函數(shù)。此函數(shù)將完整的URL返回到你主題文件夾，確保重命名主題或主題文件夾時URL不會中斷。

現(xiàn)在，代碼將在網(wǎng)頁的頭部加入并輸出額外的本地樣式表，并帶有如下所示的完整網(wǎng)址：

<link rel='stylesheet' id='my-theme-purecss-css'   type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'   type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'   type='text/css' media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles-css'   type='text/css' media='screen' />

引入內(nèi)聯(lián)CSS樣式

當(dāng)你需要添加依賴于某些wordpress設(shè)置的樣式，或者你的樣式依賴于其他數(shù)據(jù)的樣式時，可能需要添加內(nèi)聯(lián)CSS。

更新您的functions.php中的代碼，并在下面的第16至18行添加代碼：

<?php
function my_theme_enqueue_styles()
{
  wp_enqueue_style( 'my-theme-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), '1.0.0', 'screen' );
  wp_enqueue_style( 'my-theme-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( 'my-theme-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , '1.0.0' , 'screen' );
  wp_style_add_data( 'my-theme-purecss-ie9' , 'conditional' , 'gt IE 8' );
  wp_enqueue_style( 'my-theme-styles', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'screen' );
  /* 添加內(nèi)聯(lián)css樣式 */
  wp_register_style( 'my-theme-inline-css', false );
  wp_add_inline_style( 'my-theme-inline-css', '* { color: red; }' );
  wp_enqueue_style( 'my-theme-inline-css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

在這里，我們首先僅使用帶有句柄的wp_register_style()注冊樣式，因此我們可以在入隊之前向其添加數(shù)據(jù)。然后，我們添加要與wp_add_inline_style()函數(shù)內(nèi)聯(lián)的CSS 。此函數(shù)接受兩個參數(shù)：

• $handle:  要向其添加其他樣式的腳本的名稱
• $data:  包含要添加的Css的字符串

最后，我們再次使用wp_enqueue_style()函數(shù)排隊樣式，僅傳遞句柄名稱。

現(xiàn)在，該代碼將在網(wǎng)頁頂部加入并輸出內(nèi)聯(lián)樣式，如下所示：

<link rel='stylesheet' id='my-theme-purecss-css'   type='text/css' media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8-css'   type='text/css' media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9-css'   type='text/css' media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles-css'   type='text/css' media='screen' />
<style id='my-theme-inline-css-inline-css' type='text/css'>
* { color: red; }
</style>

將Javascript添加到WordPress主題

將Javascript添加到主題的過程與添加樣式非常相似，但是有一些細(xì)微的區(qū)別和額外的選擇。

再次掛載到WordPress

讓我們開始向你的functions.php添加另一個鉤子。你可以很好地使用我們剛剛用于樣式的鉤子，但是我建議您為了保持可維護(hù)性而將它們分開。

更新您的functions.php中的代碼，并將代碼從下面的第4行添加到第9行：

<?php
/* Add a hook for javascripts */
function my_theme_enqueue_scripts()
{
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在這里，我們創(chuàng)建了一個名為my_theme_enqueue_scripts() 新的回調(diào)函數(shù)，并將其注冊到wp_enqueue_scripts鉤子，就像我們對樣式所做的一樣。

同樣，這并沒有太大作用，因此讓我們添加第一個Javascript文件。

引入Javascript文件

更新您的functions.php中的代碼，并從下面的第6行添加代碼：

<?php
function my_theme_enqueue_scripts()
{
  /* 添加一個本地 javascript 文件 */
  wp_enqueue_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在這里我們沒有使用 wp_enqueue_styles()  ，而是使用 wp_enqueue_scripts()  函數(shù)，因為我們要引入的是javascript文件。

wp_enqueue_scripts() 函數(shù)接受的前4個參數(shù)和 wp_enqueue_styles() 一樣，但是第5個參數(shù)不一樣。對于css樣式，最后一個參數(shù)是 $media ，而javascript 的最后一個參數(shù)是 $in_footer ，如果設(shè)置為 true，將在頁腳加載這個javascript文件。

• $in_footer:  是否在</body>之前而不是<head> 中加載腳本。默認(rèn)為’false’

現(xiàn)在，代碼將進(jìn)入網(wǎng)頁的頁腳并在其中輸出新的Javascript標(biāo)記，如下所示：

<script type='text/javascript' src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

刪除一個Javascript文件

在某些情況下，刪除一些不必要的腳本會更好一些。例如，大多數(shù)WordPress主題都會加入jQuery庫。現(xiàn)在，如果你的主題（或插件）不需要它，則從頁面上刪除它對性能會更好。

更新您的functions.php中的代碼，并從下面的第6行添加代碼：

<?php
function my_theme_enqueue_scripts()
{
  /* 刪除 jquery */
  wp_deregister_script('jquery');
  wp_enqueue_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在這里，我們調(diào)用wp_deregister_script()函數(shù)并傳遞jquery的句柄。WordPress現(xiàn)在將從頁面中刪除jQuery庫。

將數(shù)據(jù)從php傳遞到Javascript

假設(shè)你已經(jīng)創(chuàng)建了一段Javascript，該Javascript以某種方式操作你的網(wǎng)頁，使其輸出部分界面。很好，但是如果其中一部分是您想要翻譯的某種文本怎么辦？或者，如果該腳本取決于主題的路徑怎么辦？該路徑可能會被其他人更改！

WordPress 可以使用wp_localize_script()將數(shù)據(jù)從php傳遞到Javascript 。顧名思義，此函數(shù)最初旨在傳遞可翻譯/本地化的字符串，但非常適合用于傳遞其他數(shù)據(jù)，例如路徑或主題版本。

更新n你的functions.php中的代碼，并將代碼從第8行添加到下面的16：

<?php
function my_theme_enqueue_scripts()
{
  wp_deregister_script('jquery');
  /* Pass sata from php to javascript */
  wp_register_script( 'my-theme-scripts', get_template_directory_uri() . '/public/js/app.js', array(), '1.0.0', true );
  
  $data_array = array(
    'some_string' => __( 'Some string to translate', 'textdomain' ),
    'themepath' => get_template_directory_uri()
  );
  wp_localize_script( 'my-theme-scripts', 'object_name', $data_array );
  wp_enqueue_script( 'my-theme-scripts' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

在這里，我們不再像以前那樣使用腳本，而是現(xiàn)在首先使用wp_register_script()函數(shù)對其進(jìn)行注冊。然后，我們創(chuàng)建一個名為$data_array的新數(shù)組，其中包含要傳遞的數(shù)據(jù)。在這種情況下，我們傳遞兩個值：

• some_string:  在這里，我們使用WordPress I18N功能使字符串可翻譯
• themepath:  在這里，我們從get_template_directory_uri()函數(shù)傳遞路徑到主題。

然后，我們將$data_array傳遞給wp_localize_script()函數(shù)，該函數(shù)受3個參數(shù)：

• $handle:  要將數(shù)據(jù)附加到的腳本的名稱
• $name:  將包含Javascript中數(shù)據(jù)的變量/對象的名稱。（此名稱在Javascript中必須是唯一的）。
• $data:  您希望傳遞給Javascript的數(shù)據(jù)數(shù)組。

最后，我們再次使用wp_enqueue_script()函數(shù)使腳本入隊。

上面的代碼將在網(wǎng)頁的頁腳中產(chǎn)生以下輸出：

<script type='text/javascript'>
/* <![CDATA[ */
var object_name = {"some_string":"Some string to translate","themepath":"http:\/\/example.com\/wp-content\/themes\/themename"};
/* ]]> */
</script>
<script id='my-theme-scripts' async defer src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

現(xiàn)在你可以通過如下所示的方式訪問Java腳本中傳遞的數(shù)據(jù)。

var somesting = object_name.some_string;
  
console.log( object_name.themepath );

這里的object_name變量（對象）名稱來自傳遞給wp_locatize_script()函數(shù)的$name參數(shù)。它的成員/值來自我們傳遞的$data_array數(shù)組。

更改鏈接和腳本標(biāo)簽

最近，對于在鏈接和腳本標(biāo)簽上是否確實需要type屬性，存在一些爭論。這取決于你，但是如果你希望刪除它們，或者由于其他原因（例如測試新的資源優(yōu)先級屬性）想要更改標(biāo)簽，則將以下代碼添加到functions.php中。

<?php
/* 從 link 標(biāo)簽中刪除type屬性 */
function my_theme_optimize_style_tags( $html , $handle , $href , $media )
{
  return "<link rel='stylesheet' id='{$handle}' href='{$href}' media='{$media}' />" . "\n";
}
add_filter('style_loader_tag', 'my_theme_optimize_style_tags', 10, 4);
/* 從 script 標(biāo)簽中刪除type屬性 */
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  return "<script id='{$handle}' src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>

在使用允許你執(zhí)行操作的操作之前，現(xiàn)在我們將使用允許你更改某些操作的過濾器。在這里，我們需要更改鏈接和腳本標(biāo)簽，因此我們在這里使用add_filter()函數(shù)。

add_filter() 接受4個參數(shù)，就像 add_action() 函數(shù)一樣：

• $tag:  用來掛載回調(diào)函數(shù)的鉤子的名稱
• $function_to_add:  您希望被調(diào)用的回調(diào)函數(shù)的名稱
• $priority:  用于指定執(zhí)行與特定操作關(guān)聯(lián)的功能的順序
• $accepted_args:  回調(diào)函數(shù)接受的參數(shù)數(shù)量

在上面的代碼中，我們使用add_filters()函數(shù)添加了兩個過濾器掛鉤。但是這次我們確實傳遞了最后兩個參數(shù)，因為我們需要回調(diào)函數(shù)來接受更多參數(shù)。所以在這種情況下，我們設(shè)置 $priority  為10，然后 style_loader_tag 的$accepted_args設(shè)為4，  script_loader_tag 的 $accepted_args 設(shè)為 3 。

現(xiàn)在， my_theme_optimize_style_tags()  將被所有css在引入的時候進(jìn)行調(diào)用，并且接受我們設(shè)定的 4 個參數(shù)：

• $html:  鏈接標(biāo)記的完整html
• $handle:  樣式表的句柄/名稱
• $href:  樣式表的網(wǎng)址/路徑
• $media:  此樣式表的媒體類型

在此函數(shù)中，我們需要返回$html參數(shù)的更改/過濾后的值，但是我們只想返回一個包含鏈接標(biāo)簽的新字符串，因為我們希望它由WordPress使用帶有php字符串enterpalation的傳入?yún)?shù)來輸出。

my_theme_optimize_script_tags() 將被所有javascript在引入的時候進(jìn)行調(diào)用，并且接受我們的設(shè)定的3個參數(shù)：

• $tag:  腳本標(biāo)記的完整html
• $handle:  樣式表的句柄/名稱
• $src:  樣式表的網(wǎng)址/路徑

同樣，我們需要返回更改后的$tag值，我們返回一個包含script標(biāo)簽的新字符串，因為我們希望它由WordPress輸出。

上面的代碼將更改輸出以下內(nèi)容到你的網(wǎng)頁中。

<link rel='stylesheet' id='my-theme-purecss'  media='screen' />
<!--[if lte IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie8'  media='screen' />
<![endif]-->
<!--[if gt IE 8]>
<link rel='stylesheet' id='my-theme-purecss-ie9'  media='screen' />
<![endif]-->
<link rel='stylesheet' id='my-theme-styles'  media='screen' />
<style id='my-theme-inline-css-inline-css' type='text/css'>
* { color: red; }
</style>

<script id='my-theme-scripts' src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

請注意，內(nèi)聯(lián)樣式仍然具有 type=”text/css”  屬性。我仍然需要找到解決方案。如果你知道任何信息，請讓我知道，以便我可以將其添加到本文中。

異步/延遲Javascript

異步和延遲是腳本標(biāo)記的相對較新的屬性。您可以在此處閱讀有關(guān)defer的所有內(nèi)容，并在此處進(jìn)行異步。要將它們添加到腳本標(biāo)簽中，我們需要從較早的my_theme_optimize_script_tag()函數(shù)中更改代碼，如下所示。

<?php
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  /* 添加異步延遲屬性 */
  $defer = ( $handle == 'my-theme-scripts' ) ? 'async defer' : '';
  
  return "<script id='{$handle}' {$defer} src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>

在這里，我們檢查$handle參數(shù)以查看這是否是正確的腳本，因為我們可能不想異步延遲所有JavaScript文件。如果為true，則將字符串“異步延遲”傳遞給$defer變量，如果為false，則傳遞一個空字符串。

然后，我們將$defer變量的內(nèi)容添加到返回的腳本標(biāo)簽中。

上面的代碼更改將添加 defer和async 到 my-theme-scripts 腳本標(biāo)簽中，如下所示：

<script id='my-theme-scripts' async defer src='http://example.com/wp-content/themes/themename/public/js/app.js?ver=1.0.0'></script>

使用wp_get_theme

為了使你的functions.php文件更易于維護(hù)，我建議您使用wp_get_theme()功能。該函數(shù)返回一個WP_Theme類實例，該實例包含當(dāng)前主題的 Name, ThemeURI, Description, Author, AuthorURI, Version, Template, Status, Tags, TextDomain 和 DomainPath 作為私有屬性。

返回的類實例還包含get()方法，該方法可用于從對象中獲取上述值。例如，你可以使用此代碼為句柄添加前綴，并將主題版本傳遞給wp_enqueue_style()和wp_enqueue_script()函數(shù)，如下所示：

<?php
$theme = wp_get_theme();
wp_enqueue_style( $theme->get('TextDomain') . '-styles', get_template_directory_uri() . '/style.css', array(), $theme->get('Version'), 'screen' );
wp_register_script( $theme->get('TextDomain') . '-scripts', get_template_directory_uri() . '/public/js/app.js', array(), $theme->get('Version'), true );
?>

現(xiàn)在，當(dāng)你更改主題名稱或主題版本時，將自動反映在Link和Script標(biāo)簽的輸出中。

完整的代碼

你可以在下面找到完整的代碼，可以將它用作functions.php文件的樣板。

<?php
function my_theme_enqueue_styles()
{
  $mytheme = wp_get_theme();
  
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss', 'https://unpkg.com/purecss@1.0.0/build/pure-min.css', array(), $mytheme->get('Version') , 'screen' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss-ie8' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css', array() , $mytheme->get('Version') , 'screen' );
  wp_style_add_data( $mytheme->get('TextDomain') . '-purecss-ie8' , 'conditional' , 'lte IE 8' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-purecss-ie9' , 'https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css', array() , $mytheme->get('Version') , 'screen' );
  wp_style_add_data( $mytheme->get('TextDomain') . '-purecss-ie9' , 'conditional' , 'gt IE 8' );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-styles', get_template_directory_uri() . '/style.css', array(), $mytheme->get('Version') , 'screen' );
  wp_register_style( $mytheme->get('TextDomain') . '-inline-css', false );
  wp_enqueue_style( $mytheme->get('TextDomain') . '-inline-css' );
  wp_add_inline_style( $mytheme->get('TextDomain') . '-inline-css', '* { color: red; }' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_scripts()
{
  $mytheme = wp_get_theme();
  
  wp_deregister_script('jquery');
  wp_register_script( $mytheme->get('TextDomain') . '-scripts', get_template_directory_uri() . '/public/js/app.js', array(), $mytheme->get('Version') , true );
  
  $data_array = array(
    'some_string' => __( 'Some string to translate', 'textdomain' ),
    'themepath' => get_template_directory_uri()
  );
  wp_localize_script( $mytheme->get('TextDomain') . '-scripts', 'object_name', $data_array );
  wp_enqueue_script( $mytheme->get('TextDomain') . '-scripts' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_optimize_style_tags( $html , $handle , $href , $media )
{
  return "<link rel='stylesheet' id='{$handle}' href='{$href}' media='{$media}' />" . "\n";
}
add_filter('style_loader_tag', 'my_theme_optimize_style_tags', 10, 4);
function my_theme_optimize_script_tags( $tag , $handle , $src )
{
  $defer = ( $handle == 'my-theme-scripts' ) ? 'async defer' : '';
  return "<script id='{$handle}' {$defer} src='{$src}'></script>" . "\n";
}
add_filter('script_loader_tag', 'my_theme_optimize_script_tags', 10, 3);
?>

好了，教程就到這里，如果你有什么問題，歡迎和我們交流。

拓展閱讀：

• 正確加載 Javascript 和 CSS 到 WordPress
• 正確加載 CSS 到 WordPress
• 移除 WordPress 加載的JS和CSS鏈接中的版本號

本文參考自 https://vanaf1979.nl/wordpress-css-styles-and-javascripts-in-theme-development-in-depth/ ，由WordPress大學(xué)翻譯整理，轉(zhuǎn)載請注明該說明和網(wǎng)址。