آموزش طراحی قالب دروپال 7 :: قسمت چهارم آشنایی با page.tpl.php

آموزش طراحی قالب دروپال را این بار با بررسی فایل page.tpl.php ادامه خواهیم داد.در صورتی که از قسمت های قبل با ما همراه نبودید حتما مقاله های قبلی رو مطالعه کنید. آنچه که وب سایت شما را متمایز خواهد کرد ظاهر آن خواهد بود پس برای داشتن یک قالب دروپالی زیبا ، در این سری از آموزش های طراحی قالب دروپال با ما همراه باشید.

برای شروع من یک قالب رو براتون تو پیوست این مقاله گذاشتم این قالب رو دانلود کنید تا با کمک همدیگه این قالب html رو به دروپال تبدیل کنیم . توی قسمت قبل درباره فایل html.tpl.php صحبت کردیم و گفتیم که این فایل چهارچوب قالب رو برای ما می سازه ، اما فایلی که امروز می خواهیم درباره ی اون صحبت کنیم فایل page.tpl.php هست ، این فایل در واقع قسمت body قالب ما رو می سازه یعنی کدهایی که ما در این فایل می نویسیم  در قسمت body موجود در فایل html.tpl.php قرار می گیره.

فایل index.html از قالبی که براتون پیوست کردم رو باز کنید و اسم این فایل رو به page.tpl.php تبدیل کنید بعد این کار شروع می کنیم به تمیزکاری ، خوب همانطور که توی قسمت دوم گفتم ما فایل های css رو به کمک فایل .info به قالب معرفی می کنیم پس نباید css ها در page.tpl.php فراخوانی بشه این قسمت رو پاک کنید یعنی کد های زیر :

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

و این کدها رو در فایل .info اضافه کنید :

stylesheets[all][]=css/reset.css
stylesheets[all][]=css/style.css
stylesheets[all][]=css/layout.css

خوب حالا دروپال می تونه فایل های css این قالب رو پیدا کنه و ان رو در قالب فراخوانی کنه ، حالا به سراغ title می ریم ، همانطور که می دونید title سایت در فایل html.tpl.php فراخوانی شده پس ما این قسمت رو هم پاک می کنیم یعنی بخش زیر رو :

<title>مرکز دروپال ایران</title>
<meta charset="utf-8">

البته من meta رو هم پاک کردم ، برای اضافه کردن متاتگ هم می تونید از افزونه های دروپال استفاده کنید.

حالا باید فایل ها جاوا اسکریپت یا جی کوئری رو هم در فایل info. فراخوانی کنیم بعد این کار دیگه می تونیم کل قسمت head رو از فایل page.tpl.php خودمون پاک کنیم.

خوب به نظرتون وجود دو تگ html و body ضروریه؟

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

حالا شما باید عکس ها ، css ها و js هارو هم به قالب خودتون اضافه کنید.ور در فایل page.tpl.php موقتا هرجایی که عکس تعریف شده این کد رو قرار بدید تا عکس هایی که در قالب تعریف شده اند هم به درستی در صفحه نمایش داده بشه .

<?php echo $base_path . $directory; ?>

یعنی به این صورت :

<img class="img-border" src="<?php echo $base_path . $directory; ?>/images/banner-1.jpg>

خوب حالا می تونید قالب خودتون رو نصب کنید البته کار ما به پایان نرسیده در قسمت بعدی نحوه اضافه کردن ناحیه و همین طور نحوه اضافه کردن لوگو و منوها رو بررسی می کنیم.

امیدوارم از این مقاله استفاده کرده باشید.

 

پیوست :

index.zip

drupalcenter.zip

admin
جواد اصغری هستم مدیر سایت مرکز دروپال ایران ، یک طراح که از سال 89 با دروپال کار می کنم به گرافیک علاقه خاصی دارم و سعی می کنم کارهام در این چهارچوب قرار بگیرن
تصویر Anonymous
Anonymous (تایید نشده)
پ., 07/23/2015 - 07:46

سلام دوست عزیز با تشکر از آموزش های خوبتون
قسمت های بعدی رو کجا می تونم پیدا کنم


مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing