استفاده از tailwindcss در قالب وردپرس

tailwind css and wordpress

در این مقاله یاد می گیریم که  Tailwindcss و WordPress چطور با هم بهترین کارایی را دارند  و چه زمانی باید از هم جدا شوند.

 

CSS در وردپرس

 

یک سایت معمولی وردپرس CSS را از سه منبع بارگیری می کند:

خود وردپرس

پلاگین های فعال

پوسته فعال

این CSS می تواند قسمت قالب  سایت یا ناحیه مدیریت را هدف قرار دهد.

Tailwindcss برای طراحی ظاهر قالب سایت بسیار عالی است.

 

چرا افزونه ها نمی توانند از Tailwind استفاده کنند؟

 

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

 راه پیشنهادی برای استفاده از Tailwind در افزونه این است  که افزونه با قالب ادغام شده باشد و استایل دهی افزونه در css قالب انجام شود.

 

چرا قالب ها نمی توانند از Tailwind در ناحیه مدیریت استفاده کنند؟

 

تا جایی که یک قالب،  CSS سفارشی را برای حوزه مدیریت وردپرس فراهم می کند، بعید است که Tailwind همانطور که انتظار می رود کار کند. تم ها با در نظر گرفتن CSS های موجود در ناحیه مدیریت و با انعکاس ساختار HTML صفحات  موجود، بهتر ارائه می شوند. (و اگر خواستید ظاهر ناحیه مدیریت را سفارشی کنید می توانید از یک افزونه اختصاصی استفاده نمایید.)

 

در مورد ویرایشگر بلوک چطور؟

 

تم های وردپرس می توانند با استفاده از add_theme_support (‘editor-styles’) از ویرایشگر بلوک برای طراحی قالب پشتیبانی کنند و سپس می توانند با استفاده از تابع add_editor_style به یک فایل CSS مناسب اشاره کنند.

 

 قالب اولیه  tw_ برای این  کار به شما کمک می کند و به طور خودکار یک فایل CSS جداگانه سازگار با ویرایشگر بلوک ایجاد می کند.

 

اگر می‌خواهید بدون استفاده از tw_ از Tailwind و WordPress با هم استفاده کنید، لطفاً توجه داشته باشید که الزامات ویرایشگر بلوک برای این فایل ممکن است با CSS قالب که برای سایت خود نوشته‌اید سازگاری نداشته باشد و اگر از Tailwind همراه با Tailwind Typography استفاده می کنید به طور قابل توجهی متفاوت خواهد بود.با این حال، با یک فرآیند ساخت مناسب، می‌توان استایل قالب و ویرایشگر را از فایل‌های منبع یکسان ایجاد کرد که از هر دو مورد استفاده پشتیبانی می‌کنند. با استفاده از tw_ ، نیازی به  راه‌اندازی این فرآیند ساخت نیست.

 

در مورد ویرایش کامل سایت چطور؟

 

قابلیت ویرایش کامل سایت وردپرس بسیار معمول است، اما در حال حاضر ترجمه استایل ها از`theme.json`  در css  قالب در هنگام جفت شدن با Tailwind به خوبی کار نمی کند.

 

تم های ترکیبی با استفاده از فایل `theme.json`   برای ادغام با ویرایشگر بلوک استفاده می کنند ، اما از ویرایش کامل سایت پشتیبانی نمی کنند،  بهترین مسیر برای تم های وردپرس مبتنی بر Tailwind استفاده از قالب اولیه tw_ است که با ویرایش گر بلوک و فایل theme.json سازگاری دارد.

ترجمه از سایت underscoretw.com

 

 

2 دیدگاه دربارهٔ «استفاده از tailwindcss در قالب وردپرس»

  1. سلام وقت بخیر
    ممنون بابت مطلبی که گذاشتین، می خواستم بپرسم ما از تیلویند در وردپرس استفاده نکنیم بهتره؟ و یه سوال دیگه _tw چیه؟

    1. سلام متشکرم، وقت شما هم بخیر

      هدف از انتشار این مطلب این است که بعضی از طراحان وب با توجه به اینکه طراحی را با tailwind انجام میدهند بعد از طراحی قالب هم مایل هستند که از tailwind بعد از وردپرسی کردن قالب هم استفاده نمایند ما پیشنهاد دادیم برای عدم برخورد با مشکلات احتمالی از قالب استارتر underscoretw استفاده نمایند._tw یک قالب استارتر برای درگیر نشدن با مشکلات راه اندازی tailwindcss در وردپرس می باشد.

دیدگاه‌ خود را بنویسید

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