Cara memuat skrip / gaya khusus untuk satu halaman

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.

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

• wp_register_style
• wp_enqueue_style

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.

" 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.

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' );