مقالات طراحی سایت

ساختار فولدر تمپلیت جوملا

برای ایجاد یک تمپلیت پایه، یک فولدر تازه در فولدر تمپلیت ایجاد کنید. نام این فولدر را هم نام با تمپلیت خود ایجاد کنید مثلا mynewtemplate.

از ادیتور دلخواه خود استفاده کنید (مثلا ادیتور دلخواه من NotePad++ است) و فایل های index.php و templateDetails.xml را ایجاد کنید. برای مرتب کردن فایل ها فولدرهای جدیدی با نام های images و css ایجاد کنید. داخل فولدر css فایلی با نام template.css ایجاد کنید.

هرچند میشود همه کدهای CSS خود را مستقیما در index.php بنویسید، خیلی از توسعه گرها ترجیح میدهند که کدهای CSS خود را در فایلی جدا بنویسند تا بتوانند در صفحات جداگانه با لینک و از طریق تگ link به آن دسترسی پیدا کنند. این امر باعث کاهش زمان لود صفحه میشود، از آنجایی که فایل های جدا میتوانند کش شوند.

ساختار فولدر بصورت زیر است:

    mynewtemplate/
        css/
            template.css
    images/
    index.php
    templateDetails.xml 

ایجاد فایل templateDetails.xml

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

سینتکس فایل برای هر نسخه از جوملا متفاوت است.

برای جوملای 1.5 بصورت زیر است:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
        <name>mynewtemplate</name>
        <creationDate>2008-05-01</creationDate>
        <author>John Doe</author>
        <authorEmail>john @ example.com</authorEmail>
        <authorUrl>http://www.example.com</authorUrl>
        <copyright>John Doe 2008</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>My New Template</description>
        <files>
                <filename>index.php</filename>
                <filename>templateDetails.xml</filename>
                <folder>images</folder>
                <folder>css</folder>
        </files>
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</install>

برای جوملای 2.5 و بعد از آن از این نسخه استفاده کنید. version="2.5" را به ورژن جوملای نصب شده خود تغییر دهید.

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
        <name>mynewtemplate</name>
        <creationDate>2008-05-01</creationDate>
        <author>John Doe</author>
        <authorEmail>john @ example.com</authorEmail>
        <authorUrl>http://www.example.com</authorUrl>
        <copyright>John Doe 2008</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>My New Template</description>
        <files>
                <filename>index.php</filename>
                <filename>templateDetails.xml</filename>
                <folder>images</folder>
                <folder>css</folder>
        </files>
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
                <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</extension>

بنابراین، همانطور که میبینید، ما اطلاعاتی بین تگ های نشانه گذاری شده داریم. بهترین شیوه کات و پیست کردن آنها در templateDetails.xml و تغییر دادن بیتها میباشد (مانند name و author).

بخش file باید شامل همه فایلهایی که استفاده شده است باشد – احتمالا نمیدانید چه چیزهایی صدا زده شده اند – نگران نباشید، بعدا آنرا آپدیت خواهیم کرد. المان folder میتواند برای تعریف کردن کل فولدرها استفاده شود.

جایگاه ها یا همان پوزیشن ها را همانطور که هستند بگذارید بمانند – اینها تنظیمات عمومی هستند، بنابراین میتوانید از آنها در یک تمپلیت استاندارد استفاده کنید.

ایجاد فایل index.php پایه

فایل index.php هسته اصلی هر صفحه در جوملا است. اصولا، شما یک صفحه ایجاد میکنید (مانند هر صفحه HTML) اما کدهای PHP را جایی که محتوای سایت قرار است بیاید میگذارید. تمپلیت با اضافه کردن کدهای جوملا در جایگاه های ماژول و بخش های کامپوننت ها در تمپلیت کار میکند. هر چیزی که به تمپلیت جوملا اضافه شده است در همه صفحات نمایش داده خواهد شد مگر آنکه به یکی از این بخش ها از طریق CMS جوملا اضافه شده باشد.

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

شروع تمپلیت

تمپلیت جوملا با خطوط زیر شروع میشود:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

خط اول مانع میشود تا افراد فضول بتوانند کد شما را ببینند و به سایت شما آسیب برساند.

خط دوم DOCTYPE است، که به مرورگر (و خزنده وب) میگوید که از چه نسخه HTML استفاده میکند. Doctype که در بالا استفاده شده است برای HTML5 است، نسخه تازه تر HTML که با نسخه های قبلی HTML سازگار است، اما شمال فیچرهای تازه تر نیز هست. باید آگاه باشید که این فیچرهای تازه در اینترنت اکسپلورر 8 و نسخه های قبل تر از آن بدون هک کار نمیکنند. شاید بخواهید درباره این موضوع و تمایل کاربران خود قبل از تعیین doctype تحقیق کنید. هرچند این doctype در جوملا 3 به بعد استفاده شده است.

خط سوم HTML ما شروع میشود و میگوید چه زبانی در وب سایت ما استفاده میشود. سند اچ تی ام ال به دو بخش تقسیم میشود، head و body. head شامل اطلاعاتی درباره سند و body شامل کدهای وب سایت است که چهارچوب یا همان لی اوت را کنترل میکند.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

خط اول باعث میشود تا جوملا اطلاعات header درستی در آن قرار دهد. این شامل عنوان صفحه، اطلاعات meta و همچنین سیستم جاوا اسکریپت میباشد. باقی دیگه لینکهایی به دو سیستم استایل شیت سیستم و استایل شیت ما ایجاد میکند (اگر نام آن template.css باشد و در پوشه css در فولدر template قرار داشته باشد. بنابراین اگر تمپلیت شما در http://www.mysite.com/templates/my_template/ قرار داشته باشد، فایل css در http://www.mysite.com/templates/my_template/css/ قرار خواهد داشت.

بخش body

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

جالب است که بدانید همین کافی خواهد بود! بله این لی اوت پایه است، اما کار را راه می اندازد. همه چیز دیگر با جوملا انجام خواهد شد! این خطوط، که معمولا به آن jdoc statement گفته میشود، به جوملا میگویند تا خروجی را از بخش خاصی از سیستم جوملا بگیرد. توجه داشته باشید که باید مطمئن شوید منو شما تنظیم شده است تا به جایگاه ماژول "بالا" تنظیم شده است.

جایگاه های ماژول

در بالا، خطی که میگوید name="top" جایگاه ماژولی با نام بالا اضافه میکند و به جوملا این اجازه را میدهد تا ماژولهایی در این بخش از تمپلیت قرار دهد. خط type="component" شامل همه مقالات و محتوای اصلی است و خیلی مهم است. این خط در مرکز تمپلیت قرار میگیرد.

توجه کنید که میتوانید خطوط ماژول را هرجایی که میخواهید در body اضافه کنید، اما باید خط متناظر با آن را در فایل templateDetails.xml اضافه کنید که در پهلو index.php تمپلیت شما قرار میگیرد.

پایان

با این بیت تمپلیت را تمام خواهید کرد

</html>

تصاویر سفارشی

اگر میخواهید تصویری به تمپلیت خود اضافه کنید میتوانید از شیوه زیر استفاده کنید:

<img src="/<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" class="customImage" />

دراینجا متغیر baseurl با مسیر تمپلیت شما پر میشود.

CSS سفارشی

میتوانید css سفارشی را به صورت زیر اضافه کنید

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />

هر فایلی که اضافه میشود باید خطی در templateDetails.xml برای تمپلیت داشته باشد.

فایل نهایی بصورت زیر است:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>

آزمایش تمپلیت

تمپلیت را در Template Manager پیدا کنید و آنرا انتخاب کنید و بر روی Default کلیک کنید تا تمپلیت دیفالت شما شود.

در جوملا 1.5، تمپلیت شما بلافاصله در Template Manager نشان داده میشود، و از طریق Extensions -> Template Manager در دسترس خواهد بود.

در جوملا 2.5 به بالا، شما ابتدا باید به جوملا بگویید که تمپلیت تازه ایجاد کرده اید. این فیچر با نام Discover Extensions شناخته میشود و میشود از طریق Extensions-> Extension Manager -> Discover تمپلیت را در دسترس آورد. بر روی Discover کلیک کنید تا تمپلیت شما معلوم شود، سپس آنرا انتخاب کرده و بر روی Install کلیک کنید تا تمپلیت نصب شود. اکنون تمپلیت شما باید در Template Manager معلوم باشد، و از طریق Extension -> Template Manager در دسترس باشد.

توجه کنید که میتوانید تمپلیت خود را خارج از جوملا ایجاد کنید و آنرا همانند افزونه های دیگر نصب کنید.

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

پکیج کردن تمپلیت برای نصب

یک دیرکتوری با فایل های بی ربط پکیج مناسب برای توزیع نیست.بنابراین گام نهایی ایجاد پکیج است. این آرشیو فشرده شامل ساختار دیرکتوری و همه فایل ها است. پکیج میتواند با فرمت ZIP، فورمت TAR-gzip، یا TAR-bz2 باشد.

اگر تمپلیت شما در دیرکتوری mytemplate/ است پس برای ایجاد پکیج میتوانید به آن دیرکتوری متصل شوید و از دستوری مانند دستورات زیر استفاده کنید:

tar cvvzf ../mytemplate.tar.gz *

zip -a -r ..\mytemplate.zip *.*

نکاتی برای کاربران Mac OS X

برای کسانی که از سیستم های Mac OS X استفاده میکنند: منو "کامپرس" Finder یک پکیج با فرمت زیپ درست میکند، اما با catch. فایل ها را در فورمت AppleDouble ذخیره میکند و به آن یک فایل اضافی با همان نام که با ._ شروع میشود میسازد. بنابراین فایلی با نام ._templateDetails.xml میسازد، که ج.ملا 1.5 بعضی وقتها آنرا اشتباه تفسیر میکند. علامت آن "XML Parsing Error at 1:1. Error 4: Empty document" میباشد. راه حل آن اضافه کردن کامپرس کردن از طریق کامند است، و متغیر محیطی "COPYFILE_DISABLE" را “true” قبل از استفاده از “compress” یا “tar” میکنیم.

برای ست کردن متغیر محیطی در Mac، پنجره ترمینال را باز کنید و بنویسید:

export COPYFILE_DISABLE=true

سپس در همان پنجره ترمینال، دیرکتوری ها را به جایی که فایل های تمپلیت قرار دارد تغییر دهید. برای مثال اگر فایل های تمپلیت شما در فولدری در دیرکتوری شخصی شما با نام myTemplate قرار دارد، باید اینکار را انجام دهید:

cd myTemplate

zip -r myTemplate.zip *

به نقل از: Joomla! Docs