/ در آموزش ها, آموزش وردپرس, اشتراک رایگان / توسط
آخرین زمان ویرایش:

بهترین راه برای بارگذاری سی اس اس در وردپرس

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید)

بدون ‘سی اس اس’، انتخاب های محدودی برای نمایش صفحات خود دارید. و بدون وارد کردن ‘CSS’ به روش صحیح، شما قالب کاربر را برای سفارشی کردن بسیار سخت می کنید. در این آموزش یاد خواهیم گرفت که چگونه با روش درست فایل های ‘سی اس اس’ خود را به نوبت در وردپرس قرار دهیم. وردپرس در حال حاضر یکی از بهترین سیستم های مدیریت محتوا (Content Management System) می باشد، و توسط میلیونها کاربر استفاده می شود. به همین دلیل، برای ساخت یک قالب موفق، ما باید به عنوان تک تک کاربرهای وردپرس فکر کنیم و فایل های ‘سی اس اس’ را به درستی بارگزاری کنیم.

راه نادرست برای بارگزاری ‘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

اگر شما قصد بارگذاری ‘CSS’ را دارید، شما در مرحله اول باید توسط تابع ()wp_register_style
ثبت کنید:

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

  • handle$ (رشته، ضروری) یک نام منحصر به فرد برای شیوه نامه خود. توابع دیگر نیز می توانند از نام ‘handle’ که مشخص کرده اید، برای به نوبت قرار دادن فایل استفاده کنند.
  • src$ (رشته، ضروری) اشاره به آدرس شیوه نامه دارد. می توانید از تابع
    ()get_template_directory_uri برای دریافت فایل در دایرکتوری قالب استفاده کنید. از کد نویسی پیچیده استفاده نکنید!
  • deps$ (آرایه، اختیاری) ‘سی اس اس’های وابسته. اگر شیوه نامه شما کار نمی کند، شاید دیگر فایلهای ‘CSS’ بارگذاری نشده است، از این پارامتر برای مشخص کردن نیازمندی ها استفاده کنید.
  • ver$ (رشته، اختیاری) شماره نسخه است. شما می توانید از ورژن قالب خود استفاده کنید یا یک دیگر خود بسازید. اگر نمی خواهید از این پارامتر استفاده کنید، مقدار null را وارد کنید. تابغ به صورت پیشفرض از مقدار false استفاده می کند، که باعث می شود وردپرس شماره نسخه خود را وارد کند.
  • media$ (رشته، اختیاری) CSS media types می باشد، مثل ‘screen’ یا ‘handled’ یا ‘print’. اگر
    نمی دانید از کدام یک استفاده کنید، پس استفاده نکنید، تابع به صورت پیشفرض از ‘all’ استفاده می کند.

در اینجا یک مثال از تابع ()wp_register_style وجود دارد

<?php

// wp_register_style() example
wp_register_style(
‘my-bootstrap-extension’, // handle name
get_template_directory_uri() . ‘/css/my-bootstrap-extension.css’, // the URL of the stylesheet
array( ‘bootstrap-main’ ), // an array of dependent styles
‘۱٫۲’, // version number
‘screen’, // CSS media type
);

?>

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

در نوبت قراردادن فایل های CSS

بعد از ثبت فایل خود، نیاز به نوبت قرار دادن آن برای اجرا در قسمتداریم.

این کار را با تابع ()wp_enqueue_style انجام می دهیم:

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

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

اما همانطور که می دانیم، تابع ()wp_register_style اجباری نیست، در اینجا می توان بگویم که شما می توانید از ()wp_enqueue_style به در روش مختلف استفاده کنید:

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

ما نمی توانیم هر کجا که خواستیم تابع ()wp_enqueue_style در قالبمان استفاده کنیم، ما نیاز به استفاده از “actions”هــا داریم. سه تا “action” باری اهداف مختلف وجود دارد:

  • wp_enqueue_scripts برای بارگذاری ‘سی اس اس’، ‘جاواسکریپت’هــا در وب سایت خود.
  • admin_enqueue_scripts برای بارگذاری ‘سی اس اس’، ‘جاواسکریپت’هــا در صفحهات مربوط به
    مدیریت.
  • login_enqueue_scripts برای بارگذاری ‘سی اس اس’، ‘جاواسکریپت’هــا در صفحه ی ورود به
    سیستم.

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

<?php

// load css into the website’s front-end
function mytheme_enqueue_style() {
wp_enqueue_style( ‘mytheme-style’, get_stylesheet_uri() );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_enqueue_style’ );

// load css into the admin pages
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’ );

// load css into the login page
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’ وجود دارد که می توانند از آنها برای جاپ درون خطی استفاده کنیم، بررسی وضعیت در نوبت قراردادن فایلها، اضافه کردن فایلهای متا (meta) باری شیوه نامه خود و غیر فعال (deregister) کردن شیوه نامه ها.

اضافه کردن سبک درون خطی به صورت پویا

اگر قالب شما قابلیت سفارش سازی را دارد، شما می توانید از تابع ()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’ ); // 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’ );

?>

سریع و راحت. توجه داشته باشید که شما از همان نامی که در قسمت handle$ وارد کرده اید برای سبک درون خطی هم می توانید استفاده کنید.

بررسی کردن حالت در نوبت قرار گرفتن شیوه نامه ها

در برخی موارد می خواهید بدانید که آیا شیوه نامه ثبت شده است، در نوبت قرار گرفته است، چاپ شده است یا در انتظار چاپ است؟ شما می توانید تابع ()wp_style_is این کار را انجام دهید.

<?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() example
function bootstrap_styles() {

if( wp_style_is( ‘bootstrap-main’ ) {

// enqueue the bootstrap theme if bootstrap is already enqueued
wp_enqueue_style( ‘my-custom-bootstrap-theme’, ‘http://url.of/the/custom-theme.css’ );

}

}
add_action( ‘wp_enqueue_scripts’, ‘bootstrap_styles’ );

?>

اضافه کردن داده های Meta در شیوه نامه

در اینجا یک تابع عالی به نام ()wp_style_add_data وجود دارد که به شما اجازه می دهد
اطلاعات meta را وارد کنید، از جمله نظرات (comments) شرطی، پشتیبانی RTL و غیره!

<?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() example
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’ );
/*
* 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’ );

?>

عالی است، نه؟

غیرفعال یا حذف (deregister) فایلها

اگر نیاز به غیر فعال کردن یک شیوه نامه دارید می توانید از تابع ()wp_deregister_style استفاده کنید.

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

?>

هر چند که مورد نیاز نیست، شما باید همیشه ثبت کنید یک فایل دیگر را اگر فایل دیگری را حذف کنید، شاید نا خواسته باعث متوقف شدن اجرا خود شوید.

همچنین تابع ای به نام ()wp_dequeue_style وجود دارد، که همانطور از اسمش معلوم است
شیوه نامه ها را پاک می کند.

تبریک می گویم، شما همین حالا همه چیز درباره اضافه کردن فایل های خود در وردپرس می دانید، امیدوارم که از این آموزش لذت برده باشید. اگر نکته ای یا تجربه ای در این زمینه دارید در قسمت نظرات مطرح کنید و با دوستان خود به اشتراک بگذارید.

نوشته های مشابه

چگونه منوی ناوبری bootstrap را با پوسته وردپرس ادغام کنیم

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

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