آموزش صحیح فراخوانی کد های CSS در وب سایت وردپرس،قسمت دوم

سلام و عرض ادب و احترام خدمت شما دوستان
در ادامه سری آموزش صحیح فراخوانی کد های CSS در وب سایت وردپرس در قسمت دوم همراه شما عزیزان هستیم.در قسمت اول این آموزش موارد مهمی را مورد بررسی قرار دادیم و حالا در این آموزش به بررسی ادامه مواردی که در این زمینه وجود دارد میپردازیم.پس تا انتها با من همراه باشید دوستان.

خب دوستان عزیز در قسمت قبل آموزش فراخوانی کد های CSS در آخر آموزش در مورد اجزای مختلف تابع wp_register_style صحبت کردیم و حالا در این آموزش میپردازیم به ادامه موارد و یک مثال را بررسی میکنیم که به صورت زیر است:

<? php // wp_register_style() مثال wp_register_style(     'my-bootstrap-extension', // نام منحصر به فرد     get_template_directory_uri() . '/css/my-bootstrap-extension.css', // آدرس فایل     array( 'bootstrap-main' ), // نام فایل یا فایل های وابسته     '1.2', // شماره نسخه     'screen', // نوع استایل ); ?>

دوستان عزیز توجه کنید که استفاده از تابع بالا برای فراخوانی کد های CSS کاملا در وب سایت های وردپرسی اختیاری است. اگر فکر می کنید که استایل وب سایت وردپرسی شما توسط هر افزونه وردپرس دیگری اجرا می شود و با استایل های دیگری از وب سایت تداخل پیدا نمی کند می توانید مستقیم فایل را فراخوان کنید و دیگر نیازی به تابع بالا نخواهید داشت.

اما دوستان عزیز فراخوانی کد های CSS در قالب وردپرس به چه صورت است؟

خب دوستان عزیز توجه کنید که بعد از ثبت استایل وب سایت وردپرس نوبت به فراخوانی کد های CSS آن استایل ثبت شده است.دوستان عزیز در سیستم مدیریت محتوای وردپرس برای این کار از تابع wp_enqueue_style() استفاده می کنیم.یک مثالی از این مورد به صورت زیر است:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

نکته مهم این است که پارامتر های این تابع هم مانند تابع wp_register_style() عمل می کنند و به صورت زیر هستند:

• $handle: ( رشته ای – لازم ):دوستان عزیز مورد اول کد $handle است .این مقدار شامل یک نام منحصر به فرد برای استایل مورد نظر شما در وب سایت وردپرسی می باشد.توجه کنید که از این مقدار برای فراخوانی در توابع دیگر نیز استفاده می شود.
• $src: ( رشته ای – لازم ):مورد بعدی $src است شما دوستان عزیز میتوانید آدرس فایل خود را اینجا قرار دهید
• $deps: ( آرایه – اختیاری ) :توجه کنید که در این تابع این مقدار شامل نام منحصر به فرد ( $handle ) سایر فایل های وابسته به آن می باشد.دوستان عزیز موردی که بسیار مهم است این است که اگر فایل شما به درستی کار نکند در صورتی که فایل های استایل دیگر وجود نداشته باشند می توانید از این بخش استفاده کنید.
• $ver: ( رشته ای یا منطقی – اختیاری ):دوستان عزیز این مقدار شامل شماره نسخه فایل شما در وب سایت وردپرسی می باشد. شما می توانید شماره نسخه قالب خود را اینجا قرار دهید و اگر نمی خواهید شماره نسخه ای از قالب وردپرس خود داشته باشد میتوانید مقدار آن را null قرار دهید. مقدار پیشفرض این متغیر false است که نسخه وردپرس را اینجا قرار می دهد.
• $media: ( رشته ای – اختیاری ):مورد نهایی نیز به صورت مقابل است که این مقدار هم شامل نوع استایل شما در وب سایت وردپرسی می شود. مانند: screen , all و….. اگر نمی خواهید از این مورد در وب سایت خود استفاده کنید آن را ننویسید.

خب دوستان عزیز مثالی از این مورد به صورت زیر است:

<?php   // اگر استایل را از قبل ثبت کرده ایم اینطوری فراخوان می کنیم wp_enqueue_style( 'my-bootstrap-extension' );   // اگر فایل از قبل ثبت نشده اینطوری فراخوان می کنیم wp_enqueue_style(     'my-bootstrap-extension', // نام منحصر به فرد فایل     get_template_directory_uri() . '/css/my-bootstrap-extension.css', // آدرس فایل     array( 'bootstrap-main' ), // فایل وابسته     null, // شماره نسخه     // ...بدون نوع استایل ); ?>

خب دوستان عزیز در صورتی که کامل به این آموزش ها توجه کرده باشید میدانید که تا بحال ۲ تابع معرفی کردیم که این تابع های معرفی شده در وب سایت وردپرس فایل ها را در داخل قالب وب سایت فراخوان می کنند اما شاید بخواهیم یک سری فایل هم برای پیشخوان و یا هر جای دیگری از وب سایت وردپرسی خود فراخوان کنیم. برای این کار از action ها استفاده می کنیم که به صورت زیر است:

wp_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در front-end وب سایت وردپرس

admin_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در پنل مدیریت وب سایت وردپرسی

login_enqueue_scripts(): برای فراخوانی استایل ها و اسکریپت ها در صفحه ورود وب سایت وردپرسی

مثالی از کد های فوق در زیر آورده شده است:

<?php   // فراخوانی css در سایت function mytheme_enqueue_style() {     wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );  } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );   // فراخوانی css در پنل مدیریت function 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' );   // فراخوانی css در صفحه ورود function 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' );   ?>

خب دوستان کار  آموزش فراخوانی کد های CSS در این مرحله به پایان رسید در ادامه میپردازیم به توابع اضافی که در این قسمت وجود دارد و شما میتوانید از آن ها استفاده نمائید:
اولین مورد در این زمینه افزودن استایل درون خطی با استفاده از تابع wp_add_inline_style() است.شما برای ان منظور میتوانید از قطعه کد زیر استفاده نمائید:

<?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' ); // دریافت مقدار از تنظیمات     $custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }'; // اعمال استایل روی کلاس .headline     wp_add_inline_style( 'custom-style', $custom_inline_style ); } add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );   ?>

همانطور که د قطعه کد فوق میبینید با استفاده از این تابع در وب سایت های وردپرسی میتوان استایل های دررون خطی به قالب وردپرس وب سایت خود اضافه نمائیم.اما مورد دوم نیز کاربردی تر از مورد نخست است و در باره وضعیت فراخوان صحبت میشود.دوستان عزیز نکته مهمی که وجود دارد این است که در بعضی مواقع ممکن است اطلاعاتی درباره فایل فراخوان شده در وب سایت وردپرس خود بخواهیم مثلا فایل ثبت شده چاپ شده فراخوان شده و موارد بسیار دیگر. در این حالت شما دوستان عزیز میتوانید از تابع wp_style_is() استفاده می کنید:

<?php   /*  * wp_style_is( $handle, $state );  * $handle - نام استایل  * $state - وضعیت استایل: 'registered', 'enqueued', 'done' یا 'to_do'. پیش فرض: 'enqueued'  */   // wp_style_is()مثال function bootstrap_styles() {       if( wp_style_is( 'bootstrap-main' ) {           // بررسی فایل اگر فراخوان شده         wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );       }   } add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );   ?>

افزودن متا دیتا به استایل

خب دوستان عزیز این تابع نیز گفته شده و شما میتوانید با استفاده از این تابع گفته شده در وب سایت وردپرسی خود وضعیت فراخوانی را مورد بررسی قرار دهید.حال مورد دیگری که وجود دارد نیز این است که روش افزودن متا دیتا به استایل در وب سایت وردپرسی به چه معناست و چه استفاده ای دارد؟ شما دوستان عزیز میتوانید این مورد را در وب سایت وردپرس خود با استفاده از تابع wp_style_add_data() قرار دهید که مثالی از ان به صورت زیر است:

<?php   /*  * wp_style_add_data( $handle, $key, $value );  * Possible values for $key and $value:  * 'conditional' رشته      دستورات شرطی برای IE6 , 7 و....  * 'rtl'         رشته|منطقی برای اعلام استایل راست چین  * 'suffix'      رشته      پسوند اختیاری، استفاده می شود در ترکیب با راست چین.  * 'alt'         منطقی        برای rel="alternate stylesheet".  * 'title'       رشته      برای preferred/alternate استایل های.  */   // wp_style_add_data() مثال function 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' );     /*      * روش استفاده:      * $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
     */
}
 
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
 
?>

دوستان عزیز تابع فوق به شما اجازه می دهد که متا دیتا به استایل خود اضافه کنید مثلا شامل دستورات شرطی، پشتیبانی از راست چین و …

ممنونم از همراهی شما عزیزان در این آموزش وردپرس
منبع: بیگ تم مرجع آموزش های وردپرس