WordPress insert Baidu Map embed code

Step 2: Create a Baidu Map file and upload it to the website root directory

Create a new text document (TXT file) on the computer, name it Baidumap, and open it, go back to the Baidu Map creation page , click Get Code, and copy the code paste into the Baidumap.txt file, if you want this map compatible with the width of the phone can modify the width of the code:

Find the following code in the code:

<!– Baidu Map Container –><div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

Modify the width (above the red Code is width) is 100%, the yellow code is the height, you can modify the number, modified as follows:

<div style="width:100%;height:500px;border:#ccc solid 1px;" id="dituContent"></div>

This will display a map area with a width of 100% height of 500 pixels on your website (you can also set the width to 98%, which may be more aesthetically pleasing on some topics)

After modifying the code, Change this baidumap.txt suffix to baidumap.html, upload this file to your Web site root directory (the site root directory can be uploaded using FTP, or in your server Control Panel file management upload, the root directory is generally www or wwwroot or htdocs, or the web, etc. , if it is not understood, you can consult your server provider)

Step 3: Embed the Baidu map into your WordPress site page or the article

After uploading, enter the page or article where you want to place the Baidu map, switch the editor to text mode, and enter the following code:

<iframe width="100%" height="500" frameborder="0" src="/baidumap.html">

This makes it easy to put the Baidu code, pay attention to the yellow code needs and modified height and width of the same (here the height does not need to add px, direct numbers can)

This way, regardless of any WordPress version can be put in, and will not be caused by the upgrade of the situation is not available, you can rest assured that use.

WordPress insert Baidu Map embed code