ما در این مقاله در نظر داریم نحوه ایجاد یک قالب جوملای بسیار ساده را به شما آموزش دهیم. روشن است برای این کار به یک سری فایل‌ها و کدهای اضافه نیاز دارید اما اصلا نگران نباشید ما در این آموزش تمامی کدهای مورد نیاز را برای شما فراهم کرده‌ایم. شما به راحتی می‌توانید آن‌ها را کپی کنید و بسته به نیاز خود آن‌ها را تغییر دهید.
سلسله مراتب ایجاد یک قالب جوملا
برای ایجاد یک قالب ابتدایی جوملا، در قدم اول شما باید یک پوشه با نامی مناسب برای قالب خود ایجاد کنید، همانند: 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>John Doe</author>
<authorEmail>
[email protected]</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> شامل تمام پوشه‌هایی است که شما در قالب خود به آن‌ها نیاز دارید مانند پوشه‌های 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>
<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 خود قرار دهید.
در پایان:
یک خط و تمام
تصاویر دلخواه
برای اضافه کردن تصاویر دلخواه، به قالب خود، می‌توانید از دستور زیر استفاده کنید:
کد:<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 را بزنید با کمک این ویژگی شما می‌توانید قالب خود را در هر کجا خارج از محیط جوملا ایجاد کنید و سپس آن را به راحتی همانند دیگر افزونه‌ها نصب کنید.
منبع:
طراحی سایت ستروکیت