折騰了一個晚上和一個早上,把json-editor弄到了網站中。
這回我沒有做成插件,而是直接把json/資料夾上傳到wordpress根目錄把程式文件上傳至媒體庫。因為我已經看透wordpress插件了,它跟上傳至媒體庫沒有任何區別!還省了開啟/關閉這一步驟。
本網試玩
- 地址:https://ejsoon.win/json/(空白)
- 或者:
官方網站
內置到wordpress網站步驟
首先下載以下四個文件(右鍵或長按下載,不要點擊打開):
- https://ejsoon.win/wp-content/uploads/2022/11/json.html
- https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor.min_.css
- https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor-icons.svg
- https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor.min_.js
之後在主題的function.php加入以下代碼:
<?php
add_filter( 'run_wptexturize', '__return_false' );
// [json/]
add_shortcode( 'json', function ( $atts, $content = "{}" ) {
$json_mode = isset($atts["mode"]) ? $atts["mode"] : "tree";
$btn_txt = isset($atts["txt"]) ? $atts["txt"] : "open json-editor";
return <<<clkkk
<button onclick="window['jsondata'] = JSON.stringify(JSON.parse(this.nextElementSibling.value)); window['jsonmode'] = '$json_mode'; window.open('/wp-content/uploads/2022/11/json.html');">$btn_txt</button>
<input type="hidden" value='$content'>
clkkk;
});
// [jfrm/]
add_shortcode( 'jfrm', function ( $atts, $content = "{}" ) {
$jfrm_height = isset($atts["jh"]) ? $atts["jh"]."px" : "480px";
$jfrm_mode = isset($atts["mode"]) ? $atts["mode"] : "view";
return <<<clkkk
<iframe style="width:100%;height:$jfrm_height;" src='/wp-content/uploads/2022/11/json.html' frameborder="0" onload="this.contentWindow.ifrm_update(this.nextElementSibling.value, '$jfrm_mode')"></iframe>
<input type="hidden" value='$content'>
clkkk;
});
// [ju/]
add_shortcode( 'ju', function ( $atts) {
$ju_height = isset($atts["jh"]) ? $atts["jh"]."px" : "480px";
$juid = get_the_id();
$judata = get_post_meta($juid, 'jsondata', true);
$ju_html = <<<clkkk
<button onclick="updateJson()">Update</button><span style="display: inline-block; margin: 7px;">$juid</span>
<iframe id="ju" style="width:100%;height:$ju_height;" src='/wp-content/uploads/2023/09/json.html?v=1250' frameborder="0" onload="this.contentWindow.ifrmUpdate(this.nextElementSibling.value)"></iframe>
<input type="hidden" value='$judata'>
<div class="jud hide"></div>
<style>
.jud {
position: fixed;
display: inline-block;
left: 0;
top: 0;
background: lightgreen;
padding: 12px;
z-index: 77777777;
}
.hide {display: none;}
</style>
clkkk;
// auto update
$admin_url = admin_url('admin-ajax.php');
// $admin_url = "/wp-admin/admin-ajax.php";
$ju_html .= <<<aupd
<script>
function updateJson () {
let ju = document.getElementById("ju");
let jutxt = ju.contentWindow.ifrmGet();
jQuery(document).ready(function($){
var data = {
action: 'json_post',
jsondata: jutxt,
id: $juid
}
$.post("$admin_url", data, function(response) {
$(".jud").text(response);
$(".jud").removeClass("hide");
setTimeout(function () {
$(".jud").addClass("hide");
}, 1200);
});
});
}
</script>
aupd;
return $ju_html;
});
function jpst() {
// print_r($_POST);
if (isset($_POST["id"]) && isset($_POST["jsondata"])) {
update_post_meta(intval($_POST["id"]), "jsondata", $_POST["jsondata"]);
echo "ok";
} else {
echo "invalid";
}
die();
}
add_action('wp_ajax_json_post', 'jpst');
// add_action('wp_ajax_nopriv_json_post', 'jpst');
使用的時候,就可以用〔json〕json數據〔/json〕來調用(把〔〕換成英文符號[])
如果是內嵌至網頁,就用〔jfrm〕json數據〔/jfrm〕。
〔json/〕可加的參數有txt="標題",mode="模式:view,text,tree三選一,默認是tree"。
〔jfrm/〕可加的參數有jh="高度,單位是px,填數字即可",mode="模式:同上"。