آموزش ساخت قالب برای سیستم مدیریت محتوای قدرتمند e107

جلسه اول : (مقدمات ساخت قالب برای e107 )

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

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

فایل های موجود در بسته یک قالب :

theme.php (ساختار کلی قالب)

style.css (تعریف قلم ها رنگ بندی ها و غیره)

preview.jpg (تصویر نمونه قالب در محیط مدیریت)

پوشه Images (پوشه حاوی تصاویر قالب )

پوشه languages (حاوی فایل های زبان برای رشته های استفاده شده در بدنه قالب )

indrx.htm (فایل ایندکس تهی)

مهمترین کار شما برای ساخت قالب ایجاد 2 فایل اولی هست یعنی theme.php و style.css بقیه
در هنگام ساخت این دو فایل ایجاد خواهند شد.

راهنمای ساخت theme.php :

خط به خط مراحل ایجاد این فایل را توضیح میدهم :

کد:
کد:

<?php /* + ----------------------------------------------------------------------------+ | e107 website system | | copyright | http://site.org | name@site.org | | Released under the terms and conditions of the | GNU General Public License (The GNU Operating System). | | $Source: /cvsroot/e107/e107_0.7/e107_themes/tname/theme.php,v $ | $Revision: 1.17 $ | $Date: yyyy/mm/dd 09:52:21 $ | $Author: Name $ +----------------------------------------------------------------------------+ */
این چند خط به عنوان توضیحات اولیه قالب هست که توسط نویسنده مشخص می شود و مشخصات نویسنده و سایت و آدرس پست الکترونیک آن در این قسمت قرار می گیرد. تگ <?php تنها دستور این قسمت قالب است .

کد:
کد:

// [multilanguage] @include_once(e_THEME."e107v4a/languages/".e_LANGUAGE.".php"); @include_once(e_THEME."e107v4a/languages/Persian.php");
در این 3 خط زبان قالب را تعریف میکنیم خط اول معرف زبان پیش فرض قالب است و خط دوم زبان مورد نظر شما برای قالب که روی فارسی تنظیم شده است .

کد:
کد:

$themename = "نام قالب"; $themeversion = "نسخه قالب"; $themeauthor = "نویسنده قالب"; $themeemail = "آدرس پست الکترونیک نویسنده قالب"; $themewebsite = "وب سایت نویسنده قالب"; $themedate = "تاریخ ایجاد قالب"; $themeinfo = "اطلاعات قالب"; $xhtmlcompliant = TRUE; // اگر لازم نیست این قسمت را حذف کنید $csscompliant = TRUE; //اگر لازم نیست این قسمت را حذف کنید define("IMODE", "lite"); // یا از "dark"استفاده کنید برای نمایش تصاویر تیره در قالب - اگر انتخاب نکنید از تصاویر روشن استفاده می شود . define("THEME_DISCLAIMER", " مشخصات قالب ");
در این قسمت مشخات اصلی قالب را وارد کنید این مشخصات در محیط مدیریت و در فوتر نمایش داده میشود .

در قسمت
کد:
کد:

define("IMODE", "lite");
چون سیستم 2 نوع آیکون پیش فرض روشن و تاریک دارد می توانید در این قسمت با انتخاب lite و dark انتخاب کنید کدام نوع نمایش داده شوند .

کد:
کد:

// [layout] $layout = "_default"; // $admin_logo="1" // یا روی 0 برای عدم نمایش لولگوی مدیریت
قسمت اول باید به همین شکل باشد و قسمت دوم 1 برای فعال بودن لوگو در محیط مدیریت و 0 غیر فعال بودن لوگو در محیط مدیریت

تا اینجا مقدمات اولیه مطرح شد

 

پاسخ : آموزش ساخت قالب برای سیستم مدیریت محتوای قدرتمند e107

[h=2][/h]

جلسه دوم :

عناصر موجود در Page Header :

در Page Header سايت شما عناصر يا قسمت هاي زير مي توانند وجود داشته باشند :

{BANNER} : مكان نمايش تبليغات
{SITENAME} : مكان نمايش نام سايت
{SITETEG} : مكان نمايش توضيحات سايت
{LOGO} : مكان نمايش لوگوي سايت
{CUSTOM=clock} : مكان نمايش ساعت و تاريخ
{CUSTOM=search} : مكان نمايش فيلد جستجو
{MENU=1} : مكان نمايش محيط منوي1
{MENU=2} : مكان نمايش محيط منوي2

مانند شكل فایل پیوست در پایین :




در هر قسمت از Header قالب كه اين عناصر را با اين شكل بنويسيد قسمت مربوط به آن عنصر را در همان جا نمايش داده مي شود.
قسمت Header قالب یکی از مهمترین و شاید مهمترین قسمت برای ساخت قالب هست و طراحان قالب باید توسط زبان HTML با خلاقیت کامل این قسمت را با توجه به الگوی زیر طراحی کنند.
پس نحوه ساخت Header قالب به شكل زير خواهد بود :

در ابتداي Header قالب از عبارت Header$ استفاده مي شود به صورت :

کد:
کد:

$HEADER = " /* Code Here */ ";
كه به جاي Code Here دستورات (html) را كه شامل عناصر بالا هم هستند قرار مي دهيد :

براي مثال :

کد:
کد:

$HEADER .= " <table dir=rtl style='width:100%; background-color:#E4E0E0' cellspacing='3' class='topborder'> <tr> <td style='text-align:right vertical-align:bottom'> {CUSTOM=clock} </td> <td style='text-align:left'> {CUSTOM=search+".THEME_ABS."images/search.png+18+19} </td> </tr> </table> <table dir=rtl style='width:100%;' cellspacing='3' id='header'> <tr> <td colspan='2' style='text-align:right; vertical-align: middle;'> <img src='".THEME_ABS."images/logo.png' alt='' /> [ {SITENAME} ] </td> <td style='text-align:left'> </td> </tr> </table> <table dir=rtl dir=rtl style='width:100%' cellspacing='3'> <td style='width:20%;'></td> <td style='width:60%;'><img src='".THEME_ABS."images/blank.gif' width='1' height='1' alt='' /></td> <td style='width:20%;'></td> </tr> <tr> <td style='width:20%; vertical-align: top;'> {SITELINKS=menu} {MENU=1} </td><td style='width:60%; vertical-align: top;'>";
كه Header قالب شما را تشكيل ميدهد ! ​