Mapbox + jsFiddle + Wordpress

Question

我提前为我的非常有限的编码知识道歉。我一直在尝试在我的Wordpress网站上添加一个链接到Mapbox的自定义搜索栏，没有任何运气。我创建了，或者实际上我编辑了一个我找到的jsFiddle。我遇到麻烦的地方是从jsFiddle添加Javascript到Wordpress ......

• 这是工作中的jsFiddle：https://jsfiddle.net/erinlink/4q9brvkt/16/

L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpbmxpbmsiLCJhIjoiWnpiWXQ5RSJ9.hy5rpmPf-gpFRaNG7GHfAA';
var geocoder = L.mapbox.geocoder('mapbox.places'),
  map = null;

var map = L.mapbox.map('mapbox', 'erinlink.bee96628').setView([30.267153, -97.74306079999997], 12);

var featureLayer = L.mapbox.featureLayer('erinlink.bee96628')
  .addTo(map);

/*
var featureLayer = L.mapbox.featureLayer()
    .addTo(map);
featureLayer.loadID('your_id');
*/

// both versions to add the featurelayer work

function showMap(err, data) {
  // The geocoder can return an area, like a city, or a
  // point, like an address. Here we handle both cases,
  // by fitting the map bounds to an area or zooming to a point.
  if (!map) {
    map = L.mapbox.map('mapbox', 'erinlink.bee96628');
  }

  if (data.lbounds) {
    map.fitBounds(data.lbounds);
  } else if (data.latlng) {
    map.setView([data.latlng[0], data.latlng[1]], 12);
  }
}


function geocodeThis() {
  var text = document.getElementById('searchMap').value;
  if (text.length >= 5) {
    geocoder.query(text, showMap);
  }
}

body {
  margin: 0;
  padding: 0;
}
#mapbox {
  width: 100%;
  height: 100%;
  border: 0px solid transparent;
}
#searchMap {
  z-index: 10000 !important;
  position: relative;
  float: right;
  text-overflow: ellipsis;
  padding: 2px 0px 2px 6px;
  background-color: #fff;
  color: gray;
  font-size: 12pt;
  font-family: Trebuchet MS;
  height: 24px;
  width: 200px;
  border: 0px solid transparent;
  border-radius: 4px 4px 4px 4px;
  margin: 0px 120px 10px 10px;
}
.mapbox_header {
  color: white;
  text-align: right;
  font-size: 10pt;
  font-family: Trebuchet MS;
  font-style: italic;
  font-weight: 100;
  margin: 10px 120px 10px 0;
}

<link href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<div style="margin-top:1px; padding: 4px 40px 0px 0px; background: #77bc1f; width:100%; height:10%;">
  <div>
    <ul>
      <input type='text' oninput='geocodeThis()' id='searchMap' placeholder='Enter address or zip'>
      <br>
      <br>
      <p class="mapbox_header">Looking for a particular flavor or bottle size in your area? <a href="http://yellowbirdsauce.com/contact/">Contact us</a> for more info.</p>
    </ul>
  </div>
</div>

<div>
  <div id='mapbox' style="height:400px; width:100%;"></div>
</div>

• 这是我一直试图让它继续工作的页面（当前 此页面上的地图未链接到搜索栏）： http://yellowbirdsauce.com/locations/

提前感谢您的帮助!!