你是否想将现有的 HTML 页面导入到 WordPress 中,以保留页面的设计、布局和功能?本文将为你提供详细的分步指南,教你如何通过Éditeur classiqueetéditeur de blocsrépondre en chantantconstructeur de pages等三种方法将 HTML
导入 WordPress。
![图片[1]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122153225758-wordpress-block-editor-how-to-work-efficiently-in-gutenberg.png)
HTML 文件的基础知识
HTML
(超文本标记语言)是构成所有网站的基础语言。它为网页内容提供结构,通过标签来定义页面的各个部分,例如标题(<h1>
)、段落(<p>
)、图片(<img>
)等。HTML 文件是存储这些代码的文本文档,包含网站的布局、内容和多媒体元素。
HTML 文件的好处
- 跨平台兼容性:HTML 文件能在不同的设备和浏览器上正常显示。
- Optimisation des moteurs de recherche:HTML 的结构化内容更易于被搜索引擎抓取和索引。
- 完全自定义控制:HTML 提供直接控制页面布局和功能的能力。
- 提升加载速度:优化的 HTML 文件可以减少页面加载时间,增强用户体验。
![图片[2]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122153559980-514c1f4c7f2798fd3fed47c40e4d55c.png)
为什么需要将 HTML 导入 WordPress
将 HTML 文件导入 WordPress,可以帮助你保留设计、优化开发流程,并支持高度定制。以下是主要原因:
1. 保留页面的设计和布局
如果从其他平台迁移到 WordPress,
2. 使用预先设计的 HTML 模板
HTML 模板为 WordPress 网站提供了坚实的框架,节省了从头构建页面的时间。通过导入 HTML 模板,可以继承现有的设计元素(如联系表单、图片滑块),并专注于内容和品牌自定义。
3. 实现深度页面自定义
导入 HTML 文件可以帮助开发者绕过 WordPress 主题的限制。可以使用自定义代码实现更高级的布局和功能,以满足独特的业务需求。
将 HTML 导入 WordPress 的Trois approches
Méthode 1 : Utilisation de l'éditeur classique
经典编辑器是 WordPress 的传统编辑工具,允许直接粘贴 HTML 代码。
![图片[3]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150444701-image.png)
Les étapes :
- Ajouter une nouvelle page
登录 WordPress 后台,依次导航到“页面”>“添加新页面”。 - 切换到“文本”选项卡
在编辑器中,切换到“文本”模式,将 HTML 代码粘贴到文本框中。
![图片[4]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150523139-image.png)
![图片[5]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150613747-image.png)
- 预览代码
切换回“Visual ”选项卡预览 HTML 文件的显示效果。
![图片[6]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150656667-image.png)
- 保存或发布
如果内容满意,点击“保存草稿”或“发布”按钮完成操作。
![图片[7]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150720230-image.png)
方法 2:使用块编辑器
块编辑器(Gutenberg)是 WordPress 的默认编辑器,通过块的方式构建页面。
Les étapes :
- Ajouter une nouvelle page
导航至“页面”>“添加新页面”。 - 添加“自定义 HTML”块
在左侧工具栏中找到“自定义 HTML”块,将其拖到页面布局中。
![图片[8]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150812489-image.png)
- 粘贴 HTML 代码
在块中粘贴你的 HTML 代码。
![图片[9]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122150922943-image.png)
- Avant-premières et publications
使用“预览”按钮查看效果,确认无误后点击“发布”。
![图片[10]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122151007235-image.png)
还可以点击右上角的三点菜单(“更多工具和选项”),点击“Code editor”(代码编辑器)选项,找到“Editor”部分。
![图片[11]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122145654945-image.png)
方法 3:使用页面构建器
页面构建器(如 Elementor)提供更高级的设计功能,支持导入 HTML。
Les étapes :
- 安装并激活页面构建器
在 WordPress 插件目录中搜索 Elementor,安装并激活插件。 - 拖动 HTML 元素
打开 Elementor 编辑器,找到“HTML”元素并拖到page web.
![图片[12]-如何将 HTML 导入 WordPress:经典编辑器、块编辑器与页面构建器分步教程](https://www.361sale.com/wp-content/uploads/2024/11/20241122151917569-image.png)
- 粘贴 HTML 代码
将 HTML 代码粘贴到“HTML 代码"Partie. - Avant-premières et publications
单击“预览更改”查看效果,满意后单击“poste".
Questions fréquemment posées
是的,可以通过复制 HTML 代码并将其粘贴到 WordPress 的页面或文章中实现导入。
可以通过经典编辑器、块编辑器或页面构建器的“HTML”模块将 HTML 添加到页面。
虽然从技术上来说可以直接嵌入 HTML 表单,但通常建议使用专用的 WordPress 插件来创建表单。Contact Form 7、WPForms 或 Gravity Forms 等插件提供了用户友好的界面和安全的表单处理功能。
使用 FTP 工具将 HTML 文件上传到 WordPress 的根目录或特定文件夹,然后通过页面链接访问。
Lien vers cet article :https://www.361sale.com/fr/27515L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
Pas de commentaires