Metode Paling Efektif untuk Menambahkan Script Inline di WordPress

Diterbitkan: 2022-06-16

The Most Effective Method for Adding Inline Scripts in WordPress

Skrip sebaris adalah dua kata sederhana yang membuat para pengembang merinding. Script Inline adalah cara mudah untuk menambahkan JavaScript (JS), CSS, dan HTML dalam teks posting WordPress Anda. Meskipun mereka dapat digunakan untuk banyak tujuan, satu penggunaan umum adalah membuat perubahan dengan cepat saat Anda menerbitkan artikel WordPress baru. Beberapa orang mungkin berpendapat bahwa itu tidak perlu, tetapi hal itu akan memastikan situs web Anda berjalan dengan lancar dan efisien.

Satu hal yang diabaikan oleh sebagian besar pengguna WordPress adalah melengkapi skrip di situs mereka. Baik Anda ingin menerapkan teks sebaris pada satu halaman atau di seluruh situs web Anda, ada banyak cara untuk mencapainya dengan WordPress. Menambahkan skrip sebaris ke situs WordPress Anda bisa sesederhana itu setelah Anda memahami metode yang tepat untuk melakukannya dengan benar. Posting blog ini akan membahas cara paling efektif untuk menambahkan skrip sebaris di WordPress dengan mudah. Teruslah membaca untuk mempelajari lebih lanjut.

Menambahkan Melalui Wp_print_scripts

Jika Anda ingin menambahkan teks sebaris WordPress, maka fungsi WordPress wp_print_scripts atau/dan admin_print_scripts adalah jawaban Anda. Wp_print_scripts WordPress dapat menampilkan tag teks di kepala dokumen, yang biasanya dilakukan saat menyertakan file JS atau CSS. Fungsi WordPress ini akan memungkinkan Anda untuk membuat situs Anda lebih interaktif atau menambahkan fungsionalitas baru. Seperti halnya fungsi WordPress lainnya, ada beberapa aturan sederhana yang harus diikuti sebelum menggunakannya di situs web Anda.

Fungsi ini menetapkan tiga variabel berdasarkan opsi plugin WordPress dan mengeluarkannya di front-end (bagian kepala) menggunakan kait admin_print_scripts. Untuk menambahkan karakter sebaris ke area Admin, Anda juga dapat mengganti wp_print_scripts dengan fungsi admin_print_scripts dan menyebutnya sehari.

Ketika WordPress pertama kali diinstal, ia datang dengan banyak teks yang secara otomatis ditambahkan ke situs. Ini dapat menyebabkan peningkatan waktu pemuatan dan penggunaan CPU di server Anda. Salah satu cara untuk mengatasi ini adalah dengan menggunakan fungsi wp_print_scripts, jadi Anda hanya memuat teks saat dibutuhkan atau diinginkan. Yang mengatakan, mari kita lihat beberapa pro dan kontra menggunakan fungsi wp_print_script untuk menambahkan karakter sebaris di posting WordPress Anda:

Kelebihan:

  • Itu selalu mudah untuk menambahkan teks sebaris ke "bagian kepala" halaman WordPress;
  • Kode yang Anda tambahkan tidak akan memiliki batasan apa pun yang berarti Anda dapat menambahkan variabel JS, fungsi, metode, persyaratan, atau apa pun yang ingin Anda tambahkan ke situs Anda.

Kontra:

  • Tidak ada cara khusus untuk mengaitkan kode yang Anda tambahkan dengan skrip terdaftar;
  • Dalam kebanyakan kasus, kode keluaran pada berbagai faktor mungkin bukan cara yang nyata dan konsisten untuk mengontrol lokasi kode keluaran. Namun, Anda selalu dapat menggunakan parameter <priority> di bawah <add_action> untuk mengontrol lokasi kode yang Anda tambahkan.

Gunakan Fungsi wp_add_inline_script()

Baru-baru ini, WordPress meluncurkan fungsi baru yang diterapkan untuk menambahkan JavaScript sebaris ke posting WordPress. Namun, integrasi baru ini kompatibel, dimulai dengan versi 4.5 WordPress, dan ini merupakan cara yang lebih menonjol untuk menambahkan teks sebaris dibandingkan dengan opsi lain yang tersedia. Kami mendefinisikan fungsi wp_add_inline_script() , dan Anda berharap itu akan menyelesaikan pekerjaan dengan sempurna. Bahkan pengembang WordPress paling berpengalaman di luar sana dapat mengkonfirmasi fakta ini.

Fungsi wp_add_inline_script() adalah cara untuk menambahkan karakter sebaris ke situs Anda tanpa mengedit kode apa pun di halaman WordPress. Ini memungkinkan Anda untuk membuat perubahan secara real-time tanpa memerlukan akses FTP atau harus menggunakan plugin. Fungsi ini juga merupakan salah satu integrasi penting yang dapat Anda gunakan untuk menyesuaikan situs WordPress Anda. Prosedur ini memungkinkan Anda untuk menambahkan teks sebaris di dalam kode situs web Anda, yang berarti teks tersebut akan ditambahkan langsung ke tag HTML di halaman web Anda. Ini mengakui lebih banyak penyesuaian daripada menggunakan file JS eksternal atau tautan ke situs web lain.

Kelebihan:

  • Fungsi wp_add_inline_script() adalah cara yang berharga untuk menambahkan karakter sebaris ke blog WordPress Anda;
  • Ini bisa menjadi cara yang mudah dan nyaman bagi pengembang untuk menambahkan kode JS tanpa mengubah tema WordPress atau file plugin atau mengedit file template header.php;
  • Ini dapat berguna untuk menambahkan skrip seperti kode Google Analytics. Ini menyelamatkan Anda dari mengedit file header.php setiap kali ada pembaruan dengan fitur atau pengaturan Google Analytics.

Kontra:

  • Satu-satunya kelemahan dari fungsi wp_add_inline_script() adalah hanya tersedia mulai dari versi 4.5 WordPress.

Gunakan Fungsi wp_localize_script()

Fungsi wp_localize_script() adalah utilitas WordPress yang berguna untuk menambahkan karakter sebaris ke halaman individual di situs WordPress Anda. Ini sempurna jika Anda membutuhkan fungsionalitas cepat dan sementara di situs Anda, seperti acara atau promosi. Fungsi ini menerima sejumlah variabel argumen dan menampilkan daftar string JS yang ditambahkan ke kepala dokumen. Melakukannya dapat membantu jika, misalnya, Anda menggunakan jQuery dan menginginkan kode skrip hanya pada halaman tertentu.

Wp_localize_script() mengantrekan file JS Anda dan memberinya ID/pegangan "shapeSpace_script," yang mendefinisikan array asosiatif yang berisi variabel Anda. Terakhir, variabel JS ini diteruskan ke wp_localize_script() untuk dimasukkan sebaris dengan shapeSpace_script yang terdaftar. Hasilnya, ini memungkinkan Anda untuk menerapkan variabel JS apa pun seperti shapeSpace.varl, dan lainnya. Fungsi ini didedikasikan untuk melokalkan variabel JS untuk digunakan dengan terjemahan bahasa dan internasionalisasi. Namun, sebagian besar pengembang WordPress menggunakannya sebagai cara umum untuk menambahkan karakter sebaris ke situs mereka.

Kelebihan:

  • Wp_localize_script() mengaktifkan asosiasi "read:require" dengan skrip terdaftar Anda yang sudah ada. Ini berarti menyediakan cara yang sangat baik dan konsisten untuk mengontrol lokasi relatif dari output teks kustom situs web Anda.

Kontra:

  • Satu-satunya kelemahan adalah Anda hanya dapat menambahkan variabel JS ( var = 'value' ). Jadi tidak mungkin menambahkan skrip inline lain seperti fungsi, conditional, persamaan, antara lain, menggunakan wp_localize_script().

Gunakan Penggantian

Seperti disebutkan sebelumnya, metode khusus seperti wp_add_inline_script() hanya tersedia mulai dari Versi WordPress 4.5 atau lebih tinggi. Namun, dengan menyatukan semuanya, Anda dapat membuat metode anti-gagal untuk menambahkan karakter sebaris ke file WordPress Anda terlepas dari versi WordPress yang Anda gunakan. Cara paling efektif untuk melakukan ini adalah melalui tiga fungsi di bagian kepala (front-end) plugin posting.

Hal penting pertama yang harus dilakukan adalah mengantrekan file JS Anda dan memanggil fungsi berikut untuk menambahkan baris sebaris melalui fungsi wp_add_inline_script() . Fungsi ketiga adalah mundur ke apa pun yang lebih tua dari versi 4.5. Ini pasti akan berfungsi di WordPress 4.5 dan versi khusus apa pun. Di sinilah keajaiban yang sebenarnya terjadi. Anda dapat melanjutkan dengan metode fallback yang akan menyelesaikan pekerjaan Anda pada varian WordPress pilihan Anda kembali ke 2.1 atau apa pun.

Kelebihan:

  • Anda dapat memiliki beberapa file JS di situs web Anda tanpa menambahkan permintaan HTTP tambahan untuk memuatnya sekaligus. Ini berarti Anda akan dapat mengurangi waktu pemuatan untuk pengunjung situs web Anda.
  • Jika satu skrip gagal, skrip lain dalam fungsi fallback yang sama akan tetap berfungsi karena dimuat secara asinkron dari utas yang berbeda karena ketergantungannya satu sama lain.

Kontra:

  • Ketika skrip gagal, pengguna akan melihat ruang kosong alih-alih kode dalam beberapa kasus. Ini mungkin tampak seperti bukan masalah besar, tetapi ini adalah hal penting yang perlu diperhatikan sebagai pengembang WordPress.

Rekap tentang Menambahkan Script Inline di WordPress

Keterbatasan teknik alternatif yang tersedia yang Anda inginkan menjadikan fungsi wp_add_inline_script() metode yang unggul untuk menambahkan karakter sebaris WordPress. Ini dianggap sebagai solusi paling efektif saat ini, dan bertentangan dengan kepercayaan populer, fungsi ini dapat digunakan pada Versi WordPress apa pun jika Anda menggunakan teknik fallback. Untuk informasi Anda, di bawah ini adalah rekap cepat tentang cara paling efektif untuk menambahkan skrip sebaris di inti WordPress:

    • wp_add_inline_script() memungkinkan Anda menambahkan kode JS apa pun ke skrip terdaftar apa pun;
    • wp_print_scripts atau admin_print_scripts memungkinkan Anda untuk menginstal kode apa pun di bagian front-end atau header;
  • wp_localize_script() juga memungkinkan Anda menambahkan variabel JS ke skrip terdaftar apa pun;
  • Fallback memungkinkan Anda membuat teknik lengkap yang bekerja tepat dengan versi WordPress apa pun.

Catatan: Jika Anda ingin menambahkan gaya/CSS sebaris alih-alih JavaScript, WordPress memberi Anda serangkaian fungsi "tambah gaya" yang mirip dengan yang digunakan untuk menambahkan skrip. Misalnya, periksa wp_print_styles dan wp_add_inline_styles.

Kesimpulan

Skrip sebaris adalah cara cepat dan mudah untuk menambahkan fungsionalitas ke situs web WordPress Anda. Dengan menulis skrip dalam JavaScript, Anda dapat membuat skrip sebaris yang melakukan apa pun yang Anda inginkan pada halaman tanpa memerlukan plugin atau kode tambahan. Tutorial ini menguraikan metode paling efektif untuk menambahkan skrip sebaris di WordPress.

Apakah Anda seorang editor WordPress dengan pengalaman menambahkan skrip ke situs WP? Metode mana yang akan Anda rekomendasikan untuk pengembang pemula yang ingin menyelesaikan pekerjaan dengan cepat? Silakan gunakan bagian komentar untuk membagikan pendapat Anda dan mengajukan pertanyaan yang mengganggu.

biodata penulis:

Arthur adalah spesialis pemasaran digital dan blogger bisnis. Dia mengembangkan startup yang menarik melalui berbagai media sosial dan berbagi pengalamannya dengan klien untuk mempromosikan bisnis mereka dengan lebih baik. Di waktu luangnya, Arthur belajar bahasa Jepang dan menulis artikel tentang tren transformasi digital.