我们之前见过很多 博客提示 和工具。 好了,今天我们将学习如何为您的博客创建一个好的工具-FAQ页面插件。 但是最重 要的是不仅插件本身,而且您可以使用此原理做什么。 您将学习如何在WP网站中存储任何类型的数据,以及如何将其与外部库(如jQuery UI)集成,从而为您的网站创建自定义组件。 让我们开始吧!
想法,演示和下载
我们的目标是创建一个可用于很多事情的插件,但非常适合FAQ页面。
但除此之外,我们的主要成就将是 对此事的认知 WordPress 自定义帖子类型,短代码,与外部JS / jQuery插件的交互。 有了这个想法,你可以根据你可能发现的其他疯狂插件创建很多东西,这只是你的起点,亲爱的Padawan。
So 在这里你可以找到jQuery API演示 对于我们将要使用的组件–但真正酷的东西是用于生成该组件的代码(PHP).
预热 – 插件文件和自定义帖子类型
首先,我们需要创建一个自定义帖子类型来存储我们的数据。
自定义帖子类型是 WP 魔法的重要组成部分,它允许您创建新的数据类型(有点像帖子、页面、附件……),因此可以使用 WP 的函数调用和操作它。 这对于初学者来说可能看起来很简单,但只是旧时 PHP 程序员(这仍然是一件事吗?)知道在您的数据库中连接和存储数据是多么困难。 更不用说动态创建新的数据类型了,这很微妙,但在我们的代码中允许很大的灵活性。
为了让我们拥有这个,我们需要一个插件,但您可能已经熟悉这个概念。 插件就像乐高积木 WordPress,他们使用一些可以轻松插入(duh!)或根据需要拔出的代码添加或转换当前功能。
要以WP识别它的方式创建插件,您需要2:
- 在你的wp-content / plugins /中创建一个文件
- 在该文件的开头添加元数据,以便WP可以理解其中的内容
请记住,文件名必须是唯一的,因此当有人安装您的插件(甚至是您自己)时,不会与当前插件发生冲突。 在我们的例子中,为了更好的组织,我们将添加一个名为 faq-whsr 的新文件夹,其中包含一个名为 faq-whsr 的文件。php.
现在对于元数据,只需在插件文件的开头添加类似这样的内容(就在 <?php ):
意思是:
- 插件名称:将在您的wp-admin>插件界面中显示的漂亮名称
- 插件URI:如果要添加链接到插件的页面(文档,示例,销售页面)
- 说明:这是您的wp-admin>插件界面中显示的一小段。 保持简单,以便用户记住它的用途
- 作者/作者URI:创建插件的人/公司和信用的链接
- 许可证:因此用户将知道他们可以/不能对您的插件做什么
好的,现在我们已经创建了我们的插件,添加了一些相关的元数据。 保存插件文件后,您应该可以在wp-admin界面中看到它
让我们激活它,看看会发生什么。
等等,没什么?嗯,这是一件好事,如果现在出现任何问题,你会发现错误。 现在让我们继续我们的自定义帖子类型创建。
在我们的案例中,CPT是FAQ项目,但您可以创建书籍,视频,推荐书等。 这里要记住的重要一点是:函数名称应该是唯一的。 现在重复一遍:函数名称应该是唯一的,函数名称应该是唯一的。 得到它了?好,这将为您节省很多麻烦,直到我们可以使用OOP(可能在下一个教程中)。
这个代码完成了魔法:
这就是相关部分的含义:
- $ Labels -是一个数组,其中包含wp-admin区域不同部分的标签和文本。 因此,WP将知道调用我们物品的正确方法
- 支持-这告诉您可以在wp-admin> FAQ>新屏幕中看到的内容。 在我们的案例中,我们将拥有标题,编辑器(主要内容框),作者,修订和自定義字段(如果需要)。
- 分类法-在这里您告诉WP允许使用哪些分类法(类别,标签或自定义分类法)
- Register_post_type(‘faq_whsr’,$ args)-这告诉WP “嘿,使用$ args中的参数创建一个ID为faq_whsr的新自定义帖子类型”.
保存它并屏住呼吸。 您现在应该在主wp-admin菜单中看到一个新部分
等等,就是这样吗?是啊。 该片段创建了整个CPT功能。 如果你没有找到这个酷,请等待下一节它会变冷。
在我们离开wp-admin之前,添加一些虚拟数据(一些至少包含2类别的常见问题解答)。
前端 – WP x jQuery交互
现在终于有时间看到一些动作,我们将使用它 jQuery UI Accordion元素 这一点。
JQuery UI与jQuery本身俱有几乎相同的优点:
- 很多开发人员正在研究它
- 跨浏览器和移动就绪代码
- 有据可查
- WP很好玩(WP本身使用它们)
现在的问题是:我们如何称呼它?
有2方法:
- 劣质纯 / tags in your wp_head
- 好的wp_enqueue
今天我们不会用错误的方法浪费太多时间,但好的方法基本上是告诉WP “嘿哥们,我们在代码中的某个时刻需要jQuery UI,请将它包含在页面中”。 这样WP可以检查是否有其他人已经包含它或包含它的不同版本,并避免重复库的很多麻烦。 好的,如何将这个好聊天翻译成代码?
使用enqueue函数:
短代码
现在我们又回到了wp-admin。 我们有FAQ项目,我们有图书馆可以根据需要设置项目样式,还缺少什么?好吧,我们需要调用这些物品!
我们有很多选择,但最简单的方法是创建一个短代码。 短代码是您在内容字段中添加的内容(对于页面,帖子,CPT ……),WP实际上会搜索要在其上运行的函数。 有2类型的短代码:
- [自封闭] -相似标签要么这种短代码只是在某个时候调用一个函数-这是我们的家伙
- [包装]内容[/包装] -这就像标签要么并且实际上可以转换其内容,或将内容用作参数。
让我们看看它是如何工作的。 在wp-admin中创建一个新页面并在其中添加以下代码:
[FAQ-whsr]
保存并访问该页面,看看会发生什么……
开个玩笑,它不会做对吗?嗯,那是因为我们还没有为它创建一个函数。
在插件文件中添加:
现在刷新你的页面,我保证会发生很酷的事情。
很酷,对吧?现在你可以看到它正在运行,现在天空是你的极限。 该代码所做的只是告诉WP,有一个名为[faq-whsr]的短代码,如果WP找到它,WP应该在页面的这一点运行一个函数。
在我们的例子中,我们需要为要创建的jQuery UI面板实现此结构:
为此,我们将创建一个 WP查询,加载我们的常见问题项目及其内容。 用以下代码替换短代码功能:
好的,现在您的FAQ项目将被调用。 我们所做的是调用wp_query来调用我们的自定义帖子类型,然后将其传递给短代码返回,这样WP将按照所需的结构显示所有这些。
这很好,但缺少一些东西,对吧?那里有一些选择呢?好吧,我们可以为短代码添加选项,让我们看看如何在我们的短代码中创建一些WP_Query参数:
这样您就可以使用以下参数调用项目(您可以根据需要组合使用):
- Cat -类别ID(已添加多个作为数组)[faq-whsr cat = 1]
- Category_name -类别名称[常见问题解答-whsr category_name =“ food”]
- 订单- 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
- 仅在需要时排队(对于某些页面)
不要忘记在评论中留下您的想法!这就是我们面临的挑战:是否可以为短代码应用“默认项目”选项(因此,在加载页面时,将打开另一个项目,而不是第一个)?你会怎么做?
原文链接：https://www.itaoda.cn/blog/3258.html，转载请注明出处。
评论0