Tag bersyarat untuk memuat gaya dan skrip di WordPress

mata teras

WordPress menyokong stylesheets dan skrip pemuatan bersyarat untuk memastikan bahawa fail -fail ini dimuat hanya apabila diperlukan, dengan itu mempercepat memuatkan laman web dan mengurangkan muat turun data yang tidak perlu untuk pengguna.
gaya dan skrip harus dimuatkan mengikut amalan terbaik yang disyorkan dalam piawaian pengekodan WordPress.org, menggunakan kaedah WordPress standard dapat mengelakkan masalah ketidakserasian dan memastikan laman web tetap efisien.
WordPress menyediakan fungsi
• dan wp_enqueue_style, yang digunakan untuk memasukkan fail stylesheet dan fail JavaScript tersuai. Fungsi -fungsi ini memastikan bahawa WordPress mendapati semua stylesheets dan skrip yang diperlukan dan memuat turunnya dalam urutan yang betul. wp_enqueue_script
WordPress menyediakan tag bersyarat yang boleh digunakan bersamaan dengan kenyataan
• untuk menentukan kod mana yang digunakan di bawah syarat -syarat tertentu. Tag ini boleh digunakan untuk memastikan bahawa helaian dan skrip gaya tertentu hanya dimuat turun apabila pelawat melawat halaman tertentu laman web. if...else

Artikel ini adalah sebahagian daripada siri yang dibuat dengan kerjasama SiteGround. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Jika laman WordPress anda hanya perlu menggunakan fail stylesheet atau fail JavaScript tertentu pada halaman tertentu atau hanya di bawah keadaan yang terhad, anda tidak perlu memuatkan fail ini setiap tempat di laman web ini.

Artikel ini akan membimbing anda tentang cara memuat gaya dan skrip CSS hanya jika laman web memerlukannya. Dengan cara ini, laman web anda akan dimuat lebih cepat dan pengguna yang tidak melawat halaman yang mengandungi fail tambahan tidak perlu memuat turun data yang tidak perlu dalam penyemak imbas mereka.

Kenapa harus gaya dan skrip ditambah di WordPress?

Jika terdapat anti-corak dalam pembangunan WordPress, ia adalah untuk menambah

dan

tag ke bahagian dokumen HTML untuk memuatkan fail stylesheet dan JavaScript secara berasingan, dan kemudian ia selesai. <link> <script></script> Menjalankan laman web WordPress melibatkan penggunaan stylesheets dan kod JavaScript dari perisian itu sendiri, banyak plug-in dan tema aktif.

Ini bermakna bahawa pengarang tema atau plugin tidak tahu terlebih dahulu apa gaya dan skrip akan dijalankan untuk pemasangan tertentu, atau perintah di mana sumber -sumber ini diperlukan. Sebagai contoh, mari kita ambil Perpustakaan JQuery sebagai contoh. WordPress sendiri boleh menggunakan perpustakaan ini untuk mengendalikan permintaan Ajax dan tugas-tugas lain, dan ia juga boleh digunakan oleh pelbagai plug-in dan tema aktif.

Jika penulis plug-in dan tema termasuk stylesheets dan skrip yang mereka perlukan dengan menambahkan tag yang sepadan secara langsung ke dokumen HTML, ini boleh membawa kepada konflik, sumber yang dimuatkan beberapa kali, dan/atau pesanan pemuatan yang salah.

inilah sebabnya anda harus sentiasa memuat gaya dan skrip dengan mengikuti amalan terbaik yang disyorkan dalam piawaian pengekodan WordPress.org:

Untuk membuat segala -galanya berfungsi dengan harmoni, penting untuk tema dan plugin untuk memuat skrip dan stylesheets menggunakan kaedah WordPress standard. Ini akan memastikan bahawa laman web tetap cekap dan tidak ada masalah ketidakserasian.

Mengandungi CSS dan JavaScript - Manual Tema

cara menggunakan wp_enqueue_style dan wp_enqueue_script Fungsi asas untuk memasukkan lembaran gaya tersuai ke dalam tema adalah seperti berikut:

Hanya dua parameter pertama yang diperlukan, parameter lain adalah pilihan.

<code class="language-php">wp_enqueue_style( $handle, $src, $deps, $ver, $media );</code>

Parameter

adalah nama stylesheet. Anda boleh menamakannya utama, portfolio, dan lain -lain mengikut tujuan fail. Jika anda memasukkan lembaran gaya dari plugin JavaScript, gunakan nama plugin.
• $handle
mewakili URL di mana stylesheet berada.
• Parameter $src
menentukan sama ada lembaran gaya ini bergantung pada lembaran gaya lain untuk berfungsi dengan baik.
• $deps
Menentukan nombor versi helaian gaya.
• $ver
mewakili jenis media yang digunakan untuk helaian gaya, seperti semua, skrin, cetak, dll.
• $media Contohnya, kod untuk menambah stylesheet bernama portfolio.css ke laman web WordPress anda mungkin kelihatan seperti ini:

Untuk memasukkan fail JavaScript, anda harus menggunakan:

<code class="language-php">wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');</code>

Parameter ini sama dengan yang ada di

, kecuali bahawa parameter terakhir, yang menetapkan nilai benar atau palsu berdasarkan sama ada anda ingin meletakkan bahagian

<code class="language-php">wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)</code>

atau

dokumen. wp_enqueue_style <script></script> Katakan anda ingin menambah portfolio.js ke laman web anda, kod itu kelihatan seperti ini:

Kod ini memberitahu WordPress:

<code class="language-php">wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);</code>

Anda ingin menggunakan fail portfolio, yang terletak di subfolder JS dalam direktori topik aktif.

WordPress memerlukan jQuery untuk dimuat turun sebelum memuatkan portfolio.js, jika tidak, yang terakhir tidak akan berfungsi dengan baik (anda tidak perlu mengimport jQuery, kerana ia telah dibundel dengan WordPress secara lalai).

• WordPress memerlukan fail ini ditambah dalam bahagian
dari dokumen HTML.
• Anda mungkin perlu memasukkan beberapa stylesheets atau fail skrip, dalam hal ini, bungkus semua panggilan ke dan
dalam satu fungsi, dan kemudian cangkuk fungsi ini ke tindakan WordPress yang sesuai.

Ini adalah contoh. Jika anda sedang membangunkan tema WordPress, anda boleh menambahkannya ke fail fungsi.php anda. wp_enqueue_style() wp_enqueue_script()

Sekarang anda boleh yakin bahawa WordPress akan menemui semua stylesheets dan skrip yang diperlukan dan memuat turunnya mengikut urutan yang betul.

<code class="language-php">function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );</code>

Keadaan memuatkan helaian gaya dan skrip

Kod di atas berfungsi dengan baik dan mengikuti amalan terbaik WordPress. Walau bagaimanapun, WordPress akan memuat turun portfolio.css dan portfolio.js dari setiap tempat di laman web anda. Jika pelawat anda tidak pernah melawat halaman portfolio anda, ini adalah malang, tetapi boleh berlaku, dan pelayar akan memuatkan dua fail yang tidak perlu.

Sekarang, mari kita pergi lebih jauh dan pastikan WordPress mengandungi kedua -dua portfolio.css dan portfolio.js hanya jika pelawat mengakses bahagian portfolio anda.

tag bersyarat wordpress

WordPress menyediakan tag bersyarat yang digunakan bersempena dengan pernyataan if...else biasa untuk memilih kod mana yang akan digunakan di bawah syarat -syarat tertentu.

Contohnya, jika anda ingin melaksanakan beberapa kod hanya di laman web laman web anda dan kod lain di tempat lain, anda akan menulis sesuatu seperti ini:

<code class="language-php">wp_enqueue_style( $handle, $src, $deps, $ver, $media );</code>

Sebaliknya, jika anda ingin melaksanakan kod tertentu di mana -mana di luar halaman utama laman web, anda akan menulis:

<code class="language-php">wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');</code>

WordPress menyediakan sejumlah besar tag bersyarat, dan anda boleh melihat senarai penuh dalam bahagian Tag Bersyarat dari manual tema.

Anda boleh menggunakan tag bersyarat untuk memastikan portfolio.css muat turun WordPress dan portfolio.js hanya jika pelawat melawat halaman portfolio laman web anda.

mari kita lihat beberapa cara anda boleh melakukan ini.

id halaman pengguna

Anda boleh menggunakan tag bersyarat untuk memeriksa sama ada pengguna menggunakan ID halaman portfolio di laman web.

untuk memahami id halaman, lakukan yang berikut:

Log masuk ke panel admin laman web WordPress anda.
Klik pada halaman untuk mengakses senarai semua halaman di laman web.
• 
Klik pada tajuk halaman yang anda berminat dan membukanya dalam editor.
• 
Halaman kini dibuka di editor, sila periksa URL di bar alamat penyemak imbas. Anda harus melihat sesuatu seperti pos = ditambah nombor. Nombor ini adalah ID halaman:
• 

Sekarang anda tahu id halaman, anda boleh menggunakan tag bersyarat untuk mengubah suai kod yang sebelum ini mengandungi lembaran gaya dan skrip tema, seperti yang ditunjukkan di bawah:

<code class="language-php">wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)</code>

Gunakan tajuk halaman

Label bersyarat halaman juga terpakai pada tajuk halaman. Jika halaman portfolio anda mempunyai tajuk "portfolio saya", kod mungkin kelihatan seperti ini (saya hanya menambah bahagian bersyarat untuk keringkasan):

<code class="language-php">wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);</code>

Gunakan halaman alias

Anda boleh menggunakan tag bersyarat dengan alias halaman, yang merupakan URL mesra pengguna halaman. Berikut adalah apa yang kelihatan dalam aplikasi sebenar:

<code class="language-php">function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );</code>

Kesimpulan

Dalam artikel ini, saya membincangkan cara memasukkan stylesheets dan fail skrip secara bersyarat dalam laman web WordPress. Dalam sesetengah kes, bilangan gaya tambahan adalah kecil, jadi tidak masuk akal untuk membuat lembaran gaya khusus untuk mereka. Ini hanya akan menghasilkan permintaan HTTP yang mungkin tidak diperlukan oleh laman web anda.

Walau bagaimanapun, dalam keadaan yang sesuai, contohnya, reka bentuk halaman atau kawasan tema berbeza dari seluruh laman web, pemuatan selektif helaian gaya dan skrip mengikuti amalan terbaik WordPress dan memastikan pelayar pelawat hanya memuat turun memaparkan Jumlah data yang diperlukan untuk kandungan yang diperlukan.

Bagaimana anda memasukkan skrip dan gaya tersuai ke laman WordPress anda? Klik kotak komen di bawah untuk berkongsi.

FAQs (FAQ) mengenai tag bersyarat dan memuatkan gaya dan skrip dalam WordPress

Apakah tag bersyarat di WordPress dan bagaimana mereka berfungsi?

Tag bersyarat dalam WordPress adalah fungsi PHP yang digunakan dalam fail tema untuk menukar kandungan yang dipaparkan pada halaman tertentu berdasarkan syarat -syarat yang memenuhi halaman tersebut. Mereka digunakan untuk menentukan sama ada keadaan tertentu dipenuhi sebelum melaksanakan fungsi tertentu. Sebagai contoh, anda boleh menggunakan tag bersyarat untuk memeriksa sama ada halaman adalah satu siaran sebelum memaparkan bar sisi tertentu.

Bagaimana menggunakan tag bersyarat untuk memuat gaya dan skrip di WordPress?

Untuk menggunakan tag bersyarat untuk memuat gaya dan skrip dalam WordPress, anda perlu menambah skrip dan gaya anda dalam fail fungsi.php tema. Anda boleh menggunakan fungsi wp_enqueue_script dan wp_enqueue_style dengan tag bersyarat. Sebagai contoh, jika anda ingin memuat skrip hanya pada halaman utama, anda boleh menggunakan tag bersyarat is_home().

Apakah beberapa tag bersyarat biasa di WordPress?

Beberapa tag keadaan yang biasa digunakan dalam WordPress termasuk is_single(), is_page(), is_home(), is_front_page(), is_category(), is_tag(), is_author(),

, dan sebagainya. Setiap pemeriksaan tag untuk kriteria tertentu, seperti sama ada halaman itu adalah satu siaran, halaman tertentu, halaman utama, halaman utama, halaman kategori, halaman tag, atau halaman pengarang.

Bagaimana untuk membuat coretan kod bersyarat di WordPress?

if Untuk membuat coretan kod bersyarat di WordPress, anda perlu menggunakan tag bersyarat dalam pernyataan PHP if. Kod dalam pernyataan if akan dilaksanakan hanya apabila keadaan dipenuhi. Sebagai contoh, untuk memaparkan coretan kod hanya pada halaman utama, anda boleh menggunakan tag bersyarat is_home() dalam pernyataan

.

Mengapa gaya saya tidak dimuatkan di WordPress?

wp_enqueue_style Jika gaya anda tidak dimuatkan di WordPress, ia mungkin disebabkan oleh beberapa sebab. Alasan yang paling biasa adalah bahawa fail gaya tidak didaftarkan dengan betul dalam fail Functions.php. Pastikan anda telah menggunakan fungsi

dengan betul. Juga, periksa bahawa laluan fail dan kebergantungan adalah betul. Jika anda menggunakan tag bersyarat, pastikan keadaan dipenuhi.

Bagaimana memuatkan CSS bersyarat dalam WordPress dengan cara yang betul?

wp_enqueue_style Untuk memuatkan CSS bersyarat dalam WordPress, anda perlu menggunakan fungsi is_home() untuk mendaftarkan fail CSS dalam fail fungsi.php tema. Anda boleh menggunakan tab Syarat untuk menentukan syarat -syarat di mana fail CSS harus dimuatkan. Sebagai contoh, untuk memuatkan fail CSS hanya pada halaman utama, anda boleh menggunakan tag bersyarat

.

Bolehkah saya menggunakan pelbagai tag bersyarat di WordPress?

Ya, anda boleh menggunakan pelbagai tag bersyarat di WordPress. Anda boleh menggabungkannya menggunakan pengendali logik seperti dan (&&) dan atau (||). Sebagai contoh, untuk menyemak sama ada halaman adalah satu siaran dan bukan halaman utama, anda boleh menggunakan tag bersyarat is_single() dan !is_home().

Bagaimana menggunakan tag bersyarat untuk memuat gaya yang berbeza untuk halaman yang berbeza di WordPress?

Untuk memuatkan gaya yang berbeza untuk halaman yang berbeza di WordPress, anda boleh menggunakan tag bersyarat dalam fail functions.php tema. Untuk setiap gaya, gunakan fungsi wp_enqueue_style dan semak tag bersyarat untuk halaman tertentu. Sebagai contoh, untuk memuat gaya khusus untuk halaman rumah dan memuat gaya yang berbeza untuk satu siaran, anda boleh menggunakan tag bersyarat is_home() dan is_single().

Apakah perbezaan antara

dan is_home() dalam WordPress? is_front_page()

tag bersyarat

dalam pemeriksaan WordPress jika halaman rumah dipaparkan, manakala is_home() pemeriksaan tag bersyarat jika halaman rumah dipaparkan. Jika anda telah menetapkan laman utama anda untuk menunjukkan catatan terkini anda, kedua -dua tag akan kembali benar. Walau bagaimanapun, jika anda telah menetapkan halaman statik sebagai halaman utama, is_front_page() akan kembali benar untuk halaman ini, dan is_front_page() akan kembali benar untuk halaman yang ditetapkan sebagai halaman pos. is_home()

Bolehkah saya menggunakan tag bersyarat di luar gelung di WordPress?

Ya, anda boleh menggunakan tag bersyarat di luar gelung di WordPress. Walau bagaimanapun, beberapa tag bersyarat (seperti

dan is_single()) mungkin tidak berfungsi seperti yang diharapkan apabila digunakan sebelum gelung. Ini kerana WordPress hanya mengetahui butiran pertanyaan selepas gelung bermula. Oleh itu, biasanya disyorkan untuk menggunakan label bersyarat ini dalam atau selepas gelung bermula. is_page()

Atas ialah kandungan terperinci Tag bersyarat untuk memuat gaya dan skrip di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!