(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید)
بدون ‘سی اس اس’، انتخاب های محدودی برای نمایش صفحات خود دارید. و بدون وارد کردن ‘CSS’ به روش صحیح، شما قالب کاربر را برای سفارشی کردن بسیار سخت می کنید. در این آموزش یاد خواهیم گرفت که چگونه با روش درست فایل های ‘سی اس اس’ خود را به نوبت در وردپرس قرار دهیم. وردپرس در حال حاضر یکی از بهترین سیستم های مدیریت محتوا (Content Management System) می باشد، و توسط میلیونها کاربر استفاده می شود. به همین دلیل، برای ساخت یک قالب موفق، ما باید به عنوان تک تک کاربرهای وردپرس فکر کنیم و فایل های ‘سی اس اس’ را به درستی بارگزاری کنیم.
راه نادرست برای بارگزاری ‘CSS’ در وردپرس
در طول سال ها، وردپرس کدهایش را توسعه داده و بیشتر و بیشتر انعطاف پذیر کرده است، و به نوبت قرار دادن فایلهای ‘سی اس اس’, ‘جاواسکریپت’، یکی از این اهداف بود. ولی با گذشت زمان هنوز هم عادت های بد ما در نوبت قرار دادن فایلها باقی مانده است، ما به قرار دادن کد زیر در فایل ‘header.php’ ادامه می دهیم:
<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>”> |
… یـــــا کد زیر را در فایل ‘functions.php’ وارد می کنیم و فکر می کنیم که این راه بهتر است:
<?php function add_stylesheet_to_head() { 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 ?> |
ثبت شیوه نامه ها به نوعی در وردپرس اختیاری می باشد. اگر شما فکر نمی کنید که شیوه نامه شما توسط پلاگین دیگری یــا در کد دیگری دوباره استفاده شود، شما آزاد هستید که بدون ثبت کردن فایل ها را در نوبت قرار دهید. در ادامه خواهیم دید.
در نوبت قراردادن فایل های 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 // load css into the admin pages // load css into the login page ?> |
برخی از توابع اضافی
تعدادی تابع مفید برای ‘CSS’ وجود دارد که می توانند از آنها برای جاپ درون خطی استفاده کنیم، بررسی وضعیت در نوبت قراردادن فایلها، اضافه کردن فایلهای متا (meta) باری شیوه نامه خود و غیر فعال (deregister) کردن شیوه نامه ها.
اضافه کردن سبک درون خطی به صورت پویا
اگر قالب شما قابلیت سفارش سازی را دارد، شما می توانید از تابع ()wp_add_inline_style یرای سبک درون خطی استفاده کنید:
<?php function mytheme_custom_styles() { ?> |
سریع و راحت. توجه داشته باشید که شما از همان نامی که در قسمت handle$ وارد کرده اید برای سبک درون خطی هم می توانید استفاده کنید.
بررسی کردن حالت در نوبت قرار گرفتن شیوه نامه ها
در برخی موارد می خواهید بدانید که آیا شیوه نامه ثبت شده است، در نوبت قرار گرفته است، چاپ شده است یا در انتظار چاپ است؟ شما می توانید تابع ()wp_style_is این کار را انجام دهید.
<?php /* // wp_style_is() example if( wp_style_is( ‘bootstrap-main’ ) { // enqueue the bootstrap theme if bootstrap is already enqueued } } ?> |
اضافه کردن داده های Meta در شیوه نامه
در اینجا یک تابع عالی به نام ()wp_style_add_data وجود دارد که به شما اجازه می دهد
اطلاعات meta را وارد کنید، از جمله نظرات (comments) شرطی، پشتیبانی RTL و غیره!
<?php /* // wp_style_add_data() example add_action( ‘wp_enqueue_scripts’, ‘mytheme_ie_style’ ); ?> |
عالی است، نه؟
غیرفعال یا حذف (deregister) فایلها
اگر نیاز به غیر فعال کردن یک شیوه نامه دارید می توانید از تابع ()wp_deregister_style استفاده کنید.
<?php function mytheme_load_modified_bootstrap() { add_action( ‘wp_enqueue_scripts’, ‘mytheme_load_modified_bootstrap’ ); ?> |
هر چند که مورد نیاز نیست، شما باید همیشه ثبت کنید یک فایل دیگر را اگر فایل دیگری را حذف کنید، شاید نا خواسته باعث متوقف شدن اجرا خود شوید.
همچنین تابع ای به نام ()wp_dequeue_style وجود دارد، که همانطور از اسمش معلوم است
شیوه نامه ها را پاک می کند.
تبریک می گویم، شما همین حالا همه چیز درباره اضافه کردن فایل های خود در وردپرس می دانید، امیدوارم که از این آموزش لذت برده باشید. اگر نکته ای یا تجربه ای در این زمینه دارید در قسمت نظرات مطرح کنید و با دوستان خود به اشتراک بگذارید.