Skrip dan Gaya Enqueuing di WordPress

Takeaways Key

skrip dan gaya enqueuing dalam WordPress adalah penting untuk mengekalkan prestasi dan mencegah konflik antara skrip dan gaya yang berbeza. Cara yang disyorkan untuk menambah skrip menggunakan cangkuk admin_enqueue_scripts, prefixing pengendali untuk mengelakkan konflik dan memastikan skrip sentiasa dimuatkan.
Adalah mungkin untuk menghapuskan skrip yang tidak perlu yang menyebabkan kesilapan atau konflik dengan menggunakan fungsi wp_deregister_style. Ini amat berguna dalam mod debug semasa masalah penyelesaian masalah.
Bekerja dengan kod pendek sering memerlukan skrip untuk disuntik ke dalam halaman. Ini boleh dicapai dengan mendaftarkan panggil balik pada penapis dan ujian the_content jika ia mengandungi kod shortcode. Walau bagaimanapun, penyelesaian ini boleh mempunyai masalah prestasi di laman web beban tinggi. Penyelesaian yang lebih canggih melibatkan penggunaan komposer untuk memuat kelas dan mendaftarkan kod shortcode di dalam kandungan pos.

Selepas membangunkan plugin dan tema WordPress untuk seketika, anda mula berfikir lebih banyak mengenai prestasi tema anda dan masalah yang boleh menyebabkan pelanggan anda. Salah satu masalah ini ialah skrip dan gaya yang memasangkan. Dalam artikel ini kita akan merangkumi asas -asas skrip dan amalan terbaik untuk kes -kes penggunaan yang berbeza. Anda boleh menyemak artikel ini untuk gambaran keseluruhan pemula mengenai menguruskan aset WordPress anda.

skrip dan gaya enqueuing

Jika anda memerlukan beberapa kod CSS atau JavaScript untuk disuntik ke halaman tertentu di laman web anda, kami cenderung menambahnya ke dalam fail markup yang sama atau menambahnya menggunakan URL langsung ke fail.

Walau bagaimanapun, ini bukan cara yang disyorkan untuk menambahkan skrip, dan plugin caching tidak akan mengoptimumkan dan cache aset anda untuk meningkatkan prestasi laman web. Kita perlu menggunakan cangkuk admin_enqueue_scripts.

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

Parameter pertama untuk kaedah WP_ENQUEUE_SCRIPT adalah nama pengendali skrip, kita harus sentiasa awalan pengendali untuk mengelakkan sebarang konflik dan pastikan skrip kami akan sentiasa dimuatkan.

Penyelesaian semasa tidak sempurna, dan skrip kami dimasukkan ke dalam setiap halaman belakang. Kami boleh menggunakan pembolehubah $ Hook yang dihantar ke fungsi panggil balik untuk menguji halaman tertentu.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Sekarang, skrip kami hanya akan dimasukkan ke dalam tetapan dan halaman pos baru. Kita boleh pergi lebih jauh untuk menyertakan gaya kita apabila pengguna membuat halaman baru.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Keluarkan skrip yang tidak perlu

Kebanyakan pemaju tidak peduli dengan memasangkan skrip mereka hanya apabila diperlukan, inilah sebabnya kami akan sentiasa mendapat kesilapan yang tidak dijangka dan masalah gaya pelik. Apabila menyedari bahawa skrip membuang kesilapan atau menyebabkan konflik, anda boleh mengeluarkannya sebelum menambahkan sendiri, ini sering berguna dalam mod debug.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

Bekerja dengan shortcode

Kebanyakan plugin dan tema menyediakan satu set kod pendek untuk berinteraksi dengan laman web, kadang -kadang mereka perlu menyuntik skrip ke dalam halaman. Malangnya, kita tidak boleh menguji halaman depan seperti yang kita lakukan sebelum ini untuk hujung belakang.

Cara mudah untuk mencapai ini adalah untuk mendaftarkan panggilan balik pada penapis dan ujian the_content jika ia mengandungi kod shortcode anda. Jika ia kembali ya, anda boleh memupuk skrip anda, jika tidak, tidak berbuat apa -apa.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Kod di atas berfungsi hebat, dan hanya akan memaparkan skrip kami untuk jawatan yang mengandungi kod shortcode kami. Walau bagaimanapun, penyelesaian ini mempunyai beberapa masalah prestasi yang serius di laman web beban tinggi. Kami akan membuat penyelesaian yang lebih canggih untuk masalah ini.

Jika anda belum menggunakan komposer untuk memuatkan kelas anda, saya menasihatkan anda untuk mula melakukannya. Fail komposer.json plugin kami akan kelihatan seperti berikut:

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

kelas src/shortcode/helloshortcode.php memegang definisi shortcode kami.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

Kaedah Run akan mengembalikan markup HTML untuk kod shortcode kami, dan akan menetapkan atribut statik yang dimuatkan kepada Benar apabila kod shortcode digunakan.

Kaedah enqueuescripts akan enqueue gaya kami apabila plugin dimuatkan. Bahagian yang tinggal akan mendaftarkan kod shortcode kami untuk diiktiraf di dalam kandungan pos.

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

Sudah tentu kita boleh mengelakkan meletakkan kod ini di dalam fail plugin utama, tetapi kita akan menyimpan perkara yang mudah dan boleh dibaca.

Pembolehubah $ shortcode $ memegang senarai shortcode yang ada. Gelung pertama akan mendaftarkan kod shortcode kami dan membuat kaedah lari pengendali. Seterusnya, kami akan menggunakan cangkuk WP_Footer untuk memupuk skrip shortcode kami sebelum menutup tag badan.

anda kini boleh membuat halaman baru yang mengandungi kod shortcode kami dan periksa sama ada skrip kami dimuatkan dengan betul.

Kesimpulan

artikel pendek ini adalah ringkasan tentang cara untuk memasangkan plugin dan skrip tema anda, dan cara terbaik untuk mengelakkan memuatkannya di dalam setiap halaman di laman web anda. Jika anda mempunyai sebarang pertanyaan atau komen, sila hantarkannya di bawah dan saya akan melakukan yang terbaik untuk menjawabnya!

Soalan Lazim (Soalan Lazim) Mengenai Skrip dan Gaya Enqueuing di WordPress

Apakah tujuan skrip dan gaya enqueuing dalam WordPress? Ia membantu mencegah konflik antara skrip dan gaya yang berbeza yang mungkin digunakan oleh tema atau plugin anda. Dengan enqueuing, anda memberitahu WordPress apabila memuat skrip/gaya, di mana untuk memuatkannya, dan apa skrip/gaya lain yang bergantung pada.

Bagaimana saya dapat memupuk skrip di WordPress?

Untuk memupuk skrip di WordPress, anda perlu menggunakan fungsi WP_ENQUEUE_SCRIPT (). Fungsi ini memerlukan sekurang -kurangnya dua parameter: pemegang (nama unik untuk skrip) dan SRC (URL skrip). Anda juga boleh menentukan parameter tambahan seperti kebergantungan, versi, dan sama ada untuk memuat skrip di footer. Untuk mendaftarkan skrip dengan WordPress, tetapi ada perbezaan utama. WP_REGISTER_SCRIPT () hanya mendaftarkan skrip dan tidak memupuknya. Ini bermakna skrip tidak akan dicetak kecuali ia kemudiannya enqueued dengan WP_ENQUEUE_SCRIPT (). Sebaliknya, wp_enqueue_script () mendaftar dan enqueues skrip, yang bermaksud ia akan dicetak dalam html. Menggunakan fungsi wp_enqueue_style (). Fungsi ini berfungsi sama seperti wp_enqueue_script (), tetapi ia digunakan untuk stylesheets dan bukan skrip. skrip dan gaya anda. Cangkuk ini dipanggil apabila WordPress akan mencetak skrip dan gaya dalam HTML. Dengan mengaitkannya, anda memastikan bahawa skrip dan gaya anda dihidupkan pada masa yang tepat. atau gaya dimuatkan mengikut urutan yang betul. Sekiranya skrip anda bergantung pada skrip lain (seperti jQuery), WordPress akan memastikan bahawa jQuery dimuatkan sebelum skrip anda. Skrip atau gaya dalam WordPress menggunakan fungsi wp_dequeue_script () atau wp_dequeue_style (). Ini berguna jika anda ingin menghentikan skrip atau gaya daripada dimuatkan. kawasan menggunakan cangkuk tindakan 'admin_enqueue_scripts'. Ini berfungsi sama dengan cangkuk 'wp_enqueue_scripts', tetapi ia digunakan untuk kawasan admin dan bukannya bahagian depan. Hook adalah cangkuk yang lebih tua yang digunakan untuk memaparkan skrip. Walau bagaimanapun, tidak disyorkan untuk menggunakan cangkuk ini lagi, kerana ia boleh membawa kepada isu -isu dengan pesanan pemuatan skrip. Anda harus menggunakan cangkuk 'wp_enqueue_scripts'. Sebagai contoh, anda boleh menggunakan fungsi IS_Page () untuk hanya memaparkan skrip atau gaya jika halaman tertentu sedang dilihat. Ini berguna untuk prestasi, kerana ia menghalang skrip dan gaya yang tidak perlu daripada dimuatkan.

Atas ialah kandungan terperinci Skrip dan Gaya Enqueuing di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!