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

در این مقاله مراحل ایجاد یک قالب برای سیستم مدیریت محتوای دروپال را به ترتیب مرور خواهیم کرد
فرض بر این است که خواننده با اصول طراحی سایت مانند html، css و جاوااسکریپت آشنایی قبلی دارد و تنها مواردی که به drupal مرتبط می‌شود در این مقاله مورد بحث خواهند بود.

گام نخست ایجاد یک شاخه در مسیر sites/all/themes است. چنانچه بخواهید این قالب تنها در یک سایت قابل دسترس باشد از مسیر sites/YOUR-SITE/themes استفاده کنید.
به عنوان یک پیشنهاد، بهتر است شاخه‌هایی برای نگهداری فایل‌های شیوه‌نامه، تصاویر و اسکریپت‌ها ایجاد کنید تا دسترسی و یافتن این فایل‌ها آسان‌تر شوند.
گام بعدی ایجاد یک فایل متنی با پسوند info است. نام این فایل باید مشابه نام شاخه‌ای باشد که برای قالب جدید انتخاب کرده‌اید. این فایل حاوی تنظیمات مربوط به قالب جدید است که دروپال از آن برای موارد مختلفی استفاده می‌کند.
یک نمونه از فایل تنظیمات info را در ادامه مشاهده می‌کنید

name = AMIB Drupal Theme
description = Custom theme for my site
core = 7.x
engine = phptemplate
 
regions[header] = Header
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer
 
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
 
features[] = name
features[] = main_menu

در بخش regions می‌توانید محل‌های درج محتوا در قالب را مشخص کنید. وجود یک ناحیه به نام content در هر قالب اجباری است. بهتر است از نام‌های استاندارد دروپال ( sidebar_first و sidebarـsecond ) برای ستون‌های کناری استفاده کنید. زیرا انتخاب این نام‌ها سبب می‌شود که دروپال به صورت خودکار کلاس‌هایی به عنصر body شما بدهد که در طراحی قالب می‌تواند مفید باشند.
بخش features مشخص می‌کند که پس از نصب قالب کدام‌یک از تنظیمات دروپال مربوط به قالب در دسترس خواهد بود. این قابلیت‌ها را می‌توانید یک به یک در این بخش درج کنید و چنانچه می‌خواهید تمام قابلیت‌ها موجود باشند، کافی است از درج featuers به صورت کامل خودداری کنید.
برای کسب اطلاعات بیشتر در مورد بخش‌های قابل درج در این قسمت این مطلب را مشاهده کنید

فایل‌های قالب دروپال

فایل‌های قالب دروپال با پسوند tpl.php ذخیره می‌شوند. این فایل‌ها محتوی کدهای html برای نمایش سایت شما هستند.
قالب‌های tpl به صورت پیش‌فرض به برخی متغیرها که توسط دروپال مقداردهی شده‌اند دسترسی دارند. استفاده از این متغیرها می‌تواند در ایجاد یک قالب کارا به شما کمک کنند.
ایجاد هیچ یک از فایل‌های قالب در دروپال الزامی نیست. تنها ایجاد یک css شیوه‌نامه برای تغییر ظاهر می‌تواند تنها کار مورد نیاز برای ایجاد یک قالب جدید باشد. تمام ماژول‌ها و بلاک‌ها در دروپال حاوی قالب‌بندی‌های پیش‌فرض هستند و تنها در صورتی که بخواهید این شیوه‌ی نمایش را تغییر دهید، کافی است یک فایل جدید برای این کار کدنویسی کنید.

برای ایجاد یک قالب جدید برای یک ماژول یا یک بلاک کافی است فایلی که در شاخه‌ی اصلی وجود دارد را به شاخه‌ی قالب خود در زیرشاخه‌ی templates منتقل کنید و آن را ویرایش کنید. ممکن است یافتن فایل مورد نظر در برخی موارد دشوار باشد. برای حل این مشکل می‌توانید از افزونه‌ی Theme Developer استفاده کنید.
مهم‌ترین فایلی که ممکن است بخواهید آن را تغییر دهید، page.tpl.php نام دارد. این فایل محتوای اصلی صفحه‌ی دروپال است که در ماژول system واقع شده است. یک فایل سراسری دیگر، فایل html.tpl.php است که حاوی تمامی کدهای موجود در خروجی سایت شماست. کدهای html، head و body در این فایل قرار گرفته‌اند. مگر در موارد خاص نیازی به تغییر این فایل نیز وجود ندارد.

ایجاد فایل خام page.tpl.php

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

<div id="header">
</div>
 
<div id="wrapper">
 
	<div id="content">
	</div>
 
	<div id="sidebar">
	</div>
 
</div>
 
<div id="footer">
</div>

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

<?php if ($page['footer']): ?>    
	<?php print render($page['footer']); ?>
<?php endif; ?>

به ازای هر یک از ناحیه‌های موجود در قالب خود، می‌بایست یک قطعه کد مانند کد بالا در بخش مناسب قالب درج کنید.

اضافه کردن متغیرهای مربوط به عناصر اصلی صفحه

بخش‌هایی مانند عنوان سایت، لوگو، عنوان صفحه، منو و ... جزء متغیرهای اصلی صفحه هستند. برخی از این متغیرها را در ادامه مشاهده می‌کنید:

• ‎$site_name
• ‎$logo - لوگو آپلود شده از طریق بخش تنظیمات قالب
• ‎$title - عنوان صفحه
• ‎$main_menu
• ‎$secondary_menu
• ‎$breadcrumbs
• ‎$base_path - مسیر شاخه‌ی اصلی سایت
• ‎$front_page - مسیر صفحه‌ی اصلی سایت
• ‎$directory - مسیر قرارگیری قالب

نوشتن محتوای متغیرها در قالب به شکل زیر انجام می‌شود

<?php print render($tabs); ?>

برای مشاهده‌ی فهرست کامل متغیرهای دروپال اینجا کلیک کنید

ایجاد تصویر قالب

پس از پایان طراحی و راه‌اندازی قالب می‌توانید یک فایل با نام screenshot.png به ابعاد ۹۰×۱۵۰ پیکسل ایجاد کنید و آن را در شاخه‌ی قالب قرار دهید.

هم‌اکنون قالب شما آماده است و می‌توانید از آن استفاده کنید
منبع