طراحی پوسته با Underscores

[Ehsaan 1865]

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

(خودمونی نوشتن، سبک من هست و اگه جایی از نوشته رو متوجه نشدید، ببخشید! به خاطر لهجه اصفهانی یا گویش من هست)

قبل از اینکه معرفی کنم که آموزش درمورد چی هست، لازمه بگم که باید حداقل یه مقدار کم درمورد وردپرس و کدنویسی HTML و CSS اطلاعات داشته باشید، اگه مبتدی هستید و تازه میخواید شروع به طراحی کنید، پیشنهاد می‌کنم اول این آموزش کسری جان رو بخونید (حداقل پست اول)

همونطور که می‌دونید ساختار تم‌های وردپرس به صورت تکه‌ای و Partial هست (پارتی نه، پارتیال ). یعنی وردپرس در هر قسمت سعی می‌کنه تا با چسبوندن فایل‌های مختلف به هم، صفحه موردنظر کاربر رو رندر و تحویلش بده.

اگه به فولدر ./wp-content/themes/ یه سری بزنید و داخل یکی از پوشه تم‌هاتون بشید، قطعاً متوجه این موضوع می‌شید که چندین فایل با نام‌های مختلف وجود داره، مثلاً فایل content-index مربوط به محتوای ایندکس و فایل 404 به ارور 404 مربوط میشه.

هم‌چنین فایل functions.php و comments.php کارهای به‌خصوصی انجام میدن که باعث هماهنگی بیشتر پوسته شما با سیستم داخی وردپرس میشه. مثلاً قابلیت‌های مربوط به Customizeکردن در فایل functions.php تعریف میشه یا پیکربندی که برخی از پوسته‌ها (اکثراً تجاری) دارن هم در همین بخش تعریف میشه.

به طور کلی، برای داشتن یه پوسته خوب، باید فایل‌های پارتیال و functions.php تکمیل تکمیل باشن. یکی از موانعی که معمولاً سر راه خیلی از دولوپرها* هست، همین قضیه فایل‌های پارتیال و function هست که البته این قسمت کار، کار آسونی هم نیست.

الحمدالله، توسعه‌دهندگان وردپرس بسی به فکر ما هم بودند و این کار رو برای ما آسون کردند.

معرفی Underscores

شرکت آتوماتیک (توسعه‌دهنده وردپرس)، یه تم‌بیس (Theme Base - متفاوت از Child Theme) به ما ارائه داده که فایل‌های پارتیال فوق‌العاده جزیی، functions.php تکمیل‌شده و یه style.css ریسپانسیو با قابلیت‌های خیلی خوبی داره که باعث میشه طراحی یه پوسته از استارت، بسیار بسیار آسون میشه. همچنین به فکر ما فارسی‌زبان هم بودن و فایل rtl.css آماده و بسیار خوبی داره.

خب خب خب، First Things First. برای دانلود Underscores میتونید به سایت اون برید. در بالای صفحه، قسمتی به نام Generate هست. روی Advanced Options کلیک کنید.

فیلد‌های مربوط رو پر کنید. Theme Name نام پوسته شماست، مثلاً من میزارم Tutorial Theme و در قسمت Theme Slug هم میتونید نامک پوسته‌تون رو وارد کنید که من میزارم tutorial-theme.

بقیه فیلدها رو طبق توضیحاتی که داده تکمیل کنید (چندان مهم نیستن اگه هم وارد نکنید، خودش وارد میکنه )

حالا روی Generate کلیک کنید و پوسته‌تون رو تحویل بگیرید. پوسته رو روی یه وردپرس (ترجیحاً روی لوکال، اگه نمیدونید لوکال چیه، به آموزش کسری توی همین انجمن مراجعه کنید) نصب کنید و بعد هم اونو فعال کنید و سایت زیبایتان را تحویل بگیرید

بله، درنگاه اول بسی در ذوق شما می‌زند، اما خیالتان راحت، تا پایان این آموزش، اونو خوشگلش میکنیم!

خب بعدش؟

ترکیب Underscores با بوت‌استرپ میتونه عالی بشه، اما در این جلسات آموزشی من از Bootstrap به هیچ عنوان استفاده نمیکنم (تکراری، تکراری تکراری).

ولی من، قصد دارم از Simple Grid Framework برای گریدبندی و ریسپانسیو کردن و از خلاقیت خودم برای طراحی UI استفاده کنم.

یه کم با Underscores ور برید، منوها رو ببینید، نگاهی داخل functions.php کنید، تا جلسه بعد!

موفق باشید.