WordPress CSS uslubingizni to’g’ri yuklash
WordPress uslublar jadvalingizni to’g’ri yuklamasangiz, sayt foydalanuvchilari uchun mavzu uslubini sozlash juda qiyin bo’ladi.
Bugun biz CSS-ni WordPress-da qanday qilib to’g’ri yuklash haqida gaplashamiz.
WordPress dunyodagi eng mashhur tarkibni boshqarish tizimidir. Uning foydalanuvchilari soni o’n millionlab. Shuning uchun, muvaffaqiyatli mavzuni yaratish uchun biz o’zimizni mutlaqo har bir WordPress foydalanuvchisi o’rniga qo’yishimiz va qoidalarga qat’iy rioya qilgan holda CSS fayllarini to’g’ri o’rnatishimiz kerak.
WordPress-da CSS-ni qanday qilib noto’g’ri yuklash mumkin
Ko’p yillar davomida WordPress o’z kodini yanada moslashuvchan qilish uchun kengaytirdi. Ammo o’tgan odatlar, shunga qaramay, iz qoldirdi. WordPress CSS va JavaScript-ni yuklashni boshlaganini hisobga olib, ushbu kodni header.php fayllariga qo’shishni to’xtatmadik :
| 1 | <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> |
… yoki bu yaxshiroq ekanligini hisobga olib functions.php fayllarida :
| 123456789 | <?php function add_stylesheet_to_head() {echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";} add_action( 'wp_head', 'add_stylesheet_to_head' ); ?> |
Ushbu holatlarning hech birida WordPress CSS fayllari yuklangan yoki yuklanmaganligini aniqlay olmaydi. Bu bizning katta xatomiz!
Agar boshqa biron bir plagin xuddi shu CSS faylidan foydalansa, u CSS fayli sahifaga qo’shilganligini tekshirib bo’lmaydi. Natijada, ishlatilgan plagin bir xil faylni ikkinchi marta yuklaydi, bu esa kodning takrorlanishiga olib keladi.
Yaxshiyamki, WordPress uslublar jadvallarini qo’shish orqali ushbu muammoni osonlikcha hal qilishi mumkin.
WordPress-da CSS-ni qanday qilib to’g’ri yuklash kerak
Avval aytib o’tganimizdek, so’nggi yillarda WordPress biroz o’zgardi va biz yuz minglab mavjud WordPress plaginlari xususiyatlarini hisobga olgan holda har bir foydalanuvchi ehtiyojlarini qondirishni maqsad qilganmiz. Ammo bu raqamdan qo’rqmang, chunki WordPress hanuzgacha stil jadvallarini to’g’ri va samarali qo’shishga yordam beradigan foydali xususiyatlarga ega.
Buning bir necha usullarini ko’rib chiqamiz.
1. CSS fayllarini ro’yxatdan o’tkazish
Agar siz kaskadli uslublar jadvallarini yuklamoqchi bo’lsangiz, avval ularni wp_register_style () funktsiyasi yordamida ro’yxatdan o’tkazishingiz kerak :
| 123 | <?phpwp_register_style( $handle, $src, $deps, $ver, $media );?> |
- $ handle (talab qilinadi) – bu uslublar varag’ining o’ziga xos nomi. Boshqa funktsiyalarda u uslublar varag’ini navbatga qo’yish va chop etish uchun ishlatiladi.
- $ src (zarur) – uslublar varag’ingizning URL manziliga ishora qiladi. CSS fayllarini mavzusida topish uchun get_template_directory_uri () funktsiyasidan foydalanishingiz mumkin. Va hatto qattiq kodlashni sinab ko’rmang!
- $ deps (ixtiyoriy) – qaram uslublar nomlarini boshqaradi. Agar sizning jadvalingiz CSS faylisiz ishlamasa, ushbu parametrlardan “qaram uslublar” ni o’rnating.
- $ ver (shart) – versiya raqami. Mavzuning versiya raqamidan foydalanishingiz yoki xohlasangiz, uni yaratishingiz mumkin. Agar siz boshqa biron bir versiya raqamidan foydalanishni xohlamasangiz, uni null qilib qo’ying, bu sukut bo’yicha noto’g’ri va WordPress o’z versiyasi raqamini qo’shadi.
- $ media (ixtiyoriy) – CSS media turlari , masalan, “qo’lda” yoki “chop etish”. Agar sizga ushbu parametr kerakligiga ishonchingiz komil bo’lmasa, uni ishlatmang.
Wp_register_style () funktsiyasi bilan ro’yxatdan o’tishga misol :
| 123456789101112 | <?php // wp_register_style() examplewp_register_style('my-bootstrap-extension', // handle nameget_template_directory_uri() . '/css/my-bootstrap-extension.css', // the URL of the stylesheetarray( 'bootstrap-main' ), // an array of dependent styles'1.2', // version number'screen', // CSS media type); ?> |
WordPress-da uslublarni ro’yxatdan o’tkazish majburiy emas. Agar siz ushbu uslublardan kelajakda foydalanasizmi degan shubhangiz bo’lsa yoki ularni qayta yuklash uchun ushbu kodlardan birini ishlatmasangiz, uslublar ro’yxatga olinmasdan navbatga qo’shiladi. Quyida bu haqda ko’proq o’qing.
2. Navbatga CSS fayllarini qo’shish
Uslublar faylini ro’yxatdan o’tkazgandan so’ng, uni mavzuning < boshiga » yuklash uchun navbatga qo’yishingiz kerak .
Bu wp_enqueue_style () funktsiyasi bilan amalga oshiriladi :
| 123 | <?phpwp_enqueue_style( $handle, $src, $deps, $ver, $media );?> |
Uning parametrlari wp_register_style () funktsiyasi bilan to’liq bir xil , shuning uchun ularni qayta eslatib o’tirishga hojat yo’q.
Ammo yuqorida aytib o’tilganidek, ro’yxatdan o’tish, ya’ni wp_register_style () funktsiyasi ixtiyoriydir. Shuni ta’kidlash kerakki, wp_enqueue_style () ikki xil usulda ishlatilishi mumkin:
| 123456789101112131415 | <?php // if we registered the style before:wp_enqueue_style( 'my-bootstrap-extension' ); // if we didn't register it, we HAVE to set the $src parameter!wp_enqueue_style('my-bootstrap-extension',get_template_directory_uri() . '/css/my-bootstrap-extension.css',array( 'bootstrap-main' ),null, // example of no version number...// ...and no CSS media type); ?> |
Shuni unutmangki, agar plagin uslublar jadvalini topishi kerak bo’lsa yoki o’zingizning mavzuingizga yuklashni xohlasangiz, albatta, siz ro’yxatdan o’tmasdan qilolmaysiz.
3. Saytga uslublarni yuklash
Biz wp_enqueue_style () funktsiyasini har qanday mavzuda ishlata olmaymiz, biz “harakatlar” dan foydalanishimiz kerak. Quyidagi uchta harakatlar sizga turli xil maqsadlarga erishishda yordam beradi:
- wp_enqueue_scripts – skriptlar va uslublarni saytning “oldingi qismiga” yuklash uchun;
- admin_enqueue_scripts – stsenariy va uslublarni sahifalarga yoki sayt ma’muriy paneliga yuklash uchun;
- login_enqueue_scripts – saytga kirish sahifasi uchun skriptlar va uslublarni yuklash.
Misol:
| 123456789101112131415161718192021 | <?php // load css into the website's front-endfunction mytheme_enqueue_style() {wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() ); }add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' ); // load css into the admin pagesfunction mytheme_enqueue_options_style() {wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' ); }add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' ); // load css into the login pagefunction mytheme_enqueue_login_style() {wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' ); }add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' ); ?> |
Qo’shimcha funktsiyalar
WordPress-da ichki uslublarni chop etish, fayllar navbatining holatini tekshirish, uslublar uchun metadata qo’shish va uslublarni olib tashlashga imkon beradigan boshqa juda foydali CSS funktsiyalari mavjud.
Keling, batafsilroq ko’rib chiqaylik.
1. Ichki uslublarni qo’shish: wp_add_inline_style ()
Agar siz foydalanayotgan WordPress mavzusida mavzu uslublarini sozlash imkoniyatlari mavjud bo’lsa, wp_add_inline_style () funktsiyasidan foydalanib ichki uslublarni chop etishingiz mumkin :
| 1234567891011 | <?php function mytheme_custom_styles() {wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );$bold_headlines = get_theme_mod( 'headline-font-weight' ); // let's say its value is "bold"$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';wp_add_inline_style( 'custom-style', $custom_inline_style );}add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' ); ?> |
Bu jarayon juda oson va ko’p vaqt talab qilmaydi. Ammo shuni esda tutingki, keyingi barcha inline uslublarini bir xil nom bilan qo’shishingiz kerak.
2. Uslublar varag’i navbatining holatini tekshirish: wp_style_is ()
Ba’zi hollarda, biz uslubning holati to’g’risida ma’lumotga muhtoj bo’lamiz: ro’yxatdan o’tganmi, navbatda bo’lganmi, bosilganmi yoki bosib chiqarishni kutayotganmi. Ushbu ma’lumotni wp_style_is () funktsiyasi yordamida tekshirish mumkin :
| 12345678910111213141516171819202122 | <?php /** wp_style_is( $handle, $state );* $handle - name of the stylesheet* $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'*/ // wp_style_is() examplefunction bootstrap_styles() { if( wp_style_is( 'bootstrap-main' ) { // enqueue the bootstrap theme if bootstrap is already enqueuedwp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' ); } }add_action( 'wp_enqueue_scripts', 'bootstrap_styles' ); ?> |
3. Uslublarga metadata qo’shish: wp_style_add_data ()
WordPress-da wp_style_add_data () deb nomlangan bitta ajoyib funktsiya mavjud , bu sizning meta ma’lumotlarini mavzusining uslubiga qo’shishga imkon beradi, jumladan shartli sharhlar, RTL-quvvatlash va boshqalar!
Bu shunday ko’rinadi:
| 1234567891011121314151617181920212223242526 | <?php /** wp_style_add_data( $handle, $key, $value );* Possible values for $key and $value:* 'conditional' string Comments for IE 6, lte IE 7 etc.* 'rtl' bool|string To declare an RTL stylesheet.* 'suffix' string Optional suffix, used in combination with RTL.* 'alt' bool For rel="alternate stylesheet".* 'title' string For preferred/alternate stylesheets.*/ // wp_style_add_data() examplefunction mytheme_extra_styles() {wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );/** alternate usage:* $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );* wp_style_add_data() is cleaner, though.*/} add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' ); ?> |
4. Wp_deregister_style () ro’yxatidan uslublarni ro’yxatdan o’chirish
Agar sizga jadval uslubini o’chirish kerak bo’lsa (masalan, uni yangilangan versiyada ro’yxatdan o’tkazish uchun), buni wp_deregister_style () bilan qilishingiz mumkin. .
Misolga qarang:
| 1234567891011121314151617 | <?php function mytheme_load_modified_bootstrap() {// if bootstrap is registered before...if( wp_script_is( 'bootstrap-main', 'registered' ) ) {// ...deregister it first...wp_deregister_style( 'bootstrap-main' );// ...and re-register it with our own, modified bootstrap-main.css...wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );// ...and enqueue it!wp_enqueue_style( 'bootstrap-main' );}} add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' ); ?> |
Zarur bo’lmaganda ham, ro’yxatdagi eskisini tekshirganda har doim yangi uslubni ro’yxatdan o’tkazing. Aks holda, bu noto’g’ri ishlashga olib kelishi mumkin.
Shunga o’xshash wp_dequeue_style () funktsiyasi mavjud , u uslublar jadvallarini nomidan navbatdan olib tashlaydi.
Xulosa
Yuqorida aytilganlarning barchasini umumlashtiramiz.
WordPress-da CSS-ni qanday qilib to’g’ri qo’shishni bilsangiz, siz shunchaki xato qila olmaysiz. Agar o’zingizning maslahatlaringiz bo’lsa, sharhlarda boshqalar bilan baham ko’ring.
