Di dalam WP_Dependencieskelas ada metode bernama add_data. Fungsi ini menambahkan data ke skrip / gaya yang telah enqueued selama memuat WordPress. Penggunaan yang sering dikutip untuk fungsi ini adalah untuk menambahkan persyaratan saat menambahkan stylesheet yang ditargetkan pada versi IE yang berbeda. Misalnya, untuk menargetkan IE8 dan lebih rendah:
function test_wp_print_styles() {
global $wp_styles;
wp_enqueue_style( 'test-style', get_template_directory_uri() . '/css/test.css', array(), 1, 'all' );
$wp_styles->add_data( 'test-style', 'conditional', 'lte ie8' );
}
add_action( 'wp_print_styles', 'test_wp_print_styles' );
Ini akan dirender sebagai:
<!--[if lte ie8]>
<link rel='stylesheet' id='test-style-css' href='http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1' type='text/css' media='all' />
<![endif]-->
Ketika saya melihat melalui Core, saya melihat beberapa tempat di mana metode ini digunakan:
WP_Styles->add_inline_style(): menambahkan gaya sebaris setelah stylesheet yang direferensikan (dilakukan melaluiWP_Styles->print_inline_style())WP_Scripts->localize(): menambahkan objek yang dikodekan json (dibungkus oleh lebih banyakwp_localize_script()fungsi "publik" )wp_plupload_default_settings(): menambahkan objek yang dikodekan json (dibuat dari larik multidimensi) untuk skrip 'wp-plupload' (perhatikan bahwa ini akan datang di 3.4)Saat mendaftar / enqueueing skrip dan gaya Menambahkan data untuk skrip default (
wp-includes/script-loader.php)
Dari membaca melalui penggunaan metode ini, tampaknya tidak memiliki kasus penggunaan khusus. Dalam wp_plupload_default_settings, tampaknya memungkinkan untuk injeksi data yang sewenang-wenang. Dalam wp_register_script, tampaknya digunakan untuk membedakan antara skrip header dan footer. Dalam add_inline_style, ini digunakan untuk menunjukkan gaya sebaris yang harus ditambahkan setelah stylesheet yang ditentukan enqueued.
Penggunaan yang sangat baik untuk fungsi ini akan menjadi sesuatu seperti kode berikut di mana Anda meminta skrip eksternal tetapi perlu mengirimkannya beberapa konfigurasi, beberapa di antaranya berasal dari DB:
function zdt_enqueue_add_this() {
global $wp_scripts;
wp_enqueue_script( 'zdt-add-this', 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere' );
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
}
add_action( 'wp_enqueue_scripts', 'zdt_enqueue_add_this' );
Ini akan menghasilkan:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>
Perhatikan bahwa ini tidak dapat diselesaikan dengan wp_localize_scriptkarena addthis_shareobjek tersebut memiliki properti di dalam properti ( saya memang menulis tentang cara yang agak membingungkan tentang ini sebelumnya ).
EDIT: Saya salah dalam menyatakan ini. wp_localize_scriptmenangani array multidimensi dengan baik.
Metode ini tampaknya berfungsi sangat baik karena alasan berikut:
- Hal ini memungkinkan Anda untuk melampirkan data ke pegangan skrip sehingga selalu benar dengan skrip. Lebih lanjut, ini akan menjadi cerdas tentang menghilangkan script, urutan skrip, dan penempatan skrip.
- Ini memungkinkan Anda untuk menggunakan PHP untuk mengirim vars ke JS.
- Tampaknya lebih terorganisir daripada menggunakan
wp_print_stylesuntuk mencetak beberapa skrip sewenang-wenang yang ditindaklanjuti oleh skrip enqueued.
Ada beberapa hal yang tidak berfungsi seperti yang diharapkan yang membuat saya khawatir tentang metode ini. Salah satu isu tersebut adalah bahwa jika Anda menggunakan wp_localize_scriptbersama dengan $wp_scripts->add_data, Anda bisa mendapatkan hasil yang tidak diharapkan. Contohnya:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );
Menghasilkan:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>
Sedangkan skrip ini:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
Menghasilkan:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>
The datakunci yang diatur oleh wp_localize_scriptakhirnya ditimpa oleh panggilan untuk $wp_scripts->add_data, sedangkan jika Anda memanggil wp_localize_scriptdua kali untuk script yang sama, string akan digabungkan dengan baik.
Walaupun semua ini adalah cara yang sangat berguna untuk mencetak skrip yang sewenang-wenang untuk digunakan dengan skrip enqueued, itu membuat saya berpikir bahwa itu tidak boleh digunakan secara luas karena potensi konflik. Saya pasti dapat melihat argumen untuk menggunakan ini dalam proyek pribadi di mana kode tidak akan digunakan dalam plugin / tema komunitas.
Saya juga melihat Core Trac untuk melihat apakah ada petunjuk tentang tujuan fungsi. Saya menemukan satu tiket (http://core.trac.wordpress.org/ticket/11520) (satu epik pada saat itu) yang mengeksplorasi cara lain untuk menambahkan JS sewenang-wenang. Jadi sepertinya ada minat dalam menciptakan cara yang lebih baik untuk menambahkan JS sewenang-wenang, tetapi tidak yakin persis apakah add_dataharus menjadi bagian dari proses.
Pertanyaan utama saya adalah: haruskah pengembang menggunakan fungsi ini? Dalam beberapa kasus (misalnya, wp_register_script), sepertinya fungsi "pribadi" yang tidak boleh digunakan oleh pihak ke-3; Namun, dalam kasus lain (misalnya, wp_plupload_default_settings), sepertinya cara yang masuk akal untuk menyuntikkan JS sewenang-wenang sebelum skrip enqueued.
Saya tidak membayangkan ada jawaban yang "benar" untuk ini, tetapi akan senang mendengar apa yang dipikirkan para dev lainnya. Saya juga membayangkan ada potongan-potongan pada teka-teki ini yang telah saya abaikan dan ingin mendengar apa yang orang lain katakan tentangnya.