wp enqueue style pada templat halaman tertentu

24

Saya sedang dalam proses suatu tema, saya ingin menambahkan halaman arahan menggunakan template halaman. Saya tidak dapat menemukan di mana pun yang menunjukkan bagaimana cara enqueue style atau js untuk templat halaman tertentu. Ada saran. Ex. Landing Page 1 - landing-page-template-one.php akan membutuhkan gaya dan js yang sangat berbeda dari blog atau beranda.

wp-enqueue-script conditional-content wp-enqueue-style Sean
sumber

Jawaban:

29

Jika Anda berencana untuk melakukan banyak pengembangan WP, Anda harus menandai halaman ini: http://codex.wordpress.org/Conditional_Tags

Jawaban lainnya berfungsi tetapi syaratnya bergantung pada halaman slug Anda (myurl.com/this-is-the-slug) tidak pernah berubah. Metode yang lebih dapat diandalkan (IMO), dan yang cocok dengan kasus ini, akan menggunakan is_page_template('example-template.php')pemeriksaan bersyarat sebagai gantinya.

kchjr
sumber
22

Anda dapat menggunakan is_page( 'landing-page-template-one' )kondisional di sekitar gaya / skrip khusus halaman Anda sebagai bagian dari semua pernyataan enqueue Anda.

function my_enqueue_stuff() {
  if ( is_page( 'landing-page-template-one' ) ) {
    /** Call landing-page-template-one enqueue */
  } else {
    /** Call regular enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Anda bahkan dapat elseifmenghubungkan lebih banyak ke atas untuk halaman lain, dll.

Referensi: Referensi Fungsi -is_page()

Edward Caissie
sumber
Terima kasih, Sean, senang bisa membantu.
Edward Caissie
2
Saya pikir menggunakan is_page_template()lebih disukai karena halaman slug mudah diubah. Solusi ini, meskipun berfungsi dengan baik, akan pecah jika siput diubah. Lihat solusi kchjr jika ada yang mengalami masalah di masa depan.
BODA82
Terima kasih! Bagi orang lain yang menemukan ini: pernyataan bersyarat is_pageharus dalam fungsi yang melekat pada tindakan dan tidak membungkus add_actionpernyataan itu sendiri. Jika Anda membungkus add_actionpernyataan dalam kondisi, itu akan menjadi awal dalam pemrosesan halaman untuk mengetahui halaman apa itu.
Hendeca
2

Jika templat halaman terletak di subdirektori tema (sejak WP 3.4), tambahkan nama folder dan garis miring ke nama file templat, misalnya:

is_page_template( 'templates/about.php' );

Jadi, seluruh fungsi terlihat seperti:

function my_enqueue_stuff() {
  if ( is_page_template( 'landing-page-template-one' ) ) {
    /** Call landing-page-template-one enqueue */
  } else {
    /** Call regular enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Referensi: Dokumentasi Resmi

Razon K.
sumber
Terima kasih telah menyebutkan bahwa is_page_template ()cek harus berada di dalam fungsi enqueue, dan bukan di sekitarnya.
gregn3
1

Saya tidak tahu apakah solusi yang diberikan dalam jawaban lain dulu berfungsi, tetapi (karena tidak ada jawaban yang diterima!) Tampaknya jawaban yang benar saat ini:

function my_enqueue_stuff() {
    if ( get_page_template_slug() == 'landing-page-template-one.php' ) {
        wp_enqueue_script('my-script-handle', 'script-path.js', ... );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

is_page_template () hanya berfungsi di luar loop, menurut https://developer.wordpress.org/reference/functions/is_page_template/ .

richplane
sumber
menurut dokumen yang disebutkan, itu tidak dapat digunakan di dalam loop
Selrond
di luar loop. itulah yang saya katakan ... * blush *
richplane
1

Katakanlah nama templat Anda adalah temper dan Anda ingin memuat bootstrap pada halaman tersebut sehingga Anda dapat enqueue style pada templat halaman tertentu seperti ini:

buka file function.php lalu periksa kondisinya seperti ini:

function temper_scripts() {

    if(basename(get_page_template()) == 'temper.php'){

       wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

    }

}

add_action('wp_enqueue_scripts', 'temper_scripts');
Imam Touhid
sumber