طراحی قالب برای جوملا ۴ و نسخه های ۳و ۲.۵

جوملا یک سیستم مدیریت محتوای باز متن می باشد که بصورت رایگان در دستر است. این سیستم مدیریت محتوا با php و mysql برنامه نویسی شده است و ماژولار و قالب پذیر می باشد.

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

فایل های قالب

فایل های اصلی قالب به شرح ذیل است:

index.php

component.php

error.php

joomla.asset.json

offline.php

templateDetails.xml

جوملا برای مدیریت ظاهر قالب چند پوشه نیز دارد.

html

images

css

fonts

js

البته برای قالب هایی که ساده به این پوشه ها نیازی نیست اما با گذاشتن این پوشه ها برای زبان فارسی علی الخصوص دست شما باز تر است و میتوانید بهتر کار کنید.

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

فایل templateDetails.xml

این فایل هم محتوای لیست فایل هم نام قالب و هم تنظیمات پیشرفته قالب می باشد.

هر پارامتر این فایل نیاز است.

<name>cassiopeia</name

نام قالب شما

<version>1.0</version>

نسخه قالب

<creationDate>February 2017</creationDate>

تاریخ تولید

<author>Joomla! Project</author>

طراح قالب

<authorEmail>admin@joomla.org</authorEmail>

ایمیل طراح

<copyright>(C) 2017 Open Source Matters, Inc.</copyright>

کپی رایت

<description>TPL_CASSIOPEIA_XML_DESCRIPTION</description>

توضیحات میتونید تایپ کنید میتونید توی فایل زبان ذکر کنید.

<files>

<filename>component.php</filename>

<filename>error.php</filename>

<filename>index.php</filename>

<filename>joomla.asset.json</filename>

<filename>offline.php</filename>

<filename>templateDetails.xml</filename>

<folder>html</folder>

</files>

لیست فایل ها و پوشه ها

اگر بخواهید میتوانید تصاویر و جی اس ها و سی اس اس ها رو منتقل کنید به پوشه مدیا جوملا

<media destination="templates/site/cassiopeia" folder="media">

<folder>js</folder>

<folder>css</folder>

<folder>scss</folder>

<folder>images</folder>

</media>

موقعیت های ماژول های قابل لود

<positions>

<position>topbar</position>

<position>below-top</position>

<position>menu</position>

<position>search</position>

<position>banner</position>

<position>top-a</position>

<position>top-b</position>

<position>main-top</position>

<position>main-bottom</position>

<position>breadcrumbs</position>

<position>sidebar-left</position>

<position>sidebar-right</position>

<position>bottom-a</position>

<position>bottom-b</position>

<position>footer</position>

<position>debug</position>

</positions>

فایل های زبان قالب

<languages folder="language">

<language tag="en-GB">en-GB/tpl_cassiopeia.ini</language>

<language tag="en-GB">en-GB/tpl_cassiopeia.sys.ini</language>

</languages>

تنظیمات قالب بصورت پارامتر ها

<config>

<fields name="params">

<fieldset name="advanced">

<field

name="brand"

type="radio"

label="TPL_CASSIOPEIA_BRAND_LABEL"

default="1"

layout="joomla.form.field.radio.switcher"

filter="boolean"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>

<field

name="logoFile"

type="media"

default=""

label="TPL_CASSIOPEIA_LOGO_LABEL"

showon="brand:1"

/>

<field

name="siteTitle"

type="text"

default=""

label="TPL_CASSIOPEIA_TITLE"

filter="string"

showon="brand:1"

/>

<field

name="siteDescription"

type="text"

default=""

label="TPL_CASSIOPEIA_TAGLINE_LABEL"

description="TPL_CASSIOPEIA_TAGLINE_DESC"

filter="string"

showon="brand:1"

/>

<field

name="useFontScheme"

type="groupedlist"

label="TPL_CASSIOPEIA_FONT_LABEL"

default="0"

>

<option value="0">JNONE</option>

<group label="TPL_CASSIOPEIA_FONT_GROUP_LOCAL">

<option value="media/templates/site/cassiopeia/css/global/fonts-local_roboto.css">Roboto (local)</option>

</group>

<group label="TPL_CASSIOPEIA_FONT_GROUP_WEB">

<option value="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;400;700&amp;display=swap">Fira Sans (web)</option>

<option value="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;400;700&amp;family=Roboto:wght@100;300;400;700&amp;display=swap">Roboto + Noto Sans (web)</option>

</group>

</field>

<field

name="noteFontScheme"

type="note"

description="TPL_CASSIOPEIA_FONT_NOTE_TEXT"

class="alert alert-warning"

/>

<field

name="colorName"

type="filelist"

label="TPL_CASSIOPEIA_COLOR_NAME_LABEL"

default="colors_standard"

fileFilter="^custom.+[^min]\.css$"

exclude="^colors.+"

stripext="true"

hide_none="true"

hide_default="true"

directory="media/templates/site/cassiopeia/css/global/"

validate="options"

>

<option value="colors_standard">TPL_CASSIOPEIA_COLOR_NAME_STANDARD</option>

<option value="colors_alternative">TPL_CASSIOPEIA_COLOR_NAME_ALTERNATIVE</option>

</field>

<field

name="fluidContainer"

type="radio"

layout="joomla.form.field.radio.switcher"

default="0"

label="TPL_CASSIOPEIA_FLUID_LABEL"

>

<option value="0">TPL_CASSIOPEIA_STATIC</option>

<option value="1">TPL_CASSIOPEIA_FLUID</option>

</field>

<field

name="stickyHeader"

type="radio"

label="TPL_CASSIOPEIA_STICKY_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>

<field

name="backTop"

type="radio"

label="TPL_CASSIOPEIA_BACKTOTOP_LABEL"

layout="joomla.form.field.radio.switcher"

default="0"

filter="integer"

>

<option value="0">JNO</option>

<option value="1">JYES</option>

</field>

</fieldset>

</fields>

</config>

در آموزش بعدی سعی می کنم که فایل index.php رو براتون مو شکافی کنیم.