Cara Menambahkan JavaScript ke Halaman WordPress (+ Tips Debugging)

Diterbitkan: 2025-06-20

Apakah Anda ingin menambahkan JavaScript ke halaman WordPress, tetapi Anda pikir Anda melakukan kesalahan atau bahkan tidak tahu harus mulai dari mana? Atau apakah Anda sudah melakukannya dan melihat pesan kesalahan dan/atau masalah kinerja Anda tidak tahu bagaimana memecahkan masalah?

Either way, Anda berada di tempat yang tepat.

Posting ini akan menjadi pendidikan pertama, habis-habisan tentang semua hal JavaScript dan WordPress. Pada akhirnya, Anda akan tahu semua yang Anda butuhkan tentang mengapa menggunakan JavaScript di WordPress adalah ide yang bagus, bagaimana menambahkannya ke halaman Anda, dan apa yang harus dilakukan ketika tidak berfungsi dengan baik atau memperlambat situs Anda.

Tl; dr

Apakah Anda terlalu sibuk untuk membaca seluruh posting dan ingin ringkasan cepat? Oke, tapi hanya karena itu kamu.

Menambahkan JavaScript ke halaman WordPress dapat membuat situs Anda lebih interaktif dan memungkinkan Anda untuk mengintegrasikannya dengan banyak alat pihak ketiga. Pada saat yang sama, diperlukan pertimbangan yang cermat untuk menghindari melanggar situs Anda.

Ambil tindakan pencegahan keselamatan seperti menggunakan JavaScript dari sumber tepercaya, mencadangkan situs web Anda, menggunakan tema anak, dan menguji perubahan dalam lingkungan pementasan atau pengembangan terlebih dahulu. Selain itu, perhatikan dampak kinerja dari kode apa pun yang Anda tambahkan ke situs Anda.

Ada beberapa cara untuk menambahkan JavaScript ke situs Anda - melalui kait WordPress, functions.php , file terpisah, editor WordPress, atau dengan plugin.

Memecahkan masalah melalui alat pengembangan browser, menyelidiki konflik plugin dan tema, dan mode debug WordPress.

Tingkatkan kinerja JavaScript dengan menggabungkan, meminimalkan, menunda, atau menunda skrip. Anda juga dapat mengotomatiskan proses dengan menggunakan plugin seperti WP Rocket.

Mengapa menambahkan JavaScript ke halaman WordPress Anda?

Javascript, sering disingkat JS, adalah bahasa pemrograman yang populer. Ini adalah salah satu dari tiga teknologi utama yang digunakan untuk membuat halaman web. Dua lainnya adalah HTML, yang mendefinisikan struktur dan konten halaman, serta CSS, yang bertanggung jawab untuk penataan.

JavaScript adalah bahasa sisi klien, yang berarti berjalan di browser, bukan di server. Karena itu, Anda dapat menggunakannya untuk memodifikasi dan memperbarui CSS dan HTML yang ada bahkan setelah halaman selesai memuat.

Itulah mengapa salah satu kegunaan utamanya adalah membuat halaman web lebih interaktif. Misalnya, JavaScript sering memberi kekuatan pada elemen halaman seperti:

  • Menu slide-in
  • Popup
  • Animasi

Editor Blok WordPress juga ditulis sebagian besar dalam JavaScript.

Editor Blok WordPress Berbasis Javascript

Selain interaktivitas, JavaScript juga merupakan cara umum untuk mengintegrasikan layanan pihak ketiga ke dalam situs Anda, seperti melacak skrip untuk analisis web. Contoh lain termasuk:

  • Obrolan langsung
  • Formulir opt-in dan hubungi email
  • Video tertanam
  • Peta interaktif
  • Feed media sosial

Pertimbangan penting

Jika dilakukan secara tidak benar, menambahkan JavaScript ke halaman WordPress Anda dapat menyebabkan kesalahan dan masalah. Mengambil tindakan pencegahan sejak awal dapat menghemat waktu dan frustrasi Anda nanti:

  • Hanya gunakan JavaScript dari sumber tepercaya untuk menjaga situs Anda tetap aman dan stabil.
  • Ambil cadangan lengkap file situs web dan database Anda sebelum membuat perubahan jika terjadi kesalahan.
  • Saat Anda menambahkan JavaScript langsung ke file tema, selalu gunakan tema anak. Jika Anda memodifikasi tema utama, Anda akan kehilangan perubahan saat Anda memperbaruinya.
  • Uji perubahan dalam lingkungan pementasan atau pengembangan sebelum menerapkannya ke situs langsung Anda.
  • JavaScript menambahkan kode tambahan ke halaman WordPress Anda, yang dapat memperlambatnya. Pantau kinerja saat memperkenalkan fitur baru ke situs Anda.

6 Cara Menambahkan JavaScript ke halaman di WordPress

Cukup dengan teorinya. Di bawah ini, kami menunjukkan kepada Anda enam cara untuk menambahkan JavaScript ke WordPress, dari yang paling sedikit hingga paling sedikit teknis.

1. Gunakan kait dan fungsi WordPress

Kait adalah potongan-potongan kode yang ditempatkan di dalam proses pemuatan WordPress di mana Anda dapat melampirkan kode khusus (yang disebut "fungsi") sehingga dieksekusi pada waktu atau lokasi tertentu.

Misalnya, WP_HEAD () berjalan di bagian <head> di bagian atas situs Anda. Jika Anda ingin menggunakannya untuk menambahkan JavaScript ke halaman WordPress, Anda harus melakukannya di file functions.php tema (anak) Anda, misalnya, seperti itu:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Masukkan kode JavaScript Anda di mana dikatakan, "Tempatkan kode JavaScript Anda di sini." Anda juga dapat mengubah nama fungsi dari "add_custom_script" menjadi sesuatu yang lebih deskriptif.

Metode ini bagus untuk skrip yang lebih kecil dengan tujuan yang sangat jelas, seperti kode pelacakan analitik sederhana atau elemen interaktif dasar. Ini juga berfungsi untuk memuat JavaScript di footer, yang merupakan solusi populer untuk meningkatkan kinerja halaman. Cukup gunakan wp_footer () bukan wp_head ().

Kepala dan footer halaman adalah lokasi populer untuk memuat skrip karena biasanya muncul di mana -mana di situs web. Itu membuat mereka menjadi cara yang bagus untuk menambahkan JavaScript ke semua halaman situs WordPress.

Jika Anda hanya ingin memuat JavaScript pada halaman tertentu, Anda dapat menggabungkan metode ini dengan pernyataan bersyarat:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

Bagian yang membatasi ini ke satu halaman adalah IS_PAGE (123). "123" adalah ID halaman, yang perlu Anda perbarui ke ID halaman Anda jika Anda ingin menggunakan kode ini. Itu muncul di bilah browser saat Anda membuka halaman Anda di editor WordPress. Anda juga dapat menggunakan is_page () untuk menargetkan halaman dengan nama atau URL Slug.

ID Halaman WordPress di Browser Bar
Ada banyak tag bersyarat lain yang tersedia, seperti is_single () untuk posting blog, is_home () untuk halaman blog, is_archive () untuk halaman arsip, dan is_category () untuk arsip kategori.

2. Muat JavaScript dalam file terpisah

Pilihan lain adalah memasukkan javascript Anda ke dalam file sendiri. Ini adalah ide yang bagus terutama untuk skrip besar tetapi juga masuk akal secara umum karena memungkinkan Anda memuat file Anda dengan fungsi WP_Register_Script () dan WP_ENQUEUE_SCRIPT ().

Itulah metode yang disukai karena membantu menghindari konflik, memuat skrip dalam urutan yang benar, dan mengelola dependensi. Inilah yang terlihat seperti:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Dalam contoh ini, skrip ditempatkan di direktori tema, yang kami targetkan dengan get_template_directory_uri () (untuk tema anak, gunakan get_stylesheet_directory_uri () sebagai gantinya). Array ('jQuery') menunjukkan bahwa skrip ini tergantung pada jQuery dan harus dimuat setelahnya. '1.0.0' adalah nomor versi, dan 'benar' berarti WordPress harus memuat skrip di footer.

Ini juga berfungsi dan merupakan cara yang benar untuk memuat javascript pihak ketiga, seperti kode pelacakan. Pastikan untuk memperbarui kode ke kasus penggunaan Anda sebelum meletakkannya di situs Anda.

3. Sertakan kode dalam file tema

Hooks adalah cara yang bagus untuk membuat semua skrip JS Anda dari satu tempat, tetapi mereka bukan satu -satunya cara untuk memuatnya dalam tema Anda.

Alih -alih menggunakan wp_head () untuk memuat sesuatu di bagian kepala, Anda dapat mencapai hal yang sama dengan memposting skrip Anda atau tautan langsung ke file tema ke file tema header Anda.

Dalam tema klasik, itu biasanya header.php . Temukan di tema Anda, buat salinan dan letakkan di tema anak Anda, lalu sertakan skrip langsung di suatu tempat di bagian <head>.

Jika Anda ingin memuatnya hanya pada halaman tertentu, Anda dapat menggunakan pernyataan bersyarat seperti sebelumnya. Atau, berkat hierarki template, juga dimungkinkan untuk membuat file khusus hanya untuk halaman itu, misalnya halaman-contact.php .

Tema Blok WordPress tidak lagi menggunakan file tema ini. Jika tema Anda adalah tema blok, Anda lebih disarankan untuk memilih salah satu metode lain yang disebutkan di sini.

4. Buat plugin khusus

Masalah dengan menambahkan JavaScript ke halaman WordPress menggunakan file tema adalah membuat kode tergantung pada tema. Saat Anda mengganti tema, javascript Anda hilang juga.

Anda dapat menghindarinya dengan menggunakan plugin khusus. Ini membuat kode tema-independen dan juga memungkinkan Anda untuk mengaktifkan dan menonaktifkannya di menu plugin WordPress.

Berikut markup untuk plugin sederhana untuk menambahkan JavaScript ke halaman WordPress Anda:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Tempatkan kode ini ke dalam file PHP dan pastikan untuk menyesuaikan nama plugin , plugin URI , deskripsi , penulis , dan penulis URI dengan informasi Anda sendiri saat muncul di menu Plugin WordPress.

Beri nama file sesuatu yang bermakna, misalnya kustom-pelacakan-code-plugin.php , lalu unggah ke direktori dengan nama yang sama di dalam wp-content/plugin di instalasi WordPress Anda. Setelah itu, itu akan muncul di menu plugin .

5. Tambahkan JavaScript di editor WordPress

Meskipun ini bukan metode yang paling disarankan, dimungkinkan juga untuk menambahkan JavaScript langsung ke halaman menggunakan editor WordPress. Untuk melakukannya, tambahkan blok baru (klik tombol Plus atau gunakan slash maju) dan pilih blok HTML khusus .

Cukup masukkan kode JavaScript Anda sehingga memuat langsung pada halaman.

Pastikan untuk menggunakan tag <script> dan penutupan </script> pembukaan dan simpan perubahan Anda di editor agar mereka dapat berlaku.

Anda juga dapat menambahkan JavaScript ke editor klasik dengan menggunakan tab kode .

6. Gunakan plugin cuplikan kode

Tidak akan menjadi WordPress jika tidak ada juga solusi plugin untuk menambahkan JavaScript ke situs Anda. Faktanya, ada beberapa, termasuk:

  • WPCode
  • Manajer kode header footer
  • CSS khusus dan JS sederhana
  • CSS & JavaScript Toolbox

Plugin memungkinkan Anda untuk mengelola JavaScript Anda dengan lebih baik. Anda dapat memberi nama cuplikan Anda, mengaturnya ke dalam kategori, secara selektif menyalakan dan mematikannya, dan mengatur aturan bersyarat. Selain itu, seperti solusi plugin khusus, itu membuat JavaScript Anda independen dari tema.

Menggunakan plugin ini juga sederhana. Mereka biasanya menambahkan menu baru ke situs Anda di mana Anda dapat mengelola cuplikan JavaScript Anda.

Cukup buat cuplikan baru, masukkan kode Anda, lalu konfigurasikan di mana Anda ingin muncul.

Cukup banyak.

Memecahkan Masalah Masalah JavaScript di WordPress

Sekarang Anda tahu cara menambahkan JavaScript ke situs web dan halaman WordPress Anda. Tetapi bagaimana jika ada sesuatu yang tidak berfungsi seperti yang seharusnya? Kami akan menghabiskan bagian terakhir dari artikel ini berbicara tentang cara mengidentifikasi dan menyelesaikan masalah JavaScript yang mungkin Anda temui.

1. Periksa Alat Pengembang Browser

Salah satu cara untuk memeriksa kesalahan JavaScript adalah dengan menggunakan alat pengembang browser Anda. Mereka memungkinkan Anda untuk memeriksa kode situs yang mendasarinya, termasuk skrip apa pun.

Anda dapat membukanya dengan mengklik kanan di halaman web apa pun dan memilih Inspect .

Atau, akses mereka melalui menu browser, misalnya di Chrome mereka terletak di bawah lebih banyak alat> alat pengembang .

Ada juga pintasan keyboard untuk membukanya, di Chrome, Edge, dan Firefox, Ctrl/CMD+Shift+I , di Safari CMD+OPT+C.

Buka alat dev di situs Anda lalu buka tab konsol . Anda harus melihat kesalahan apa pun, termasuk yang disebabkan oleh JavaScript di sini.

Perhatikan bahwa Anda mungkin harus memuat ulang halaman agar mereka muncul. Kesalahan JavaScript yang paling umum adalah:

  • ReferenceError: Menunjukkan variabel atau fungsi yang hilang atau tidak terdefinisi.
  • TypeError: Menyarankan bahwa ada masalah dengan operasi, misalnya, mencoba menggunakan nilai tipe yang tidak pantas.
  • Sintakserror: Sering terjadi karena format kesalahan ketik atau salah dalam kode, seperti tanda kurung yang hilang, titik koma, atau kutipan.

Anda ingin mengetahui skrip, file, atau fungsi mana yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya. Ini membantu untuk menggunakan breakpoint di tab Sumber , yang memungkinkan Anda untuk menjeda eksekusi JavaScript dan memeriksa apa yang terjadi.

Gunakan mesin pencari favorit Anda atau AI untuk mengetahui lebih lanjut tentang pesan kesalahan yang Anda temukan. Selain itu, Anda mungkin juga ingin memeriksa tab jaringan untuk melihat apakah skrip Anda dimuat dengan benar.

2. Tema Tema dan Konflik Plugin

Kesalahan JavaScript juga dapat terjadi karena konflik tema dan plugin, misalnya, saat menggunakan pustaka yang tidak kompatibel atau fungsi duplikat.

Inilah cara memecahkan masalah masalah JavaScript ini:

  • Perbarui tema dan plugin: Tema atau pengembang plugin Anda mungkin sudah tahu tentang masalah ini dan telah memperbaikinya dalam versi terbaru.
  • Beralih sementara ke tema default: Aktifkan tema default WordPress seperti dua puluh lima. Jika masalah hilang, tema Anda kemungkinan akan salah.
  • Nonaktifkan plugin Anda: Matikan semua plugin di situs Anda dan nyalakan satu per satu untuk melihat kapan masalah muncul kembali. Perbarui atau ganti plugin yang menyebabkannya.

Plugin pemeriksaan kesehatan memungkinkan Anda untuk mensimulasikan semua yang disebutkan di atas dari dasbor WordPress (buka tab Pemecahan Masalah ) dan kembalikan dengan satu klik.

Ini juga memiliki lebih banyak informasi tambahan tentang keadaan situs web Anda. Dianjurkan agar Anda melakukan tes ini di situs web pengembangan atau pementasan, bukan situs langsung Anda.

3. Gunakan Mode Debug

WordPress memiliki mode debug bawaan untuk membantu Anda menemukan dan menyelesaikan masalah situs. Meskipun tidak secara langsung menunjukkan masalah dengan JavaScript, itu membuatnya lebih mudah untuk menemukan kesalahan PHP, plugin, dan tema yang dapat mengganggu skrip di situs Anda.

Untuk mengaktifkan mode debug, buka file wp-config.php Anda (melalui FTP atau manajer file hosting Anda) dan tambahkan baris berikut:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Anda mungkin sudah menemukan define ('script_debug', false); di file. Jika demikian, cukup ubah menjadi "benar." Simpan dan unggah ulang file.

Pengaturan di atas mengaktifkan mode debug, logging kesalahan (kesalahan akan muncul di wp-content/debug.log ), dan memuat versi CSS inti dan file javascript yang tidak diminiikan untuk melacak masalah dengan lebih mudah.

Sekali lagi, lakukan ini di situs pengembangan, jauh dari mata pengunjung Anda. Plus, jangan lupa untuk menghapus kode ini untuk kembali normal sesudahnya.

Anda juga dapat menggunakan plugin debugging WP untuk mengaktifkan mode debug WordPress.

4. Mengatasi Masalah Kinerja

Seperti kode lainnya, menambahkan JavaScript ke halaman WordPress Anda dapat membuat situs web Anda lebih lambat. Anda akan sering memperhatikan bahwa ketika Anda mempercepat menguji situs web Anda dan menerima peringatan yang mengatakan "Kurangi JavaScript yang tidak digunakan."

Untuk menghindari masalah kinerja yang disebabkan oleh JavaScript, ikuti praktik terbaik ini:

  • Hapus skrip yang tidak Anda butuhkan: secara teratur mengaudit pemuatan JavaScript di situs Anda untuk melihat apakah Anda benar-benar membutuhkan semuanya, terutama layanan pihak ketiga.
  • Muat skrip di footer: Hanya tempatkan file JavaScript di bagian kepala saat perlu memuat lebih awal.
  • Gabungkan skrip: Gabungkan beberapa skrip menjadi satu file (ini disebut "concatenation"). Satu file besar sering memuat lebih cepat dari beberapa yang lebih kecil.
  • Minify JavaScript File : Ini menghilangkan pemformatan dan whitespace yang tidak perlu yang bagus untuk keterbacaan yang tidak perlu untuk menjalankan kode.
  • Muat JavaScript secara tidak sinkron: artinya browser tidak berhenti memproses situs saat memuat file JavaScript tetapi memuatnya di latar belakang dan menjalankannya setelah diunduh.
  • Tunda skrip besar: Di sini, file Anda diunduh di latar belakang juga tetapi hanya dieksekusi setelah sisa proses pemuatan selesai, sehingga tidak terganggu.
  • Tunda Eksekusi JavaScript : Ini menunda pemuatan semua file JavaScript dan skrip inline sampai ada interaksi pengguna. Ini seperti pemuatan malas untuk gambar tetapi untuk file JavaScript.

Sederhanakan Optimalisasi Kinerja JavaScript dengan WP Rocket

Alih -alih melakukan ini dengan tangan, Anda juga memiliki opsi untuk mengimplementasikannya lebih mudah menggunakan WP Rocket. Saat aktif di situs Anda, plugin meminimalkan JavaScript secara default dan Anda dapat menggabungkan, menunda, menunda, dan secara asinkron memuat skrip apa pun di situs WordPress Anda dengan hanya memeriksa beberapa kotak di menu optimisasi file .

Pengaturan Optimasi JavaScript di WP Rocket

Jika perlu, Anda memiliki opsi untuk mengecualikan skrip masing -masing, plugin, dan file agar tidak dioptimalkan, jika mengganggu respons elemen halaman Anda.

Selain itu, WP Rocket secara otomatis mengimplementasikan sejumlah peningkatan kinerja di latar belakang, seperti:

  • Caching, termasuk cache seluler terpisah
  • Kompresi Gzip
  • Cache dan tautan preloading
  • Optimalisasi Gambar Kritis (untuk mengecualikan gambar di atas lipatan dari pemuatan malas) untuk meningkatkan cat konten terbesar
  • Render malas otomatis untuk memuat elemen tinggi di halaman lebih cepat

Faktanya, hanya menginstal dan mengaktifkan plugin mengimplementasikan 80% dari praktik terbaik kinerja di situs Anda dan membuatnya lebih cepat segera. Dan jika itu tidak cukup, ada banyak fitur lain yang dapat Anda aktifkan untuk meningkatkan kecepatan situs Anda, seperti:

  • Memuat malas untuk gambar, termasuk latar belakang CSS, video, dan iframe
  • Preloading file eksternal dan font
  • Font Google yang menjadi tuan rumah mandiri
  • Optimalisasi Basis Data
  • Opsi untuk dengan mudah terhubung ke CDN, termasuk RocketCDN

Siap menambahkan JavaScript ke halaman WordPress Anda?

JavaScript menawarkan banyak kemungkinan menarik untuk situs web WordPress, baik untuk menambahkan interaktivitas atau integrasi dengan perangkat lunak pihak ketiga. Ada banyak cara Anda dapat menambahkannya ke halaman Anda, tergantung pada tingkat keterampilan dan preferensi Anda.

Pada saat yang sama, JavaScript dapat menimbulkan kesalahan dan menjadi faktor besar dalam kinerja halaman. Untuk alasan itu, sangat penting bagi Anda untuk menambahkan JavaScript ke halaman WordPress Anda dengan hati -hati.

Jika Anda berjuang dengan masalah kinerja yang terkait dengan JavaScript, WP Rocket membantu Anda mengatasinya dengan mudah dan efektif. Plus, ia menawarkan banyak fungsi lain untuk mempercepat situs Anda. Dapatkan WP Rocket hari ini dan cobalah bebas risiko selama 14 hari!