文章
文章文档网址导航

利用 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_register_style('wptuts-jquery-ui-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/south-street/jquery-ui.css');
     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-accordion 的 div 。
  • 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

建站帮助中心

让 PHP 错误提示在 WordPress 后台显示

2014-12-17 9:28:40

建站帮助中心

WordPress 插件监控网站在线时间

2014-12-19 9:28:40

❯
搜索

  • 扫码打开当前页

返回顶部