Question to say "I can!"

大发快三:利用 jQuery UI 在 WordPress 创建一个 FAQ ???/h1>
2012-07-14

参考于:通天塔——利用 jQuery UI 在 WordPress 创建一个 FAQ ???/a>

通过本文,你会发现在 WordPress 网站里面创建一个 FAQ 区域是多么的简单。本文会用到 WordPress 的自定义文章类型来写问题和答案,然后会用到 jQuery UI accordion 来做一个漂亮的跨平台的折叠挂件,最后会用一段短小的代码来让FAQ区域可以显示到任何一个页面。

最终的效果如下图所示:

第一步 创建目录和文档

  • 1. 在你的主题文件夹里面新建一个文件夹,命名为 faq
  • 2. 在 faq 文件夹里面新建一个文件,重命名为 faq.php
  • 3. 再新建一个名为 fap.js 的文件

第二步 加入 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, jQuery UI,和 faq.js

  • 1. 载入 jQuery
  • 2. 载入 jQuery UI
  • 3. 载入 jQuery UI 库的样式表
  • 4. 载入 自定义脚本 faq.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

翻译者:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 方言报站也是一种有意义的尝试 2019-05-22
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-05-20
  • 山西寿阳:竹马戏演员的台前幕后 2019-05-19
  • 主城赏荷地图出炉 快带上相机出发 2019-05-19
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 570| 105| 46| 853| 683| 302| 150| 646| 204| 927|