Blog

如何在WordPress中正確引入外部的CSS或Javascript檔案

在WordPress客製化開發過程中，也免不了接觸到前端的開發需求，這時就會有需要引入外部CSS檔案或是Javascript檔案的時候

如果是自己寫的程式碼，有的人會選擇將程式碼寫在後台主題或外掛提供的自訂CSS或Javascript設定內，但對於有版本控制需求的人，還是必須寫在檔案內才能控制

1. 引入外部CSS檔案或JS檔案

可以使用兩個hook：

wp_enqueue_scripts：前台使用

admin_enqueue_scripts：後台使用

<?php
add_action('wp_enqueue_scripts', 'octopuswp_enqueue_scripts');
/**
 * 引入外部CSS或JS檔案
 * 以下示範在單一文章頁面引入自訂的Javascript與CSS檔案
 * 已經在子主題assets/js放入了single-post.js檔案，在assets/css放入了single-post.css檔案
 */
function octopuswp_enqueue_scripts()
{
    // 取得子主題的目錄URL
    
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    
    // 通常分成兩個步驟
    // 1. 先向WordPress註冊你的檔案名稱，檔案來源

    // 註冊Javascript檔案，使用wp_register_script這個function
    // wp_register_script有五個參數：
    // handle，自訂的唯一名稱
    // src，檔案的來源url，可以是本站URL，可以是外部CDN URL
    //   如果是放在子主題，可以用 get_stylesheet_directory_uri()來取得子主題資料夾的url
    //   如果是放在外掛，用plugin_dir_url()，來取得外掛目錄的url
    // dependencies，這個檔案跟依賴哪些檔案，WordPress會幫你依序引入，填入的是其他已註冊好的檔案的handle，WordPress已經有內建一些可以用，如jquery
    //   例如，你的Javascript檔案裡面有用到jquery，那就必須將他引入在jquery後面，否則會發生找不到jquery的錯誤
    // version，這個檔案的版本，WordPress在引入時會自動加上版本的參數，如果有自訂檔案版本，可填，不填的話會自動帶入WordPress版本
    // in_footer，是否是在footer(</body>前)引入，否則的話會引入在head，預設是false

    wp_register_script('octopuswp-single-post', $stylesheet_dir_uri . '/assets/js/single-post.js', ['jquery']);

    // 註冊CSS檔案，使用wp_register_style這個function，參數跟wp_register_script差不多唯獨第五個參數不同
    // media，用在html <link>標籤的media屬性，可定義不同的media typ，預設是all

    wp_register_style('octopuswp-single-post', $stylesheet_dir_uri . '/assets/css/single-post.css');

    // 2. 正式引入
    // 使用wp_enqueue_script與wp_enqueue_style直接傳入handle名稱即可，如此就會在所有頁面中引入

    wp_enqueue_script('octopuswp-single-post');
    wp_enqueue_style('octopuswp-single-post');

    // 如果是要在特定頁面中引入，可以加入判斷條件
    // 當頁面為單一內容頁及文章類型為post的時候引入
    
    if(is_single() && 'post' == get_post_type()) {
        wp_enqueue_script('octopuswp-single-post');
        wp_enqueue_style('octopuswp-single-post');
    }
}

無論是前台的wp_enqueue_scripts，或是後台的admin_enqueue_scripts用法都一樣

唯獨要注意的是，這兩個是分開的，在前台hook註冊的只能在前台引入，在後台hook註冊的只能在後台引入

 

延伸閱讀：

此篇文章版權屬於OctopusWP

轉載請註明出處 @OctopusWP (https://www.octopuswp.com)

Tags: , ,

This Post Has 4 Comments

  1. David

    19 5 月 2020 回覆

    您好：
    有個疑問，想請問一下，為什麼要先註冊呢??我發現如果單純的直接用wp_enqueue_style，也是可以執行的，可以解答一下嗎??
    另外想請問一下，如果我只運用在列印上，我應該用那個鉤子或函數，找了半天沒有找到，謝謝。

    1. OctopusWP

      19 5 月 2020 回覆

      1.
      註冊就是告訴WordPress有哪一些asset檔案可以用，會幫這些檔案取名字和指定他的來源網址
      如果你的檔案只在一個地方引入，那直接帶網址進去wp_enqueue_style或wp_enqueue_script也可以
      如果你的檔案會在很多地方引入，那最好是先註冊，這樣可以統一管理檔案的來源網址,依賴的檔案和檔案版本
      2.
      不太懂你說的運用在列印上的意思

  2. David

    24 5 月 2020 回覆

    您好：
    首先很感謝你抽空回覆，謝謝。
    列印的意思，就是當我在某一個網頁，我會按下列印鍵或是按滑鼠右鍵，會出現預覽列印，這個wordpress有什麼鉤子或是函數可以來控制嗎??就像CSS，它可以用@MEDIA PRINT…….來專門控制列印，不知這樣子說明清不清楚，謝謝。

    1. OctopusWP

      24 5 月 2020 回覆

      不知道你想控制什麼，@media print是控制列印的樣式
      列印是瀏覽器的事情，基本上就是HTML、JS、CSS，就不跟PHP有關了

發佈留言

×

Cart