WordPressサイトでの外部ウィジェットの実装

Question

ウォークスコアと偉大な学校用の生成されたウィジェットコードをWordPressサイトに追加しようとしましたが、運があまりありませんでした。私はプラグインのScript n Stylesをインストールし、コードを分割してJavaScriptをページのプラグインの場所に置くと、ウィジェットはレンダリングされますが、そのような運がないことを期待しました。 GreatSchoolsウィジェットをほとんどレンダリングするように見えますが、マップはまだ読み込まれません。

<script type='text/javascript'> 
var ws_wsid = 'ga431dbc8ecbb4bc8a2c1f3599ba30081'; 
var ws_address = '1060 Lombard Street, San Francisco, CA'; 
var ws_format = 'tall'; 
var ws_width = '400'; 
var ws_height = '500'; 
</script><style type='text/css'>#ws-walkscore-tile{position:relative;text-align:left}#ws-walkscore-tile *{float:none;}</style><div id='ws-walkscore-tile'></div><script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script> 

<!-- School Finder Widget starts here --> <style type="text/css"> div#GS_schoolSearchWidget { border: solid 4px #999999; border-bottom-width: 20px; background-color: #FFF; width: 742px; position: relative; font-family: Arial, Arial, sans-serif; } div.GS_widget_innerBorder { border: solid 1px #000000; } div.GS_widget_footer { height: 40px; padding: 0 5px 0 15px; } div.GS_widget_footer img { margin-top: 8px; float: left; border: 0 } div.GS_seo { float: right; text-align: right; width: 120px; margin-top: 3px; font-size: 13px; line-height: 17px; } div#GS_schoolSearchWidget a, div#GS_schoolSearchWidget a:hover { text-decoration: underline; } div#GS_schoolSearchWidget div.GS_seo a, div#GS_schoolSearchWidget div.GS_seo a:hover { color: #666; font-size: 10px; } div.GS_getWidget { position: absolute; bottom: -17px; right: 8px; } div#GS_schoolSearchWidget div.GS_getWidget a, div#GS_schoolSearchWidget div.GS_getWidget a:hover { color: #0066B8; font-size: 11px; } </style> <script type="text/javascript"> function GS_updateSEOLinks(cityName, stateName, stateAbbr) { var cityLink = document.getElementById('GS_city_SEO'); var stateLink = document.getElementById('GS_state_SEO'); var cityUrl = GS_replaceAll(cityName, "%27", "'"); cityUrl = GS_replaceAll(cityUrl, " ", "_"); cityUrl = GS_replaceAll(cityUrl, "+", "_"); cityLink.href = "http://www.greatschools.org/city/" + cityUrl + "/" + stateAbbr; stateLink.href = "http://www.greatschools.org/modperl/go/" + stateAbbr; if (cityName == "New York" && stateAbbr == "NY") { cityLink.innerHTML = cityName + " City schools"; stateLink.innerHTML = stateName + " State schools"; } else if (cityName == "Washington" && stateAbbr == "DC") { cityLink.innerHTML = cityName + ", DC schools"; stateLink.innerHTML = ""; } else { cityLink.innerHTML = cityName + " schools"; stateLink.innerHTML = stateName + " schools"; } } function GS_replaceAll(strSource, strMatch, strReplace) { var rval = strSource; var index = rval.indexOf(strMatch); while (index != -1) { rval = rval.replace(strMatch, strReplace); index = rval.indexOf(strMatch); } return rval; } </script> <script type="text/javascript" src="http://www.greatschools.org/res/js/s_code.js"></script> <script type="text/javascript" src="http://www.greatschools.org/res/js/externalTracking.js"></script> <div id="GS_schoolSearchWidget"> <div class="GS_widget_innerBorder"> <div id="widget"> <iframe class="greatschools" src="http://www.greatschools.org/widget/schoolSearch.page?searchQuery=94536&amp;textColor=0066B8&amp;bordersColor=000000&amp;lat=37.564144&amp;lon=-122.00418&amp;cityName=Fremont&amp;state=CA&amp;normalizedAddress=Fremont%2C+CA+94536&amp;width=740&amp;height=368&amp;zoom=13" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe> </div> <div class="GS_widget_footer"> <a href="http://www.greatschools.org/" target="_blank"><img src="http://www.greatschools.org/res/img/widget/poweredby_logo.gif" alt="Powered by GreatSchools"/></a> <div class="GS_seo"> <div class="GS_city"><a href="http://www.greatschools.org/california/fremont/" target="_blank" rel="follow follow" id="GS_city_SEO">Fremont schools</a></div> <div class="GS_state"><a href="http://www.greatschools.org/california/" target="_blank" rel="follow follow" id="GS_state_SEO">California schools</a></div> </div> </div> </div> <div class="GS_getWidget"> <a href="http://www.greatschools.org/schoolfinder/widget/customize.page">I want this widget for my site</a> </div> </div> <script type="text/javascript"> pageTracking.pageName = "SchoolFinder Widget External"; pageTracking.hierarchy = "Widgets,SchoolFinder,6409421.20161224131721.294344"; pageTracking.server = "www.greatschools.org"; pageTracking.send(); </script> <!-- School Finder Widget ends here --> 

私は、WordPressのページに外部のJavaScriptのウィジェットを追加する方法についてのフィードバックを本当に感謝しています。前もって感謝します。

更新：ウィジェットが表示されているようですが、Chromeブラウザでページを表示すると、認証されていないスクリプトとしてブロックされているため、スクリプトを実行する必要があります。安全でない可能性のあるスクリプトとしてトリガーしないようにWordPress環境に追加するものはありますか？ページを読み込むときに自動的にスクリプトを実行しますか？

Answer 1

問題は、Googleの新しい（ish）CORSポリシーの一部です。あなたは、このスクリプトを提供するサイトはSSL証明書を持っている場合は、代わり

<script type="text/javascript" src="//www.greatschools.org/res/js/externalTracking.js"></script> 

だろう

<script type="text/javascript" src="http://www.greatschools.org/res/js/externalTracking.js"></script> 

例えばので、スクリプトのsrcのリンクから http:を除去することで、これを修正する簡単な方法を試すことができますページ（https）と同じ認証を使用してブラウザに要求するようブラウザに指示します。リモートサーバーにsslがない場合、同じ問題が発生する可能性があります。

---

もう1つの問題はCORS自体（クロスオリジン要求ポリシー）です。

オフサイトスクリプトを有効にするには、そのスクリプトを許可するヘッダーを渡す必要があります。これは以下のようなPHPで行うことができますあなたの特定のケースで

header("Access-Control-Allow-Origin: *"); 

、これは機能性を壊すことなく、あなたのテーマを変更することができますカスタムプラグイン（に交互あなたのfunctions.phpファイルに配置、またはすることができます）。私はカスタムプラグインでそれを個人的に行うことをお勧めします。

---

特にクロムは最近このことについて非常に凝り性得ている、と実際にそれを無効にするのがない、本当に効果的な方法でこの変更を説明入れることで怒っている人の多くを作った、非常に影響を受けていることに留意すべきです従来の管理テンプレートを使用していて、Chromeの新しい標準に準拠するように効果的に変更することができない、ルータなどのデバイスの統合されたページがたくさんあります。