无论你是从零开始建立一个, 或者基于一个样板, 遵循记录良好的最佳实践是绝对必要的.
在本教程中,您将学习如何以正确的方式构建一个简单的WordPress插件.
首先,让我们列出我们的插件将具有的特性,并概述它需要做什么.
我们正在构建的插件将允许网站访问者保存内容以供以后阅读.
注册用户, 我们将把列表存储在数据库中, 对于匿名用户, 我们将使用cookie保存列表.
下面是我们的插件将提供的特性和功能的大纲.
访问者可以在这里查看他们保存的帖子列表.
使用短代码,可以在添加的任何地方呈现Saved页面.
< / div >
你应该找个 .拉链 文件.
解压它,并把它放在你的WordPress安装文件夹中: wp-content /插件/.
如果你打开WordPress仪表盘, 然后去找插件, 你会看到你的插件列在那里. 先别激活它.
处理激活和停用.
对于我们的插件来说,正确处理激活和停用是很重要的.
当我们的插件被激活, 我们将创建一个名为“拯救”的页面,,它将保存用户保存的项目.
在创建该页面时,我们将为保存的项目添加一个短代码到该页面的内容中.
最后, we’ll save the page; get its ID; 和 store it in the database, 所以我们可以在插件停用后访问它.
当我们的插件被停用时, 我们将从数据库中获得“拯救”页ID, 然后删除“已保存”页面, 删除插件本身的任何痕迹.
我们可以把这些都写进去 包括/ class-toptal-save-activator.php 和 包括/ class-toptal-save-deactivator.php.
让我们从激活过程开始:
wp_insert_post ()
函数并将页面ID保存到数据库中 add_option ()
.
现在,让我们继续插件停用.
get_option ()
函数,从数据库中删除相应的页 wp_delete_post ()
,并从options表中删除保存的ID delete_option ()
.
如果我们激活插件, 然后进入页面, 我们应该看到一个名为“保存”的页面,里面有一个简短的代码.
< / div >
如果我们停用插件,该页面将被删除.
因为我们用过 真正的
作为我们的论点 wp_delete_post ()
方法时,该页不会被删除,而是会被完全删除.
创建插件设置页面.
控件中创建设置页面 管理/ class-toptal-save-admin.php 文件,我们需要在该文件中做的第一件事是删除或注释掉对 wp_enqueue_style ()
在 enqueue_styles ()
函数和调用 wp_enqueue_script ()
在 enqueue_scripts ()
函数,如果我们不会添加任何CSS/JS到管理屏幕.
然而, 如果我们要添加一些造型, 然后, 我建议我们只在插件的设置页面中加载这些文件, 而不是在所有WordPress管理页面上. 我们可以通过将下面的代码直接放在我们将要注释的行上面来做到这一点:
If (的工具_page_top -save') != 美元挂钩) {
返回;
}
wp_enqueue_script( 这个美元->plugin_name, plugin_dir_url( __FILE__ ) . js / toptal-save-admin.js', 阵列( 'jquery' ), 这个美元->version, false );
如果你想知道我从哪弄来的 “工具_page_toptal-save”
部分来自于.
好吧, 事情是这样的, 我知道我将创建一个设置页面,其中包含一个总保存选项, 我还知道我要把它添加到工具(工具.php屏幕). 因此,把这两个放在一起,我们可以知道变量的值 美元挂钩
将会是 “工具_page_toptal-save”
-两个值的连接.
如果我们不在我们的插件设置页面,我们使用 返回
立即终止所处函数的执行.
因为我不会添加任何自定义样式到我的管理屏幕-因为我希望我的插件屏幕看起来像原生WordPress屏幕-我不会添加该代码.
现在,我们可以继续创建设置页面.
我们将从添加一个简单的方法开始 Toptal_Save_Admin
类调用 add_submenu_page ()
函数.
/**
*注册管理区域The设置页面.
*
* @since 1.0.0
*/
公共functionregister_settings_page() {
//将设置页面创建为子菜单页面.
add_submenu_page (
'tools.Php ', //父段
__('Toptal - Save', 'Toptal - Save'), //页面标题
__('Toptal Save', 'Toptal - Save'), //菜单标题
'manage_options', //能力
' total -save', // menu_slug
Array ($this, 'display_settings_page') //可调用Thefunction
);
}
this是我们传递给 add_submenu_page ()
函数. 下面是它们各自的意思.
-
父母鼻涕虫: 父菜单的名称(或标准WordPress管理页面的文件名). 您可以看到父类鼻涕虫的完整列表 在这里.
-
页面标题: 当菜单被选中时,在页面的标题标签中显示的文本.
-
菜单标题: 要用于菜单标题的文本.
-
能力: 向用户显示此菜单所需的功能. 我们使用了“manage_options”,它允许访问管理面板选项. 您可以阅读更多关于角色和功能的内容 在这里.
-
菜单鼻涕虫: 鼻涕虫名称指的是这个菜单.
-
可调用的函数: 为输出该页的内容而调用的函数.
因为我们已经定义了可调用函数的名称, 我们需要创造它, 但在此之前, 我们使用 这个美元
从自身内部引用类的实例. 以下是PHP文档对此的解释:
伪变量这个美元在对象上下文中调用方法时可用. 这个美元是对调用对象的引用(通常是该方法所属的对象), 但也可能是另一个物体, (如果从辅助对象的上下文中静态地调用该方法).
接下来,我们将为类添加另一个方法:
不要担心电话 add_action ()
因为这是我们稍后会讲到的.
现在,只需打开工具页面,您就可以看到Toptal Save页面. 如果我们打开它,它可以工作,但我们看到一个空白的屏幕,因为上面没有任何东西.
< / div >
我们取得了一些进展,但我们需要在这里显示一些设置,我们来做这个.
我们将开始创建字段, 这就是我们要借助的 WordPress设置API.
如果您不熟悉它,它允许我们创建用于保存数据的表单字段.
在这里. 我们在上面的函数中使用了以下代码:
每当我们使用这三个函数中的一个时,就会提供一个清理回调. 这允许对数据进行清理和, 如果它是一个字段, 显示适当的HTML元素(复选框), 广播, input, 等).
也, 我们已经向这些回调函数传递了一个数据数组, 例如label_for, 描述或默认值.
现在,我们可以创建那些消毒回调. 您可以找到这些回调的代码 在这里.
这一切都很好,但是,我们需要将字段挂钩到 admin_init
勾起,然后展示给他们看.
我们将使用 add_action
哪个是WordPress核心在执行过程中的特定点启动的钩子, 或者当一个特定的事件发生时. admin_init
在用户访问管理区域之前触发任何其他钩子.
首先,我们需要添加一个动作 包括/ class-toptal-save.php 文件.
的 settings_fields ()
函数用于输出设置页面的nonce、action和option_page字段.
后面跟着 do_settings_sections ()
哪个打印出添加到特定设置页面的所有设置部分.
最后,使用提供的文本和适当的类添加提交按钮 submit_button ()
函数.
现在,如果我们看看我们的页面,它看起来是这样的:
< / div >
这就是我们在行政区域所要做的. 让我们开始处理插件的公共部分.
创建插件功能.
有趣的部分来了. 我们需要创建多个函数来分离我们的功能:
- 显示“保存项目”按钮的功能. 这需要检查当前用户是否已经保存了该项目, 取决于这个, 我们将显示不同的文本和颜色.
- 保存/取消保存项目的函数(AJAX).
- 显示所有保存项的函数.
- 生成短代码的函数.
让我们从显示按钮开始. 我们会在 公共/ class-toptal-save-public.php.
在做这个的时候, 我们需要创建一些额外的辅助函数来处理某些事情,比如:
- 为网站创建一个唯一的cookie名称
- 创建一个cookie
- 获取cookie值
- 从设置中获取成员状态
可以找到这些辅助函数的代码 在这里.
的 get_unique_cookie_name ()
函数将帮助我们从网站URL生成唯一的cookie名称, 网站的名字, 以及我们自定义的后缀. 这是为了在同一域下的多个WordPress站点中使用生成的cookie名称时不会发生冲突.
的 toptal_set_cookie ()
和 toptal_get_cookie ()
函数将分别创建和获取cookie的值.
的 get_user_status ()
函数将在Settings中获取成员资格复选框的状态(勾选后返回1), 0否则).
现在是有趣的部分,创建负责显示保存按钮的函数. 的实现 show_save_button ()
功能可以找到 在这里. 这里我们使用了WordPress API中的一些新函数:
现在,让我们创建一个函数,将按钮附加到内容的末尾. 在这里,我们有两个关键要求.
- 确保该按钮仅在设置中选择的帖子类型上显示.
- 确保选中用于追加按钮的复选框.
show_save_button ();
custom_content美元 .= ob_get_contents ();
ob_end_clean ();
$content = $content . custom_content美元;
}
返回$内容;
}
现在,我们需要将这个函数挂钩到 the_content
钩.
为什么? 因为 the_content
在从数据库检索到文章内容之后和在打印到屏幕之前,用于过滤该文章的内容.
这样,我们就可以在内容的任何地方添加保存按钮. 我们可以用 包括/ class-toptal-save.php in define_public_钩s ()
方法,像这样:
< / div >
从这里,我们应该继续样式按钮.
我们可以用 公共/ css / toptal-save-public.css. 查找更新后的CSS文件 在这里.
现在,让我们创建一个实际保存项目的函数.
我们将在我们的公共类中做这个,我们将用AJAX来做. 代码是 在这里.
让我们把这个函数钩到WordPress AJAX中.
在这里.
在完成这一部分之前,我们还需要做两件事.
- 本地化脚本.
- 在public/js/ total -save-public中创建AJAX调用.js
脚本的本地化将通过 wp_localize_script ()
函数 公共/ class-toptal-save-public.php
文件.
也, 既然说到这里了, 我们还将确保根据“使用我们的样式”复选框的状态实现显示CSS和JS文件.
在这里 和必要的CSS 在这里.
我还添加了一个函数,用于在添加项时处理通知.
下面是它的工作原理.
< / div >
接下来,我们需要为用户创建一个短代码,以便在他们想要的任何地方插入.
我们可以用 公共/ class-toptal-save-public.php:
//添加我们的短码s
这个美元->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );
现在,这行不通因为我们还没有加载 add_shortcode ()
方法在装入器类中.
在这里 是完整的代码吗 包括/ class-toptal-save-loader.php 文件.
我添加了一个新的受保护变量 短码
,然后在类的构造函数方法中,我将其转换为数组.
在第104行, I’ve added a 函数 that will be responsible for the creation of our 短码; you can see that it’s pretty much the same as the 函数 above it (add_filter ()
),只不过我把“过滤器”改成了“短代码”,把“过滤器”改成了“短代码”.”
同样,在 run ()
方法,我添加了另一个 foreach
它将通过我们的短代码数组,并将它们注册到WordPress.
这很简单.
记住,一开始,我们用的是短码 (toptal-saved)
,那么让我们创建一个方法来显示所有已保存的项目.
查找此方法的完整代码 在这里.
现在,像往常一样,我们需要注册短代码 包括/ class-toptal-save.php:
在这里.
对于第二个,它涉及到一些前端脚本.
可以找到完整的JavaScript代码 在这里.
正如您将在第52行看到的,我搜索了带有“toptal-saved-item”类的div.”
然后,在第70-75行,检查父div是否有一个类toptal-saved-item.
如果有的话, 我们用淡出隐藏我们的项目,然后, 动画结束后, 我们从屏幕上完全移除项目.
现在,让我们进入更困难的部分——使其模块化.
使插件模块化.
模块化插件的基本定义是:
可扩展的, 或者模块化代码, 代码可以修改吗, 与之交互, 添加到, 或者被操纵——所有这些都不需要修改核心代码库.
现在, 当涉及到这个插件, 我会确保用户可以在保存项页面上更改保存项内的HTML.
所以,我们需要对我们的 register_saved_shortcode ()
方法:
- 改变
html_to_返回
to inner_html_to_返回
我们希望用户能够在任何地方修改HTML. 确保我们的第一个声明 inner_html_to_返回
变量前面没有点的“=”.
- 使用
apply_filter ()
方法来注册我们的过滤器.
通过这两个更改,您应该得到类似的结果 这.
现在,如果用户想与我们的代码交互,他们可以在他们的 功能.php
文件:
生成翻译文件.
翻译是非常重要的,因为它允许WordPress社区成员和通晓多种语言的人翻译你的插件, 让非英语网站也能访问.
话虽如此,让我们深入了解一些关于WordPress如何处理翻译的技术细节.
WordPress使用GNU gettext
翻译本地化框架. 在这个框架中,有三种类型的文件:
- 便携式对象模板(POT)
- 可携式物件(PO)
- 机器对象(MO)
这些文件中的每一个都代表翻译过程中的一个步骤.
生成一个POT文件, 我们需要一个程序,将通过WordPress代码搜索, 然后把所有的文本传递给我们的翻译函数, 如 __e ()
和 _e()
. 您可以阅读更多关于翻译函数的信息 在这里.
这里我们从POT文件翻译文本, 将英语和翻译保存在PO文件中, 将PO文件转换为MO文件.
手动执行此操作将花费大量时间,因为您必须为插件中的每个可翻译文件编写几行代码. 幸运的是,有一个更好的方法,使用一个方便的小插件,叫做疯子翻译.
安装并激活后,转到 疯子翻译 > 插件s > Toptal Save.
从那里,单击编辑模板,然后同步和保存. 这将编辑我们的 toptal-save.锅
文件放在我们的languages文件夹中.
现在,插件可以进行翻译了.
现在构建你的WordPress插件.
我们在本文中构建了一个相当简单的插件, 但在这个过程中, 我们遵循实践和标准,使我们能够轻松地维护和扩展这个插件.
我们使用WordPress功能的方式不会影响平台的整体性能.
无论它是一个简单的插件还是一个复杂的插件,无论你是一个独立的开发人员还是一个 WordPress开发公司、计划及跟进 最佳实践 构建一个健壮插件的关键是什么.
< / div >< / div >< / div >< / div >
就这一主题咨询作者或专家.< / div >
预约电话< / div >< / div >