آموزش طراحی قالب دروپال 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