构建 WordPress 插件的终极指南

插件是需要特定功能的 WordPress 网站的重要组成部分。

虽然官方 WordPress 存储库有超过 45,000 个插件可供您选择，但其中许多插件都没有达到目标。

仅仅因为插件在存储库中并不意味着它不会影响其性能或损害其安全性。

所以，你可以做什么？ 好吧，你可以建立自己的。

构建一个伟大的 WordPress 插件始于仔细的计划。

无论您是从头开始构建，还是基于样板，遵循有据可查的最佳实践是绝对必要的。

在本教程中，您将学习如何以正确的方式构建简单的 WordPress 插件。

如果您想在阅读时查看最终源代码，可以在此处找到。

从一个计划开始。

首先，让我们列出我们的插件将具有的功能并准确概述它需要做什么。

我们正在构建的插件将允许网站访问者保存内容以供以后阅读。

对于注册用户，我们将列表存储在数据库中，对于匿名用户，我们将使用 cookie 保存列表。

以下是我们插件将提供的特性和功能的概述。

设定画面

• 管理员能够将“保存项目”按钮添加到内容的末尾。
• 能够选择我们希望添加此按钮的帖子类型。
• 为用户提供选项来决定他们是否要使用我们预定义的样式
• 提供仅对登录用户启用该功能的选项。
• 提供一个选项来更改插件面向访问者的部分​​上显示的消息。

保存内容

• 如果用户已登录，将内容保存到自定义用户字段
• 如果用户未登录，将内容保存到 cookie

留言

以下消息将响应访问者与插件的交互或作为可操作项目的标签出现在屏幕上：

• “保存项目。”
• “取消保存项目。”
• “得救了。 查看已保存的项目。”
• “您没有任何已保存的项目。”

保存的屏幕

这是访问者查看他们保存的帖子列表的地方。

• 显示已保存项目的列表
• 在激活插件时创建一个保存的页面
• 停用插件时删除已保存的页面

短代码

使用简码，可以在添加的任何位置呈现已保存的页面。

使用样板。

这是我找到的最好的样板。 它结构良好、面向对象且高效。 它遵循每一个最佳实践。 而且它又快又轻。

您可以使用此页面生成基于此 WordPress 插件样板的插件代码库：

您应该得到一个.zip文件。

提取它，并将其放在您的 WordPress 安装文件夹中： wp-content/plugins/ 。

如果您打开 WordPress 仪表板并转到插件，您会看到您的插件列在那里。 暂时不要激活它。

处理激活和停用。

我们的插件正确处理激活和停用非常重要。

当我们的插件被激活时，我们将创建一个名为“已保存”的页面，该页面将保存用户保存的项目。

在创建该页面时，我们将为我们保存的项目添加一个短代码到该页面的内容中。

最后，我们将保存页面； 获取其 ID； 并将其存储在数据库中，以便我们稍后在停用插件时访问它。

当我们的插件被停用时，我们将从数据库中获取“已保存”页面 ID，然后删除“已保存”页面，删除插件本身的任何痕迹。

我们可以在includes/class-toptal-save-activator.php和includes/class-toptal-save-deactivator.php中完成所有这些。

让我们从激活过程开始：

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

激活插件时调用activate()函数。

它使用wp_insert_post()函数创建一个新页面，并使用add_option()将页面 ID 保存到数据库中。

现在，让我们继续停用插件。

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

deactivate()函数在插件停用时调用，使用get_option()函数检索页面，使用 wp_delete_post() 从数据库中删除相应页面，并使用wp_delete_post() delete_option()选项表中删除保存的 ID .

如果我们激活我们的插件并转到页面，我们应该会看到一个名为“已保存”的页面，其中包含一个短代码。

如果我们要停用插件，该页面将被删除。

由于我们在wp_delete_post()方法中使用true作为参数，因此该页面不会进入垃圾箱，而是会被完全删除。

创建插件设置页面。

我们可以在admin/class-toptal-save-admin.php文件中创建我们的设置页面，我们需要在该文件中做的第一件事是删除或注释掉enqueue_styles()函数中对wp_enqueue_style() () 的调用，然后如果我们不向管理屏幕添加任何 CSS/JS，则在enqueue_scripts()函数中调用wp_enqueue_script() 。

但是，如果我们要添加一些样式，那么我建议我们仅在插件的设置页面中加载这些文件，而不是在所有 WordPress 管理页面上。 我们可以通过将以下代码直接放在我们将注释的行上方来做到这一点：

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

如果您想知道我从哪里得到'tools_page_toptal-save'部分。

好吧，事情就是这样，我知道我要创建一个带有 slug toptal-save 的设置页面，并且我也知道我要将它添加到工具 ( tools.php ) 屏幕中。 因此，将这两者放在一起，我们可以看出变量$hook的值将是'tools_page_toptal-save' ——这两个值的串联。

如果我们不在插件设置页面，我们使用return立即终止我们所在功能的执行。

由于我不会向我的管理屏幕添加任何自定义样式——因为我希望我的插件屏幕看起来像原生 WordPress 屏幕——我不会添加该代码。

现在，我们可以继续创建我们的设置页面。

我们将首先向Toptal_Save_Admin类添加一个简单的方法，该方法将调用add_submenu_page()函数。

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

这是我们传递给add_submenu_page()函数的大量参数。 以下是他们每个人的意思。

• Parent slug：父菜单的 slug 名称（或标准 WordPress 管理页面的文件名）。 您可以在此处查看父蛞蝓的完整列表。

• 页面标题：选择菜单时在页面标题标签中显示的文本。

• 菜单标题：用于菜单标题的文本。

• 能力：用户为向他们显示此菜单所需的能力。 我们使用了“manage_options”，它允许访问管理面板选项。 您可以在此处阅读有关角色和能力的更多信息。

• Menu slug：引用此菜单的 slug 名称。

• 可调用函数：为输出此页面的内容而调用的函数。 由于我们已经定义了可调用函数的名称，我们需要创建它，但在此之前，我们使用$this从自身内部引用一个类的实例。 以下是 PHP 文档对此的说明：

当从对象上下文中调用方法时，伪变量 $this 可用。 $this 是对调用对象的引用（通常是方法所属的对象，但也可能是另一个对象，如果该方法是从辅助对象的上下文中静态调用的）。

接下来，我们将向该类添加另一个方法：

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

这个可调用函数包括我们的模板，它将显示我们的设置页面。 您可以看到我们正在引用位于admin/partials中的名为toptal-save-admin-display.php的文件。

现在，如果您转到工具，您将看不到该屏幕。 为什么？ 因为我们还没有将register_admin_page()方法挂钩到admin_menu挂钩。

我们可以通过打开我们的includes/class-toptal-save.php文件并在define_admin_hooks()方法中添加这段代码来做到这一点，就在$plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); 部分是。

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

不要担心对add_action()的调用，因为这是我们稍后将介绍的内容。

现在，只需打开工具页面，您就可以看到 Toptal 保存页面。 如果我们打开它，它可以工作，但是我们看到一个空白屏幕，因为上面什么都没有。

我们正在取得一些进展，但是，嘿，我们需要在这里显示一些设置，所以让我们这样做。

我们将开始创建字段，这将在 WordPress 设置 API 的帮助下完成。

如果您不熟悉它，它允许我们创建可用于保存数据的表单字段。

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

在register_settings()函数中，我们可以添加和配置所有字段。 您可以在此处找到该功能的完整实现。 我们在上面显示的函数中使用了以下内容：

• register_setting() ：注册设置及其清理回调。
• add_settings_section() ：将新部分添加到设置页面。
• add_settings_field() ：将新字段添加到设置页面的一部分。

每当我们使用这三个函数之一时，都会提供一个清理回调。 这允许对数据进行清理，如果它是一个字段，则可以显示适当的 HTML 元素（复选框、单选框、输入等）。

此外，我们还向这些回调传递了一个数据数组，如必要时的 label_for、description 或 default。

现在，我们可以创建这些清理回调。 您可以在此处找到这些回调的代码。

这一切都很好，但是，我们需要将字段挂钩到admin_init钩子中，然后显示它们。

我们将使用add_action ，它是 WordPress 核心在执行期间的特定点或特定事件发生时启动的钩子。 当用户访问管理区域时， admin_init在任何其他钩子之前触发。

首先，我们需要在includes/class-toptal-save.php文件中添加一个动作。

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

接下来，在admin/partials/topal-save-admin-display.php中，我们需要为插件的管理区域提供一个视图：

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

settings_fields()函数用于输出设置页面的 nonce、action 和 option_page 字段。

其后是do_settings_sections() ，它打印出添加到特定设置页面的所有设置部分。

最后，使用submit_button()函数使用提供的文本和适当的类添加提交按钮。

现在，如果我们看一下我们的页面，它将如下所示：

这就是我们在管理区域中要做的所有事情。 让我们开始处理插件的公共部分。

创建插件功能。

有趣的部分来了。 我们需要创建多个函数来分离我们的功能：

• 将显示“保存项目”按钮的功能。 这需要检查当前用户是否已经保存了该项目，根据它，我们将显示不同的文本和颜色。
• 将保存/取消保存项目的功能 (AJAX)。
• 将显示所有已保存项目的功能。
• 一个将生成我们的简码的函数。

因此，让我们开始显示按钮。 我们将在public/class-toptal-save-public.php中完成所有这些工作。

在执行此操作时，我们需要创建一些额外的辅助函数来处理某些事情，例如：

• 为网站创建唯一的 cookie 名称
• 创建 cookie
• 获取 cookie 值
• 从设置中获取会员状态

这些辅助函数的代码可以在这里找到。

get_unique_cookie_name()函数将帮助我们根据网站 URL、网站名称和我们自定义的后缀生成唯一的 cookie 名称。 这样生成的 cookie 名称在同一域下的多个 WordPress 站点中使用时不会发生冲突。

toptal_set_cookie()和toptal_get_cookie()函数将分别创建和获取我们的 cookie 的值。

get_user_status()函数将在设置中获取我们的会员复选框的状态（选中时返回 1，否则返回 0）。

现在，多汁的部分，创建将负责显示保存按钮的函数。 我们的show_save_button()函数的实现可以在这里找到。 我们在这里使用了来自 WordPress API 的一些新功能：

• get_queried_object_id() ：获取当前查询对象的 ID。
• is_user_logged_in() ：检查当前访问者是否是登录用户。
• get_user_meta() ：检索用户的用户元数据字段。
• wp_create_nonce() ：创建与特定操作、用户、用户会话和时间窗口相关联的加密令牌。

现在，让我们创建一个函数，将我们的按钮附加到内容的末尾。 在这里，我们有两个关键要求。

1. 确保该按钮仅显示在设置中选择的帖子类型上。
2. 确保选中附加按钮的复选框。

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

现在，我们需要将此函数挂钩到the_content挂钩。

为什么？ 因为the_content用于在从数据库检索到帖子后，在将其打印到屏幕之前过滤帖子的内容。

有了这个，我们可以在内容的任何地方添加我们的保存按钮。 我们可以在define_public_hooks()方法的includes/class-toptal-save.php中做到这一点，如下所示：

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

现在，如果转到插件设置，检查帖子和页面，以及附加按钮，我们将在任何博客文章中看到显示按钮。

从这里开始，我们应该继续设置该按钮的样式。

我们可以在public/css/toptal-save-public.css中做到这一点。 在此处找到更新的 CSS 文件。

现在，让我们创建一个实际保存项目的函数。

我们将在我们的公共课程中执行此操作，并且我们将使用 AJAX 执行此操作。 代码在这里。

让我们将这个函数挂接到 WordPress AJAX 中。

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

您可以在此处阅读有关插件中 AJAX 的更多信息。

在我们完成这部分之前，我们还需要做两件事。

1. 本地化脚本。
2. 在 public/js/toptal-save-public.js 中创建我们的 AJAX 调用

本地化脚本将通过我们的public/class-toptal-save-public.php文件中的wp_localize_script()函数完成。

此外，当我们这样做时，我们还将确保根据“使用我们的样式”复选框的状态来实现显示 CSS 和 JS 文件。

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

现在，我们可以继续我们的 AJAX 调用了。

我们的前端脚本将查找类为“toptal-save-button”的元素。

点击处理程序将注册到所有匹配的元素，这将执行 API 调用并相应地更新 UI。

您可以在此处找到代码，并在此处找到必要的 CSS。

我还添加了一个函数，该函数将在添加项目时处理通知。

这就是它的工作原理。

接下来，我们需要为用户创建一个简码，以便在他们想要的任何地方插入。

我们可以在public/class-toptal-save-public.php中做到这一点：

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

我们还需要注册它，因为函数本身不会做任何事情。

在include/class-toptal-save.php中，在我们附加按钮的那一行之后添加此代码。

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

现在，这不起作用，因为我们还没有在加载器类中加载add_shortcode()方法。

这是包含/class-toptal-save-loader.php文件的完整代码。

我添加了一个名为shortcodes的新受保护变量，然后在类的构造函数方法中，我将它变成了一个数组。

在第 104 行，我添加了一个负责创建短代码的函数； 您可以看到它与上面的函数（ add_filter() ）几乎相同，除了我将“过滤器”更改为“简码”并将“过滤器”更改为“简码”。

此外，在run()方法中，我添加了另一个foreach ，它将通过我们的短代码数组，并将它们注册到 WordPress。

那很简单。

请记住，一开始，我们使用了一个短[toptal-saved] ，所以让我们创建一个方法来显示我们所有保存的项目。

在此处找到此方法的完整代码。

现在，和往常一样，我们需要在includes/class-toptal-save.php中注册短代码：

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

我们在这里还有两件事要做。

1. 为我们保存的项目页面设置样式。
2. 确保当用户删除已保存的项目时，它会从已保存的项目页面中消失。

对于第一个任务，您可以在此处找到必要的 CSS 代码。

对于第二个，它涉及一些前端脚本。

可以在这里找到完整的 JavaScript 代码。

正如您将在第 52 行看到的那样，我搜索了具有“toptal-saved-item”类的 div。

然后，在第 70-75 行，我们检查父 div 是否有一个类 toptal-saved-item。

如果是这样，我们使用 fadeOut 隐藏我们的项目，然后在动画结束后，我们将项目从屏幕上完全移除。

现在，让我们继续进行更困难的部分——使其模块化。

使插件模块化。

模块化插件的基本定义是：

可扩展或模块化代码是可以修改、与之交互、添加或操作的代码——所有这些都无需修改核心代码库。

现在，当谈到这个插件时，我会确保用户可以在已保存项目页面上更改已保存项目内的 HTML。

因此，我们需要对register_saved_shortcode()方法进行一些更改：

• 在我们希望用户能够更改 HTML 的任何地方，将inner_html_to_return html_to_return 确保我们的inner_html_to_return变量的第一个声明有“=”，前面没有一个点。
• 使用apply_filters()方法注册我们的过滤器。

通过这两个更改，您最终应该得到这样的结果。

现在，如果用户想要与我们的代码进行交互，他们可以在他们的functions.php文件中添加类似这样的内容：

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

生成翻译文件。

翻译非常重要，因为它允许 WordPress 社区成员和多语言者翻译您的插件，使其可供非英语网站访问。

话虽如此，让我们深入了解一些有关 WordPress 如何处理翻译的技术细节。

WordPress 使用 GNU gettext本地化框架进行翻译。 在这个框架中，有三种类型的文件：

• 可移植对象模板 (POT)
• 便携式对象 (PO)
• 机器对象 (MO)

这些文件中的每一个都代表翻译过程中的一个步骤。

要生成 POT 文件，我们需要一个程序来搜索 WordPress 代码，并获取传递给我们的翻译函数的所有文本，例如__e()和_e() 。 您可以在此处阅读有关翻译功能的更多信息。

这里我们翻译 POT 文件中的文本，将英语和我们的翻译保存在 PO 文件中，然后我们将 PO 文件转换为 MO 文件。

手动执行此操作将花费大量时间，因为您必须为插件中的每个可翻译文件编写几行代码。 幸运的是，有一个更好的方法，使用一个名为 Loco Translate 的方便的小插件。

安装并激活它后，转到 Loco Translate > Plugins > Toptal Save。

从那里，单击编辑模板，然后单击同步并保存。 这将编辑我们的语言文件夹中的toptal-save.pot文件。

现在，该插件可用于翻译。

立即构建您的 WordPress 插件。

我们在本文中构建了一个相当简单的插件，但在此过程中，我们遵循了允许我们轻松维护和扩展此插件的实践和标准。

我们以不会影响平台整体性能的方式使用 WordPress 功能。

无论是简单的插件还是复杂的插件，无论您是个人开发者还是 WordPress 开发公司，规划和遵循最佳实践都是构建强大插件的关键。