如何在 WordPress 使用 jQuery

jQuery 主要是使用在前端,在一些特殊的需求中可能會使用到,如果客戶需要某些功能,WordPress 本身不提供,或是沒有適合外掛,就必須要客制化開發,而 jQuery 簡單功能又強大。本篇文章會教你如何在 WordPress 中使用 jQuery。

建立子主題

子主題就是一個依附在一個主題之下的佈景主題,它一定是依附在已存在的主題之下,作用是去覆蓋原主題的功能或是 CSS,記得在佈景主題的地方要啟用的是子主題,而不是原本的主題。

建立子主題,簡單一點的方式你可安裝外掛 “Child Theme Confiscator” 來幫你建立子主題。詳細請參考 如何建立子主題。建立完子主題之後你可以在 外觀 -> 佈景主題 中看一下有沒有建立新的佈景主題。

 

啟用子主題

接下來請你啟用子主題,先試試看使用起來是否正確。

 

建立 js 與 css 目錄

建立子主題之後,在子主題的目錄下建立 js 與 css 目錄(如果你沒有要自訂 css 的話,就不需要建立 css 目錄),建立的方式你可以用 ftp 登入主機,然後在子佈景主題的目錄下去建立目錄。

建立完 js 目錄之後,你可以順便一起建立 jQeury 的檔案,例如 my-jquery.js 。

 

載入 jQuery

在建立完子主題之後,就可以用子主題去載入你自己的 jQuery。

請打開 外觀 -> 主題編輯器,然後點選右側下拉選單,選擇子主題,然後按下右側選取。之後將下方程式碼貼入 functions.php 內。

 

function load_page_script() {
  // 加入 JS
  $custom_scriptsrc = get_stylesheet_directory_uri().'/js/';
  wp_register_script('custom-index-js', $custom_scriptsrc . 'my-jquery.js', 'jquery', false, false);

  // 如果你需要加入自訂的 CSS,請取消註解
  //$custom_stylesrc = get_stylesheet_directory_uri(). '/css/';
  //wp_register_style('custom-woocommerce-checkout', $custom_stylesrc. 'some.css' );

  wp_enqueue_script('jquery');
  wp_enqueue_script('custom-index-js');

}
add_action('wp_enqueue_scripts', 'load_page_script');

編輯自定義的 jQuery

最後您只需要打開 外觀 -> 主題編輯器,然後選擇 js 目錄下的 my-jquery.js 就可以直接編輯摟。下面是一個小的 jQuery 範例:

jQuery(document).ready(function($) {
  alert('Hello World');
});

Author:HaWay

域名專家、GitLab 愛好者(https://gitlab.com/haway)

 



發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *