Ich bin darauf gestoßen , als ich versucht habe, die Drop-In-Auswahl-API von Dropbox in ein Plugin zu integrieren, das ich gerade schreibe.
In der API-Dokumentation werden Sie aufgefordert, das folgende script
Tag am Anfang Ihrer Datei einzufügen:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>
Alles in Ordnung und gut, und es funktioniert tatsächlich, wenn ich es direkt in die Seite einfügen, die im Admin-Bereich aufgerufen wird. Ich möchte jedoch eine Variation von wp_register_script (), wp_enqueue_script () und wp_localize_script () verwenden, um die erforderliche ID und den Daten-App-Schlüssel zu übergeben.
Ich habe ein paar verschiedene Variationen davon ausprobiert:
add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {
wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
wp_enqueue_script('dropbox.js');
wp_localize_script('dropbox.js','dropboxdata',array('id'=>"dropboxjs",'data-app-key'=>"MY_APP_KEY"));
}
Und:
add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {
wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
wp_enqueue_script('dropbox.js');
wp_localize_script('dropbox.js','dropboxdata',array(array('id'=>"dropboxjs"),array('data-app-key'=>"MY_APP_KEY")));
}
MY_APP_KEY wird in meinem Code durch den entsprechenden Anwendungsschlüssel ersetzt. Würde mich über jede Richtung freuen. Vielen Dank.
EDIT: Auch versucht, es mit etwas jquery zu tun, aber ohne Erfolg. Versuchte es auf Dokument laden und auf Dokument bereit. Ich erhalte die Meldung {"error": "Invalid app_key"}.
$('script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]').attr('id','dropboxjs').attr('data-multiselect','true').attr('data-app-key','MY_APP_KEY');
quelle
wp_localize_script
tun, ist ein json-codiertes Objekt in der HTML-Ausgabe der Seite zu drucken. Dieses Objekt wird vom Skript erkannt und kann verwendet werden. Sie müssen dem Skript-Tag einige Attribute hinzufügen undwp_localize_script
können Ihnen daher nicht helfen.wp_localize_script
keine Skriptattribute. Aber ist es möglich, den App-Schlüssel direkt an dropbox.js zu übergeben? Nur eine Vermutung, aber haben Sie es versuchtarray('appKey'=>"MY_APP_KEY")
? Dies ist der Code, der den Schlüssel aus dem Attribute packtif(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}
wp_localize_script
Sicherheit können Sie Attribute an das Skript übergeben. Ich weiß wirklich nicht, ob das funktionieren wird oder nicht, es ist jedoch keine worpress-bezogene Angelegenheit.Antworten:
Sie können versuchen, den
script_loader_src
Filterhaken zu verwenden, zB:Aktualisieren
Ich habe gerade selbst herausgefunden, dass esc_url das src-Kommando enthält, also habe ich bei genauerem Hinsehen den
clean_url
Filter gefunden, mit dem Sie den Wert mit Ihrer ID und Ihren App-Schlüsseldaten zurückgeben können:quelle
<script type='text/javascript' src='https://www.dropbox.com/static/api/1/dropins.js?ver=3.6'id='dropboxjs'data-app-key='MY_APP_KEY'></script>
Seit WP 4.1.0 ist ein neuer Filterhaken verfügbar, um dies einfach zu erreichen:
script_loader_tag
Verwenden Sie es so:
quelle
OK, es scheint mir, dass es mit
wp_enqueque_scripts
nicht möglich ist , die ID und den App-Schlüssel als Script-Tag-Attribute auszudrucken.Ich bin mir zu 90% sicher, da
WP_Dependencies
es sich nicht um eine Klasse handelt, die ich gut kenne, sondern um den Code. Es scheint mir nicht möglich zu sein.Aber ich bin sicher , dass bei 100% , dass die Verwendung
wp_localize_script
ist für Ihren Anwendungsbereich nicht sinnvoll .Wie ich oben in meinem Kommentar sagte:
Was ich in dem Kommentar nicht gesagt habe, ist, dass das json-codierte Objekt ein willkürlicher Name ist, den Sie in der Tat anhand der Syntax bestimmen:
Das Objekt mit dem Namen
$object_name
könnte durch das Skript verwendet werden , da im globalen Bereich und in dem HTML - Code der Seite gedruckt.Aber den
$object_name
Namen entscheidest du , also kann es alles sein .Fragen Sie sich also:
Wie kann das Skript auf dem Remote-Dropbox-Server eine Variable verwenden, von der sie nicht wissen, wie sie aufgerufen wird?
Es gibt also überhaupt keinen Grund , ID und / oder App-Schlüssel an das Skript zu übergeben
wp_localize_script
: Sie müssen sie nur als Skript-Tag-Attribute drucken, wie in Dropbox API-Dokumenten beschrieben.Ich bin kein JS-Entwickler, aber ich denke, was Dropbox-Skript tut, ist:
<script>
HTML-Elemente auf der SeiteBitte beachten Sie, dass ich das nicht sicher weiß, ich rate nur .
Auf diese Weise kann das vom Dropbox-Server geladene Skript Ihren App-Schlüssel auf eine Weise überprüfen, die für sie einfach und für Sie leicht zu implementieren ist.
Da ich im ersten Satz gesagt habe, dass es nicht möglich ist, die ID und den App-Schlüssel im Skript mithilfe
wp_enqueque_scripts
von auszudrucken, besteht die Moral der Geschichte darin, dass Sie sie im Markup auf eine andere Weise ausdrucken müssen.Ein Weg, der nicht zu viel riecht (wenn es keine Alternativen gibt), ist,
wp_print_scripts
Hook zu verwenden, um das Skript-Tag zu drucken:quelle
echo
Anweisung führt keine HTTP-Anfrage aus, soweit ich das beurteilen kann, und WordPresswp_enqueue_script
gibt auch ein Echo aus (siehe core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/… ) Anzahl der Anfragen durch Kombinieren des Skripts mit einem anderen Skript, das Sie haben, aber: 1) Das Skript ist in diesem Fall auf einem Server eines Drittanbieters vorhanden. 2) Wenn Sie das Skript heutzutage mit HTTP 2 kombinieren, wird die Leistung verringert, nicht erhöht. Vielleicht vermisse ich etwas?Aus der obigen Antwort von Bainternet. Dieser Code hat bei mir funktioniert.
Bearbeiten: Der einzige Unterschied zum Bainternet-Code ist, dass ich eine Bedingung hinzugefügt habe, um zu überprüfen, ob die Skript-URL dropbox ist und es sich um eine .js-Datei handelt.
Ich ignoriere alle anderen URLs und schreibe die Dropbox-URL neu.
quelle
Ich habe im dropbox.js-Code (v2) nachgesehen, was passiert ist und wie dies am besten gelöst werden kann. Wie sich herausstellt, wird der Daten-App-Schlüssel nur zum Setzen der Variablen Dropbox.appKey verwendet. Ich kann die Variable mit der folgenden zusätzlichen Zeile setzen.
Verwenden des Javascript-Beispiels auf der Dropbox-Seite https://www.dropbox.com/developers/dropins/chooser/js :
In meinem Code setze ich den Dropbox.appKey an jeder Stelle, an der ich auf die JavaScript-Routinen von Dropbox verweise. Dadurch konnte ich wp_enqueue_script () ohne die zusätzlichen Parameter verwenden.
quelle
Ich habe das mit meinem eCards-Plugin gemacht und es ist wirklich einfach.
Hier ist ein direktes Kopieren / Einfügen aus dem Plugin:
Beachten Sie, dass der API-Schlüssel über eine Option übergeben wird.
quelle
Es gibt einen einfacheren Weg, dies zu tun
quelle
Wordpress-Syntax für script_loader_tag :
Um ein beliebiges Attribut hinzuzufügen, können Sie Ihr $ -Tag folgendermaßen ändern:
Welche URL wird korrekt entkommen.
quelle
Vielen Dank für all die Beiträge, die wirklich geholfen haben. Ich habe meine eigene Version gerollt, um sie zu strukturieren und das Lesen und Aktualisieren zu vereinfachen. Verwenden Sie Enqueue wie gewohnt. Verwenden Sie Skript für CSS-Dateien mit einem falschen Tag am Ende, damit es oben geladen wird. Obwohl es wahrscheinlich etwas vereinfacht werden kann.
quelle