Saya mengalami ini ketika mencoba untuk mengintegrasikan API pemilih dropbox Dropbox ke sebuah plugin yang saya tulis.
Dokumentasi API memerintahkan Anda untuk menempatkan script
tag berikut di bagian atas file Anda:
<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>
Semua baik dan bagus, dan itu benar-benar berfungsi ketika saya langsung menempelkannya ke halaman yang disebut di bagian admin. Tapi, saya ingin menggunakan beberapa variasi wp_register_script (), wp_enqueue_script () dan wp_localize_script () untuk meneruskan id dan data-app-key yang diperlukan.
Saya sudah mencoba beberapa variasi berbeda dari ini:
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"));
}
Dan:
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 diganti dengan kunci aplikasi yang sesuai dalam kode saya. Akan menghargai segala arah. Terima kasih.
EDIT: Juga mencoba melakukannya dengan beberapa jquery, tetapi tidak berhasil. Mencobanya saat memuat dokumen dan dokumen siap. Saya mendapatkan {"error": "app_key" tidak valid}} kembali.
$('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');
sumber
wp_localize_script
dilakukan adalah mencetak objek yang dikodekan json di output html halaman. Objek ini dikenali oleh skrip sehingga Anda dapat menggunakannya. Yang Anda butuhkan adalah menambahkan beberapa atribut ke tag skrip, sehinggawp_localize_script
tidak dapat membantu Anda.wp_localize_script
tidak membuat atribut skrip. Tetapi apakah mungkin untuk meneruskan kunci aplikasi langsung ke dropbox.js? Hanya tebakan tetapi apakah Anda sudah mencobaarray('appKey'=>"MY_APP_KEY")
? Ini adalah kode yang mengambil kunci dari atributif(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}
wp_localize_script
yakin Anda dapat meneruskan atribut ke skrip. Saya benar-benar tidak tahu apakah ini akan berhasil atau tidak, namun itu bukan masalah yang terkait dengan pertanda.Jawaban:
Anda dapat mencoba menggunakan
script_loader_src
hook filter misalnya:Memperbarui
saya baru tahu sendiri bahwa src diloloskan oleh esc_url, jadi tampak sedikit lebih saya menemukan
clean_url
filter yang dapat Anda gunakan untuk mengembalikan nilai dengan id dan data kunci aplikasi Anda:sumber
<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>
Sejak WP 4.1.0, hook filter baru tersedia untuk mencapai ini dengan mudah:
script_loader_tag
Gunakan seperti ini:
sumber
OK, sepertinya (bagi saya) bahwa dengan
wp_enqueque_scripts
tidak mungkin untuk mencetak id dan kunci aplikasi sebagai atribut tag skrip.Saya yakin 90%, karena
WP_Dependencies
bukan kelas yang saya kenal dengan baik, tetapi melihat kode sepertinya tidak mungkin bagi saya.Tapi aku yakin 100% bahwa menggunakan
wp_localize_script
ini tidak berguna untuk lingkup Anda .Seperti yang saya katakan di komentar saya di atas:
Apa yang saya tidak katakan dalam komentar adalah bahwa objek yang dikodekan json sebagai nama arbitrer yang Anda putuskan, pada kenyataannya, melihat sintaks:
Objek yang dinamai
$object_name
dapat digunakan oleh skrip karena berada dalam lingkup global dan dicetak dalam html halaman.Tetapi itu
$object_name
adalah nama yang Anda putuskan, jadi itu bisa menjadi segalanya .Jadi tanyakan pada diri sendiri:
bagaimana skrip di server dropbox jauh dapat menggunakan variabel yang mereka tidak tahu bagaimana dipanggil?
Jadi tidak ada alasan sama sekali untuk mengirimkan id dan / atau kunci aplikasi ke skrip dengan
wp_localize_script
: Anda hanya perlu mencetaknya sebagai atribut tag skrip seperti yang dikatakan dalam dokumen Dropbox API.Saya bukan pengembang js, tapi saya pikir apa yang dilakukan skrip dropbox adalah:
<script>
elemen html di halamanTolong, perhatikan bahwa saya tidak tahu pasti, saya hanya menebak .
Dengan cara ini, skrip yang dimuat dari server dropbox dapat memeriksa kunci aplikasi Anda dengan cara yang mudah bagi mereka dan mudah diimplementasikan untuk Anda.
Karena dalam kalimat pertama saya sudah mengatakan bahwa tidak mungkin untuk mencetak id dan kunci aplikasi dalam skrip menggunakan
wp_enqueque_scripts
, moral cerita adalah bahwa Anda harus mencetaknya di markup dengan cara lain.Cara yang tidak berbau terlalu banyak (ketika tidak ada alternatif) adalah menggunakan
wp_print_scripts
kait untuk mencetak tag skrip:sumber
echo
pernyataan tidak setiap permintaan HTTP sejauh yang saya tahu, dan WordPresswp_enqueue_script
melakukan gema juga (lihat core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/... ) Tentunya Anda bisa mengurangi jumlah permintaan dengan menggabungkan skrip dengan skrip lain yang Anda miliki tetapi: 1) skrip ada di server pihak ke-3 dalam hal ini 2) dengan HTTP 2 saat ini menggabungkan skrip akan mengurangi kinerja, bukan meningkatkannya. Jadi mungkin saya melewatkan sesuatu?Dari balasan Bainternet di atas. Kode ini bekerja untuk saya.
Sunting: Satu-satunya perbedaan dari kode Bainternet adalah, saya menambahkan syarat untuk memeriksa apakah URL skrip dropbox dan itu adalah file .js.
Saya mengabaikan semua URL lain dan menulis ulang URL dropbox.
sumber
Saya melakukan beberapa pengecekan dalam kode dropbox.js (v2) untuk melihat apa yang terjadi dan bagaimana cara terbaik untuk menyelesaikannya. Ternyata, data-app-key hanya digunakan untuk mengatur variabel Dropbox.appKey. Saya dapat mengatur variabel dengan baris tambahan berikut.
Menggunakan contoh javascript di halaman Dropbox https://www.dropbox.com/developers/dropins/chooser/js :
Dalam kode saya, saya mengatur Dropbox.appKey di setiap tempat di mana saya mereferensikan rutinitas javascript Dropbox. Melakukan ini memungkinkan saya untuk menggunakan wp_enqueue_script () tanpa parameter tambahan.
sumber
Saya melakukan ini dengan plugin eCards saya dan itu sangat sederhana.
Berikut ini salinan / tempel langsung dari plugin:
Perhatikan kunci API diteruskan melalui opsi.
sumber
Ada cara yang lebih sederhana untuk melakukan ini
sumber
Sintaks Wordpress untuk script_loader_tag :
Untuk menambahkan atribut apa pun, Anda dapat mengubah $ tag Anda dengan cara ini:
Yang mana akan keluar dari URL dengan benar.
sumber
Terima kasih untuk semua posting, mereka sangat membantu. Saya memutar versi saya sendiri untuk memberikan struktur dan membuatnya lebih mudah untuk membaca dan memperbarui. Gunakan enqueue seperti biasa, gunakan skrip untuk file CSS dengan tag palsu di bagian akhir sehingga memuat di bagian atas. Meskipun mungkin agak disederhanakan.
sumber