在WordPress插件中使用命名空间和自动加载，第2部分

在上一个教程中 ，我们开始讨论WordPress开发环境中的名称空间和PHP自动加载。 尽管我们实际上从未介绍过这两个主题中的任何一个，但是我们确实定义了这两个主题，并开始为如何在即将到来的教程中介绍它们奠定基础。

但是，在执行此操作之前，需要完成一些功能以完善插件。 我们的目标是完成插件及其功能，以便我们有一个基本的，面向对象的插件，该文档已记录在案，并且可以很好地解决问题。 它不使用名称空间或自动加载。

反过来，这将使我们有机会在介绍这些主题之前和之后查看插件的外观。

在继续之前，建议您阅读上一教程。 这样，您将了解什么是名称空间和自动加载功能，到此为止，您将拥有插件的工作版本（因为我们将在此基础上进行构建），然后您就可以准备从这一点出发。

阅读后，请随时返回本教程并继续您的工作。

开始之前

与我的所有教程一样，我假定您在计算机上拥有一个正常的开发环境。 这包括以下内容：

• 一个本地开发环境，包括PHP 5.6.20，Apache Web服务器和MySQL数据库服务器。
• WordPress 4.6所在的目录。
• 您很喜欢使用文本编辑器或IDE来编写插件。
• WordPress插件API的使用知识。

如果你这么远到系列（或有读过我以前的工作 ），那么我想你已经有类似上面已经到位。

而当您这样做时，我们已准备好开始。

我们正在建设什么

回想一下以前的教程：

我们将构建一个插件，该插件可以轻松地在插件中加载样式表和JavaScript样式，并显示一个meta框，提示用户一个问题，以帮助他们集思广益地撰写博客文章。

是的，它很简单，除了研究我们在本博客中介绍的概念之外，任何人都不太可能使用。 但是，我们教授所用概念的方法很重要。

这个插件使我们能够做到这一点。

在上一教程的最后，我们剩下了一个插件，该插件在WordPress帖子创建屏幕的边栏顶部向作者显示随机问题。

每次刷新页面时，都会加载一个新问题。 就目前而言，这还不错，但是我们可以根据meta框中的内容样式进行一些改进。

也就是说，我们可以引入样式表，这将有助于我们创建一个更具视觉吸引力的演示文稿。 此外，这将使我们有机会探索更多面向对象的技术，这些技术可以在处理样式表之类的资产时使用。

因此，让我们开始吧。

样式表简介

出于本教程的目的，我将不使用任何类型的预处理器。 我将使用香草CSS。 但是，我们排队资产的方式将比许多WordPress开发人员过去所看到的更加面向对象。

这将有助于实现本系列中使用名称空间和自动加载的目标。 但是首先，让我们从介绍这些样式表开始，创建必要的类接口，类以及与WordPress API的通信。

添加CSS文件

在admin目录中，创建一个名为assets的子目录。 在assets目录中，创建一个名为css的子目录，然后添加文件admin.css 。

最终目录结构应如下所示：

我们尚不准备提供任何类型的样式。 相反，我们需要将注意力转移到负责使此样式表入队的服务器端代码。

排队样式表

当涉及到样式表和JavaScript的注册和排队时，大多数WordPress插件开发人员都熟悉执行此操作所需的钩子。 具体来说，我指的是admin_enqueue_scripts和wp_enqueue_style 。

尽管我们将使用这些挂钩，但是我们将以一种简单的，面向对象的方式对其进行设置。 不，本系列文章无意深入研究面向对象的原理，但在适用时，我很乐意尝试向您展示它们。

资产界面

在面向对象的编程中，接口的定义如下：

接口是允许计算机在类上强制某些属性的编程结构/语法。

另一种思考方式是：

如果您有一个实现接口的类，则该类必须定义该接口规定的功能。

因此，如果接口具有两个具有特定可见性和名称的方法签名，则实现该接口的类必须具有具有相同可见性和名称的两个方法以及一个实际的方法实现。

这就是我们要做的。 首先，我们需要定义接口。 因此，在util目录中，创建interface-assets.php ，然后添加以下代码：

<?php
/**
 * Defines a common set of functions that any class responsible for loading
 * stylesheets, JavaScript, or other assets should implement.
 */
interface Assets_Interface {

    public function init();
    public function enqueue();

}

注意，该接口实际上并未定义功能。 相反，它规定了实现此接口的类应该定义什么 。

您可能会猜到，将实现此接口的类将在上面具有两个方法以及每个函数的实际实现。 我们将立即了解其工作原理。

接下来，请确保将此文件包含在主插件文件中：

<?php

// Include the files for loading the assets
include_once( 'admin/util/interface-assets.php' );

接下来，我们需要创建一个实现此接口的文件。 由于我们正在使用CSS文件，因此我们将创建一个CSS加载器。

CSS加载器

该类负责实现接口并完成使用必要的WordPress钩子注册功能的实际工作（并实际为该功能提供实现）。

如果您看一下下面的代码，它应该看起来与您在上一个项目中看到或正在处理的代码非常相似：

<?php
/**
 * Provides a consistent way to enqueue all administrative-related stylesheets.
 */

/**
 * Provides a consistent way to enqueue all administrative-related stylesheets.
 *
 * Implements the Assets_Interface by defining the init function and the
 * enqueue function.
 *
 * The first is responsible for hooking up the enqueue
 * callback to the proper WordPress hook. The second is responsible for
 * actually registering and enqueuing the file.
 *
 * @implements Assets_Interface
 * @since      0.2.0
 */
class CSS_Loader implements Assets_Interface {

    /**
     * Registers the 'enqueue' function with the proper WordPress hook for
     * registering stylesheets.
     */
	public function init() {

        add_action(
            'admin_enqueue_scripts',
            array( $this, 'enqueue' )
        );

    }

    /**
     * Defines the functionality responsible for loading the file.
     */
    public function enqueue() {

        wp_enqueue_style(
            'tutsplus-namespace-demo',
            plugins_url( 'assets/css/admin.css', dirname( __FILE__ ) ),
            array(),
            filemtime( plugin_dir_path( dirname( __FILE__ ) ) . 'assets/css/admin.css' )
        );

    }
}

给定代码注释，上面的代码应该相对容易遵循，但我将概述发生的情况：

• 当类实现Assets_Interface时， init和enqueue都是必需的功能。
• 调用init ，它将使用负责注册样式表的钩子来注册enqueue函数。
• enqueue方法注册admin.css文件，并使用filemtime作为了解文件是否已更改的方式（这使我们可以在提供服务时admin.css文件的任何缓存版本）。

在此实现中，实际的admin.css文件添加在每个页面上。 添加条件来检查哪个页面当前处于活动状态，然后确定是否应添加样式表可以作为教程后的练习添加。 有关提示，请查看get_current_screen() 。

接下来，我们需要将此文件包含在主插件文件中：

<?php

// Include the files for loading the assets
include_once( 'admin/util/interface-assets.php' );
include_once( 'admin/util/class-css-loader.php' );

接下来，我们需要实例化CSS加载器，并在主要的tutsplus_namespace_demo函数中调用其init方法：

<?php

$css_loader = new CSS_Loader();
$css_loader->init();

假设您已正确完成所有操作，则应该能够刷新“ 添加新帖子”页面，查看源代码，并查看列为可用样式表的admin.css 。

在准备完成本部分教程之前，我们还有另外一件事要做。 我们实际上需要编写一些CSS。

设置元框的样式

由于本教程的大部分内容都集中在一些面向对象的技术上，并且在本系列中我们仍然需要探索一些新主题，因此我们将使这一部分相对容易一些。

不仅仅是使用WordPress提供的一些默认样式，我们还可以稍微增强一下meta框。

首先，在Meta_Box_Display类中找到render函数。 让我们对其进行修改，以使其在ID属性为“ tutsplus-author-prompt”的段落元素中输出文件的内容。

为此，我们将介绍一种新方法，该方法将使用WordPress API方法清理HTML。

<?php

/**
 * Sanitizes the incoming markup to the user so that
 *
 * @access private
 * @param  string $html The markup to render in the meta box.
 * @return string       Sanitized markup to display to the user.
 */
private function sanitized_html( $html ) {

    $allowed_html = array(
		'p' => array(
			'id' => array(),
		),
	);

	return wp_kses( $html, $allowed_html );
}

然后，我们将从render方法中调用此函数，以在meta框中显示内容。

<?php

/**
 * Renders a single string in the context of the meta box to which this
 * Display belongs.
 */
public function render() {

    $file     = dirname( __FILE__ ) . '/data/questions.txt';
    $question = $this->question_reader->get_question_from_file( $file );

    $html = "<p id='tutsplus-author-prompt'>$question</p>";

    echo $this->sanitized_html( $html );

}

现在，我们可以打开admin.css并进行一些小的更改，以更新“ 添加新帖子”屏幕中的meta框的外观。 让我们添加以下CSS：

#tutsplus-author-prompt {

    font-style: italic;
    text-align: center;
    color:      #333;

}

至此，您的元框现在应如下所示：

正如开头提到的，这没什么大不了的，但是它可以使问题的外观和感觉稍有增强。

下一步是什么？

至此，我们介绍了许多不同的类，接口和其他面向对象的功能。 我们有一个插件，该插件使用文本文件中的数据，与WordPress API进行通信，并在将信息呈现到首页之前清除信息。

我们有一个良好的基础可以开始谈论名称空间。 因此，在下一个教程中，我们将完全做到这一点。 如果您还没有赶上本系列的其余部分，那么我建议您这样做，因为我们将仅继续基于所学知识。

同时，如果您正在寻找其他与WordPress相关的材料，则可以在个人资料页面上找到我以前的所有教程，也可以在我的博客或Twitter 上关注我。

在此之前，请不要忘记下载本文附带的插件的工作版本（版本0.2.0）。 该链接在侧栏中的标题为“ 下载附件”的按钮下面。 而且，像往常一样，不要犹豫，在评论中提出任何问题！

资源资源

• 介面
• get_current_screen（）
  
• wp_enqueue_style
• admin_enqueue_scripts
• wp_kses

翻译自: https://code.tutsplus.com/tutorials/using-namespaces-and-autoloading-in-wordpress-plugins-part-2--cms-27203