WordPress如何指定文章頁面加載JavaScript/CSS代碼？

在製作WordPress主題時，如果有一個特定的JavaScript或CSS代碼，出現在WordPress的特定頁面上，它只會被使用一次。

應該把代碼放在哪裡？ Style.css還是base.js？

但這樣做的成本有點大。

範例1：

• 嘗試在WordPress網站上獲得Highslide JavaScript效果。
• 但通常只有部分加圖像或所需頁面才用到，並在未使用的頁面上加載頁面來添加Highslide部分，這樣超過50 KB的JavaScript太大了。

範例2：

• 在某篇文章中放了一個標準的兼容性方法是使用標籤插入它，但插入的標籤所生成頁面，無法通過W3C驗證。
• 一個很好的方法是可以使用SWFObject這個JavaScript生成通過W3C驗證的代碼。
• 但問題是在WordPress的每個頁面上加載SWFObject都太浪費了，而且不是頁面都用到此JavaScript文件。

事實上，我們可以使用WordPress強大的自定義字段，為自定義文章或頁面加載實現不同的JavaScript頁面。

本文將向你展示：如何使用自定義字段在WordPress上，自定義JavaScript或CSS文件？

如果你能理解，自定義字段的值不像JavaScript和CSS文件那麼簡單。

WordPress主題怎麼添加自定義字段？

打開WordPress主題的header.php文件，找到代碼 ▼

<?php wp_head(); ?>

在它之後添加▼

<!-- 指定文章页面加载JavaScript/CSS代码 开始 -->
    <?php if (is_single() || is_page()) {
$head = get_post_meta($post->ID, 'head', true); 
if (!empty($head)) { ?> 
<?php echo $head; ?> 
<?php } } ?>
<!-- 指定文章页面加载JavaScript/CSS代码 结束 -->

代碼中的head是自定義字段的名稱，可以自定義。

在WordPress文章或頁面添加自定義字段

WordPress後台編輯文章頁面的編輯器中，有一個“自定義域”的小窗口。

1. 在“名稱”處輸入：head
2. 然後在“值”輸入你要添加顯示的代碼 ▼

• 單擊“添加自定義字段”。
• 更新文章將允許你為主題的代碼，輸入這些自定義字段的值。

由於你只輸出“值”中是需要加載的代碼，因此需要在“值”中，輸入以下類似代碼 ▼

<script type="text/javascript">...</script>

或者 ▼

<style type="text/css">...</style>

來輸出以上代碼。

WordPress自定義字段的其它用途

在理解了上述原則之後，你會發現WordPress自定義字段，不僅可以為自定義頁面實現自定義JavaScript或CSS，還可以通過自定義字段實現許多功能，類似於：添加到文章縮略圖，文章提示等。

至於要實現的功能如何實現它們，請嘗試使用自定義字段。

WordPress如何指定文章標籤和分類頁眉頁腳加載JavaScrip/CSS代碼？

WordPress怎麼自定義頁眉？我們可以通過以下文章說明安裝WordPress外掛實現添加head代碼▼

WordPress如何在文章添加head代碼?WP插件優化head代碼

由於在這篇文章《WordPress怎麼自定義頁眉？安裝WordPress頁腳頁眉插件》介紹的Header Footer Code Manager插件，目前無法添加PHP代碼……因此，在WordPress插件官網搜索，找到了可以在頁眉頁……

WordPress怎麼自定義頁眉？安裝WordPress頁腳頁眉插件

有些WordPress的HTML / Javascript / CSS 代碼只需在某篇文章或頁面中顯示，我們可以通過Header Footer Code Manager插件，實現在WordPress指定文章/頁面內添加頁眉頁腳代碼。 Header Footer……

• 這樣不用擔心更換WordPress主題後，自定義代碼丟失或手動轉移自定義代碼的問題。