如何创建 WordPress 小部件插件

已发表: 2022-10-02

如果您是 WordPress 的粉丝,那么您可能对小部件很熟悉。 小部件是您可以添加到侧边栏或主题的其他小部件就绪区域的那些小框。 它们通常包含您博客的最新帖子、Twitter 提要或日历等信息。 但是您知道您可以创建自己的小部件吗? 这实际上很容易做到。 在本文中,我们将向您展示如何创建 WordPress 小部件插件。 我们将从创建一个基本插件文件开始,然后添加一个小部件类。 然后我们将注册我们的小部件,以便它出现在 WordPress 管理员中。 最后,我们将添加一些代码来在我们网站的前端显示我们的小部件。 让我们开始吧!

我最近开发了一个名为 Freelancer Widgets Bundle 的插件。 当有人问我应该为插件写什么时,我认为是时候写这篇文章了,因为人们已经询问过它。 当您安装 WordPress 插件时,您需要为其添加额外的代码。 您需要像 Coda (Mac) 或 Dreamweaver (PC) 这样的编辑器来开发您的插件。 构造函数是定义小部件名称和主要参数的函数; 这是它的外观示例。 更改表单字段时,请确保使用 esc_attr(),因为这是出于安全原因。 参数“customize_selective_refresh”允许在外观下以及在编辑时刷新小部件。

换句话说,对小部件的更改不需要刷新就可以显示在列表中。 使用 WP_strip_all_tags 删除除基本文本外的所有标签。 WP_kses_post_string() 与帖子内容字符串的功能相同。 此函数将使用 widget() 函数为网站生成内容。 可以自定义此功能以包含特定标签或类。 GitHub 是查看整个代码的理想场所。

当您想要将小部件添加到网站时,请转到您想要执行此操作的页面并在 HTML“/body”标签关闭之前粘贴代码。 有必要在您希望显示小部件的每个网页中包含代码。 检查您的防火墙以查看是否启用了Web Widget (Classic)。

它们都是视觉生物,但两者具有明显的特征,例如可见性和交互性。 如果您的页面在后台运行顺畅且正常,则这是一个插件。 为了让用户在页面上与之交互,它必须对用户可见。

如何为 WordPress 创建自定义小部件插件?

为了为 WordPress 创建自定义小部件插件,您需要使用以下代码创建一个 PHP 文件: /* 插件名称:[插件名称] 描述:[插件描述] */ // 注册并加载小部件功能 [name_of_plugin]_load_widget() { register_widget( '[name_of_plugin]' ); } add_action('widgets_init', '[name_of_plugin]_load_widget'); // 创建小部件类 [name_of_plugin] extends WP_Widget { function __construct() { parent::__construct( // 小部件的基本 ID '[name_of_plugin]', // 小部件名称将出现在 UI 中 __('[Name of plugin ]', '[name_of_plugin]'), // 小部件描述数组('description' => __('[Description of plugin]', '[name_of_plugin]' ), ) ); } // 创建小部件前端 // 这是动作发生的地方 public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // 小部件参数之前和之后由主题定义 echo $args['before_widget']; if ( !empty( $title ) ) echo $args['before_title'] 。 $标题。 $args['after_title']; // 这是你运行代码并显示输出的地方 echo __( '[Name of plugin]', '[name_of_plugin]' ); 回声 $args['after_widget']; } // Widget 后端 public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '[插件名称]', '[name_of_plugin]' ); } // 小部件管理表单 ? > 当 WordPress 用户创建小部件区域时,他们会向该区域添加小块内容。 根据安装的小部件区域,小部件可能会在所有页面上显示各种类型的信息,也可能只显示某些信息。 默认情况下提供一些小部件,而其他小部件则通过使用插件或主题提供。 必须将上面提到的四种方法添加到您的类中才能创建基本的自定义小部件。 您必须使用 register_widget() 函数注册小部件才能在仪表板中使用它。 在研究本文中介绍的示例之前,我们将快速回顾一下代码的每个部分的用途。 Custom_Widget 类中使用的方法之一是分配字符的方法。我们使用 __construct() 方法使用构造方法创建了以 custom_widget 作为其 ID 的小部件。 使用 register_widget() 方法,在现有的小部件注册后创建一个新的小部件。 我们用 if...* 语句包装了每个部分,以确保只有那些包含在小部件选项中的部分才会显示。 widget() 方法包含 nl2br() 函数,以确保正确显示所有多段文本。 sanitize_text_field() 消除了参数中不必要的空格、制表符和换行符。 此外,选择字段中的 Yes 值设置为默认值,表示在前两种情况下链接目标设置为 _blank。 标题、文本、标题下方的链接以及链接是否应在新选项卡中打开都应指定。请立即单击“保存”按钮保存您选择的选项。 当您选择默认主题时,小部件将产生不同的输出。 在这种情况下,如果您使用 Lekker WordPress 主题,您的小部件可能看起来与下面显示的非常相似。如何在 WordPress 中创建自定义图像小部件?要将图像添加到 WordPress 侧边栏,请选择“图像”小部件。 您可以前往外观更改您的外观。 如果您有一个包含小部件的页面,请将“图像”小部件添加到侧边栏。自定义小部件插件信用:octobercms.com自定义小部件插件是一个允许您创建自己的自定义小部件的插件。 这个插件非常适合那些想要为他们的网站或博客创建自定义小部件的人。 使用此插件,您可以轻松创建自定义小部件,而无需自己编写代码。要提供可与 Qt Designer 一起使用的自定义小部件,我们需要提供自包含的实现以及插件接口。 此示例的自定义小部件与其模拟时钟对应物一样,没有任何自定义信号或插槽。 必须使用 Q_PLUGIN_METADATA() 宏来确保通过从中导出数据将小部件正确识别为插件。 AnalogClock 类可用作小部件框内的自定义小部件,并且是自包含类的示例。 AnalogClock 类的插件类包含在 Qt Designer 中。 QObject 类的构造函数简单地调用 QObject 基类构造函数,它将初始化变量设置为 false。 isInitialized() 函数通过允许 Qt Designer 识别插件来检查插件是否准备好使用。 createWidget() 函数可以生成自定义小部件的实例。 小部件插件将在 Qt 设计器的小部件插件部分的组名称中可见。 工具提示和这是什么? 在小部件框中,您可以为自定义小部件提供帮助。 isContainer() 函数检查一个小部件是否应该用作其他小部件图像的容器。 这可以防止用户在其中创建小部件。自定义小部件 WordPress 代码信用:www.hostpapa.in 自定义小部件是向 WordPress 网站添加功能的好方法。 将自定义小部件代码添加到您的站点时,需要记住一些事项。 首先,您需要在主题目录中创建一个名为“widget.php”的文件。 接下来,您需要将以下代码添加到您的 widget.php 文件中: class Custom_Widget extends WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'WordPress 网站的自定义小部件。', ' text_domain' ), ) ); } 公共函数小部件($args,$instance){ $title = apply_filters('widget_title',$instance['title']); 回声 $args['before_widget']; if ( !empty( $title ) ) echo $args['before_title'] 。 $标题。 $args['after_title']; echo __( 'Hello, World!', 'text_domain' ); 回声 $args['after_widget']; } 公共函数形式( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '新标题', 'text_domain' ); } ? > } 公共函数更新($new_instance, $old_instance) { $instance = array(); $instance['title'] = ( !empty( $new_instance['title']Wordpress 将小部件添加到模板将小部件添加到 WordPress 模板是一个简单的过程。您需要通过您的托管帐户访问您的 WordPress 文件并编辑适当的文件。在大多数情况下,这将是 header.php 文件。查找控制要添加小部件的区域的代码。然后,复制要添加的小部件的代码并将其粘贴到适当的在文件中找到。保存文件并将其上传到您的服务器。就是这样!小部件现在将出现在您的 WordPress 网站上。在 WordPress 中,有一个名为 the_widget() 的模板标签,允许您将小部件直接添加到您的模板文件。一个小部件可以放在一个文件中,该文件包含您要使用的小部件的类名以及您希望它出现的位置。换句话说,如果您想列出最近的评论,您可以这样写:每个小部件的 $instance。使用内置函数,您可以添加许多默认值将 WordPress 小部件添加到您的模板文件中,而不是使用它们。 可以在整个模板中使用 the_widget() 方法插入自定义小部件。 自定义小部件可以在与侧边栏不同的平台上使用,可在许多插件中使用。如何将小部件添加到我的 WordPress 主题?访问 WordPress 管理屏幕以查看外观页面。 通过将小部件拖动到特定侧边栏或单击添加小部件链接来选择小部件(如果您的主题有多个侧边栏,请选择目标侧边栏)。如何从 WordPress 页面模板调用小部件?第一步是找到并在您的小部件应出现的位置插入文件。 第二步是确定要使用哪个小部件。 在本节中,我们将介绍默认 WordPress 小部件的类名称:WP_Widget_Archives。如何在 WordPress 中创建自定义图像小部件为了在 WordPress 中创建自定义图像小部件,您需要首先创建自定义插件或子主题。 完成后,您可以在插件或子主题中创建一个名为“image-widget.php”的新文件。 在此文件中,您需要包含以下代码: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __(上传自定义图像。', 'text_domain' ), ); parent::__construct('custom_image', __('Custom Image', 'text_domain'), $widget_ops); } 功能小部件($args,$instance){ echo $args['before_widget']; if ( !empty( $instance['title'] ) ) { echo $args['before_title'] 。 apply_filters('widget_title', $instance['title'])。 $args['after_title']; } if ( !empty( $instance['image'] ) ) { echo ”; } 回声 $args['after_widget']; } 函数更新($new_instance,$old_instance){ $instance = $old_instance; $instance['title'] = sanitize_text_field($new_instance['title']); $instance['image'] = esc_url_raw($new_instance['image']); 返回$实例; } 函数形式( $instance ) { $title = ! 空($instance['title'])? $instance['title'] : __( '自定义图像', 'text_domain' ); $图像=! 空($instance['image'])? $instance['image'] : ”; ?Image Widget 插件是一个简单的插件,可用于使用 WordPress 媒体管理器将图像小部件添加到您的站点。 小部件输出模板通常包含默认模板,但这可以通过模板中的文件进行修改。 在 3.2 中,还添加了 sh_template_image_widget_php 过滤器,允许您覆盖默认模板行为。 要了解有关特定小部件实例的更多信息,您还必须添加两个参数 $args 和 $instance。 如果您覆盖它,您可以在响应式设计中使用它。 如何为随机图像添加滑块? 是的,您可以选择这样做。通常,这是通过 Image Widget 插件的侧边栏显示直接处理的; 侧边栏显示必须设置为特定页面。 如果您对此页面有任何问题或意见,请告诉我们。 Image Widget 是一个开源软件项目。 该插件已由各种贡献者向公众提供。 如果要包含图像,可以添加一个字段,如果要包含链接,可以添加一个类。 您将花费大约 15 分钟的时间,因此这是一项值得投资。如何在 WordPress 中创建新小部件?要么将小部件拖到相关的小部件区域,要么将其从页面左侧拖到左侧. 单击要添加的小部件后,您将看到一个方法列表。 要将新小部件添加到现有区域,请单击添加小部件按钮。