سلام. در این مقاله قرار است به شما نحوه فراخوانی 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’ ), // نام فایل یا فایل های وابسته
    ‘۱٫۲’, // شماره نسخه
    ‘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 و جاوا اسکریپت در هر جای سایت

تا الان ۲ تابع معرفی کردیم که این تابع ها فایل ها را در داخل قالب سایت فراخوان می کنند اما شاید بخواهیم یک سری فایل هم برای پیشخوان و یا هر جای دیگری فراخوان کنیم. برای این کار از 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’ );
?>

بررسی وضعیت فراخوان 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’ );
?>

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

موفق باشید

مدرسه وردپرس منبع ما

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *