Cara Menambahkan JavaScript ke Halaman WordPress Tertentu Saja

Menerapkan JavaScript pada Halaman WordPress yang Ditargetkan

WordPress adalah platform yang mudah digunakan yang membuat pengelolaan dan penyesuaian situs web menjadi sederhana. Namun, beberapa perubahan mungkin sulit untuk diterapkan, termasuk mengeksekusi JavaScript pada halaman tertentu. Ada kemungkinan bahwa skrip yang Anda tambahkan ke bagian "Kepala" situs web Anda kini ada di setiap halaman. Ini adalah kesulitan yang umum terjadi pada pemula.

Memahami cara menerapkan file JavaScript secara kondisional sangat penting saat menggunakannya untuk menargetkan halaman tertentu. JavaScript mungkin menimbulkan konsekuensi yang tidak terduga dan menurunkan kecepatan situs web Anda jika digunakan terus-menerus. Inilah alasan mengapa sangat penting untuk membatasi skrip pada halaman yang diperlukan.

Kami akan memandu Anda melalui proses mengubah konfigurasi WordPress Anda di artikel ini sehingga JavaScript hanya diluncurkan pada halaman yang Anda perlukan. Jawabannya juga dapat dimengerti oleh non-pengembang; panduan ini ditujukan bagi mereka yang baru memulai.

Anda akan merasa nyaman menangani skrip khusus halaman di WordPress saat Anda menyelesaikan pelajaran ini. Kami akan memandu Anda melalui kode dan prosedur tepat yang diperlukan untuk memastikan JavaScript Anda hanya dijalankan sebagaimana mestinya, sehingga meningkatkan kinerja situs web Anda.

Memahami Peran JavaScript pada Halaman WordPress Tertentu

Cara meletakkan skrip langsung ke bagian "Kepala" dapat menyebabkan skrip dimuat di setiap halaman saat Anda perlu menjalankan a JavaScript file di halaman WordPress tertentu. Dalam hal pengalaman pengguna dan kinerja, ini tidak ideal. Opsi sebelumnya memberikan cara yang lebih efektif untuk menangani skrip dengan membatasi skrip hanya pada halaman tertentu. Misalnya kita bisa memanfaatkan WordPress is_halaman() metode untuk menentukan apakah pengguna melihat halaman tertentu berdasarkan ID atau slugnya. Ini adalah teknik utama yang digunakan untuk memastikan file JavaScript dimuat hanya jika diperlukan.

Metode pertama menggunakan tag kondisional di fungsi.php mengajukan bersama dengan wp_enqueue_script(). Teknik ini memanfaatkan fitur dasar WordPress yang menambahkan skrip sedemikian rupa sehingga memastikan manajemen ketergantungan yang tepat dan memuat skrip di area halaman yang sesuai. Melalui wp_enqueue_scripts action hooking, fungsi JavaScript hanya akan ditambahkan ketika WordPress memproses halaman yang memenuhi is_halaman() persyaratan. Selain efektif, ini menghentikan eksekusi skrip yang tidak berguna di situs yang tidak penting.

Menggunakan kode pendek adalah bagian dari strategi kedua. Kode pendek WordPress memudahkan untuk menambahkan materi dinamis ke halaman atau postingan. tambahkan_kode pendek() dapat digunakan untuk membuat kode pendek khusus, yang memungkinkan Anda memasukkan skrip secara kondisional ke dalam area konten sesuai kebutuhan. Ini memberi Anda lebih banyak pilihan jika Anda ingin menggunakan skrip pada bagian tertentu daripada halaman penuh situs web atau postingan. Selain itu, ini merupakan opsi yang lebih mudah didekati bagi orang-orang yang merasa tidak nyaman melakukan perubahan langsung pada file PHP.

Metode lain sempurna untuk memuat skrip secara dinamis pada halaman yang memiliki parameter tertentu di URL karena menggunakan jQuery untuk mencari pola tertentu di URL. jendela.lokasi.href Dan $.getScript() digunakan dalam pendekatan ini untuk mengidentifikasi apakah string tertentu disertakan dalam URL dan memuat file JavaScript dengan tepat. Pendekatan ini berfungsi dengan baik untuk situasi seperti situs e-niaga atau laman landas dengan kode pelacakan unik yang struktur URL-nya memerlukan penggunaan skrip. Semua teknik ini bersifat modular, dapat digunakan kembali, dan memastikan skrip dimuat hanya saat diperlukan, sehingga meningkatkan pengalaman dan kinerja pengguna.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

Mengoptimalkan Pemuatan JavaScript di Halaman WordPress

Di mana skrip dimuat merupakan pertimbangan penting ketika menggunakan JavaScript pada halaman WordPress tertentu. WordPress secara default mengizinkan skrip untuk dimuat di halaman catatan kaki atau tajuk. Untuk alasan kinerja, biasanya disarankan untuk memuat skrip di footer, terutama saat menggunakan sumber daya eksternal. Hal ini agar pengguna dapat menikmati pemuatan halaman lebih cepat dengan menunda eksekusi JavaScript hingga halaman selesai dimuat.

Anda dapat mengubah wp_enqueue_script() metode untuk memuat skrip di footer dengan meneruskan BENAR sebagai parameter terakhir. Dengan melakukan ini, Anda dapat memastikan bahwa skrip dimuat sebelum tag body terakhir dan konten halaman lainnya. Karena skrip yang kurang penting ditunda dan sumber daya yang lebih penting diberi prioritas, teknik ini membantu mempersingkat waktu muat. Meskipun pengoptimalan ini mungkin tidak terlalu berarti bagi pemula, hal ini berdampak besar pada kecepatan dan fungsionalitas situs WordPress.

Penghilang cache dan kontrol versi adalah dua elemen penting lainnya. WordPress menyediakan metode mudah untuk menggunakan wp_enqueue_script() berfungsi untuk menambahkan nomor versi ke skrip. Anda dapat memastikan bahwa pengguna tidak mendapatkan JavaScript yang kedaluwarsa dari cache mereka dengan menambahkan argumen versi. Hal ini memastikan bahwa versi skrip terbaru dimuat secara konstan, yang sangat membantu saat mengembangkan atau memperbarui skrip. Prosedur ini menurunkan kemungkinan bentrokan skrip dan meningkatkan fungsionalitas situs web.