Wordpress企业主题首页建站帮助中心 利用 jQuery UI 在 WordPress 创建一个 FAQ 模块

利用 jQuery UI 在 WordPress 创建一个 FAQ 模块

发布日期: 2014-12-18 所属分类: 建站帮助中心 浏览: 6783 人关注过 作者:mby小编 评论:0条
核心提示：通过本文，你会发现在 WordPress 网站里面创建一个 FAQ 区域是多么的简单。本文会用到 WordPress 的自定义文章类型来写问题和答案，然后会用到 jQuery UI accordion 来做一个漂亮的跨平台的折叠挂件，最后会用一段短小的...

通过本文，你会发现在 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

继续阅读: ,

本文链接: 利用 jQuery UI 在 WordPress 创建一个 FAQ 模块
版权所有: 非特殊声明均为本站原创文章，转载请注明出处：WP模板园,需要WordPress主题定制可以联系我们。

上一篇 :

下一篇 :

看过该文章的人还看过

  • WordPress 如何查看文章分类ID

    • 在一些优秀的WordPress网站主题中，用户需要根据内容显示需求，手动设置某些分类的ID信息，那么，如何查看获取到分类的ID值呢，这里以中文WordPress为例，配以图文形式告诉你具体方法。 1，首先进入WordPress后台的分类目录版块，这里显示的所有分类的列表信息，但没有直接显示...

  • wordpress如何查看页面ID值

    • 在一些高级应用的WordPress网站主题中，开发设计师为用户提供了很方便的自定义内容的扩展功能，比如，可以允许用户后台自定义设置要显示或者要隐藏的页面菜单，这时，你可能需要手工设置这些页面的ID值。 那么，如何查看并获取到这些页面的ID值呢，其实方法和查看分类ID值类似，...

  • WordPress自定义导航菜单操作使用方法

    • WordPress 3.0+ 新增的自定义导航菜单功能使得我们可以更加容易地对网站菜单进行可视化操作了，最重要的是，可以把Pages(页面列表)和Categories(分类列表)在自定义菜单中混合显示了。 下面本站着重介绍WordPress 3.0+ 导航菜单的操作使用方法。 1.首先，登录您的WordPress管理后...

  • 如何添加和使用自定义栏目/自定义字段/自定义域

    • WordPress可以通过其独特的自定义栏目功能扩展主题功能，从而获得更丰富的功能体验，在不同的WordPress版本中，该功能名称的翻译也不同，其英文名称为Custom Fields，翻译为中文基本有自定义栏目/自定义字段/自定义域 三种，以下使用方法以 自定义栏目 为名称讲述。 在很多高级...

相关文章推荐

在线客服