آموزش ساخت قالب جوملا (مبتدی)

آموزش ساخت قالب جوملا (مبتدی)

نوشین خستو ۲۱ اسفند ۱۳۹۵

ما در این مقاله در نظر داریم نحوه ایجاد یک قالب جوملای بسیار ساده را به شما آموزش دهیم. روشن است برای این کار به یک سری فایل‌ها و کدهای اضافه نیاز دارید اما اصلا نگران نباشید ما در این آموزش تمامی کدهای مورد نیاز را برای شما فراهم کرده‌ایم. شما به راحتی می‌توانید آن‌ها را کپی کنید و بسته به نیاز خود آن‌ها را تغییر دهید.

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

برای ایجاد یک قالب ابتدایی جوملا، در قدم اول شما باید یک پوشه با نامی مناسب برای قالب خود ایجاد کنید، همانند: mynewtemplate

در مرحله بعد با یک ویرایشگر متن دو فایل index.php و templateDetails.xml را ایجاد کنید. بهتر است برای حفظ نظم و ترتیب در قالب، دو پوشه با نام‌های css و images ایجاد کنید و فایل‌های css و تصاویر خود را در آن‌ها قرار دهید. اکنون فایل css خود را (برای مثال template.css) ایجاد کنید و داخل پوشه css خود قرار دهید. درست است شما می‌توانید کدهای css خود را در داخل همان فایل index.php به همرا کدهای html خود قرار دهید اما بسیاری از طراحان وب ترجیح می‌دهند تا فایلی مجزا برای کدهای css خود درنظر بگیرند و با کمک یک تگ link در فایل index.php آن را فراخوانی کنند.
نمای کلی از ساختار فایل‌ها و پوشه‌های ما در این قالب به شکل زیر می‌باشد:

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

آماده سازی فایل templateDetails.xml

اکنون نوبت آماده‌سازی فایل templateDeatails.xml فرا رسیده‌است. این فایل یک فایل بسیار ضروری در قالب شما به حساب می‌آید تا جایی که بدون این فایل، قالب شما در محیط جوملا نمایش داده نخواهدشد. این فایل شامل متا دیتا‌های اصلی قالب شما است که محتویات آن ممکن است متناسب با ورژن جوملا تغییر کند.

برای جوملا با ورژن‌ ۲.۵ و ورژن‌های بالاتر از آن، ساختار زیر را بکار ببرید. فقط به یاد داشته‌باشید که قسمت "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>setrokate</author>
 <authorEmail>info@setrokate.com</authorEmail>
 <authorUrl>http://www.example.com</authorUrl>
<copyright>setrokate 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> شامل تمام پوشه‌هایی است که شما در قالب خود به آن‌ها نیاز دارید مانند پوشه‌های css و images اما چون در حال حاضر نسبت به تعداد و یا حتی نام‌ آن‌ها آگاهی ندارید، کافی است آن‌ها را از این قسمت کپی کنید و بعداً در صورت لزوم پوشه‌های دیگر را به این تگ اضافه کنید. بخش position در این فایل در واقع موقعیت‌های معمولی است که شما در قالب ابتدایی خود به آن‌ها نیاز دارید، بعداً می‌توانید به راحتی موقعیت‌های دیگر خود را به آن‌ها اضافه کنید.

آماده‌سازی فایل index.php

فایل index.php فایل اصلی قالب شما است. اساساً در این قسمت شما با صفحه‌ای همانند صفحه HTML مواجه خواهید بود با این تفاوت که هر جا نیاز به تبادل داده باشد می‌توانید مابین تگ‌های HTML خود، از کدهای PHP استفاده کنید. فایل index.php شما با اضافه کردن یکسری کد مربوط به موقعیت‌های ماژولها و کامپوننت‌ها کامل خواهد شد.
در ادامه ما این کدها را به صورت کاملاً تفکیک شده برای شما توضیح خواهیم داد.

شروع

قالب جوملای شما با کدهای زیر آغاز خواهد شد:

<?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; ?>" >

- خط اول : مانع از شیطنت بعضی افراد جهت دسترسی به کدهای شما و سوء‌استفاده از آن‌ها می‌شود.
- خط دوم : به مرورگر بیان می‌کند سند شما از چه نوعی است. Html یا html5 و یا .... در کدهای بالا از DOCTYPE با ورژن ۵ استفاده شده است. این ورژن در عین سازگاری با ورژن‌های قبلی خود دارای امکانات و ويژگی‌های کاملتری می‌باشد. ممکن است شما در هر پروژه ای تصمیم بگیرید از ورژن‌های متفاوتی استفاده کنید و بهتر است بدانید در جوملای ۳ و ورژن‌های بعدی آن از DOCTYPE با ورژن ۵ استفاده می‌شود.
- خط سوم: در این قسمت مشخص می‌شود از چه زبانی در پروژه استفاده شده‌است.

کدهای بخش Html از دو قسمت head و body تشکیل می‌شود. قسمت head آن شامل اطلاعاتی درباره این سند است و بخش body آن شامل کلیه کدهای کنترلی لایه‌های وب سایت شما می‌باشد.

HEAD

<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>

با کمک خط اول، اطلاعات هدر در این قسمت قرار خواهدگرفت. این اطلاعات می‌تواند شامل عنوان صفحه، اطلاعات متا و ... باشد. در ادامه‌ی این بخش از تگ‌های لینک برای فراخوانی دو فایل‌ css سیستمی یعنی system.css ، general.css و فایل css خودمان یعنی template.css استفاده شده‌است. به مسیرهای فراخوانی دقت کنید و آن‌ها را مطابق با پروژه و نام فولدر‌های خود تغییر دهید.

قسمت body

BODY

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

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

موقعیت‌های ماژولها

اگر دقت کرده‌باشید، در قسمت body از کدهای شما، در قسمت فراخوانی ماژول، name=top قرار گرفته‌است، در واقع با این کار موقعیت top برای ماژول فراخوانی شده‌است و به جوملا اجازه می‌هد ماژول موردنظر را در این قسمت قرار دهد. بخش type=component معرفی بخش component شماست که شامل تمام مقالات و محتوای اصلی قالب شماست و عموما در وسط قالب قرار می‌گیرد.
توجه : شما می‌توانید خط مربوط به ماژول‌ها را درهرقسمتی از بدنه قالب خود قرار دهید اما حتماً توجه داشته باشد که با اضافه کردن این خط حتماً خط مربوط به موقعیت آن را در فایل templateDetails.xml خود قرار دهید.

در پایان:
یک خط و تمام

</html>

تصاویر دلخواه

برای اضافه کردن تصاویر دلخواه، به قالب خود، می‌توانید از دستور زیر استفاده کنید:

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

در دستور بالا متغیر template با توجه به نام قالب شما تغییر خواهد کرد.

Css شخصی

شما می‌توانید فایل‌های css دلخواه خود را با کمک دستور زیر فراخوانی کنید:

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

توجه داشته‌باشد، هر فایلی که به قالب شما اضافه می‌شود حتماً باید در فایل templateDetails.xml فراخوانی شود مگر آنکه زیر مجموعه پوشه‌ای باشد که قبلاً فراخوانی شده‌است.
در نهایت فایل index.php شما بصورت زیر خواهد بود:

<?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/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" />
</body>
</html>

فشرده کردن فایل قالب سایت جهت نصب

قالب خود را نصب کنید و از آن لذت ببرید. برای این‌ کار شما می‌بایست فایل قالب خود را به یکی از فرمت‌های زیر فشرده کنید.
.zip , .tar.gz, .tar.gz2

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

در محیط جوملا در بخش مدیریت قالب‌ها، قالب خود را انتخاب کنید و آن را بعنوان قالب پیش‌فرض جوملا قرار دهید.
در جوملا 2.5 و ورژن‌های بعد از آن: شما ابتدا نیاز دارید تا قالب خود را آپلود و نصب کنید. به این کار معرفی افزونه‌ها گفته می‌شود و می‌توانید از مسیر زیر به آن دسترسی داشته‌باشید:

Extensions -> Manage -> Install

choose file →upload & install

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

دیدگاه ها

Mojtaba

۱۳ مرداد ۱۳۹۷ 12:52:44

سلام. اگه من بخوام ماژول هام توی قالبم دیده بشه باید چه کار کنم و چطوری باید توی چند جای مختلف ازش استفاد کنم؟ مثلا یه ماژول توی هدر سایت و یه ماژول سمت راست. ممنون میشم راهنماییم کنید.
Mojtaba

۳۰ شهریور ۱۳۹۶ 20:45:47

سلام. اگه من بخوام ماژول هام توی قالبم دیده بشه باید چه کار کنم و چطوری باید توی چند جای مختلف ازش استفاد کنم؟ مثلا یه ماژول توی هدر سایت و یه ماژول سمت راست. ممنون میشم راهنماییم کنید.
- نوشین خستو
  
  ۰۱ مهر ۱۳۹۶ 05:35:48
  
  سلام.
  برای تعریف مکان‌های متفاوت برای ماژول‌ در قالب، کافی است در فایل index.php، از قالب، در بخش مورد نظر کد زیر را فراخوانی کنید:
  
  <jdoc:include type="modules" name="position1" />
  
  بخش "name" در کد بالا نامی است که برای آن مکان از سایت در نظر گرفته اید و کافی است برای بکار بردن این کد در قسمت‌های مختلف قالب، برای بخش name نامی متفاوت درنظر بگیرید.
  اکنون به بخش مدیریتی جوملا بروید و از منوی Extensionها گزینه Modules را انتخاب کنید.
  با زدن دکمه New می‌توانید از میان لیست ماژول‌های موجود در وب سایت، ماژول مورد نظر خود را انتخاب کنید. اکنون در بخش تنظیمات ماژول، برای نمایش هر ماژول می‌بایست توجه داشته باشید که:
  ۱- در تب General:
  - وضعیت ماژول در حالت publish(انتشار) باشد.
  - در قسمت position، محل قرار گیری ماژول حتما مشخص شود.(در واقع همان نامی را باید انتخاب کنید که در تکه کد بالا برای ماژول خود درنظر گرفته اید.(در مثال بالا:position1))
  ۲- در تب Menu Assignment، دقت داشته باشید که منوهای موردنظر برای نمایش ماژول حتما تعیین شده باشند.
  و اما برای نمایش ماژولها در مکان‌های مختلف سایت، کافی است با کمک گزینه position در تب General برای ماژول خود تعیین کنید در کدام قسمت از سایت شما قرار گیرد.
  برای آموزش بیشتر می‌توانید بر روی لینک زیر کلیک نمایید.
  آموزش مدیریت ماژول جوملا
سپیده اخلاقی

۱۴ شهریور ۱۳۹۶ 05:15:35

سلام. ممنون برای مطالب آموزشی خوبتون.
لطفا آموزش ساخت قالب حرفه ای جوملا رو هم بزارین.
- کیانوش آسترکی
  
  ۱۴ شهریور ۱۳۹۶ 06:14:20
  
  سلام. خواهش میکنم.
  بزودی آموزش تصویری ساخت قالب جوملا رو سایت خواهیم گذاشت.