Cara memuat skrip / gaya khusus untuk satu halaman


8

Saya tahu bahwa menurut proses boot default Wordpress, pertama kali functions.phpdipanggil, setelah itu pergi semua hal tema. Tetapi saya saat ini akan memperbaiki tema saya sepenuhnya untuk mengoptimalkannya. Ide saya adalah memiliki satu file css dasar untuk properti umum, menormalkan, warna. Atau untuk menyimpan file css tunggal, tetapi dalam hal ini saya perlu mengganti hardcode case functions.phpuntuk menentukan halaman. Dan satu lagi khusus untuk setiap halaman, karena ini tidak masuk akal untuk memuat file gaya css besar dengan semua gaya yang ditentukan.

Jadi pertanyaan saya adalah tempat apa yang paling cocok untuk memuat skrip / gaya tertentu?

Haruskah itu header-xxx.phpatau file lain? Mungkin ada cara untuk mengimplementasikan ide ini dengan cara yang lebih scalable dan elegan?

Saya akan berterima kasih atas bantuannya.

Jawaban:


9

Itu semua tergantung pada skala kustomisasi Anda dan bagaimana Anda akan mengatur barang-barang Anda. Tetapi ada 2 cara utama untuk melakukannya. functions.php dan file templat

Cara saya suka melakukannya, adalah mendaftar semua skrip / gaya saya di functions.php jadi saya tahu apa yang akan saya kerjakan, tetapi saya hanya akan menanyakan apa yang saya butuhkan saat saya membutuhkannya.

Anda dapat memasukkan semua barang Anda secara kondisional dalam file functions.php Anda ( if( is_page( 'blah') { //... enqueue stuff }) atau Anda dapat menggunakan file template untuk membuat kategori / tag / posting / halaman spesifik gaya.

Kemudian, dalam file templat itu, Anda memanggil skrip enqueue / file gaya Anda di sana. Itu membuatnya juga cara cerdas untuk memahami apa yang dimuat di mana.

Namun yang pasti, jika Anda ingin memecah stylesheet Anda menjadi file yang lebih kecil, Anda perlu menggunakannya

Logika yang sama akan berlaku untuk skrip dengan fungsi register / enqueue yang sesuai

Juga, pertimbangkan jumlah permintaan dalam strategi Anda, jika Anda memecah barang-barang Anda menjadi beberapa file, cobalah untuk menjaga jumlah file yang dimuat rendah sehingga Anda tidak secara negatif mempengaruhi pemuatan halaman seperti itu.

Ada hal lain yang dapat Anda lakukan untuk mempercepat pemuatan halaman. Jika Anda memberi tahu browser untuk men-cache stylesheet Anda, maka mungkin 1 (atau beberapa kecil) akan memiliki lebih banyak peluang untuk dimuat dari cache maka jika Anda memiliki banyak file di seluruh situs Anda dan mereka selalu harus mengambil dari server karena itu permintaan file baru pada setiap halaman baru yang dimuat. Jadi ingatlah ini.

Terlepas dari itu, caching 1 atau banyak aset adalah pendekatan yang baik dan akan meningkatkan respons situs web Anda dalam hal kecepatan situs.

Jika Anda membutuhkan panduan lebih lanjut tentang cara menggunakan fungsi-fungsi tersebut, beri tahu kami.

EDIT

Alasan utama untuk mendaftarkan skrip adalah sebagai berikut

  • Membuatnya lebih mudah untuk memanggil skrip / gaya ketika kita membutuhkannya
  • Memungkinkan untuk menggunakan skrip / gaya terdaftar sebagai ketergantungan untuk file yang perlu kita muat.
  • Cegah diri kita untuk menulis kode yang sama lebih dari yang kita butuhkan, secara efektif menyederhanakan kode kita
  • Banyak hal yang mungkin tidak saya pikirkan saat ini

CATATAN

Sebuah skrip / gaya yang telah didaftarkan tidak perlu enqueued jika terdaftar sebagai $depsfile yang sedang Anda enqueuing.

Contoh (tidak harus bagaimana Anda harus melakukannya, tetapi Anda mengerti tujuannya)

Saya sudah mendaftar

  • common-style.css
  • navigation.css
  • buttons.css

Sekarang gaya itu terdaftar, jadi jika saya pergi ke halaman tertentu dan ingin menerapkan gaya yang berbeda di sana. Saya meminta pada halaman itu (baik dengan pernyataan kondisional di functions.php atau di templat halaman saya) specific-style.cssseperti itu.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Perhatikan bahwa array dalam wp_enqueue_styleadalah array dari gaya yang sudah terdaftar. WP akan dengan mudah memuat semua 4 file dalam urutan yang benar untuk menghormati ketergantungan.

Anda dapat membuat ketergantungan dengan hanya mendaftarkan setiap skrip / gaya dengan ketergantungan yang benar

yaitu buttons.css tergantung pada navigation.css yang tergantung pada common-style.css

Jika saya mendaftar dengan logika itu dalam pikiran, saya hanya perlu enqueue style.css tertentu dengan buttons.css sebagai ketergantungan dan WP akan daisy rantai pemuatan untuk menghormati pesanan.


Terima kasih atas jawaban Anda, bukankah ini akan memengaruhi kinerja jika saya akan menggunakan wp-register-style/scriptskrip / gaya untuk semua halaman saya di functions.php? Apa manfaat mendaftarkan semua gaya dan membuatnya hanya jika diperlukan?
CROSP

2
Biasanya tidak, Anda tidak akan melihat masalah kinerja, bahkan disarankan untuk melakukannya dengan cara ini . Saya akan memperbarui jawaban saya dengan keunggulan utama
bynicolas

1
jawabannya diperbarui!
bynicolas

4

" refactor ", " optimalkan ", " scalable ", " elegant ". Kekhawatiran besar! Anda berada di jalan yang benar. Namun memecah file CSS menjadi beberapa bukanlah jawaban untuk masalah ini. Inilah alasannya:

Browser cache file CSS. Jadi begitu halaman pertama dimuat, browser tidak akan meminta file CSS yang sama untuk halaman berikutnya. Ya, pemuatan halaman pertama akan sedikit, lebih lambat dari biasanya. Tetapi sisa halaman akan mendapat manfaat dari ini.

Lebih sedikit permintaan adalah salah satu cara terpenting untuk mengoptimalkan kecepatan situs web. (lihat Steve Souders atau artikel ini ).

Optimasi lebih lanjut adalah untuk memperkecil CSS Anda. (lihat posting Google PageSpeed .) Terima kasih @ bynicolas untuk sarannya.

Tentu Anda mungkin berkata, tapi bagaimana dengan keanggunan ? Inilah kabar baiknya: Sass dan KURANG . Mereka memungkinkan Anda untuk menulis lebih sedikit kode, membaginya menjadi beberapa file yang dikompilasi menjadi satu file CSS, dan banyak lagi.


PS: Saya sebenarnya punya ide yang sama beberapa tahun yang lalu: mengapa tidak membagi file CSS besar menjadi file CSS spesifik halaman yang lebih kecil? Itu tampak seperti optimasi yang jelas sampai salah satu kolega saya menjelaskan kepada saya mengapa itu benar-benar akan membuat situs web lebih lambat.
zendka

3
Jawaban yang bagus, saya berbicara sedikit tentang itu dalam jawaban saya tetapi Anda mengatakannya dengan baik. Awalnya mungkin tidak intuitif, tetapi fakta bahwa semuanya di-cache sebenarnya akan membuat segalanya lebih cepat. Saya ingin menambahkan bahwa meminimalkan 1 file CSS yang lebih besar akan lebih bermanfaat daripada memuat banyak file yang lebih kecil
bynicolas

Poin bagus tentang minimisasi!
zendka

Terima kasih, mungkin saya menggambarkan ide saya agak buram, tapi saya akan memiliki maksimum dua file CSS yang pertama common.cssdan yang kedua khusus untuk setiap halaman.
CROSP

3

Anda tentu dapat melakukan persyaratan untuk memeriksa halaman apa yang digunakan seseorang dan memberikan lembar gaya khusus untuk setiap halaman, tetapi Anda mungkin lebih baik menargetkan halaman dengan CSS.

Di file header.php Anda, pastikan body_classfungsinya ada di tag body, seperti ini:

<body <?php body_class(); ?>>

Ini akan menyisipkan kelas ke dalam tag tubuh yang dapat Anda gunakan untuk menargetkan fitur spesifik halaman.

Misalnya, jika saya ingin H1 pada satu halaman tertentu berwarna merah, saya dapat melakukan:

body.page-id-12 h1 {
    color: #ff0000;
}

Jadi pada halaman dengan ID 12, itu akan berlaku gaya itu.

Untuk menargetkan templat halaman tertentu, Anda dapat melakukan:

body.page-template-template-about h1 {
    color: #ff0000;
}

Itu akan menargetkan halaman dengan templat "tentang" yang diterapkan. Lihat saja kelas-kelas di badan tag pada halaman yang ingin Anda gaya.

Namun, jika Anda masih ingin membagikan lembar gaya tertentu untuk halaman tertentu, Anda bisa melakukan ini:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );

Saya pikir jawaban Anda tidak tepat. OP ingin tahu cara memuat gaya tertentu pada halaman tertentu. bukan cara menambahkan kelas CSS ke halaman.
bynicolas

Saya menambahkan info tentang cara melakukan enqueue stylesheet untuk halaman tertentu, tetapi inti dari fungsi body_class adalah agar Anda tidak harus melakukannya dengan cara itu.
Nate Allen

1
Saya mendapatkan itu dan tidak masalah dalam banyak kasus, tetapi OP ingin TIDAK memuat 1 stylesheet besar untuk semua situsnya. Jadi solusi Anda tidak akan berlaku di sini
bynicolas

1
Saya memberikan suara untuk jawaban Anda karena itu berlaku untuk pertanyaan yang lebih baik. Saya akan menyimpan jawaban saya di sini kalau-kalau ada yang merasa berguna
Nate Allen

1
@KhushbuVaghelaif ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
Nate Allen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.