質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1350閲覧

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

jcas

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/02/18 04:57

編集2019/02/18 06:02

前提・実現したいこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/02/18 05:01

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

2019/02/18 05:04

あの落ち着いて編集しましょう?? ```ここに言語を入力 コード ``` ↑の枠の中のコードという文言を消して貼りつけてください。 「ここに言語を入力」という文字を消してJavaScriptと記述してください
jcas

2019/02/18 05:06

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

2019/02/18 05:13

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

2019/02/18 05:25

だから・・・コードは質問文を編集してはりつけましょう~・・・笑 ここに書いてもマークダウン使えませんからインデントつきませんし、見にくいだけです
m.ts10806

2019/02/18 05:30

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

2019/02/18 05:48

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

2019/02/18 06:02

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

2019/02/18 06:07

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

2019/02/18 06:21

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

2019/02/18 06:31

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

2019/02/18 06:39

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

2019/02/18 06:42

targetCookie = cookieKeyArray&#091;i&#093;; エラーのリンク先をクリックしましたら、上記がマークアップされました。
azuapricot

2019/02/18 06:50

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

2019/02/18 07:09

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

回答1

0

自己解決

①いただいたご指摘に、ワードプレスが記号などを書き換えてしまうとありましたので、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>

無事表示されました!

投稿2019/02/20 08:43

jcas

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問