您现在的位置是：首页 > cms教程 > WordPress教程WordPress教程
wordpress插入百度地图的嵌入代码写法
春翠2025-03-02WordPress教程已有人查阅
导读在电脑上新建一个文本文档（txt文件），命名为baidumap，并打开，回到百度地图创建网页上，获取代码，并复制代码粘贴进入baidumap.txt文件内，如果你希望这个地图兼容手机的宽度可以修改一
在电脑上新建一个文本文档（txt文件），命名为baidumap，并打开，回到百度地图创建网页上，获取代码，并复制代码粘贴进入baidumap.txt文件内，如果你希望这个地图兼容手机的宽度可以修改一下代码中的宽度：
找到代码中的如下代码：
修改好代码后，将这个baidumap.txt修改后缀为baidumap.html，将这个文件上传至你的网站根目录（网站根目录可以使用ftp上传，也可以在你的服务器控制面板的文件管理上传，根目录名一般是 或者 root或者htdocs又或者是web等，如果是在不明白，可以咨询你的服务器商）
步骤3：将百度地图嵌入你的WordPress网站页面或者文章中
上传好了之后，进入你想要置入百度地图的页面或者文章中，将编辑器切换到“文本模式”，输入以下代码：
这样的方式不管任何WordPress版本都可以放入，也不会因为升级而产生不可用的情况，可以放心使用。
找到代码中的如下代码：
<!-百度地图容器->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
修改宽度（上方标红的代码为宽度）为100%，标黄代码为高度，可以修改数字,修改后如下：
<div style="width:100%;height:500px;border:#ccc solid 1px;" id="dituContent"></div>
这样就会在网站上显示宽度为100%高度为500像素的地图区域（你也可以将宽度设为98%，这样可能在某些主题上更加美观）修改好代码后，将这个baidumap.txt修改后缀为baidumap.html，将这个文件上传至你的网站根目录（网站根目录可以使用ftp上传，也可以在你的服务器控制面板的文件管理上传，根目录名一般是 或者 root或者htdocs又或者是web等，如果是在不明白，可以咨询你的服务器商）
步骤3：将百度地图嵌入你的WordPress网站页面或者文章中
上传好了之后，进入你想要置入百度地图的页面或者文章中，将编辑器切换到“文本模式”，输入以下代码：
<iframe width="100%" height="500" frameborder="0" src="/baidumap.html">
这样就可以轻松的将百度代码置入了，注意标黄的代码需要和修改过的高度和宽度一致（这里的高度不需要加px，直接数字即可）这样的方式不管任何WordPress版本都可以放入，也不会因为升级而产生不可用的情况，可以放心使用。
感谢您的认可和支持
微信
支付宝
本文标签：
很赞哦！ ()
相关教程
图文教程
WordPress安装和使用方法介绍
WordPress使用方法1、注册免费主机。2、在管理WordPress界面mō索下就会用了。如果用客户端发博文，需要启用相关协议。参见WordPress.xmindWordPress中添加小工具，显示新
WordPress导航菜单的使用方法介绍
WordPress 原来默认的导航菜单只能是页面，或者分类，或者两者，如果想自己加入一个自定义链接都需要修改主题，非常不方便，所以一个完全可定制化的自定义的 WordPress
wordpress切换主题的方法
WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。
WordPress的REST API的使用教学
WordPress系统默认开放REST API，也就是说，除了以HTML格式输出内容，还可以以JSON格式输出文章/用户/评论等数据。
相关源码
-
(自适应响应式)蓝色环保机械设备网站pbootcms模板HTML5源码下载基于PbootCMS的生态环境技术展示平台，通过内容调整可应用于新能源设备、污水处理、空气净化等环保相关领域。设备参数采用对比表格展示，技术原理支持图文混排；查看源码 -
自适应黑色简繁双语轴承齿轮机械设备制造网站模板该模板为轴承齿轮机械制造企业提供一体化网站建设方案，着重解决行业特有的多语言展示、移动端适配和高效率内容管理需求，帮助企业精准展示产品特性与工艺流程查看源码 -
响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计，采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发，支持一键替换图文内容快速转换至其他行业应用。查看源码 -
(自适应)英文电子芯片电子元件网站pbootcms模板下载基于PbootCMS内核开发的电子元件类企业专用模板，采用响应式设计技术，适配电子元器件、集成电路、半导体等行业的品牌展示与技术文档发布需求。前端布局针对芯片参数表格与产品规格书展示进行深度优化。查看源码 -
帝国cms自适应古诗词古籍名句网站整站带数据基于帝国CMS打造的专业古诗词文化网站模板，专注于古典文学内容的展示与传播。模板设计蕴含传统文化韵味，支持诗词鉴赏、名句赏析、古籍整理等特色功能，为诗词爱好者提供优质的在线阅读体验。查看源码 -
(PC+WAP)红色厨具厨房用品设备pbootcms模板源码下载为厨具设备企业设计的响应式网站模板，采用PbootCMS内核开发，适用于商用厨房设备、家用厨具、厨房用品等企业展示。模板包含产品展示、新闻动态、案例中心等标准模块，助您快速搭建专业级行业网站。查看源码
| 分享笔记 （共有 篇笔记） |
