WPにhtmlフォームが表示されない

Question

前提・実現したいこと

WordpressでのSATORIフォーム埋め込み

発生している問題・エラーメッセージ

※追記02　chromeの検証にて、下記エラーが出ておりました。

Uncaught SyntaxError: Unexpected token <

該当のソースコード

<div id="satori__creative_container"></div>
<script>
(function() {
	"user strict";
	var root = this;
	var domain, creative_key, loadScript, queryBuilder, params;
	root.SatoriForm = {
		configure: function(obj) {
			var self = this;
			root.__tempConfigureObj = obj;
		}
	};
	domain = "delivery.satr.jp";
	creative_key = "フォームの作成キー";
	loadScript = function(src, callback) {
		var done = false;
		var head = document.getElementsByTagName('head')[0];
		var script = document.createElement('script');
		script.src = src;
		head.appendChild(script);

		// Attach handlers for all browsers
		script.onload = script.onreadystatechange = function() {
			if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState ===
					"complete")) {
				done = true;
				callback();

				// Handle memory leak in IE
				script.onload = script.onreadystatechange = null;
				if (head && script.parentNode) {
					head.removeChild(script);
				}
			}
		};
	};
	getCookie = function(key) {
		var cookieString, cookieKeyArray, i, len, targetCookie, valueIndex;
		cookieString = document.cookie;
		cookieKeyArray = cookieString.split(";");
		len = cookieKeyArray.length;
		for (i = 0; i < len; i++) {
			targetCookie = cookieKeyArray[i];
			targetCookie = targetCookie.replace(/^\s+|\s+$/g, "");
			valueIndex = targetCookie.indexOf("=");
			if (targetCookie.substring(0, valueIndex) == key) {
				return unescape(targetCookie.slice(valueIndex + 1));
			}
		}
		return "";
	};
	queryBuilder = function(params) {
		var result = [];
		Object.keys(params).forEach(function(key) {
			result.push(key + "=" + encodeURIComponent(params[key]))
		});
		return result.join("&");
	};
	params = {
		current_url: document.URL,
		referer_url: document.referrer,
		logging_status: "true",
		st_segs: getCookie("st_segs"),
		st_id: getCookie("satori_id")
	};
	loadScript("//" + domain + "/creative_set/" + creative_key + "/f.js?" +
		queryBuilder(params),
		function() {
			var config = root.__tempConfigureObj;
			root.__tempConfigureObj = undefined;
			if (typeof configure == "object") {
				SatoriCreative.configure(config);
			}
			SatoriCreative.start();
		});
}).call(this);

</script>

試したこと

①編集のテキストで上記コードを張り付けて使用。
↓
編集画面では表示されます。

②個別Javaスクリプト読み込みのため、下記コードをfunctions.php最下部に記述し、個別Javaスクリプトの書き込み欄にスクリプトの設置コード

<div id="satori__creative_container">
    <script id="-_-satori_creative-_-" src="//delivery.satr.jp/js/creative_set.js" data-key="フォームの生成キー">
</script>
</div>
```を記入
↓
編集画面でも表示されません。

個別Javaスクリプト読み込みコード
```ここに言語を入力

//Custom JavaScript Widget
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
    add_meta_box('custom_js', '個別JavaScript', 'custom_js_input', 'post', 'normal', 'high');
    add_meta_box('custom_js', '個別JavaScript', 'custom_js_input', 'page', 'normal', 'high');
}
function custom_js_input() {
    global $post;
    echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
    echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
    if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_js = $_POST['custom_js'];
    update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            if (get_post_meta(get_the_ID(), '_custom_js', true) !='') {
                echo "<script type=\"text/javascript\">\n".get_post_meta(get_the_ID(), '_custom_js', true)."\n</script>\n";
            }
        endwhile; endif;
        rewind_posts();
    }
}

補足情報（FW/ツールのバージョンなど）

WPバージョン：5.0.3（英語バージョン）
テーマ：DexterVersion バージョン1.5

プラグインも競合していますが、1つ目のものはコアプラグインのため削除・停止できない状況です。
競合の可能性があるプラグインは下記です。

Evatheme Core
Ultimate Addons for WPBakery Page Builder
WPBakery Page Builder

何卒よろしくお願いいたします。

Comments

[azuapricot]

JavaScriptのコードもマークダウンで囲ってください

[azuapricot]

あの落ち着いて編集しましょう？？

```ここに言語を入力
コード
```
↑の枠の中のコードという文言を消して貼りつけてください。
「ここに言語を入力」という文字を消してJavaScriptと記述してください

[jcas]

プレビュー画面を見ずに更新してしまいました。失礼いたしました。

[m.ts10806]

にしてもJavaScriptコードがインデント全くないのはまずいです。自身のコードにインデントつけてこちらに貼りなおしてください。またブラウザ開発ツールのコンソールにエラーが出てないか確認してください

[azuapricot]

だから・・・コードは質問文を編集してはりつけましょう～・・・笑

ここに書いてもマークダウン使えませんからインデントつきませんし、見にくいだけです

[m.ts10806]

「JavaScriptコード」と書いたのですが・・・。

[m.ts10806]

フォーマット機能のあるエディタか、下記のようなサービス使うのが無難です。
https://tools.m-bsys.com/development_tooles/jsbeautifier.php

[jcas]

ありがとうございます。ツールを使用させていただきました。
よろしくお願いいたします。

[azuapricot]

https://qiita.com/take2isk/items/575786a60acb721c0f52

とりあえずエラーで検索したらこんなのがでてきたので確認してみるとよいかもしれません

[jcas]

ありがとうございます。対応してましたら、エラーが減り、
下記になりました。
Uncaught SyntaxError: Unexpected token <

[azuapricot]

SyntaxError　ってことはどっかの文法なりなんなりが間違っているってことです。
Chromeで検証しているのならどこのファイルの何行目とかでてませんか？

[jcas]

https://サイトURL/contact/?preview_id=1118&preview_nonce=b6088d7682&_thumbnail_id=-1&preview=true

が出ておりました。

JQMIGRATE: Migrate is installed, version 1.4.1　
https://サイトURL/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
という記述もエラーの上にありました。

WPインストール時のJavaと記述したJavaがうまくかみ合ってないのでしょうか...

[azuapricot]

エラー文コピペできるようなら個人情報？サイト情報？になるところを○なり✕なりで隠してそのままペーストしていただいたほうがよいかと思います。
無理ならスクリーンショットとか。

[jcas]

JQMIGRATE: Migrate is installed, version 1.4.1
https://○○/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
preview_id=1118&preview_nonce=b6088d7682&_thumbnail_id=-1&preview=true:912
Uncaught SyntaxError: Invalid or unexpected token

[jcas]

targetCookie = cookieKeyArray&#091;i&#093;;

エラーのリンク先をクリックしましたら、上記がマークアップされました。

[azuapricot]

（なんかワードプレスって勝手に記号とか変換されちゃう~っていうのがあった気が・・・）
なんで[i]がおかしくなっちゃってるんでしょう～。
うーむ詳しい人いないかなぁ

[jcas]

勝手に変換されちゃうんですね…。
ありがとうございます。引き続き、調べてみます！

Answer 1

①いただいたご指摘に、ワードプレスが記号などを書き換えてしまうとありましたので、java入力用のプラグインを探しました。

②「Simple Custom CSS&JS」を使用して、下記設置を登録

<div id="satori__creative_container">
    <script id="-_-satori_creative-_-" src="//delivery.satr.jp/js/creative_set.js" data-key="フォームの生成キー">
</script>
</div>

③埋め込みたい固定ページのテキストに下記ソースを記入

<div id="satori__creative_container"></div>
<script>
(function() {
    "user strict";
    var root = this;
    var domain, creative_key, loadScript, queryBuilder, params;
    root.SatoriForm = {
        configure: function(obj) {
            var self = this;
            root.__tempConfigureObj = obj;
        }
    };
    domain = "delivery.satr.jp";
    creative_key = "フォームの作成キー";
    loadScript = function(src, callback) {
        var done = false;
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = src;
        head.appendChild(script);

        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState ===
                    "complete")) {
                done = true;
                callback();

                // Handle memory leak in IE
                script.onload = script.onreadystatechange = null;
                if (head && script.parentNode) {
                    head.removeChild(script);
                }
            }
        };
    };
    getCookie = function(key) {
        var cookieString, cookieKeyArray, i, len, targetCookie, valueIndex;
        cookieString = document.cookie;
        cookieKeyArray = cookieString.split(";");
        len = cookieKeyArray.length;
        for (i = 0; i < len; i++) {
            targetCookie = cookieKeyArray[i];
            targetCookie = targetCookie.replace(/^\s+|\s+$/g, "");
            valueIndex = targetCookie.indexOf("=");
            if (targetCookie.substring(0, valueIndex) == key) {
                return unescape(targetCookie.slice(valueIndex + 1));
            }
        }
        return "";
    };
    queryBuilder = function(params) {
        var result = [];
        Object.keys(params).forEach(function(key) {
            result.push(key + "=" + encodeURIComponent(params[key]))
        });
        return result.join("&");
    };
    params = {
        current_url: document.URL,
        referer_url: document.referrer,
        logging_status: "true",
        st_segs: getCookie("st_segs"),
        st_id: getCookie("satori_id")
    };
    loadScript("//" + domain + "/creative_set/" + creative_key + "/f.js?" +
        queryBuilder(params),
        function() {
            var config = root.__tempConfigureObj;
            root.__tempConfigureObj = undefined;
            if (typeof configure == "object") {
                SatoriCreative.configure(config);
            }
            SatoriCreative.start();
        });
}).call(this);

</script>

無事表示されました！