您现在的位置是：首页 > 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的博客出身，许多WordPress网站主题看起来像是个单纯的博客。很多用户想要给自己的网站添加一个欢迎引导页面，将WordPress博客改造成CMS网站，或者将最重要的内容推荐给网站访问者。
WordPress内外网访问的解决方法
其实我是在局域网中搭建WordPress的，在服务器上搭好后，都是以http://localhost/wordpress/访问的，但是在局域网其他机器上用ip访问的话，wordpress就不能正常显示了，css什么的都不
WordPress主题WP_Query基本用法介绍
wordpress默认会根据网址调用数据，不能满足我们所有建站要求，而WP_Query可以用于查询任何你想要的内容，相当于自定义数据调用。便于记忆，在讲用法之前我们回顾一下循环的写法：if..else 其他>>>
WordPress代码高亮插件SyntaxHighlighter使用方法
子曰： 工欲善其事，必先利其器。作为码农一枚，再加上站长这个已经不再光鲜的称呼，岂能没有一款经济实用、操作简单、而且功能必须强大、样式也必须好看的Wordpress代码高亮插件？
相关源码
-
(自适应)餐具英文外贸生活用品带下载功能网站模板免费下载为餐具及生活用品外贸企业打造的响应式网站模板，基于PbootCMS内核开发。突出产品展示与多语言支持特性，通过自适应设计确保更好客户在手机、平板、电脑等设备上获得一致浏览体验。查看源码 -
(PC+WAP)绿色草坪地坪操场pbootcms网站模板该模板基于PbootCMS内核开发，专为人造草坪、地坪施工企业设计，采用绿色主题呼应行业属性，实现PC与WAP端全栈响应式适配，确保跨设备无缝浏览体验。查看源码 -
(自适应响应式)HTML5幕墙装饰工程建筑装修公司pbootcms模板下载基于PbootCMS开发的响应式模板，为幕墙工程、建筑装饰企业设计，通过数字化展示提升企业专业形象与项目展示能力。结构化数据标记增强项目案例收录，智能URL路由优化，支持每个工程案例独立设置关键词与描述查看源码 -
(PC+WAP)红色驾校培训学车在线预约源码下载基于PbootCMS内核开发的驾校培训专用网站模板，深度适配驾驶培训行业展示需求。采用PC与移动端同步响应设计，单一后台统一管理内容数据，更换图文素材后可快速转变为其他行业网站。查看源码 -
(PC+WAP)蓝色电子半导体电子设备网站pbootcms源码下载本模板基于PbootCMS内核开发，为半导体和电子科技行业设计，特别适合电子元器件、集成电路、半导体设备及相关技术产品展示。查看源码 -
(自适应)营销型健身器材产品设备类pbootcms模板网站为健身器材企业打造的营销型网站模板，基于PbootCMS开源内核开发。采用HTML5响应式架构，PC与移动端数据实时同步，适配多终端展示场景。查看源码
| 分享笔记 （共有 篇笔记） |
