طراحی قالب اختصاصی دروپال با Omega - قسمت پنجم

طراحی قالب دروپال با امگا

در قسمت های قبل یاد گرفتیم که چطور یک قالب جدید از امگا بسازیم و فهمیدیم هر بخش چه مفهومی دارد. برای خواندن مقالات قبلی از بخش مقالات مرتبط در سمت راست همین محتوا استفاده کنید. در این قسمت یاد میگیریم که چطور یک ناحیه (region) در قالب امگای دروپال ایجاد کنیم.

برای ایجاد Region یا Zone در قالب امگا ( برای بررسی دوباره مفهوم Zone و  Region به قسمت سوم مراجعه کنید) هیچ روش گرافیکی وجود ندارد (یا لااقل من بلد نیستم) بنابراین شما باید به سراغ کدهای قالبی که ساختید بروید. بزارید خیالتون رو راحت کنم ایجاد کردن یک منطقه جدید در قالب امگا خیلی ساده است.
برای اینکه آموزش را بهتر انجام بدیم بزارید با یک مثال کار رو پیش ببریم. فرض کنید در Section Header در User Zone بخواهید User Bar Third رو درست کنید. در حال حاضر این قسمت به شکل زیر هست.

omega-add-new-region.png

omega-add-new-region.png

برای افزودن region جدید file manager سیستم عامل را باز کنید و به فولدری که قالبی که ساخته اید بروید. این قالب باید در مسیر sites -> all -> themes -> youromegatheme باشد. در اینجا فایلی با نام قالب شما با پسوند info وجود دارد. مثلا اگر نام قالب شما Drupalion باشد فایلی به اسم drupalion.info در اینجا وجود دارد. این فایل را باز کنید. در واقع این فایل تمام تنظیمات قالب شما را ذخیره میکند. شاید بتوان اون رو قلب قالب امگا نام برد. پس مراقب باشید خیلی با قلب کسی بازی نکنید. وقتی فایل را باز میکنید قسمتی را میبینید که لیست تمام region ها اونجا نوشته شده.

نام region خود را به این لیست اضافه کنید. توجه کنید در قسمت سمت چپ نمیتوانید از فاصله و Underline استفاده کنید. من یک region اضافه کردم. آن را اینطور نوشتم.

 

regions[user_third] = 'User Bar Third'

بنابراین لیست regions های من به شکل زیر در خواهد آمد.

omega-add-new-region

اگر در همین فایل پایین تر بیایید. قسمتی را مشاهده میکنید که با settings[alpha_region شروع میشود. از اینجا به بعد به ازای هر region شما 9 پارامتر را مشاهده میکنید. برای user_first شما این خطوط را مشاهده میکنید.

شاید بخواهید بدانید هر کدام از این 9 پارامتر چه مفهومی دارد:
equal_height_container و equal_height_element: مربوط به حالتی است که شما در قالب امگا Equal heights را تیک کرده باشید.

Force: اگر مقدار 1 را انتخاب کنید این region همیشه نمایش داده میشود حتی اگر هیج محتوایی در آن نباشد.

Zone: ناحیه یا zone که این region باید در آن قرار بگیرد را مشخص کنید.

Prefix: مشخص میکنید که چند ستون باید قبل از این region قرا بگیرد.

Columns: تعدا ستونهایی که این region اشغال میکند را مشخص میکنید.

Suffix: تعداد ستونهای خالی که بعد از این region باید قرار بگیرد را مشخص میکنید.

weight: در واقع با تنظیم یک مقدار برای این قسمت مکان این region در بین بقیه region های این zone را مشخص میکنید. region های با وزن کمتر اول قرار میگیرند.

CSS: اگر دوست دارید یک class برای CSS به این region اختصاص دهید ان class را اینجا بنویسید.

حالا که همه پارامترها را یاد گرفتیم بهتره بدانید که حتی اگر هیچ کدام از پارامترها را مقداردهی نکنید هیچ اتفاق بدی نمی افتد. میتوانید بعدا این کار را در تنظیمات قالب از داخل دروپال انجام دهید. اما حداقل zone را پر کنید. برای پر کردن این قسمت باید حتما نام zone را از بالای همین فایل پیدا کنید. zone های موجود اینها هستند.

omega-add-new-region

بنابراین حالا میتوانیم region جدیدی که میخواهیم اضافه کنیم را ایجاد کنیم. پس برای region جدید تمام پارامترها را تکمیل میکنیم. بنابراین برای اینکه ما user_third را داشته باشیم باید مثل شکل زیر عمل کنیم.

omega-add-new-region

حالا میتوانید فایل را ذخیره کنید و به دروپال خودتون برگردید. برای اینکه مشاهده کنید که این region اضافه شده باید کش سایت را پاک کنید. به مسیر admin/config/development/performance بروید و کش سایت را پاک کنید. میتوانید ببینید که این region هم در صفحه اصلی و هم در تنظیمات قالب اضافه شده است.

omega-add-new-region

omega-add-new-region

تبریک میگم شما موفق شدید. میتونید به تنظیمات region برید و اونها رو تغییر بدید. مثلا من تنظیمات رو به شکل زیر تغییر دادم.

omega-add-new-region

و قالب به شکل زیر تغییر کرد.

omega-add-new-region

شما هم میتوانید تغییرات خودتون رو اعمال کنید. و حتی یک zone جدید در قالب خودتون ایجاد کنید

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

تگ های مطلب: 

دسته بندی مطلب: 

دیدگاه‌ها

لطفا نظر بدید

مرسی از اموزش هایی که می ذاری من بالاخره موفق شدم اولین تم خودم رو بر پایه امگا ساختم و اونو رو سایتم هم قراردادم لطفا اونو ببینید و نظر بدید ممنون میشم

مرسی از اموزش هایی که می ذاری

مرسی از اموزش هایی که می ذاری من بالاخره موفق شدم اولین تم خودم رو بر پایه امگا ساختم و اونو رو سایتم هم قراردادم لطفا اونو ببینید و نظر بدید ممنون میشم اسم سایتم یادم رفت blendermania.ir

@#2 سلام. دوست داشتم توی سایت

@#2 سلام. دوست داشتم توی سایت خودتون نظر بزارم اما چون ثبت نام میخواست ترجیح دادم همینجا بگم.نکته مثبت قالب ساده بودنشه. اما برای اینکه کمی مدرن تر به نظر بیاد باید کمی از المان های امروزی تری استفاده کنید. رنگ سایت کمی یکنواخت شده که باعث میشه کاربر خیلی متوجه نکات مهم سایت نشه. روی تعاملی بودن قالب هم به نظرم بیشتر کار بشه بهتره. موفق باشید 

salam dash erfan aziz

عرفان جان سلام مجدد و با تشکر از زحماتت من دیروز کلا با سورس OMEGA ور رفتم به نظرم راه بهتر یاد گیری استفاده یا تحلیل قالب آماده بر پایه امگا هست که یه نمونش OMEGA STARTERKIT که برای کامرس ساختن ولی نفهمیدم چطور برای فیلد خاص CSS بنویسیم تا 2 تا فیلد کنار هم بیفتند نه زیر هم خیلی امتحان کردم باز ممنون

فکر کنم اگه به هردو فیلد

فکر کنم اگه به هردو فیلد float: right بدید کنار هم میوفتن.

comment_body[und][0][value]

comment_body[und][0][value]

comment_body[und][0][value]

comment_body[und][0][value]

نشد که نشد

نشد float margin right chandin model emtehan kardam

D6 to D7 - omeg theme

سلام خسته نباشید من قالب سایتام رو با امگا نسخه دروپال شش طراحی کردم.میخوام ببینم سایت رو به نسخه هفت ارتقا بدم قالب رو چه طور باید آپگرید کنم..ممنون میشم

فکر میکنم راه حلش اینه که شما

فکر میکنم راه حلش اینه که شما یک subtheme از omega7 بگیرید و css هاتون رو توش کپی کنید.

سلام .

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

خوشحالم که به دردتون خورد.

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

نحوه افزودن CSS

سلام من با omega3 یه زیر قالب ساختم ولی داخل css هام خالی و صفحم سفیده هر کدی هم داخل css مینویسم هیچ تاثیری نداره البته با omega tools ساختم چه کنم

سلام

سلام قاعدتا نباید مشکلی باشه. اینکه فایل css خالیه که طبیعی جون خود شما باید css رو بنویسید اما وقتی یک کد css مینویسید باید توی صفحه شما نمایش داده بشه. مثلا از یک کد شبیه زیر استفاده کنید ببینید چه تاثیری میزاره .zone-footer-wrapper, .zone-footer-wrapper a { background-color: #515C7C; color: white; padding: 6px 0; }  

ساخت تم

با سلام و ممنون بابت آموزش خیلی خوبتون. ولی من یه سوال داشتم و این روش چه تفاوتی با داینامیک کردن تم های html داراه و چه مزیتی نسبت به اونا داره؟ من تا الان واسه ساخت یه سایت یه قالب html مناسب با امکانات زیاد و ریسپانسیو رو می گرفتم و بعد از وارد کردن فایلای css و js، region ها رو تعریف می کردم و به تعداد نوع صفحاتی که داشتم layout قالب را در مثلا 4 تا 5 تا فایل درست می کردم. و از نظر سرعت انجام هم خیلی سریع میشد. ولی با خوندن این مقاله به نظرم اومد که این روش اصولی تره. فقط می خوام بدونم این روش چه مزیت هایی داره و ارادات روش اول چیه؟

ساخت تم

با سلام و ممنون بابت آموزش خیلی خوبتون. ولی من یه سوال داشتم و این روش چه تفاوتی با داینامیک کردن تم های html داراه و چه مزیتی نسبت به اونا داره؟ من تا الان واسه ساخت یه سایت یه قالب html مناسب با امکانات زیاد و ریسپانسیو رو می گرفتم و بعد از وارد کردن فایلای css و js، region ها رو تعریف می کردم و به تعداد نوع صفحاتی که داشتم layout قالب را در مثلا 4 تا 5 تا فایل درست می کردم. و از نظر سرعت انجام هم خیلی سریع میشد. ولی با خوندن این مقاله به نظرم اومد که این روش اصولی تره. فقط می خوام بدونم این روش چه مزیت هایی داره و ارادات روش اول چیه؟

درس css

با تشكر از اين درس، منتظر درس css بوديم .. به هر حال، ظاهراً شما اين دروس را از لينك: http://radarearth.com/content/beginning-drupal-7-theming-omega ترجمة زيبا و روان كرديد، كه اگر اشاره مي شد، شايد مي توانستيم كمكي كنيم در ترجمة.

سلام

سلام نه دوست عزیز. من چیزی رو ترجمه نکردم. اما از مطالب سایت های دیگه برای اینکه روند کار رو بررسی کنم استفاده شده. این لینکی که گذاشتید رو فکر کنم از عکس هاش استفاده کردم. الان کاملا یادم نیست. در هر صورت خوشحال میشم که اگر میتونید این سری از مقالات رو ادامه بدید مقالاتتون رو برای ما بفرستید تا به اسم خودتون در سایت منتشر بشه.

دیدگاه جدیدی بگذارید

آخرین ارسال ها

محتواهای محبوب

درباره ما

Author
اینجا دروپال یعنی همه چیز. در مورد دروپال صحبت میکنیم. ماژول هامون رو به اشتراک میزاریم در مورد قالب دروپال ، فروشگاه دروپال، دروپال فارسی و تاریخ شمسی دروپال صحبت میکنیم و هرچیزی که در مورد طراحی سایت با دروپال میدونیم به هم انتقال میدیم. دروپالیون یک سایت شخصی نیست. ما دست همه کسانی که برای پیشرفت دروپال تلاش میکنند رو میفشاریم و با آغوش باز اونها رو در این سایت میپذیریم.

تماس با ما

با ما تماس بگیرید.

logo-samandehi