Question to say "I can!"

利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

2012-07-14

參考于:通天塔——利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

通過本文,你會發現在 WordPress 網站里面創建一個 FAQ 區域是多么的簡單。本文會用到 WordPress 的自定義文章類型來寫問題和答案,然后會用到 jQuery UI accordion 來做一個漂亮的跨平臺的折疊掛件,最后會用一段短小的代碼來讓FAQ區域可以顯示到任何一個頁面。

利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

最終的效果如下圖所示:

利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

第一步 創建目錄和文檔

  • 1. 在你的主題文件夾里面新建一個文件夾,命名為 faq
  • 2. 在 faq 文件夾里面新建一個文件,重命名為 faq.php
  • 3. 再新建一個名為 fap.js 的文件

利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

第二步 加入 faq.php 文件

找到位于主題文件夾根目錄下的 function.php , 把上面新建的 faq.php 添加進去。

1
2
/* functions.php */
include('faq/faq.php');

第三步 創建自定義文章類型

  • 1. 通過在 init 動作上掛鉤來創建一個自定義文章類型。這會用到一個作為第二參數的匿名功能來把所有數據都密閉在一個地方。這樣更易于閱讀和維護。
  • 2. 創建 $labels$args 。(如下圖所示)
  • 3. 最后以 register_post_type('FAQ', $args) 結束。
  • 4. 現在可以去管理面板那里,會發現多了一個新的選項 — FAQ (如下圖所示)
  • 5. 點擊“Add New Question”,輸入一些問題和答案。這樣稍后我們就能對其進行相關操作。在 title 里填入問題,在正文區域里填入答案。這樣做的好處是能在答案里不僅有文字,還可以有圖片和視頻哦。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* Register the Custom Post Type */
/* faq.php */
add_action('init', function() {
????$labels = array(
????????'name' => _x('FAQ', 'post type general name'),
????????'singular_name' => _x('Question', 'post type singular name'),
????????'add_new' => _x('Add New Question', 'Question'),
????????'add_new_item' => __('Add New Question'),
????????'edit_item' => __('Edit Question'),
????????'new_item' => __('New Question'),
????????'all_items' => __('All FAQ Questions'),
????????'view_item' => __('View Question'),
????????'search_items' => __('Search FAQ'),
????????'not_found' => __('No FAQ found'),
????????'not_found_in_trash' => __('No FAQ found in Trash'),
????????'parent_item_colon' => '',
????????'menu_name' => 'FAQ'
????);
????$args = array(
????????'labels' => $labels,
????????'public' => true,
????????'publicly_queryable' => true,
????????'show_ui' => true,
????????'show_in_menu' => true,
????????'query_var' => true,
????????'rewrite' => true,
????????'capability_type' => 'post',
????????'has_archive' => true,
????????'hierarchical' => false,
????????'menu_position' => null,
????????'supports' => array('title', 'editor', 'page-attributes')
????);
????register_post_type('FAQ', $args);
});

利用 jQuery UI 在 WordPress 創建一個 FAQ 模塊

第四步 加入jQuery, jQuery UI,和 faq.js

  • 1. 載入 jQuery
  • 2. 載入 jQuery UI
  • 3. 載入 jQuery UI 庫的樣式表
  • 4. 載入 自定義腳本 faq.js
1
2
3
4
5
6
7
8
add_action( 'wp_enqueue_scripts', 'wptuts_enqueue' );
function wptuts_enqueue() {
?????wp_enqueue_style('wptuts-jquery-ui-style');
?????wp_register_script('wptuts-custom-js', get_template_directory_uri() . '/faq/faq.js', 'jquery-ui-accordion', '', true);
?????wp_enqueue_script('wptuts-custom-js');
}

“注意本教程只調用了一個 wp_enqueue_script ,對于相互獨立的 JavaScript 來說,按順序載入是很重要的。 設置好 jquery-ui-accordion 這個依賴文件就能確保腳本能有序載入”

第五步 配置短代碼

因為要把FAQ模塊做到在任何頁面都能顯示, 所以要生成一個短代碼( Shortcode )。用短代碼意味著只需在任意的 WordPress 頁面的編輯器下打出 [faq] 就能顯示FAQ模塊了。

1
2
3
add_shortcode('faq', function() {
????return "Shortcode test";
});

第六步 調出FAQ的問題和答案

在自定義文章類型里使用 get_posts() 功能就能得到相關數據:

  • 1. Numberposts — 這個參數可以限制能找到的 FAQ 問題的數量。
  • 2. orderby and order — 這個參數可以修改問題的順序。
  • 3. post_type — 這個參數可以讓 WordPress 只提取自定義文章類型里面的數據。
1
2
3
4
5
6
7
8
add_shortcode('faq', function() {
?????$posts = get_posts( array(
??????????'numberposts' => 10,
??????????'orderby' => 'menu_order',
??????????'order' => 'ASC',
??????????'post_type' => 'faq'
?????)); //array of objects returned
});
1
2
/* example */
echo $posts[0]->post_content; // will output the answer from the first faq question.

第七步 生成 jQuery UI Accordion 的標記

這一步是生成 jQuery UI Accordion 需要的標記

1
2
3
4
5
<!-- Markup needed for jQuery UI Accordion -->
<div id="wptuts-accordion">
?????<h3><a href="">Question Will Go Here</a></h3>
?????<div>Answer will be in this div.</div>
</div>

我們可以通過循環 $posts 數組來生成這個標記

  • 1. 首先,使用 $faq 來儲存 HTML 的開頭—打開一個 id 為 wptuts-accordiondiv
  • 2. 接著,開始循環所有的文章然后把 sprintf 的結果加入到 $faq 變量當中。
  • 3. sprintf 功能會用 $post->post_title 返回的值替換 %1$s$post->post_content 返回的值替換 %2$s 的值。
  • 4. 通過 wpautop() 來運行 $post->post_content ,使之在管理面板那里看起來是授權的。
  • 5. 最后閉合 div ,然后返回 $faq 來把 HTML 輸出到頁面上。
1
2
3
4
5
6
7
8
9
10
11
12
$faq? = '<div id="wptuts-accordion">'; // the container, before the loop
foreach ( $posts as $post ) {
?????$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
??????????$post->post_title,
??????????wpautop($post->post_content)
?????);
}
$faq .= '</div>'; // finish off by closing the container
return $faq;

完整的短代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
add_shortcode('faq', function() {
?????$posts = get_posts(array(? //Get the FAQ Custom Post Type
??????????'numberposts' => 10,
??????????'orderby' => 'menu_order',
??????????'order' => 'ASC',
??????????'post_type' => 'faq',
?????));
?????$faq? = '<div id="wptuts-accordion">'; //Open the container
?????foreach ( $posts as $post ) { // Generate the markup for each Question
??????????$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
???????????????$post->post_title,
???????????????wpautop($post->post_content)
??????????);
?????}
?????$faq .= '</div>'; //Close the container
?????return $faq; //Return the HTML.
});

最后一步

終于到了最后一步了!歐耶~~這時其實我們已經把所有需要的數據輸出了。還差最后一小步就是放置這個 faq.js

1
2
3
(function(){
????????jQuery("#wptuts-accordion").accordion();
????})();

原文: Create an FAQ Accordion for WordPress With jQuery UI

翻譯者: CloudCheung

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 神测网在线预测加拿大 江苏11选5乐三 云南省体育彩票 河北11选5中3个号 配资公司怎么赚钱 排列七开奖时间 北京pk拾是正规彩票吗 股票配资骗局判几年 幸运赛车技巧心得必胜 2019平特一肖最准资料 上证指数月k线走势 天津时时彩查询彩 山东群英会开奖走势图 三字解字平特一肖 黑龙江22选5开奖数据 股票作手回忆录pdf