0

0

如何使用可视化编辑器在 WordPress 中创建小部件

冷炫風刃

冷炫風刃

发布时间:2025-05-22 14:12:11

|

607人浏览过

|

来源于php中文网

原创

您想使用可视化编辑器为您的网站创建小部件吗?

使用正确的可视化编辑器,您可以创建包含链接、图像、文本等的自定义小部件。然后,您可以将这些小部件添加到主题的不同区域,并在您的 WordPress 网站上显示它们。

在本文中,我们将向您展示如何使用可视化编辑器在 WordPress 中创建小部件。

如何使用可视化编辑器在 WordPress 中创建小部件

为什么使用可视化编辑器在 WordPress 中创建小部件?

小部件允许您在主页和帖子区域之外添加丰富的内容。每个WordPress 主题都不同,但您通常可以将小部件添加到页脚、页眉和侧边栏等区域。

许多网站使用这些区域来显示“关于”部分、显示其最受欢迎的帖子、添加电子邮件通讯注册表单等等。

WordPress 允许您将各种块添加到任何小部件就绪区域,并且许多 WordPress 插件也添加自己的块。

例如,如果您使用Smash Balloon Twitter Feed,那么您可以使用该插件的 Twitter Feed 块将最近的推文嵌入任何小部件就绪区域。

如何使用可视化编辑器在 WordPress 中创建小部件

但是,有时您可能想要创建一个自定义小部件来向访问者显示丰富的多媒体内容。例如,您可能想要上传作者照片,然后使用它来创建作者简介小部件,并包含指向您不同社交媒体个人资料的链接。

话虽这么说,让我们看看如何使用可视化编辑器在 WordPress 中创建自定义小部件。只需使用下面的链接跳转到适合您的主题的方法:

  • 方法 1:使用 Widgets Options 插件(适用于所有 WordPress 主题)
  • 方法 2:使用全站编辑器(适用于启用块的 WordPress 主题)

方法 1:使用 Widgets Options 插件(适用于所有 WordPress 主题)

创建自定义小部件的最简单方法是使用小部件选项插件。该插件向标准 WordPress 可视化小部件编辑器添加了许多额外设置,包括根据用户角色显示不同小部件的能力、在移动设备上隐藏 WordPress 小部件等。

它还添加了一个文本小部件,您可以使用自己的链接、图像、格式等进行自定义。这允许您创建自定义小部件而无需编写任何代码。

首先,您需要安装并激活 Widget Options 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南 。

激活后,转到  WordPress 仪表板中的外观 » 小部件页面。

如何使用可视化编辑器在 WordPress 中创建小部件

现在,您将看到WordPress 主题中所有小部件就绪区域的列表。您看到的选项可能会根据您的主题而有所不同。

您还将看到可以添加到站点的所有小部件。我们将在本指南中使用文本小部件,因此只需将其拖放到任何小部件就绪区域即可。

如何使用可视化编辑器在 WordPress 中创建小部件

您现在将看到一个小弹出窗口。

这个弹出窗口本质上是一个迷你页面或帖子编辑器,所以它看起来应该很熟悉。

如何使用可视化编辑器在 WordPress 中创建小部件

首先,您可以输入标题,该标题将显示在小部件上方。

之后,您可以直接在小型编辑器中输入文本、添加链接和图像、更改格式、添加项目符号点和编号列表等等。

如何使用可视化编辑器在 WordPress 中创建小部件

您还可以在特定 WordPress 页面上显示或隐藏小部件,并向 WordPress 小部件添加自定义样式。

如果您对小部件的设置方式感到满意,请单击“完成”链接来存储其设置。

现在,如果您访问您的网站,您将看到新的富文本小部件。

如何使用可视化编辑器在 WordPress 中创建小部件

如果您愿意,您可以使用 WordPress 定制器直观地构建自定义小部件。

只需转到“外观”»“小部件”,但这一次,单击“使用实时预览进行管理”。

如何使用可视化编辑器在 WordPress 中创建小部件

这将打开定制器,其中已选择小部件设置。

您现在可以单击要添加自定义小部件的区域。

百灵大模型
百灵大模型

蚂蚁集团自研的多模态AI大模型系列

下载

如何使用可视化编辑器在 WordPress 中创建小部件

之后,单击“添加小部件”,这将打开一个显示所有不同小部件的面板。

只需找到“文本”并单击即可将其添加到您的网站。

如何使用可视化编辑器在 WordPress 中创建小部件

这将打开一个小编辑器,您可以在其中添加文本、链接、媒体等。

当您在编辑器中进行更改时,实时预览将自动更新。

如何使用可视化编辑器在 WordPress 中创建小部件

如果您对小部件的外观感到满意,请单击“发布”按钮将其发布在您的WordPress 博客或网站上。

如果您在 WordPress 仪表板中找不到主题定制器,请参阅我们的指南,了解如何修复 WordPress 管理员中缺少的主题定制器。

方法 2:使用全站编辑器(适用于启用块的 WordPress 主题)

如果您使用的是启用块的 WordPress 主题,则可以使用全站点编辑器将块添加到任何小部件就绪区域。通过这种方式,您可以通过将标准 WordPress 块排列在小部件就绪区域(例如侧边栏)来创建自定义小部件。您也不需要安装单独的 WordPress 插件。

这也是一种将小部件添加到无法使用标准 WordPress 小部件编辑器或定制器编辑的区域的方法。例如,您可以将小部件添加到 404 页面模板中。

首先,请转到  WordPress 仪表板中的外观 » 编辑器。

如何使用可视化编辑器在 WordPress 中创建小部件

默认情况下,完整的站点编辑器显示主题的主页模板,但您可以将小部件和块添加到任何区域。

要查看所有可用选项,只需选择“模板”或“模板部件”。

如何使用可视化编辑器在 WordPress 中创建小部件

您现在可以单击要编辑的模板或模板部分。

WordPress 现在将显示设计的预览。要继续编辑此模板,请单击小铅笔图标。

如何使用可视化编辑器在 WordPress 中创建小部件

完成后,单击蓝色“+”图标,然后找到要在自定义小部件中使用的第一个块。

您可以使用您喜欢的块的任意组合,但如果您打算使用图像和文本,那么我们建议从媒体和文本块开始。

这使您可以轻松地将图像以漂亮的布局排列在某些文本旁边。考虑到这一点,媒体和文本块非常适合创建作者信息框,如下图所示。

如何使用可视化编辑器在 WordPress 中创建小部件

选择要使用的块后,只需将其拖放到小部件就绪区域(例如侧边栏和页脚)即可。

全站点编辑器使您可以访问整套 WordPress 工具和设置。这意味着您可以将号召性用语按钮、文本、链接、图像和其他内容添加到更广泛的块中。

如何使用可视化编辑器在 WordPress 中创建小部件

话虽如此,您应该能够准确地创建您想要的小部件。只需将更多块和内容添加到小部件就绪区域,直到您对其外观感到满意为止。

有关如何使用主题的小部件就绪区域的更多想法,请参阅我们的要添加到 WordPress 网站页脚的内容清单。

当您对所做的更改感到满意时,请点击“保存”。

如何使用可视化编辑器在 WordPress 中创建小部件

现在,如果您访问WordPress 网站,您将看到新的自定义小部件。

我们希望本文能帮助您了解如何轻松使用 WordPress 小部件的可视化编辑器。您可能还想查看我们关于最佳拖放页面构建器以及如何使用 WordPress 创建登陆页面的指南。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
wordpress seo
wordpress seo

WordPress网站SEO优化方法有:1、选择一个SEO友好的主题,具有清晰的代码结构,快速的加载速度和响应式设计;2、使用SEO插件,优化你的标题标签,元描述,关键字,XML站点地图等;3、优化你的内容,内容是SEO优化的核心;4、优化你的网站速度;5、创建友好的URL;6、使用内部链接;7、优化图像;8、使用社交媒体;9、定期更新你的网站;10、监控和分析你的网站等等。

436

2023.09.18

wordpress下载后怎么安装
wordpress下载后怎么安装

安装前准备:确保服务器满足要求、获取安装文件、创建数据库。上传 wordpress 文件。创建数据库和用户。运行安装程序:选择语言、输入数据库信息、网站标题和管理员信息。安装 wordpress。安装后配置:设置永久链接、安装主题、安装插件、创建内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

336

2024.04.15

Python WebSocket实时通信与异步服务开发实践
Python WebSocket实时通信与异步服务开发实践

本专题聚焦 Python 在实时通信场景中的开发实践,系统讲解 WebSocket 协议原理、长连接管理、消息推送机制以及异步服务架构设计。内容包括客户端与服务端通信实现、连接稳定性优化、消息队列集成及高并发处理策略。通过完整案例,帮助开发者构建高效稳定的实时通信系统,适用于聊天应用、实时数据推送等场景。

2

2026.03.18

Java Spring Security权限控制与认证机制实战
Java Spring Security权限控制与认证机制实战

本专题围绕 Java 后端安全体系建设展开,重点讲解 Spring Security 在权限控制与认证机制中的应用实践。内容涵盖用户认证流程、权限模型设计、JWT 鉴权方案、OAuth2 集成以及接口安全防护策略。通过实际项目案例,帮助开发者构建安全可靠的后端认证体系,提升系统安全性与可扩展能力。

0

2026.03.18

抖漫入口地址合集
抖漫入口地址合集

本专题整合了抖漫入口地址相关合集,阅读专题下面的文章了解更多详细地址。

110

2026.03.17

多环境下的 Nginx 安装、结构与运维实战
多环境下的 Nginx 安装、结构与运维实战

本专题聚焦多环境下Nginx实战,详解开发、测试及生产环境的差异化安装策略与目录结构规划。深入剖析配置模块化设计、灰度发布流程及跨环境同步机制。结合监控告警、故障排查与自动化运维工具,提供全链路管理方案,助力团队构建灵活、高可用的Nginx服务体系,从容应对复杂业务场景挑战。

13

2026.03.17

PS 批量添加图片
PS 批量添加图片

本专题整合了PS批量添加图片教程合集,阅读专题下面的文章了解更多详细操作。

10

2026.03.17

Nginx 基础架构:从安装配置到系统化管理
Nginx 基础架构:从安装配置到系统化管理

本专题深入解析Nginx基础架构,涵盖从源码编译与包管理安装,到核心配置文件优化及虚拟主机部署。进一步探讨日志轮转、性能调优、高可用集群构建及自动化运维策略,助力管理员实现从单一服务搭建到企业级系统化管理的全面升级,确保Web服务高效、稳定运行。

7

2026.03.17

mulerun骡子快跑入口地址汇总
mulerun骡子快跑入口地址汇总

本专题整合了mulerun入口地址合集,阅读专题下面的文章了解更多详细内容。

216

2026.03.17

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第二十三期_前端开发
第二十三期_前端开发

共98课时 | 8.5万人学习

WordPress视频教程
WordPress视频教程

共23课时 | 9.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号