Menyisipkan HTML dan Javascript di Wordpress Post dan Wordpress Page

· 2 min read

Untuk menyisipkan kode html dan javascript ke dalam hanya dengan beberapa langkah. Misalnya ingin memasukkan kode html untuk pembuatan webGIS seperti kode berikut:

<!DOCTYPE html>
<html>
<head>
	
	<title>Openstreetmap - Overpass API</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script src="lib/osmtogeojson.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>

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

	var map = L.map('map').setView([-6.1829957,106.8444433], 13);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	}).addTo(map);

  $( document ).ready(function() {
      var overpassApiUrl = 'https://overpass-api.de/api/interpreter?data=[out:xml][bbox][timeout:180];node[amenity=hospital];out;&bbox=106.7828,-6.2237,106.8695,-6.1469';
      $.get(overpassApiUrl, function (osmXml) {
        var OSMGeojson = osmtogeojson(osmXml); 
        var resultLayer = L.geoJson(OSMGeojson).addTo(map);
      });
    });    
</script>

</body>
</html>

untuk memasukkan html dan javascript ke dalam wordpress post dan page menggunakan block code seperti berikut

Agar kode HTML dan javascript di atas dapat diterjemahkan dalam wordpress post dan page ilangkan tag HTML, tag Head, dan tag Body. Maka code akan menjadi sebagai berikut:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src="lib/osmtogeojson.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

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

<script>

	var map = L.map('map').setView([-6.1829957,106.8444433], 13);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	}).addTo(map);

  $( document ).ready(function() {
      var overpassApiUrl = 'https://overpass-api.de/api/interpreter?data=[out:xml][bbox][timeout:180];node[amenity=hospital];out;&bbox=106.7828,-6.2237,106.8695,-6.1469';
      $.get(overpassApiUrl, function (osmXml) {
        var OSMGeojson = osmtogeojson(osmXml); 
        var resultLayer = L.geoJson(OSMGeojson).addTo(map);
      });
    });    
</script>

Setelah dikurangi tag html, head, dan body ubah code menjadi preformated, dengan cara ubah block type sebagai berikut:

setelah block type diubah menjadi preformated maka hasilnya sebagai berikut: