如何为WordPress创建一个简单的FAQ插件

文章撰写者:
  • WordPress
  • 更新:2月09,2017

我们之前见过很多 博客提示和工具。 那么,今天我们将学习如何为您的博客创建一个好的工具 - 一个FAQ页面插件。 但最重要的不仅仅是插件本身,而是你可以用这个原则做什么。 您将学习如何在WP站点中存储任何类型的数据,以及如何将其与外部库(如jQuery UI)集成,从而为您的站点创建自定义组件。 让我们开始吧!

想法,演示和下载

演示

我们的目标是创建一个可用于很多事情的插件,但非常适合FAQ页面。

但除此之外,我们的主要成就将是 理解WordPress 自定义帖子类型,短代码,与外部JS / jQuery插件的交互。 有了这个想法,你可以根据你可能发现的其他疯狂插件创建很多东西,这只是你的起点,亲爱的Padawan。

So 在这里你可以找到jQuery API演示 对于我们将要使用的组件 - 但真正酷的东西是用于生成该组件(PHP)的代码。

哦,当然你可以找到 插件文件可在此处下载 以及您可以在WP站点中安装。

预热 - 插件文件和自定义帖子类型

首先,我们需要创建一个自定义帖子类型来存储我们的数据。

自定义帖子类型是WP魔术的重要组成部分,它允许您创建一种新的数据类型(有点像帖子,页面,附件......),因此可以使用WP的功能调用和操作它。 这对初学者来说似乎很简单,但只有旧时代的PHP程序员(还是那件事?)知道在数据库中连接和存储数据有多难。 更别说动态创建新数据类型了,这很微妙,但允许我们的代码具有很大的灵活性。

对于我们来说,我们需要一个插件,但您可能已经熟悉了这个概念。 插件就像WordPress的Lego块一样,他们使用一些可以轻松插入的代码(duh!)添加或转换当前功能,或者如果你想要的话也可以拔掉插头。

要以WP识别它的方式创建插件,您需要2:

  1. 在你的wp-content / plugins /中创建一个文件
  2. 在该文件的开头添加元数据,以便WP可以理解其中的内容

请记住,文件名必须是唯一的,因此当有人安装您的插件(甚至是您自己)时,将不会与当前插件冲突。 在我们的情况下,为了更好的组织,我们将添加一个名为faq-whsr的新文件夹,并在其中添加一个名为faq-whsr.php的文件。

现在对于metada,只需在插件文件的开头添加这样的东西(在<?php之后):

meta_01

意思是:

  • 插件名称:将在wp-admin> plugins界面中显示的好名称
  • 插件URI:如果要添加链接到插件的页面(文档,示例,销售页面)
  • 说明:这是wp-admin> plugins界面中显示的小段落。 保持简单,以便用户记住它的用途
  • 作者/作者URI:创建插件的人/公司和信用的链接
  • 许可证:因此用户将知道他们可以/不能对您的插件做什么

01  - 插件创建

好的,现在我们已经创建了我们的插件,添加了一些相关的元数据。 保存插件文件后,您应该可以在wp-admin界面中看到它

让我们激活它,看看会发生什么。

等等,没什么? 嗯,这是一件好事,如果现在出现任何问题,你会发现错误。 现在让我们继续我们的自定义帖子类型创建。

在我们的案例中,CPT是FAQ项目,但您可以创建书籍,视频,推荐书等。 这里要记住的重要一点是:函数名称应该是唯一的。 现在重复一遍:函数名称应该是唯一的,函数名称应该是唯一的。 得到它了? 好,这将为您节省很多麻烦,直到我们可以使用OOP(可能在下一个教程中)。

这个代码完成了魔法:

CPT

这就是相关部分的含义:

  • $ labels - 是一个数组,其中包含wp-admin区域不同部分的标签和文本。 所以WP会知道调用我们项目的正确方法
  • 支持 - 这个告诉您在wp-admin> FAQ>新屏幕中可以看到的内容。 在我们的例子中,我们将拥有标题,编辑器(主要内容框),作者,修订版和自定义字段(如果您需要它们)。
  • 分类法 - 在这里你告诉WP哪些分类法是允许的(类别,标签或自定义分类法)
  • register_post_type('faq_whsr',$ args) - 告诉WP “嘿,使用$ args中的参数创建一个ID为faq_whsr的新自定义帖子类型”.

管理员-FAQ

保存它并屏住呼吸。 您现在应该在主wp-admin菜单中看到一个新部分

等等,就是这样吗? 是啊。 该片段创建了整个CPT功能。 如果你没有找到这个酷,请等待它在下一部分变冷。

在我们离开wp-admin之前,添加一些虚拟数据(一些至少包含2类别的常见问题解答)。

前端 - WP x jQuery交互

现在终于有时间看到一些动作,我们将使用它 jQuery UI Accordion元素 为了这。

jQuery UI与jQuery本身具有几乎相同的优点:

  • 很多开发人员正在研究它
  • 跨浏览器和移动就绪代码
  • 有据可查
  • WP很好玩(WP本身使用它们)

现在的问题是:我们如何称呼它?

有2方法:

  1. wp_head中错误的纯<script> / <style>标记
  2. 好的wp_enqueue

今天我们不会用错误的方法浪费太多时间,但好的方法基本上是告诉WP “嘿哥们,我们在代码中的某个时刻需要jQuery UI,请将它包含在页面中”。 这样WP可以检查是否有其他人已经包含它或包含它的不同版本,并避免重复库的很多麻烦。 好的,如何将这个好聊天翻译成代码?

使用enqueue函数:

enqueue_02

短代码

现在我们又回到了wp-admin。 我们有FAQ项目,我们有图书馆可以根据需要设置项目样式,还缺少什么? 好吧,我们需要调用这些物品!

我们有很多选择,但最简单的方法是创建一个短代码。 短代码是您在内容字段中添加的内容(对于页面,帖子,CPT ......),WP实际上会搜索要在其上运行的函数。 有2类型的短代码:

  1. [自封] - 像标签<hr />或<br />这种短代码只是在某个时刻调用一个函数 - 这是我们的家伙
  2. [wrapped]内容[/ wrapped] - 这个像标签<p> </ p>或<div> </ div>,实际上可以转换其内容,或者使用内容作为参数。

让我们看看它是如何工作的。 在wp-admin中创建一个新页面并在其中添加以下代码:

[FAQ-whsr]

保存并访问该页面,看看会发生什么......

开个玩笑,它不会做对吗? 嗯,那是因为我们还没有为它创建一个函数。

在插件文件中添加:

shortcode_02

现在刷新你的页面,我保证会发生很酷的事情。

很酷,对吧? 现在你可以看到它正在运行,现在天空是你的极限。 该代码所做的只是告诉WP,有一个名为[faq-whsr]的短代码,如果WP找到它,WP应该在页面的这一点运行一个函数。

在我们的例子中,我们需要为要创建的jQuery UI面板实现此结构:

api_02

为此,我们将创建一个 WP查询,加载我们的常见问题项目及其内容。 用以下代码替换短代码功能:

短码,basic_02

好的,现在您的FAQ项目将被调用。 我们所做的是调用wp_query来调用我们的自定义帖子类型,然后将其传递给短代码返回,这样WP将按照所需的结构显示所有这些。

这很好,但缺少一些东西,对吧? 那里有一些选择呢? 好吧,我们可以为短代码添加选项,让我们看看如何在我们的短代码中创建一些WP_Query参数:

短码,final_02

这样您就可以使用以下参数调用项目(您可以根据需要组合使用):

  • cat - 类别ID(多个添加为数组)[faq-whsr cat = 1]
  • category_name - 类别名称[faq-whsr category_name =“food”]
  • order - ASC或DESC(默认为DESC)[faq-whsr order =“ASC”]
  • orderby - 更改订购商品的条件[faq-whsr orderby =“title”]
  • posts_per_page - 更改加载的项目数[faq-whsr posts_per_page = 5]

但就像我说的那样,天空是我朋友的极限。 以下是您可以实现和使用的WP_Query的一些选项:

  • 作者
  • 类别(使用not_in添加排除选项)
  • 搜索(很酷,如果你想让用户能够搜索它们)
  • 自定义字段(因为FAQ项目具有它们,您可以使用它们来加载具有特定自定义字段和值的项目)

现在轮到你了

正如您所看到的,这只是您的起点。 我们都可以学习很多其他很酷的东西来改进这个简单的插件,这里有一些建议供你深入挖掘:

  • 响应式设计
  • 小部件创建
  • 插件激活/取消激活挂钩
  • 国际化
  • OOP
  • 仅在需要时排队(对于某些页面)

不要忘记在评论中留下您的想法! 以下是我们对您的挑战:是否可以为短代码应用“默认项目”选项(因此当页面加载时,另一项将打开,这不是第一项)? 你会怎么做?

关于罗切斯特奥利维拉

我是来自巴西Itajubá(MG)的网页设计师和企业家。 我喜欢写一些关于模糊主题和做一些很酷的东西。