Implementieren externer Widgets in WordPress-Sites

Question

Ich habe versucht, den generierten Widget-Code für Walk Score und große Schulen in einer WordPress-Website hinzuzufügen und hatte nicht viel Glück. Ich habe das Plugin Script n Styles installiert und gehofft, dass ich, wenn ich den Code aufspalte und das JavaScript in den Speicherort des Plugins für die Seite lege, die Widgets rendern würde, aber kein Glück. Es scheint fast das GreatSchools-Widget zu rendern, aber die Karte wird immer noch nicht geladen.

<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 --> 

Ich würde wirklich ein Feedback darüber, wie externe Javascript Widgets in einer Wordpress-Seite hinzufügen. Vielen Dank im Voraus.

Update: Es scheint, dass die Widgets angezeigt werden, aber wenn die Seite im Chrome-Browser angezeigt wird, wird sie als nicht authentifiziertes Skript geblockt, sodass Sie das Ausführen des Skripts zulassen müssen. Gibt es irgendetwas in der WordPress-Umgebung hinzuzufügen, um es nicht als mögliches unsicheres Skript auszulösen, und das Skript beim Laden der Seite automatisch auszuführen?

Answer 1

Das Problem, das Sie haben, ist Teil von Googles neuen (ish) CORS-Richtlinie. Sie können eine einfache Lösung für dieses versuchen, durch http: aus den script src Links zu entfernen, so zum Beispiel

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

statt

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

Wenn die Site das Skript dient, wäre ein SSL-Zertifikat hat, das teilt dem Browser dann mit, dass er dieselbe Authentifizierung wie die Seite (https) anfordert. Wenn der Remote-Server keine SSL hat, können Sie auf dasselbe Problem stoßen.

---

Das andere Problem ist CORS selbst (Cross Origin Request Policy).

Um Off-Site-Skripts zu aktivieren, müssen Sie eine Kopfzeile übergeben, die es ihnen ermöglicht. Dies kann in PHP als solche durchgeführt werden:

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

In Ihrem speziellen Fall kann dies in der functions.php-Datei abgelegt werden, oder alternativ in einem benutzerdefinierten Plugin (die es Ihnen ermöglichen Ihr Thema zu ändern, ohne Funktionalität zu brechen). Ich würde vorschlagen, es in einem benutzerdefinierten Plugin persönlich zu tun.

---

Es soll beachtet werden, dass Chrome hat vor allem in letzter Zeit über diese äußerst heikel worden, und eine Menge Leute ohne wirklich effektiven Weg, sie zu deaktivieren durch Aufbietung angry diese Änderung tatsächlich gemacht hat, was ziemlich betroffen Viele integrierte Seiten in Geräten wie Routern und solchen, in denen sie eine ältere Admin-Vorlage verwenden und diese nicht effektiv ändern können, um den neuen Standards von Chrome zu entsprechen.