面向初学者的WordPress开发：构建插件

导语：如果您以前没有编写过自己的插件，可能会觉得您是在冒险进入无人区，特别是如果您对自己的PHP技能不是很有信心的话。挑战在于知道如何开始-并对在此过程中犯错误持开放态度。

插件允许你给WordPress添加各种功能，从给页面添加一个简单的联系人表单到增强你的安全性，再到添加电子商务功能，不一而足。如果你能想出来，也许有一个插件可以做到这一点–或者是一个你可以自己构建的插件的想法。

这是我们面向初学者的五篇系列文章的最后一篇，教你WordPress开发的基本概念，这样你就可以从修补人员跳到开发人员了。到本系列结束时，您应该能够创建您自己的基本主题和插件，并用您自己的特性来充实它们。

在本教程中，您将学习如何编写您自己的插件，以便您可以修改WordPress站点、第三方插件甚至主题的功能。

注意：对于本系列，重要的是您已经彻底了解了HTML和CSS，因为这两种语言在使用WordPress时都是必不可少的构建块。

我们开始吧!。

错过了我们面向初学者的WordPress开发系列教程？你可以在这里找到全部五篇文章：

挂钩、操作和筛选器

在我们开始制作一个实际的插件之前，让我们先详细了解一下钩子、操作和过滤器。整个插件系统正是基于这些元素，并将帮助您全面了解WordPress实际工作的幕后情况。

让我们来看一个例子。

如果您想要创建一个插件来向您的站点添加一些分析跟踪代码，该怎么办呢？跟踪代码通常放在网页的底部，就在结束的<body>标记之前。如果主题被切换，它必须保持不变，并且它必须在任何WordPress安装上都能工作。那么，如果你不能直接控制主题，你该怎么做呢？

还记得在面向初学者的WordPress开发：构建主题时，我提到过wp_head()和wp_footer()函数，以及必须如何将它们添加到主题中？我们上面的例子正是这些必须存在的原因。wp_footer()函数可以执行插件定义的其他函数。

以下是您可以使用的代码示例：

function my_tracking_code() {
echo 'Paste tracking code from Google Analytics here';
}
add_action( 'wp_footer', 'my_tracking_code' );

让我们把它全部分解一下。首先，我编写了一个简单地回显跟踪代码的函数。它不会在任何地方使用，它只是我插件中的一个函数。然后，使用add_action()函数，我告诉WordPress何时执行我的函数。

每当WordPress访问wp_header()函数时，它都会找到使用add_action()与其挂钩的所有其他函数。然后，它逐个执行这些函数，作为结果回显跟踪代码。

这是钩子的基础，但我们将在本教程后面更深入地研究它们，以便您能够了解和使用它们的功能。在继续之前，我想提到一个小小的修正。主题页脚中的wp_footer()函数实际上不是一个钩子，它是一个简单的函数，在其代码中的某个位置包含该钩子。钩子的名称是这样的：do_action(‘wp_footer’)，但是这对于第一个示例来说并不重要，您很快就会了解更多！

术语

现在您已经领略了即将发生的事情，在我们继续之前，让我适当地解释一下您将在本教程中阅读到的术语。

钩子是WordPress插件API的一部分。操作和筛选器是两种不同类型的挂钩。操作允许您添加功能，您基本上定义了一个函数，该函数在WordPress处理钩子时运行。筛选器的工作原理类似，但它不是添加功能，而是修改现有功能。例如，WordPress有一个钩子来决定摘录的长度：55个单词。您可以使用过滤器将其修改为不同的字数。

一切都是关于行动的。
现在我们已经了解了基础知识，让我们更详细地看一下add_action()函数，以便更好地理解它。该函数接受四个参数，它们是：

  • 挂钩的名称
  • 我们的挂钩函数的名称
  • 优先性
  • 被接受的参数

我们已经看过前两个，这是唯一必需的。它们标识应该执行哪个函数以及应该在哪里运行该函数。

第三个参数确定执行函数的顺序。当有多个函数绑定到同一挂钩时，这很有用。您完全可以向一个网站添加多个跟踪代码。使用优先级参数，您可以控制函数的运行时间。

接受的参数只是告诉WordPress挂钩函数接受多少参数。您需要查看每个钩子的WordPress Codex，看看是否需要在这里添加一些内容。有些函数接受多个参数，在这种情况下，您需要在此处指定它。看一下下面的示例，稍后创建我们自己的钩子时，您就会明白为什么会是这样。

示例操作

WordPress不仅提供主题中的操作，还提供后端管理中的操作和特定用户操作的上下文中的操作。只要发布帖子，publish_post挂钩就会运行，允许您在此时执行某些操作。

在这里，争论的必要性变得显而易见。如果我向这个钩子添加一个函数，我如何知道发布了哪个帖子以及详细信息是什么？查看挂钩文档，您可以看到向该函数传递了POST ID和POST数据作为两个参数。

例如，我们在发布文章时向文章作者发送一封电子邮件：

function our_author_notification( $id, $post ) {
$author = $post->post_author;
$name = get_the_author_meta( 'display_name', $author );
$email = get_the_author_meta( 'user_email', $author );

$link = get_permalink( $id );

$message = 'Hello ' . $name . ", \n\n" . "Your artcile <a href='" . $link . "'>" . $post->post_title . "</a> has been published.";
wp_mail( $email, 'One of your posts has been published', $message );

}
add_action( 'publish_post', 'our_author_notification', 10, 2 );

关于筛选器的全部

正如我在前面提到的，筛选器的工作方式与此大致相同，但会修改数据，因此您将主要在挂钩函数中返回。要添加过滤器，我们使用add_filter()函数，该函数接受与add_action()相同的参数。

示例过滤器。

一个很好的示例是修改摘录末尾的More字符串，即“[…]”默认情况下。要修改它，您可以执行如下操作：

function our_excerpt_more( $more ) {
return 'there's more...';
}
add_filter( 'excerpt_more', 'our_excerpt_more' );

请注意，我没有指定优先级和接受的参数。这将使优先级为10，接受的参数为1。我根本没有使用传递的参数(缺省为更多文本)，我只是返回一个字符串。

您可以使用相同的方法在您的单个文章内容的第一段中嵌入广告。看一看：

function in_content_ad( $content ) {
$ad = '<div class="in-content-ad"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Advertisement&w=250&h=250"></div>';
return $ad . $content;
}
add_filter( 'the_content', 'in_content_ad' );

使用一个小的CSS将广告向右浮动，你可以在短短几秒钟内在你的内容中拥有一个标准的广告区块。

定义挂钩

了解钩子是如何定义的，以及如何创建我们自己的钩子可以极大地帮助理解系统。假设您正在创建一个电子商务插件，并且要添加列出产品的功能，您可以这样做：

$products = get_products( 10 );
show_products();

实际上，您已经硬编码了要展示10种产品。如果有人正在为您的工作创建扩展，并且想要一个只显示三个产品的视图，该怎么办呢？如果您巧妙地编写代码，就可以允许其他人修改它。让我们使用一个钩子来允许开发人员使用我们的工作。

$product_count = apply_filters( 'product_count', 10 );
$products = get_products( $product_count );
show_products();

通过使用apply_filters()函数，我们告诉WordPress我们有一个名为“product_count”的挂钩，我们希望运行与其挂钩的所有函数。在任何其他插件中，用户可以使用以下方法将此值更改为3：

add_filter( 'product_count', 'carousel_product_count' );
function carousel_product_count( $count ) {
return 3;
}

插件创建的基础知识

既然我们已经知道了所有关于钩子的知识，我们需要知道把它们放在哪里。让我们退后一步，大体上看看插件。

插件驻留在WordPress站点的主插件目录中，该目录通常位于wp-content/plugins中。举个例子，让我们创建一个插件，在文章下面添加一个tweet链接。

首先，在插件目录中创建一个文件夹，并将其命名为tweet-plugin-tutorial。在此文件夹中创建一个文件，并将其命名为tweet-plugin-tutorial.php。打开文件并粘贴以下代码：

/**
* Plugin Name: Tweet Plugin Tutorial
* Plugin URI: http://danielpataki.com
* Description: This plugin adds a simple tweet link below posts.
* Version: 1.0.0
* Author: Daniel Pataki
* Author URI: http://danielpataki.com
* License: GPL2
*/

此信息显示在您站点的后端管理中的插件部分。保存文件后，您应该会看到列出了新插件；您刚刚创建了一个功能完善的插件。它现在还不能做任何事，但是它可以被激活。现在就去做吧。

我们实际上已经完成了90%的工作。我们现在需要做的就是找到一种方法，将我们的链接添加到文章内容的末尾。您可以将其视为通过向帖子内容追加一些文本来修改文章内容。这意味着我们需要像以前一样使用the_content挂钩：

function tweet_link( $content ) {
return $content . '<p><a href="https://twitter.com/intent/tweet?url='.get_permalink().'">Tweet about this</a></p>';
}
add_action( 'the_content', 'tweet_link' );

这将在我们的内容之后添加一个链接，这将允许用户发布tweet，该链接将已经填充到tweet框中。

这实际上就是关于插件创建所要了解的全部内容。所有插件都是函数和钩子的混合体，它们决定这些函数在哪里执行。从现在开始，您只需要学习各种子系统，如选项API、元数据API等。

向插件添加主题选项。
有许多方法可以将选项添加到您的主题中。让我们看看WordPress Codex中包含的默认方式。

我们将首先在管理中创建一个包含表单的页面：

add_action('admin_menu', 'tweetlink_settings_menu');

function tweetlink_settings_menu() {
add_menu_page('Tweet Link Settings', 'Tweet Link', 'manage_options', 'tweetlink-settings', 'tweetlink_settings_page', 'dashicons-twitter');
}

function tweetlink_settings_page() {
echo '<div class="wrap"><h2>Tweet Link Options</h2></div>';
}

tweetlink_settings_menu()函数的作用是：连接到admin_menu。根据法典，这是必须创建菜单项的方式。大部分工作由add_menu_page()函数完成，该函数接受一组参数来创建顶级页面。按顺序排列的参数为：

  • 页面标题-在title标记中使用。
  • 菜单标题-在左侧菜单中使用。
  • 功能-设置可见性的最低功能。
  • Menu Slug-URL中使用的Slug。
  • 函数-控制输出的函数。
  • 图标-图像URL或Dashicons字符串。
  • 位置-菜单中的项目位置。

以下是我们的选项页面到目前为止在前端的外观：

虽然这看起来可能很酷，但对于我们的小插件来说，这太夸张了，只会把界面搞得一团糟。始终考虑将选项页面放在现有菜单中。此页面最好使用add_options_page()函数放在Settings部分中。

下一步是让WordPress知道我们的推文设置。这包括在挂钩到admin_init()的函数中使用register_settings()函数。这段代码如下所示：

add_action( 'admin_init', 'tweetlink_settings' );

function tweetlink_settings() {
register_setting( 'tweetlink_settings', 'twitter_account' );
}

全都做完了。最后一步是添加使用我们的选项的表单。使用以下代码作为模板创建您自己的设置。不要忘记使用settings_field()和do_settings_sections()函数来确保WordPress为您保存数据。

function tweetlink_settings_page() {
?>
<div class="wrap">
<h2>Tweet Link Settings</h2>

<form method="post" action="options.php">
<?php settings_fields( 'tweetlink_settings' ); ?>
<?php do_settings_sections( 'tweetlink_settings' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">Twitter Account</th>
<td><input type="text" name="twitter_account" value="<?php echo esc_attr( get_option('twitter_account') ); ?>" /></td>
</tr>
</table>

<?php submit_button(); ?>

</form>
</div>

<?php
}

在该过程结束时，您应该会看到一个新的设置字段，您可以填写并保存该字段。然后，您可以使用get_option(‘twitter_account’)在插件中的任何位置检索值。

然后，如果用户在选项中填写了他们的Twitter帐户名，我们可以修改我们的tweet链接以添加“via@username”。

下面是我如何修改tweet_link()函数以适应：

function tweet_link( $content ) {
$url = 'https://twitter.com/intent/tweet';
$url .= '?url=' . get_permalink();

$account = get_option( 'twitter_account' );
if( !empty( $account ) ) {
$url .= '&via=' . $account;
}

return $content . '<p><a href="' . $url . '">Tweet about this</a></p>';
}

继续阅读和学习

针对初学者的WordPress开发系列到此结束。在这篇文章中，我们学习了如何创建一个基本的插件，希望您对制作自己的插件感到兴奋！

虽然听起来很陈词滥调，但这仅仅是您作为WordPress开发人员之旅的开始。如果您从五周前开始就一直关注本系列，那么您现在对以下内容有了更深的理解：

WordPress核心、主题和插件是如何工作的，基本掌握WordPress的基础语言PHP，如何把你自己的基本主题组织起来，如何向主题添加小工具和菜单等功能，以及。如何开始构建您自己的插件。

正如我在本系列的第一部分中提到的，我再怎么强调也不为之气馁是多么重要。每个人都必须从某个地方开始，没有人是十全十美的。在此过程中，您会犯错误，难以理解概念，当代码不能正常工作时，您会感到沮丧。只要记住，决心将优秀的程序员与糟糕的程序员区分开来。

虽然这是本系列的最后一篇文章，但这并不意味着你应该停止学习。只有通过实践和持之以恒，为WordPress开发才会变得更容易，您才能从修补人员升级为开发人员。

你觉得这个教程有帮助吗？你为什么想学习WordPress开发？你想了解更多关于什么的信息？在下面的评论中让我们知道。

发表评论

邮箱地址不会被公开。 必填项已用*标注