آموزش تبدیل قالب html به قالب جوملا

[آموزش تبدیل قالب html به قالب جوملا]

برای اینکار به ابزار زیر نیاز داریم:

1- برنامه ویرایشگر Notepad ++

2- یک برنامه ایجاد سرور مجازی مانند WampServer

3- یک نسخه از جوملا (ترجیحا نسخه 1.5.23)

4- یک قالب html

قبل از هر چیز جوملا را روی لوکال هاست نصب می کنیم

ابتدا محتویات قالب html شامل فایل های css و js و تصاویر و فایل index (همان فایل html اصلی قالب) را پوشه قالب های جوملا در مسیر زیر کپی می کنیم :

C:\wamp\www\j15\templates

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

حالا فایل index.html را با برنامه Notepad ++ باز می کنیم و از منوی language به منوی P و سپس php را انتخاب می کنیم. حالا از منوی file روی save as کلیک کنید و فایل را ذخیره کنید. بسیار خوب مرحله اول کار یعنی تولید فایل php

تمام شد.

حالا باید فایل xml نصب قالب جوملا را ایجاد کنیم.در برنامه Notepad++ متون زیر را کپی کنید و با نام templateDetails.xml در مسیری که فایل های قالب قرار دارد ذخیره کنید:

<?xml version="1.0" encoding="utf-8"?>


باید با نام پوشه قالب یکی باشد

1.2.0

اینجا تاریخ ایجاد قالب را وارد کنید مثلا 2011


نام خودتان را وارد کنید


اینجا ایمیل خودتان را وارد کنید

http://www.rpw.ir
CopyRight 2011-2012
GNU/GPL version 2

طراحی قالب توسط رویا پرداز وب


index.php
style.css
images/arrow1.gif
index.html
templateDetails.xml


breadcrumbs
banner
left
right
top
user1
user2
footer

تمامی فایل هایی را که مربوط به قالب هستند و داخل پوشه قالب قرار دارند (شامل های فایل های عکس، جاوا، استایل ، html، php و ....) را باید بین دو تگ

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

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

بسیار خوب بر می گردیم به ویرایش فایل index.php در برنامه Notepad++ . در جوملا نمی توانیم از آدرس دهی مستقیم استفاده کنیم بلکه باید از کد های مخصوص جوملا استفاده نماییم. بنابراین به اول آدرس تمامی فایل های درست بعد از عبارت src=” یاhref=”دعبارت زیر را اضافه می کنیم :

templates/<?php echo $this->template ?>/

به عنوان مثال :

که باید به شکل زیر در بیاید :

به همین ترتیب برای آدرس بقیه فایل ها (css,js,jpg,png,gif,…) این کار را برای آدرس فایل های html و php انجام نمی دهیم.

حالا تگ زیر را به جای تگ

site title

قالب قرار می هیم :

این تگ عنوان سایت را نمایش می دهد.

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

در کد بالا عبارتی که جلوی name نوشته می شود مکان منو را مشخص می کند و باید در بخش ویرایش ماژول مکان ماژول را همین عبارت (در اینجا top) را انتخاب کنیم تا منوی ما در جایی که می خواهیم نمایش داده شود.

برای اینکه وقتی در بخش مدیریت ماژولی را غیر فعال کردیم در قالب هم نشان داده نشود باید تگ های مخصوص ماژول جوملا را بین دو عبارت زیر قرار دهیم:

<?php if($this->countModules('right')) : ?>
<?php endif; ?>

به عنوان مثال :

<?php if($this->countModules('right')) : ?>



<?php endif; ?>

حالا با استفاده از کد زیر می خواهیم مطالبی را که در جوملا نوشته ایم در قالب نمایش دهیم فقط کافیست این کد را جای مناسب و دلخواهتان در قالب قرار دهید :

تا اینجا مهمترین بخش ها را وارد کردیم و اکنون به سایر قسمت ها می پردازیم. از این به بعد همان روالی را که برای وارد کردن منوی اصلی طی کردیم برای بقیه بخش ها نیز اعمال می کنیم. مثلا برای وارد کردن موتور جستجوی سایت کافیست کد زیر را در جای مناسب قرار دهیم :

باز هم توجه کنید که عبارت جلوی name مکان ماژول را که در بخش position ها در فایل xml قالب ایجاد کردیم مشخص می کند و پس از قرار دادن این کد در قالب باید به مدیریت ماژول بروید و در قسمت ویرایش ماژول جستجو مکان آن را همان عبارت جلوی name در اینجا search

برگزینیم.

به همین ترتیب برای سایر ماژول ها مانند آخرین مطالب، حاضرین سایت، آمار سایت و ... هم کد مربوطه را در جایی از قالب که می خواهیم قرار می دهیم و الی آخر ....

دقت کنید که اگر در مدیریت ماژول ها برای چند ماژول یک مکان مثلا top را انتخاب کنید همه در همان جایی در قالب شما نمایش داده می شوند که شما کد زیر را گذاشته اید :

به عنوان نکته پایانی به شما توصیه می کنم که چندین قالب را با این روش تبدیل کنید تا در این کار به یک حرفه ای تبدیل شوید. البته اینکار در قالب های پیچیده کمی مشکل می شود که با تمرین و تحقیق می توانید هر قالبی را به قالب جوملا تبدیل کنید.

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

font]

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

[قالب فارسی شده Model]

با سلام خدمت دوستان گرامیتو این مطلب یک قالب که توسط سایت siteground طراحی شده رو واستون میذارمکه البته فارسیش کردماینم لینک دانلود از سرور جومینا :

http://www.jmdownload.ir/download.php?filename=13056166541.zip

امیدوارم خوشتون بیاد

موفق باشید

*********