روش صحیح فراخوانی css در قالب وردپرس

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

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

روش غلط فراخوانی css در قالب وردپرس

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

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

و یا به شکل زیر در functions.php فراخوان می کنیم:

<? 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 استفاده کند، وردپرس نمی تواند چک کند که آیا این فایل در صفحه فراخوان شده یا خیر. در این صورت با تکرار بودن کدها مواجه خواهید شد

خوشبختانه وردپرس یک راه حل آسان برای این مشکل داره

روش صحیح فراخوانی css در قالب وردپرس

وردپرس دارای توابع مفیدی برای فراخوانی css در قالب دارد که در ادامه معرفی خواهیم کرد.

wp_register_style()

اگر می خواهید فایل های خود را فراخوانی کنید ابتدا باید با استفاده از تابع wp_register_style() آن را ثبت کنید:

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

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

کد زیر یک نمونه برای تابع 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 در قالب وردپرس

بعد از ثبت استایل نوبت به فراخوانی استایل خواهد شد. برای این کار از تابع wp_enqueue_style() استفاده می کنیم.

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

پارامتر های این تابع هم مانند تابع  wp_register_style() عمل می کنند و  نیازی به توضیح مجدد نیست.

کد زیر یک نمونه فراخوان css در قالب وردپرس است:

<?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, // شماره نسخه
    // ...بدون نوع استایل
);
?>

 فراخوانی فایل css و جاوا اسکریپت در هر جای سایت

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

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

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

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

کد زیر شامل 3 مثال برای توابع بالا است:

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

?>

 بررسی وضعیت فراخوان css

در بعضی مواقع ممکن است اطلاعاتی درباره فایل فراخوان شده بخواهیم مثلا فایل ثبت شده چاپ شده فراخوان شده و …. در این حالت از تابع 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()

در اینجا یک فانکشن عالی به نام 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' );

?>

تابع بالا خیلی کاربردی و مفید است

مقاله امروز مدرسه وردپرس در خصوص روش صحیح فراخوانی css در قالب وردپرس به پایان رسید. با این مقاله یاد گرفتیم که چگونه فایل های خود را فراخوان کنیم

موفق باشید