Cara menggunakan javascript pemuatan kondisional

Artikel ini adalah bagian dari seri yang dibuat dalam kemitraan dengan SiteGround. Terima kasih telah mendukung mitra yang memungkinkan SitePoint

Jika situs web WordPress Anda memerlukan stylesheet atau file JavaScript tertentu hanya di satu halaman tertentu atau hanya dalam kondisi terbatas, Anda tidak perlu memuat file tersebut di mana pun di situs web Anda

Pada artikel ini, Anda akan mempelajari cara memuat gaya dan skrip CSS hanya saat situs web Anda membutuhkannya. Dengan cara ini situs web Anda akan memuat lebih cepat dan pengguna yang tidak mengunjungi halaman dengan file tambahan tidak perlu mengunduh byte yang tidak perlu di browser mereka

Mengapa Anda Harus Menambahkan Gaya dan Skrip dengan Cara WordPress

Jika ada anti-pola dalam pengembangan WordPress, itu menambahkan tag

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

Menjalankan situs web WordPress melibatkan penggunaan stylesheet dan kode JavaScript yang berasal dari perangkat lunak itu sendiri, sejumlah plugin, dan tema aktif

Ini berarti bahwa pembuat tema atau plugin tidak mengetahui sebelumnya gaya dan skrip mana yang akan dijalankan oleh penginstalan tertentu, atau dalam urutan apa sumber daya tersebut diperlukan. Sebagai contoh, mari kita ambil library jQuery. Pustaka ini dapat digunakan oleh WordPress sendiri untuk menangani permintaan Ajax dan tugas lainnya, dengan lebih dari satu plugin, dan dengan tema aktif

Jika pembuat plugin dan tema menyertakan stylesheet dan skrip yang mereka perlukan dengan menambahkan tag yang sesuai langsung di dalam dokumen HTML, ini dapat membuka pintu kemungkinan konflik, sumber daya dimuat berkali-kali dan/atau dalam urutan yang salah

Inilah sebabnya mengapa Anda harus selalu memuat gaya dan skrip mengikuti praktik terbaik seperti yang direkomendasikan oleh WordPress. standar pengkodean org

Agar semuanya bekerja secara harmonis, tema dan plugin harus memuat skrip dan stylesheet menggunakan metode WordPress standar. Ini akan memastikan situs tetap efisien dan tidak ada masalah ketidakcocokan

Termasuk CSS & JavaScript — Buku Pegangan Tema

Cara Menggunakan wp_enqueue_style dan wp_enqueue_script

Fungsi barebones untuk menyertakan lembar gaya khusus Anda ke dalam tema terlihat seperti ini

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Hanya dua parameter pertama yang wajib, yang lainnya opsional

• Parameter

  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  3 adalah nama stylesheet Anda. Anda dapat menyebutnya

  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  4,

  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  5, dll. , tergantung untuk apa file tersebut. Jika Anda menyertakan stylesheet dari plugin JavaScript, cukup gunakan nama plugin

• wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  6 adalah singkatan dari URL tempat stylesheet berada
• Parameter

  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  7 menentukan apakah stylesheet ini bergantung pada stylesheet lain untuk bekerja dengan benar

• wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  8 menentukan nomor versi style sheet

• wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  _9 adalah singkatan dari jenis media yang digunakan untuk stylesheet, mis. g. , semua, layar, cetak, dll

Sebagai contoh, kode untuk menambahkan stylesheet bernama

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

Untuk memasukkan file JavaScript, Anda harus menggunakan

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Parameternya mirip dengan yang ada di

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Katakanlah Anda ingin menambahkan

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Kode ini memberi tahu WordPress itu

• Anda ingin menggunakan file

  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  5, yang terletak di subfolder

  wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

  7 di dalam direktori tema aktif
• WordPress perlu mengunduh jQuery sebelum memuat

  wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

  5 jika tidak, yang terakhir tidak akan berfungsi dengan benar (Anda tidak perlu mengimpor jQuery karena sudah ada secara default)
• WordPress perlu menambahkan file ini di bagian

  wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

  3 dari dokumen HTML

Kemungkinan Anda ingin menyertakan lebih dari satu lembar gaya atau file skrip, dalam hal ini bungkus semua panggilan ke

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Ini sebuah contoh. Jika Anda sedang mengembangkan tema WordPress, Anda dapat menambahkan ini ke file

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

function mytheme_styles_scripts() {
  //main stylesheet, style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  //stylesheet for portfolio section 
  //(different from the rest of the site)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
 
  //JS for portfolio section
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

//hook the function to wp_enqueue_scripts action hook
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Sekarang Anda dapat yakin bahwa WordPress akan menemukan semua stylesheet dan skrip yang diperlukan dan mengunduhnya dalam urutan yang benar

Memuat Stylesheet dan Skrip Bersyarat

Kode di atas berfungsi dengan baik dan mengikuti praktik terbaik WordPress. Namun, WordPress akan mengunduh

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Sekarang, mari tingkatkan dan pastikan WordPress menyertakan

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Tag Bersyarat WordPress

WordPress menawarkan tag bersyarat, yang dikombinasikan dengan pernyataan

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Misalnya, jika Anda ingin mengeksekusi beberapa kode hanya di beranda situs web Anda dan sedikit kode lain di tempat lain, maka Anda akan menulis sesuatu seperti ini

if ( is_front_page() ):
  //your code here
else:
  //alternative code here
endif;

Sebaliknya, jika Anda ingin mengeksekusi beberapa kode di mana saja kecuali di beranda situs web Anda, Anda akan menulis

if ( !is_front_page() ):
  //your code here;
endif;

WordPress menawarkan banyak tag bersyarat, Anda dapat melihat daftar lengkapnya di bab Tag Bersyarat dari Buku Panduan Tema

Ada cara Anda dapat memanfaatkan tag bersyarat untuk memastikan WordPress mengunduh

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Mari kita periksa beberapa cara yang dapat Anda lakukan

Menggunakan ID Halaman

Anda dapat menggunakan tag bersyarat untuk memeriksa apakah pengguna ada di halaman portofolio situs web Anda menggunakan ID halaman portofolio

Untuk mengetahui ID halaman, lakukan hal berikut

• Masuk ke panel Admin situs web WordPress Anda
• Klik Halaman untuk mengakses daftar semua halaman di situs web Anda
  
  
  
• Klik judul halaman yang Anda minati untuk membukanya di editor
  
  
• Sekarang halaman terbuka di editor, lihat URL di bilah alamat browser Anda. Anda akan melihat sesuatu seperti

  function mytheme_styles_scripts() {
    //main stylesheet, style.css
    wp_enqueue_style( 'style', get_stylesheet_uri() );
   
    //stylesheet for portfolio section 
    //(different from the rest of the site)
    wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
   
    //JS for portfolio section
    wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
  } 
  
  //hook the function to wp_enqueue_scripts action hook
  add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

  0 ditambah angka. Nomor itu adalah ID halaman
  
  
  

Sekarang setelah Anda mengetahui ID halaman Anda, Anda dapat memodifikasi kode sebelumnya yang menyertakan stylesheet dan skrip tema Anda dengan menggunakan tag bersyarat sebagai berikut

function mytheme_styles_scripts() {
  //main stylesheet, style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  //check we are on page with ID 1 
  if ( is_page('1') ):
   
    //if we are, load styles and script 
    //for portfolio page
    wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');
 
    //JS for portfolio section
    wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);
  endif;  
} 

//hook the function to wp_enqueue_scripts action hook
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Menggunakan Judul Halaman

Tag bersyarat untuk halaman juga berfungsi dengan judul halaman. Jika halaman portofolio Anda memiliki judul Portofolio Saya, kodenya akan terlihat seperti ini (saya hanya menambahkan bagian kondisional demi singkatnya)

if ( is_page('My Portfolio') ): 
  //rest of the code here 
  
endif;

Menggunakan Page Slug

Anda dapat menggunakan tag bersyarat dengan slug halaman, yang merupakan URL ramah pengguna untuk halaman itu. Inilah yang akan terlihat seperti dalam praktiknya

if ( is_page('my-portfolio') ): 
  //rest of the code here 
  
endif;

Kesimpulan

Pada artikel ini saya membahas bagaimana Anda dapat menyertakan stylesheet dan file skrip secara kondisional di situs web WordPress Anda. Ada keadaan ketika gaya ekstra jumlahnya sangat sedikit sehingga tidak masuk akal untuk memiliki stylesheet khusus untuk mereka. Ini hanya akan menghasilkan satu lagi permintaan HTTP yang mungkin tidak dapat dilakukan situs web Anda

Namun, dalam kondisi yang sesuai, e. g. , halaman atau area topik dengan desain yang berbeda dari situs web lainnya, pemuatan stylesheet dan skrip secara selektif mengikuti praktik terbaik WordPress dan memastikan browser pengunjung Anda hanya mengunduh jumlah data yang diperlukan untuk menampilkan konten yang diminta

Bagaimana Anda memasukkan skrip dan gaya khusus ke situs web WordPress Anda?

Bagikan artikel ini

Maria Antonietta Perna

Maria Antonietta Perna adalah seorang guru dan penulis teknis. Dia senang mengutak-atik standar CSS yang keren dan ingin tahu tentang cara mengajarkan kode front-end. Saat tidak membuat kode atau menulis untuk web, dia senang membaca buku filosofi, berjalan-jalan, dan menghargai makanan enak