اضافه کردن tailwind CSS به قالب وردپرس

در این مطلب قصد داریم آموزش اضافه کردن Tailwind CSS به قالب وردپرس را آموزش دهیم و نکاتی را جهت بهبود کار طراحی عنوان کنیم. پس با ما همراه باشید.

طراحی قالب وردپرس همیشه یکی از سودآور ترین اقدامات در زمینه طراحی وب بوده. با پیشرفت فناوری های وب و معرفی ابزارهای جدید مانند Bootstrap و Tailwind CSS که به عنوان فریمورک های CSS نیز شناخته می شوند، طراحی قالب وردپرس به سطح دیگری از زیبایی و کارایی وارد شده است. Tailwind CSS به عنوان یک فریمورک بسیار پر طرفدار و خوش ساخت امروزه در پروژه های بسیاری مانند پروژه های لاراول و React استفاده می شود، اما استفاده از این فریمورک در وردپرس ممکن است کمی چالش برانگیز باشد.

Tailwind CSS چیست؟

Tailwind CSS یا Tailwind نسل جدیدتر فریمورک های CSS به شمار می آید که با ارائه استایل ها و المان های زیبا با تکیه بر فناوری های روز در زمینه استایل نویسی انقلابی در طراحی صفحات وب ایجاد کرد. Tailwind علاوه بر حجم بسیار پایین و سرعت بسیار بالایی که در پروژه نهایی دارد، از طراحی زیبا و منحصر به فردی بهره مند است که به سادگی و توسط یک فایل Config قابل ویرایش و شخصی سازی است. علاوه بر این Tailwind به خوبی با انواع فریمورک ها و کتابخانه های توسعه فرانت اند مانند React، Vue و Angular هماهنگ و سازگار است.

Tailwind دنیای جدید از طراحی استایل را برای طراحان ارائه داد، به تبع می توان پکیج ها و کتابخانه های بسیار زیبایی بر پایه Tailwind پیدا کرد که علاوه بر زیبایی، انسجام خاصی به استایل کلی طرح می بخشند. از این موارد می توان به shadcn اشاره کرد.

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

اضافه کردن Tailwind CSS به قالب وردپرس

اگر بخواهیم بدون مقدمه Tailwind را به یک قالب وردپرس اضافه کنیم ممکن است با مشکلاتی روبرو شویم. از تداخل استایل ها گرفته تا عدم کارکرد صحیح دستورات node مربوط به Tailwind. همچنین قالب وردپرس برخلاق تصور بسیاری از طراحان اصلا ساده و پیش پا افتاده نیست و موارد بسیاری باید در طراحی آن لحاظ شود که اعمال آنها به صورت دستی نه آسان است و نه بهینه.

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

Underscores چست؟

Underscores یک قالب خام وردپرس است که توسط تیم اتوماتیک یعنی تیم سازنده وردپرس ارائه شده و به صورت پیش فرض تمام امکانات مورد نیاز یک قالب پیشرفته وردپرس را داراست. از امکان مدیریت فایل های استایل و جاوا اسکریپت گرفته تا مدیریت فهرست ها و تصاویر بندانگشتی و کامنت ها و غیره، همه این موارد به صورت استاندارد در این قالب خام وجود دارد. از مزین های دیگر این قالب می توان به وجود یک تولید کننده فایل zip قالب بر پایه node.js اشاره کرد که کار را برای اعمال تغییرات و بهینه سازی های گسترده روی قالب بسیار ساده می کند.

نصب Tailwind CSSروی قالب وردپرس

برای اضافه کردن tailwind CSS به قالب وردپرس ابتدا یک قالب خام از سایت Underscores دریافت و نصب کنید. سپس پوشه قالب را در VS Code باز کرده و برای افزودن Tailwind CSS به قالب وردپرس از دستورات زیر استفاده کنید:

npm install -D tailwindcss
npx tailwindcss init

پس از نصب Tailwind یک فایل به نام tailwind.config.js در پوشه قالب اضافه می شود. در این فایل محتوایی مانند محتوای زیر مشاهده می کنید:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

برای اینکه Tailwind قالب های وردپرس و فایل های PHP را برای استایل های نوشته شده توسط ما بررسی کند، این فایل را به صورت زیر ویرایش کنید:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './*.php',
    './**/*.php',
    './resources/css/*.css',
    './resources/js/*.js',
    './safelist.txt',
    '!./node_modules',
  ],
  theme: {
    extend: {},
  },
  jit: true,
}

در مرحله بعد به فایل package.json مراجعه کنید و در بخش scripts مقدار watch را به صورت زیر تغییر داده و دستور dev را به scripts اضافه نمایید:

"dev": "tailwindcss -i ./resources/css/style.css -o ./assets/css/app.css --watch",
"watch": "sass sass/ -o ./assets/css/ --source-map true --output-style compressed --indent-type tab --indent-width 1 -w",

یک پوشه به نام resources در روت قالب اضافه کرده و درون آن پوشه دیگری با نام css ایجاد کنید. سپس یک فایل با نام style.css درون پوشه css ایجاد کنید و کدهای زیر را درون آن قرار دهید:

@tailwind base;
@tailwind components;
@tailwind utilities;

حال اضافه کردن Tailwind CSS به قالب وردپرس به اتمام رسیده است. در این مرحله برای استفاده از امکانات Tailwind کافیست در زمان طراحی دستور زیر را وارد کنید تا کلیه المان های استفاده شده در فایل های PHP قالب و همچنین فایل style.css در پوشه resources کامپایل شده و برای پروداکشن آماده شود.

npm run dev

دستور بالا هم دستور tailwind را اجرا می کند و هم دستور watch که یعنی نیازی به وارد کردن مجدد این دستور پس از اعمال هر تغییر نیست و با ذخیره کار، تغییرات اعمال می شوند.

لازمه به ذکر است که فایل استایل کامپایل شده در مسیر زیر قرار می گیرد، اما به راحتی با ویرایش دستور dev قابل تغییر است:

assets/css/app.css

جمع بندی

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