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

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

در ادامه سری آموزش های وردپرس در این قسمت همراه شما عزیزان هستیم با آموزشی دیگر در وب سایت های وردپرس.در این آوزش بررسی میکنیم که چگونه میتوان فایل ها و کد های CSS را به صورت کاملا درست و صحیح در وب سایت وردپرسی اعمال کرد؟ دوستان عزیز همانطور که می دانید کد های css به شکل ظاهری وب سایت شما کمک بسیاری می کنند و بدون آنها وب سایت شما بسیار زشت و مشکل دار است و گاربران به آن وارد نمیشوند و یا در صورتی که وارد شوند نیز لذتی نخواهند برد

دوستان عزیز برای فهمیدن روش صحیح فراخوانی این کد ها در وب سایت های وردپرسی خود ابتدا باید روش غلط آن را بدانیم تا بتوانیم از روش صحیح استفاده نمائیم.روش غلط به صورت زیر است اما دلیل این غلط نوشتن این است که متاسفانه اکثر طراحان وب سایت ها با این کدها آشنا نیستند و هنوز هم از همان توابع قدیمی استفاده می کنند که یکی از آنها معرفی فایل های css و جاوا اسکریپت در header.php است:

۱
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?> " >

شکل اشتباه دیگر نیز به صورت زیر میتواند باشد:

۱
۲
۳
۴
۵
۶
۷
۸
۹
<? 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' );
?>

دوستان عزیز توجه کنید که در روش های بالا که به عنوان مثال آورده شده اند ممکن است وردپرس نتواند تشخیص دهد که فایل مورد نظر شما در صفحه فراخوان شده است و یا خیر.که این میتواند مشکل بزرگی باشداز طرف دیگر نیز اگر افزونه وردپرس دیگری از همین فایل css استفاده کند، وردپرس نمی تواند چک کند که آیا این فایل در صفحه فراخوان شده است و یا نشده است.

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

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

این کد به صورت زیر تجزیه شده است:

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

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

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

&lt;? php // wp_register_style() مثال wp_register_style(     ‘my-bootstrap-extension’, // نام منحصر به فرد     get_template_directory_uri() . ‘/css/my-bootstrap-extension.css’, // آدرس فایل     array( ‘bootstrap-main’ ), // نام فایل یا فایل های وابسته     ‘۱٫۲’, // شماره نسخه     ‘screen’, // نوع استایل ); ?&gt;

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

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

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

۱
&lt;?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?&gt;

نکته مهم این است که پارامتر های این تابع هم مانند تابع 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’ );   ?>

خب دوستان کار این آموزش در این مرحله به پایان رسید در ادامه میپردازیم به توابع اضافی که در این قسمت وجود دارد و شما میتوانید از آن ها استفاده نمائید:
اولین مورد در این زمینه افزودن استایل درون خطی با استفاده از تابع 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' );
 
?>