خانه / آموزش وردپرس / آموزش حرفه ای وردپرس / فراخوانی صحیح CSS در قالب وردپرس

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

چطور فایل CSS را بارگذاری کنیم ؟

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

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

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

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

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

و حتی گاهاً فراخوانی جاوا اسکریپت ها و CSS ها به شکل زیر در فایل functions.php :

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

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

و اینک کلید حل مشکل در دستان وردپرس قرار دارد.

طریقه صحیح فراخوان css در قالب

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

تابع wp_register_style

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

$handle: ( رشته ای – لازم ): این مقدار برای فراخوانی در توابع دیگر استفاده و شامل یک نام منحصر به فرد برای استایل شما می باشد

$src: ( رشته ای – لازم ): اینجا آدرس فایل خود را قرار دهید.

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

نمونه ای برای تابع wp_register_style() :

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

html css فایل CSS

فراخوان css در قالب

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

در نظر داشته باشید که پارامتر های این تابع هم مانند تابع  wp_register_style() عمل می کنند .در ادامه نمونه ای از فراخوانی CSS در قالب وردپرس آمده است:

فراخوانی css و جاوا اسکریپت ، آزاد.

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

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

برای اینکار از action ها کمک میگیریم

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

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

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

حال مثال هایی از توابع فوق را ببینید:

 توابع کاربردی وردپرس

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

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

افزودن متا دیتا با استایل: wp_style_add_data()

در اینجا یک فانکشن عالی به نام wp_style_add_data() داریم. این فانکشن به شما اجازه می دهد که متا دیتا به استایل خود اضافه کنید مثلا شامل دستورات شرطی، پشتیبانی از راست چین و ….

این تابع از توابع بسیار مفید و کاربردی در وردپرس است.

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

از تابع wp_style_is() وقتی استفاده میکنیم که اطلاعاتی در مورد فایل فراخوانی شده میخواهیم. برای مثال اطلاعاتی در مورد فایل های فراخوان شده، ثبت شده، یا چاپ شده بخواهیم.

به کد زیر توجه کنید

افزودن استایل درون خطی: wp_add_inline_style()

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

امروز آموختیم که چگونه فایل های خود را فراخوانی کنیم.

درباره مرضیه سلیمانی

موارد جالب

25 اشتباه متداول وردپرسی ها

۲۵ اشتباه متداول وردپرسی ها

همه دچار اشتباه می شوند. به خوبی اسکار وایلد بیان می کند : ” تجربه ...

پاسخ دهید

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