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

如果我们激活插件, 然后进入页面, 我们应该看到一个名为“保存”的页面，里面有一个简短的代码.

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

Since we used true 作为我们的论点 wp_delete_post () 方法时，该页不会被删除，而是会被完全删除.

创建插件设置页面.

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

However, 如果我们要添加一些造型, then, 我建议我们只在插件的设置页面中加载这些文件, 而不是在所有WordPress管理页面上. 我们可以通过将下面的代码直接放在我们将要注释的行上面来做到这一点:

If ('tools_page_top -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_top -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” part from.

Well, 事情是这样的, 我知道我将创建一个设置页面，其中包含一个总保存选项, 我还知道我要把它添加到工具(tools.php) screen. 因此，把这两个放在一起，我们可以知道变量的值 $hook is going to be “tools_page_toptal-save” -两个值的连接.

如果我们不在我们的插件设置页面，我们使用 return 立即终止所处函数的执行.

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

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

我们将从添加一个简单的方法开始 Toptal_Save_Admin 类调用 add_submenu_page () function.

/**
 *注册管理区域的设置页面.
 *
 * @since    1.0.0
 */
公共函数register_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') //可调用的函数
	);
}

这是我们传递给 add_submenu_page () function. 下面是它们各自的意思.

• Parent slug: 父菜单的名称(或标准WordPress管理页面的文件名). 您可以看到父类鼻涕虫的完整列表 here.

• Page title: 当菜单被选中时，在页面的标题标签中显示的文本.

• Menu title: 要用于菜单标题的文本.

• Capability: 向用户显示此菜单所需的功能. 我们使用了“manage_options”，它允许访问管理面板选项. 您可以阅读更多关于角色和功能的内容 here.

• Menu slug: 鼻涕虫名称指的是这个菜单.

• 可调用的函数: 为输出该页的内容而调用的函数. 因为我们已经定义了可调用函数的名称, 我们需要创造它, 但在此之前, we used $this 从自身内部引用类的实例. 以下是PHP文档对此的解释:

伪变量$this在对象上下文中调用方法时可用. $this是对调用对象的引用(通常是该方法所属的对象), 但也可能是另一个物体, (如果从辅助对象的上下文中静态地调用该方法).

接下来，我们将为类添加另一个方法:

/**
 *显示我们创建的页面的设置页面内容.
 *
 * @since    1.0.0
 */
公共函数display_settings_page() {

	require_once plugin_dir_path(dirname(__FILE__)) . “admin /泛音/ toptal-save-admin-display.php';

}

这个可调用的函数包含了将要显示设置页面的模板. 您可以看到，我们正在引用位于 admin/partials called toptal-save-admin-display.php.

现在，如果你去工具，你不会看到这个屏幕. Why? 因为我们还没有 register_admin_page () method to the admin_menu hook.

我们可以通过开放我们的 包括/ class-toptal-save.php 文件并将此代码块添加到 define_admin_hooks () 方法的正下方 $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); part is.

/**
 *注册所有与管理区功能相关的钩子
 插件的*.
 *
 * @since    1.0.0
 * @access private
 */
私有函数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() 因为这是我们稍后会讲到的.

现在，只需打开Tools页面，您就可以看到Toptal Save页面. 如果我们打开它，它可以工作，但我们看到一个空白的屏幕，因为上面没有任何东西.

我们取得了一些进展，但我们需要在这里显示一些设置，我们来做这个.

我们将开始创建字段, 这就是我们要借助的 WordPress设置API.

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

/**
 *注册我们的设置页面的设置.
 *
 * @since    1.0.0
 */
公共函数register_settings () {

	//我们将在这里注册我们的设置.
	register_setting (
		$this->plugin_name . '-settings',
		$this->plugin_name . '-settings',
		数组($this， 'sandbox_register_setting')
	);

	//这里我们将为我们的设置添加一个部分.
	add_settings_section (
		$this->plugin_name . 设置部分,
		__('Settings'， ' total -save')，
		数组($this， 'sandbox_add_settings_section')，
		$this->plugin_name . '-settings'
	);

	//这里我们将向section中添加字段.
	add_settings_field (
		'post-types',
		__('Post Types'， ' total -save')，
		数组($this， 'sandbox_add_settings_field_multiple_checkbox')，
		$this->plugin_name . '-settings',
		$this->plugin_name . 设置部分,
		array(
			'label_for' => 'post-types',
			'description' => __( 'Save button will be added only to the checked post types.'， ' total -save')
		)
	);
	
	// ...

}

Inside the register_settings () 函数，我们可以添加和配置所有字段. 您可以找到该函数的完整实现 here. 我们在上面的函数中使用了以下代码:

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

每当我们使用这三个函数中的一个时，就会提供一个清理回调. 这允许对数据进行清理和, 如果它是一个字段, 显示适当的HTML元素(复选框), radio, input, etc).

Also, 我们已经向这些回调函数传递了一个数据数组, 例如label_for, 描述或默认值.

现在，我们可以创建那些消毒回调. 您可以找到这些回调的代码 here.

这一切都很好，但是，我们需要将字段挂钩到 admin_init 勾起，然后展示给他们看.

We will use add_action 哪个是WordPress核心在执行过程中的特定点启动的钩子, 或者当一个特定的事件发生时. admin_init 在用户访问管理区域之前触发任何其他钩子.

首先，我们需要添加一个动作 包括/ class-toptal-save.php file.

/**
 *注册所有与管理区功能相关的钩子
 插件的*.
 *
 * @since    1.0.0
 * @access private
 */
私有函数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_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' );

}

Next, in 管理/泛音/ topal-save-admin-display.php，我们需要为我们的插件的管理区域提供一个视图:

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

后面跟着 do_settings_sections () 哪个打印出添加到特定设置页面的所有设置部分.

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

现在，如果我们看看我们的页面，它看起来是这样的:

这就是我们在行政区域所要做的. 让我们开始处理插件的公共部分.

创建插件功能.

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

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

让我们从显示按钮开始. 我们会在 公共/ class-toptal-save-public.php.

在做这个的时候, 我们需要创建一些额外的辅助函数来处理某些事情，比如:

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

可以找到这些辅助函数的代码 here.

The get_unique_cookie_name () 函数将帮助我们从网站URL生成唯一的cookie名称, website name, 以及我们自定义的后缀. 这是为了在同一域下的多个WordPress站点中使用生成的cookie名称时不会发生冲突.

The toptal_set_cookie () and toptal_get_cookie () 函数将分别创建和获取cookie的值.

The get_user_status () 函数将在Settings中获取成员资格复选框的状态(勾选后返回1), 0 otherwise).

现在是有趣的部分，创建负责显示保存按钮的函数. 的实现 show_save_button () 功能可以找到 here. 这里我们使用了WordPress API中的一些新函数:

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

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

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

/**
 *将按钮附加到内容的末尾.
 *
 * @since    1.0.0
 */
公共函数append_the_button($content) {

	//获取项目ID
	$item_id = get_queried_object_id ();

	//获取当前条目的post类型
	$current_post_type = get_post_type($item_id);

	//获取我们保存的页面ID，这样我们就可以确保这个按钮没有显示在那里
	$saved_page_id = get_option('toptal_save_saved_page_id');

	//为下面将要调用的选项设置默认值
	$post_type = array();
	$override = 0;

	//获取我们的选项
	$options = get_option( $this->plugin_name . “设置”);
	if ( ! 空($options['post-types'])) {
		$post_types = $options['post-types'];
	}
	if ( ! 空($options['toggle-content-override'])) {
		$override = $options['toggle-content-override'];
	}

	//检查所有条件是否正常
	如果($override == 1 && ! 空($post_type) && ! Is_page ($saved_page_id) && In_array ($current_post_type， $post_type) {

		//添加按钮
		custom_content美元 = ";
		ob_start();
		echo $this->show_save_button ();
		custom_content美元 .= ob_get_contents ();
		ob_end_clean ();
		$content = $content . custom_content美元;

	}

	返回$内容;

}

现在，我们需要将这个函数挂钩到 the_content hook.

Why? Because the_content 在从数据库检索到文章内容之后和在打印到屏幕之前，用于过滤该文章的内容.

这样，我们就可以在内容的任何地方添加保存按钮. 我们可以用 包括/ class-toptal-save.php in define_public_hooks () 方法，像这样:

/**
 *注册所有与面向公众的功能相关的钩子
 插件的*.
 *
 * @since    1.0.0
 * @access private
 */
私有函数define_public_hooks () {

	$plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() );

	//添加按钮
	$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' );

}

Now, 如果是，请进入插件设置, 检查帖子和页面, 以及附加按钮, 我们会在任何博客文章中看到这个按钮.

从这里，我们应该继续样式按钮.

我们可以用 公共/ css / toptal-save-public.css. 查找更新后的CSS文件 here.

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

我们将在我们的公共类中做这个，我们将用AJAX来做. The code is here.

让我们把这个函数钩到WordPress AJAX中.

/**
 *注册所有与面向公众的功能相关的钩子
 插件的*.
 *
 * @since    1.0.0
 * @access private
 */
私有函数define_public_hooks () {

	$plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() );

	//添加按钮
	$this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 );

	//保存/取消保存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的内容 here.

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

1. 本地化脚本.
2. 在public/js/ total -save-public中创建AJAX调用.js

脚本的本地化将通过 wp_localize_script () 函数 公共/ class-toptal-save-public.php file.

Also, 既然说到这里了, 我们还将确保根据“使用我们的样式”复选框的状态实现显示CSS和JS文件.

/**
 *注册面向公众的网站的样式表.
 *
 * @since    1.0.0
 */
公共函数enqueue_styles () {

	/**
	 *此功能仅供演示使用.
	 *
	 该类的一个实例应该传递给run()函数
	 在Toptal_Save_Loader中定义了所有的钩子
	 在那个特殊的班级里.
	 *
	 * Toptal_Save_Loader将创建关系
	 在定义的钩子和在this中定义的函数之间
	 * class.
	 */

	$options = get_option( $this->plugin_name . “设置”);

	if ( ! 空($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' );
	}

}

/**
 *注册面向公众的JavaScript.
 *
 * @since    1.0.0
 */
公共函数enqueue_scripts () {

	/**
	 *此功能仅供演示使用.
	 *
	 该类的一个实例应该传递给run()函数
	 在Toptal_Save_Loader中定义了所有的钩子
	 在那个特殊的班级里.
	 *
	 * Toptal_Save_Loader将创建关系
	 在定义的钩子和在this中定义的函数之间
	 * class.
	 */

	wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . js / toptal-save-public.js', array( 'jquery' ), $this->version, false );

	//获取我们的选项
	$options = get_option( $this->plugin_name . “设置”);

	//获取我们的文本
	$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_permallink ($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.

您可以找到代码 here 和必要的CSS here.

我还添加了一个函数，用于在添加项时处理通知.

下面是它的工作原理.

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

我们可以用 公共/ class-toptal-save-public.php:

/**
 *为用户创建短代码来添加按钮.
 *
 * @since    1.0.0
 */
register_save_unsave_shortcode() {

	return $this->show_save_button ();

}

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

In 包括/ class-toptal-save.php 将这段代码添加到我们添加按钮的那行之后.

//添加我们的Shortcodes
$this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

现在，这行不通因为我们还没有加载 add_shortcode () 方法在装入器类中.

Here 是完整的代码吗 包括/ class-toptal-save-loader.php file.

我添加了一个新的受保护变量 shortcodes，然后在类的构造函数方法中，我将其转换为数组.

On line 104, I’ve added a function that will be responsible for the creation of our shortcodes; you can see that it’s pretty much the same as the function above it (add_filter())，只不过我把“过滤器”改成了“短代码”，把“过滤器”改成了“短代码”.”

Also, in the run() 方法，我添加了另一个 foreach 它将通过我们的短代码数组，并将它们注册到WordPress.

That was easy.

记住，一开始，我们用的是短码 [toptal-saved]，那么让我们创建一个方法来显示所有已保存的项目.

查找此方法的完整代码 here.

现在，像往常一样，我们需要注册短代码 包括/ class-toptal-save.php:

/**
 *注册所有与面向公众的功能相关的钩子
 插件的*.
 *
 * @since    1.0.0
 * @access private
 */
私有函数define_public_hooks () {

	$plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() );

	//添加按钮
	$this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 );

	//添加我们的Shortcodes
	$this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );
	$this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' );

	//保存/取消保存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代码 here.

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

可以找到完整的JavaScript代码 here.

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

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

If it does, 我们用淡出隐藏我们的项目，然后, 动画结束后, 我们从屏幕上完全移除项目.

现在，让我们进入更困难的部分——使其模块化.

使插件模块化.

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

Extensible, 或者模块化代码, 代码可以修改吗, 与之交互, added to, 或者被操纵——所有这些都不需要修改核心代码库.

Now, 当涉及到这个插件, 我会确保用户可以在保存项页面上更改保存项内的HTML.

所以，我们需要对我们的 register_saved_shortcode () method:

• Change html_to_return to inner_html_to_return 我们希望用户能够在任何地方修改HTML. 确保我们的第一个声明 inner_html_to_return 变量前面没有点的“=”.
• Use the apply_filter () 方法来注册我们的过滤器.

通过这两个更改，您应该得到类似的结果 this.

现在，如果用户想与我们的代码交互，他们可以在他们的 functions.php file: