如何在 WordPress 中创建动态小部件

WordPress 小部件可以帮助您使您的网站充满活力并有效地与访问者互动。 有许多 WordPress 小部件可供使用。 但是创建一个自定义的 WordPress 小部件可以帮助您将您选择的代码添加到您的 WordPress 网站。

大多数网站都使用动态小部件来增强用户体验和其他一些目的。 您可以使用 WordPress 小部件为您的网站制作联系表格、登录表格、订阅卡、实时跟踪以及许多其他功能。

创建小部件很容易，这篇文章会让您更轻松。 因此，不要浪费任何时间，让我们开始在 WordPress 中创建动态小部件。

 

如何在 WordPress 中创建动态小部件

在这篇文章中，我们将分三个主要部分讨论这个主题。

 

第 1 部分：开始之前了解一些事情

在学习如何创建动态 WordPress 小部件之前，您必须了解一些事情。

这些东西与小部件的基础知识以及动态小部件如何由 WordPress 组成。 不要试图忽略、忽略或跳过这部分，因为它会对你有很大帮助。

将此部分视为构建块。 但是，如果您熟悉 WordPress 小部件、编码、插件、功能等，那么您可以跳过它。

 

什么是 WordPress 小部件？

WordPress 小部件是一个小块，此块放置在您的 WordPress 网页上的某个位置。

该小部件可用于为您的访问者提供独特的内容和功能，而无需编写任何代码。 一点点 WordPress 编码就足以创建一个小部件。

订阅框弹出窗口、通知、联系表单弹出窗口、实时数据更新等是 WordPress 网站管理员使用的一些常见小部件。

 

静态小部件

静态小部件与用户没有交互，因为那里只有单向通信。 它用于提供不变的信息或以简单的方式从用户那里收集信息。

 

动态小部件

动态小部件与用户有效交互，它们提供使用不同 API 更新的数据。 此外，这些小部件收集信息并动态使用它。 动态小部件中有完整的自动化功能。

 

混合型皮肤

如今，大多数网站都使用静态和动态小部件的组合。 在这些小部件中，它们提供静态信息以及动态功能。 

 

你必须知道的事情

现在您已经熟悉了 WordPress 小部件及其类型。 WordPress 为其用户提供了许多内置的小部件。 但是，如果您想为您的网站制作定制的 WordPress 小部件，您可能需要以下内容。 

 

基本编码

您必须熟悉 PHP 中的基本 OOP（面向对象编程）。 

 

备份原码

请记住，您将使用 WordPress 代码。 为避免出现任何问题，您必须备份原始 WordPress 代码。

 

代码放置

WordPress 小部件将使用代码开发，但这些代码将放置在哪里？ 您可以在 WordPress 主题的 的functions.php 文件。 当您激活主题时，这些小部件将处于活动状态。

 

WordPress 小部件基础知识

WordPress 提供  WP_Widget  类来创建动态小部件。 我们必须根据我们的要求添加更多功能来扩展这个类，以制作一个动态的 WordPress 小部件。 以下是我们可以添加的四个基本功能   WP_Widget   类。

• 构造函数。
• 要显示小部件内容，我们创建  窗口小部件 功能。
• 要更新小部件的设置，我们使用  更新 功能。
• 为了从用户那里收集信息，我们使用  表单 功能。

在动态小部件中，我们将使用这四个小部件功能中的一些。 之后，我们将使用注册我们的小部件  注册小部件。 

 

第 2 部分：让我们为 WordPress 创建一个动态小部件

为 WordPress 创建动态小部件是一个漫长的过程。 如果您是第一次这样做，可能会感觉很复杂，但我们已经为您简化了。

我们将整个过程分为四个简单的步骤。 按照这四个简单的步骤为 WordPress 创建一个动态小部件。

 

第 1 步：创建一个空插件

第一步是为我们的 WordPress 小部件创建一个空插件，这一步简单易行。 如果您曾经创建过插件或小部件，您之前可能已经看到过这一点。

我们正在创建一个插件，因为我们将在这个插件中添加一个小部件，然后将该插件添加到我们的 WordPress 站点。

要做到这一点，你必须去  /wp-内容/插件/。 在为您的 WordPress 网站创建该插件时，您必须添加一个新目录，然后相应地对其进行命名。

您可以将其命名为任何您想要的名称。 在您的目录中，您必须创建   索引.php。   该索引文件将包含以下示例代码。

WordPress 将使用空插件中的所有上述详细信息在管理面板中向您显示插件的详细信息。 添加此代码后创建一个空插件。 您将在 WordPress 管理面板中看到它。 现在你必须激活这个插件。

 

第 2 步：创建示例小部件代码

第二步是创建示例小部件代码。 我们将使用四个基本功能来扩展  WP_Widget  类。

class Example_Widget extends WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // 创建示例小部件 } } // 注册小部件函数 register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action('widgets_init', 'register_sample_widget');

在上面的代码部分，你可以看到  WP_Widget 使用构造函数进行扩展。 在该块的最后一部分，您可以看到我们如何注册我们的示例小部件  注册小部件。 

创建并注册示例小部件后，我们必须为其添加动态功能。 我们可以用  窗口小部件,  形状， 和  更新 根据我们的要求对它起作用。

奖励提示： 要添加样式细节，您可以使用 CSS  类。   它可以添加到 HTML DOM 中，它会风格化整个小部件的显示。 

 

第 3 步：将小部件添加到页面

完成编码部分后。 您可以将小部件添加到您的页面。 请记住，我们尚未在小部件中添加任何动态信息或数据源。

为了使其动态化，我们必须添加动态信息源。 我们将在下一步中进行。 现在，我们将把这个新创建的自定义小部件添加到 WordPress 网站页面。

要将其添加到页面，您必须返回 WordPress 管理面板。 在那里你必须去 外观 边栏中的选项。 去 外观>小部件。

在这里，您可以将小部件添加到页面上的任何位置，例如页眉、页脚、侧边栏等。

 

第 4 步：将动态数据添加到小部件

现在已经完成了一半以上的过程。 是时候向您的小部件添加动态数据了。 您可以从任何来源获取动态数据。

例如，如果您正在制作一个小部件来显示世界各地的实时 COVID-19 病例，您将不得不从 WHO 或媒体网站等网站获取数据。

获取信息的 URL 并添加  API密钥 给它。 现在使用 窗口小部件 功能与“GET”指令一起，您可以获得 COVID-19 的实时详细信息（根据示例）。  

API密钥 连同“GET”请求将抓取并显示您的小部件中的数据或信息。 获取有关 JSON 字符串和变量的帮助，以更新小部件中的数据。

 

第 5 步：上传插件

添加所需的所有代码后，您可以预览小部件。

现在最后一步是将插件上传到您的 WordPress 管理面板。 为此，您必须将插件打包成一个 zip 文件。 现在去 插件 > 添加新 > 上传插件 并上传您的插件。

 

第 3 部分：在一处获取元素、插件、小部件

创建和添加插件、小部件和元素似乎很难？ 别担心，好消息是您现在不必手动执行任何操作。

有许多 WordPress主题、插件和小部件可用。 这些现成的和可定制的小部件可以满足您的大部分要求。 以下是可用的最佳选择。

 

Deep WordPress的主题

Deep WordPress主题 The Webnus 提供的是获得优质 WordPress 主题、元素、插件等的最佳选择之一。您可以使用所有这些东西在您的 WordPress 网站上放置任何动态小部件。 以下是您只能通过以下方式获得的一些最佳功能 deep Webnus 的 WordPress 主题。

 

速度助推器

页面上的额外代码会影响页面加载速度。 但是这个主题不需要加载额外的代码。 这使您的页面加载速度更快。 CSS 和 JS 元素加载在页面的源代码中。 因此，它可以用更少的代码使其加载更流畅。

 

超级反应

您将在您的网页上获得增强的用户体验。 增强的用户体验将帮助您为网站访问者提供超级响应功能。

 

使用方便

Deep 主题导入器使用起来非常简单快捷。 这可以帮助您在将主题导入 WordPress 网站时以非常舒适和方便的方式工作。

 

真正的定价

使用时您将节省很多 deep Webnus 的 WordPress 主题。 所有主题、插件均以正价提供。

 

让我们总结一下！

在这篇文章中，我们了解了动态 WordPress 小部件是什么以及如何创建它。

从添加数据到创建基本小部件，我们涵盖了整个过程的各个方面。 如果您按照本文中提到的步骤操作，您可以轻松制作动态 WordPress 小部件。

此外，我们了解到您可以通过 Webnus 获得现成的插件、小部件、元素等。 您将在使用时节省您的时间和金钱 deep Webnus 的 WordPress 主题。