在 WordPress 文章內執行 jQuery

前一篇文章簡單的討論了如何在 WordPress 文章內執行 JavaScript, 今天就看看如何在 WordPress 文章內執行 jQuery。 簡單來說, jQuery 是一個快速, 簡潔的 JavaScript 程式庫, 以往用幾十行來完成的 JavaScript 程式, 而用 jQuery 一般只要用幾行簡潔和容易明白的程式便可以了。所以, jQuery 的口號 “Write less, Do more!” 就是這個原因。現在看看如何在 WordPress 文章內執行 jQuery。

假設我們只想某一篇文章中 (例如: Load jQuery) 執行 jQuery:

要使用 jQuery, 第一步當然要在網頁開啟時載入 jQuery 的 JavaScript 程式庫, 這樣, 網頁才可以使用 jQuery。

載入 jQuery 的 JavaScript 程式庫

在 WordPress 文章開啟時載入 jQuery 的 JavaScript 程式庫是十分方便的, 一般有兩個方法。

方法一:

1. 用 Text Editor 開啟使用中的 WordPress 佈景主題 (例如: twentyten) 的 header.php 檔。

2. 在 wp_head() 的一行前加入以下:

wp_enqueue_script(“jquery”);

如下圖所示:

方法二:

1. 前往jQuery 官方網站。

2. 下載最新版本的 jQuery JavaScript 程式庫。

3. 上載 jQuery 的 JavaScript 程式庫到 WordPress 網頁寄存。

在這例子中, 我會使用第二個方法來載入 jQuery 的 JavaScript 程式庫。

在 WordPress 文章內執行 jQuery

返回 header.php 檔案, 接著在 wp_head(); 一行的下面加入以下的程式:

if(is_single( 'Load jQuery' )) {
         echo '
        <script type="text/javascript" src="https://localhost/xampp/wordpress/js/jquery.js"></script>

            <script type="text/javascript">

                jQuery.noConflict();

                jQuery("document").ready(function() {

                // Do something with jQuery
                jQuery(".outputText").hide();

            });
        </script>
         ';
    }

如下圖所示:

[註]:

1. 必須在</head>之前加入以上的程式。

2. 因為我只想在 Load jQuery 文章中執行 jQuery, 所以用了以下的條件測試是否開啟 Load jQuery 文章:

is_single( 'Load jQuery' )

你也可以用文章編號來測試條件, 例如:

is_single( ‘2’ )

為什麼要做 is_single( 'Post Title' ) 條件測試?

當然要啦! 只有一篇文章使用的 jQuery,  沒有理由要所有文章都載入不會用的 jQuery 程式吧。

參考:
http://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page

編輯需要執行 jQuery 的文章

開啟及編輯 Load jQuery 文章。

在這例子中, 我會用 jQuery 隱藏 outputText Class 內的文字, 如下圖:

前往網誌 Home Page, 你會發覺 outputText Class 內的文字並沒有隱藏, 因為不符合 is_single( ‘Load jQuery’ ) 的條件。

接著前往 Load jQuery 文章, outputText Class 內的文字已經被隱藏了, 因為這時符合 is_single( ‘Load jQuery’ ) 的條件。

當然, 如果這 jQuery 效果是用在所有 WordPress 的文件中, 這就不需要做 is_single( ‘Load jQuery’ ) 的測試條件。