个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > WordPress > 正文

构建WordPress插件的终极指南

2020-04-15 22:24:36 分类：WordPress / 后端 阅读(724) 评论(0)

本文概述

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

虽然官方的WordPress信息库有超过45, 000个插件供你选择, 但其中许多插件都没有兑现。

仅仅因为插件位于存储库中并不意味着它不会妨碍其性能或损害其安全性。

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

构建WordPress插件的终极指南

构建一个出色的WordPress插件始于仔细计划。

无论你是从头开始构建, 还是从样板基础上构建, 遵循绝对有据可查的最佳实践都是绝对必要的。

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

如果你想在阅读过程中查看最终的源代码, 可以在这里找到。

从计划开始。

首先, 让我们列出我们的插件将具有的功能, 并概述其所需要做的事情。

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

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

下面概述了我们的插件将提供的功能。

设定画面

  • 管理员可以将”保存项目”按钮添加到内容的末尾。
  • 可以选择要在其中添加此按钮的帖子类型的功能。
  • 为用户提供选择权, 以决定他们是否要使用我们的预定义样式
  • 提供一个选项以仅对已登录的用户启用该功能。
  • 提供一个选项, 以更改出现在面向访客的插件一部分上的消息。

保存内容

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

留言内容

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

  • “保存项目。”
  • “未保存的项目。”
  • “保存。查看已保存的项目。”
  • “你没有任何保存的项目。”

保存的屏幕

访客可以在这里查看他们已保存的帖子列表。

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

短代码

使用简码, 可以将”已保存”页面添加到任何地方。

使用样板。

这是我找到的最好的样板。结构合理, 面向对象且高效。它遵循所有最佳实践。而且又快又轻。

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

WordPress的样板

你应该获得一个.zip文件。

解压缩它, 并将其放在你的WordPress安装文件夹中：wp-content / plugins /。

如果你打开WordPress信息中心, 然后转到插件, 则会看到其中列出了你的插件。暂时不要激活它。

处理激活和停用。

对于我们的插件而言, 正确处理激活和停用非常重要。

激活插件后, 我们将创建一个名为”已保存”的页面, 它将在其中保存用户的已保存项目。

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

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

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

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

让我们从激活过程开始：

<?php
// includes/class-srcmini-save-activator.php
// ...
class srcmini_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', 'srcmini-save' ), 'post_content' => '[srcmini-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( 'srcmini_save_saved_page_id', $saved_page_id );
	}
}

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

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

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

<?php
// includes/class-srcmini-save-activator.php
// ...
class srcmini_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( 'srcmini_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( 'srcmini_save_saved_page_id' );

		}

	}

}

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

如果我们激活插件并转到页面, 则应该看到一个名为” Saved”的页面, 其中包含一个短代码。

WordPress模块​​激活

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

由于我们在wp_delete_post()方法中将true用作参数, 因此该页面不会被删除, 而是会被完全删除。

创建一个插件设置页面。

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

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

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

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

如果你想知道我从哪里得到的” tools_page_srcmini-save”部分。

恩, 这就是问题, 我知道我将创建一个带有多余的srcmini-save的设置页面, 并且我也知道将其添加到”工具”(tools.php)屏幕中。因此, 将这两个值放在一起, 我们可以知道变量$ hook的值将是” tools_page_srcmini-save”-这两个值的串联。

如果我们不在插件设置页面中, 则可以使用return来立即终止正在执行的功能。

由于我不会在管理屏幕中添加任何自定义样式, 因为我希望插件屏幕看起来像本机WordPress屏幕, 所以我不会添加该代码。

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

我们将首先在srcmini_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
		__( 'srcmini Save', 'srcmini-save' ), // page title
		__( 'srcmini Save', 'srcmini-save' ), // menu title
		'manage_options', // capability
		'srcmini-save', // menu_slug
		array( $this, 'display_settings_page' )  // callable function
	);
}

我们传递给add_submenu_page()函数的参数很多。这是每个人的意思。

  • 父条目：父菜单的条目名称(或标准WordPress管理页面的文件名)。你可以在此处查看父级子弹的完整列表。

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

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

  • 能力：用户要求此菜单显示给他们的能力。我们使用了” manage_options”, 它允许访问管理面板选项。你可以在此处阅读有关角色和功能的更多信息。

  • 菜单项：引用此菜单的项名称。

  • 可调用函数：将被调用以输出此页面内容的函数。由于已经定义了可调用函数的名称, 因此需要创建它, 但是在执行此操作之前, 我们使用$ 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/srcmini-save-admin-display.php';

}

此可调用函数包括将显示设置页面的模板。你会看到我们正在引用位于admin / partials中名为srcmini-save-admin-display.php的文件。

现在, 如果你转到”工具”, 则不会看到该屏幕。为什么？因为我们尚未将register_admin_page()方法连接到admin_menu挂钩。

为此, 我们可以打开include / class-srcmini-save.php文件, 并将此代码块添加到define_admin_hooks()方法内, 在$ plugin_admin = new srcmini_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 srcmini_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()的调用, 因为稍后我们将介绍这一点。

现在, 只需打开”工具”页面, 就可以看到” srcmini保存”页面。如果打开它, 它可以工作, 但是由于没有任何内容, 因此我们看到了一个空白屏幕。

WordPress的工具页面

我们正在取得一些进展, 但是, 嘿, 我们需要在此处显示一些设置, 让我们开始吧。

我们将开始创建字段, 这将在WordPress Settings 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', 'srcmini-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', 'srcmini-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.', 'srcmini-save' )
		)
	);
	
	// ...

}

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

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

每当我们使用这三个功能之一时, 就会提供一个清理回调。这样可以清除数据, 如果是字段, 则可以显示适当的HTML元素(复选框, 单选, 输入等)。

另外, 我们已经将数据数组传递给这些回调, 例如label_for, description或default(如有必要)。

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

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

我们将使用add_action, 这是WordPress核心在执行过程中或发生特定事件时在特定点开始的钩子。当用户访问管理区时, admin_init在其他任何钩子之前被触发。

首先, 我们需要在include / class-srcmini-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 srcmini_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.srcmini02.com/resume/ratko-solaja
 * @since      1.0.0
 *
 * @package    srcmini_Save
 * @subpackage srcmini_Save/admin/partials
 */
?>

<!-- This file should primarily consist of HTML with a little bit of PHP. -->

<div id="wrap">
	<form method="post" action="options.php">
		<?php
			settings_fields( 'srcmini-save-settings' );
			do_settings_sections( 'srcmini-save-settings' );
			submit_button();
		?>
	</form>
</div>

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

随后是do_settings_sections(), 可打印出添加到特定设置页面的所有设置部分。

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

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

WordPress页面完整示例

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

创建插件功能。

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

  • 将显示”保存项目”按钮的功能。这需要检查当前用户是否已经保存了该项目, 具体取决于我们, 我们将显示不同的文本和颜色。
  • 一种将保存/取消保存项目的功能(AJAX)。
  • 该功能将显示所有保存的项目。
  • 一个将生成我们的短代码的函数。

因此, 让我们开始显示按钮。我们将在public / class-srcmini-save-public.php中进行所有这些操作。

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

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

这些帮助程序功能的代码可以在这里找到。

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

srcmini_set_cookie()和srcmini_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( 'srcmini_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()方法中的include / class-srcmini-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 srcmini_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' );

}

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

WordPress插件设置屏幕

从这里开始, 我们应该继续对该按钮进行样式设置。

我们可以在public / css / srcmini-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 srcmini_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 / srcmini-save-public.js中创建我们的AJAX调用

脚本的本地化将通过我们public / class-srcmini-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 srcmini_Save_Loader as all of the hooks are defined
	 * in that particular class.
	 *
	 * The srcmini_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/srcmini-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 srcmini_Save_Loader as all of the hooks are defined
	 * in that particular class.
	 *
	 * The srcmini_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/srcmini-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( 'srcmini_save_saved_page_id' );
	$saved_page_url = get_permalink( $saved_page_id );

	wp_localize_script(
		$this->plugin_name, 'srcmini_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调用。

我们的前端脚本将查找具有” srcmini-save-button”类的元素。

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

你可以在此处找到代码, 并在此处找到必要的CSS。

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

这就是全部的运作方式。

WordPress插件演示完成

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

我们可以在public / class-srcmini-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();

}

我们还需要注册它, 因为该功能本身不会执行任何操作。

在includes / class-srcmini-save.php中, 在我们添加按钮的那一行之后添加此代码。

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

现在, 这将无法正常工作, 因为我们尚未在加载程序类中加载add_shortcode()方法。

这是includes / class-srcmini-save-loader.php文件的完整代码。

我添加了一个名为shortcodes的新保护变量, 然后在该类的构造方法中将其转换为数组。

在第104行, 我添加了一个函数, 该函数将负责创建我们的短代码；你会看到它与上面的函数(add_filter())几乎相同, 只是我将”过滤器”更改为”简码”, 将”过滤器”更改为”简码”。

另外, 在run()方法中, 我添加了另一个foreach, 它将通过我们的shortcodes数组, 并向WordPress注册它们。

那很简单。

请记住, 在一开始, 我们使用了一个短代码[srcmini-saved], 因此让我们创建一个显示所有已保存项目的方法。

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

现在, 像往常一样, 我们需要在include / class-srcmini-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 srcmini_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( 'srcmini-save', $plugin_public, 'register_save_unsave_shortcode' );
	$this->loader->add_shortcode( 'srcmini-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行看到的那样, 我使用” srcmini-saved-item”类搜索了div。

然后, 在第70-75行, 我们检查父div是否具有class srcmini-saved-item。

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

现在, 让我们继续进行更困难的部分-将其模块化。

使插件模块化。

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

可扩展或模块化代码是可以在不修改核心代码库的情况下进行修改, 与之交互, 添加或操纵的代码。

现在, 当涉及到此插件时, 我将确保用户可以在已保存项目页面上更改已保存项目内的HTML。

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

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

有了这两个更改, 你应该得到这样的结果。

现在, 如果用户想与我们的代码进行交互, 则可以在functions.php文件中添加如下代码：

<?php
add_filter( 'srcmini_saved_item_html', 'change_srcmini_saved_item_html');
function change_srcmini_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翻译>插件> srcmini Save。

在此处, 单击编辑模板, 然后单击同步并保存。这将在语言文件夹中编辑我们的srcmini-save.pot文件。

现在, 该插件可以翻译了。

立即构建你的WordPress插件。

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

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

无论是简单的插件还是复杂的插件, 无论你是个人开发人员还是WordPress开发公司, 规划和遵循最佳实践都是构建可靠插件的关键。

赞(0)
未经允许不得转载：srcmini » 构建WordPress插件的终极指南
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)网红 (141)设计 (138)