مطالب آموزشی

سفارش طراحی سایت

نمونه کار طراحی سایت

تعرفه و لیست قیمت طراحی سایت



آموزش تبدیل قالب HTML به قالب جوملا
مقالات آموزشی - آموزش طراحی سایت
نوشته شده توسط مدیر   
پنجشنبه, 20 مرداد 1390 ساعت 22:30

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

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

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

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

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

<install version="1.5" type="template">

<name>باید با نام پوشه قالب یکی باشد</name>

<version>1.2.0</version>

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

<author>نام خودتان را وارد کنید</author>

<authorEmail>اینجا ایمیل خودتان را وارد کنید</authorEmail>

<authorUrl>http://www.rpw.ir</authorUrl>

<copyright>CopyRight 2011-2012</copyright>

<license>GNU/GPL version 2</license>

<description>طراحی قالب توسط رویا پرداز وب</description>

<files>

<filename>index.php</filename>

<filename>style.css</filename>

<filename>images/arrow1.gif</filename>

<filename>index.html</filename>

<filename>templateDetails.xml</filename>

</files>

<positions>

<position>breadcrumbs</position>

<position>banner</position>

<position>left</position>

<position>right</position>

<position>top</position>

<position>user1</position>

<position>user2</position>

<position>footer</position>

</positions>

</install>

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

<filename></filename>

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

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

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

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

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

<link rel="stylesheet" href="/css/style.css" type="text/css">

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

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

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

حالا تگ زیر را به جای تگ <title>site title</title> قالب قرار می هیم :

<jdoc:include type="head" />

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

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

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

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

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

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

<?php endif; ?>

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

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

<div id="navigation">

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

</div>

<?php endif; ?>

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

<jdoc:include type="component" />

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

<jdoc:include type="modules" name="search" style="none" />

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

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

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

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

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

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

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

 

آمار سایت

اخبار دنیای طراحی سایت

جدیدترین اخبار دنیای طراحی وب
به روز ترین خبرهای دنیای طراحی وب و اینترنت
  • دانلود نرم افزار ویرایش CSS Skybound Stylizer v5.0
    امروزه CSS یکی از ضروری ترین ابزارهای طراحی وبسایت به شمار می رود و طراحی یک سایت حرفه ای بدون استفاده از کدهای CSS، غیر ممکن است زیرا ویژگی ها و مزایای آن برای طراحان وب کاربردی بوده و همچنین موجب زیبایی بیشتر صفحات وب خواهد شد. Skybound Stylizer یک نرم افزار قدرتمند و بسیار [...]
  • دانلود نرم افزار طراحی صفحات وب Microsoft Expression Web v4.0.1460.0
    نرم افزار Microsoft Expression Web نرم افزاری حرفه ای برای طراحی وب سایت های مدرن و استاندارد با سازگاری کامل با تمامی زبان های XML, ASP.NET, XHTML. و حتی PHP است. طراحی های CSS بسیار زیبا، ارائه ی صفحات XML و … قدرتمند، پشتیبانی خوب از فناوری قدرتمند سرور ASP.Net، مدیریت بهتر محیط نرم افزار، [...]
  • دانلود نرم افزار طراحی قالب سایت Artisteer v4.1
    Artisteer نرم افزاری قدرتمند در زمینه طراحی و ساخت قالب است که به کاربران اجازه ایجاد وب سایت  در عرض چند دقیقه، حتی بدون نیاز به دانستن هر چیزی در مورد ویرایش گرافیکی یا HTML را می دهد. توسط این نرم افزار می توانید به طراحی وب، ویرایش و تبدیل، برش گرافیکی، برنامه نویسی XHTML [...]
  • اولین گوشی با سیستم عامل فایرفاکس
    شرکت Geeksphone از شرکای موزیلا در حوزه گوشی ، پس از انجام آزمایش‌های لازم روی نخستین گوشی هوشمند جهان مجهز به سیستم‌ عامل فایرفاکس در نظر دارد، این محصول را هفته آینده وارد بازار کند. دو گوشی هوشمند ساخت این شرکت که قرار است با  سیستم‌عامل فایرفاکس وارد بازار شوند Keon و Peak نام دارند [...]
  • کم شدن محبوبیت یوتیوب و فیس بوک
    استفاده از فیس بوک در میان جوانان در سال ۲۰۱۳ نسبت به سال قبل از آن ۹ درصد کاهش یافته است. به نظر می رسد سختگیری های والدین در مورد نحوه استفاده فرزندانشان از فیس بوک و همین طور دغدغه های موجود در مورد امنیت این سایت و همین طور عدم توجه به حفظ حریم [...]