login_logo2-4

آموزش تصویری ” تبدیل قالب HTML به جوملا 2.5 ”

بازدید: 123

html-to-joomla-templateمعمولا وقتی برای یک مطلب آموزشی زیاد تیکت (نظرات) ارسال می شود ، فرض را بر این قرار میدهیم که مطلب مورد نظر از نظر کیفی و کمی دارای برتری نسبت به مطالب مشابه بوده و سعی می کنیم ورژن های جدید برنامه یا مطلب فوق را در اسرع وقت آماده و در اختیار کاربران قرار بدهیم .
آموزش تصویری ” تبدیل قالب HTML به جوملا 1.5 “ هم یکی از این مطالب می باشد . امروز می خواهم قالب قبلی که با HTML  طراحی شده بود را تبدیل به یک قالب داینامیک برای سیستم مدیریت محتوا جوملا 2.5 تبدیل کنم .
کاربران زیادی بعد از روی کار آمدن جوملا 2.5 روش تبدیل قالب 1.5 به 2.5 را خواسته بودند که در ادامه آموزش میدهم .
دقت داشته باشید که سوالهای مربوط به سیستم مدیریت محتوا جوملا باید در انجمن های فارسی که بسیار قوی و کارآمدتر هستند پرسیده و در همان بخش پیگیری شوند و در بخش آموزش به آنها جواب داده نمی شود .  سعی کنید قبل از ارسال سوال مطلب آموزشی را به دقت مورد بررسی قرار بدهید .

نکات مهم قبل از شروع آموزش :
1. دوستان عزیز توجه داشته باشید برای طراحی قالب حتما حتما باید با فتوشاپ ، CSS ، HTML آشنایی کامل داشته باشید ، در غیر اینصورت با سوالهای زیادی در حین انجام تمرین روبرو می شوید که پاسخ دادن به آنها ممکن است شما را از ادامه مسیر دلسرد کند  .
2.با یکبار تمرین توقع نداشته باشید که بتوانید یک قالب را تبدیل به یک قالب جوملا کنید . فقط با تمرین تمرین تمرین + پشتکار هست که می توانید به نتیجه برسید .
3. قبل از یادگیری کامل موارد توضیح داده شده ، تیکت ارسال نکنید .
4. در صورتیکه قسمتی را به درستی متوجه نشدید وارد مرحله بعدی نشوید .
مرحله اول تبدیل قالب HTML به قالب جوملا 2.5

1. بسیار خوب . ابتدا جوملا را بر روی لوکال یا هاست نصب کنید . (آموزش تصویری نصب جوملا 2.5)
2. بعد از نصب ، مرورگر موزیلا یا همان فایرفاکس را اجرا کرده و به آدرس های زیر بروید . 2 افزونه وجود دارد که در حین طراحی به آنها احتیاج داریم . بدون این 2 افزونه طراحی کمی مشکل می باشد پس حتما هر دو افزونه را دانلود و نصب کنید .(حتما از مرورگر فایرفاکس استفاده کنید)
روش نصب 2 افزونه مشکل نمی باشد کافیست بر روی کلید Add to Fire fox را زده و کمی صبر کنید تا افزونه نصب شود . بعد از نصب مرورگر ریست شده و از دوباره نمایش داده می شود .

ابتدا دانلود و نصب فایرباگ : کلیک کنید / آموزش برنامه فایرباگ – Firebug
دوم دانلود افزونه Web Developer : کلیک کنید

3. با در نظر گرفتن این موضوع که هر دو افزونه را به درستی نصب کرده اید وارد فایل HTML قالب شده و صفحه index.HTML را به index.php تغییر نام بدهید . دلیل این امر هم این می باشد که قالب جوملا به صورت پیش فرض index.html را لود نمی کند . (دانلود قالب استفاده شده در آموزش )
سعی کنید برای تغییرات در فایل ها یا از نرم افزار Notepad++ یا نرم افزار دریم ویور استفاده کنید .
برای تغییر پسوند فایل کافیست index.HTML را به یکی از دو برنامه ای که نام برده ام باز کرده و هنگام ذخیره پسوند php. را به پایان آن اضافه کنید و فایل را در پوشه مربوطه ذخیره نمائید .
مرحله به مرحله پیش بروید و سعی کنید تا زمانیکه بخشی را بدرستی یاد نگرفته اید به مرحله بعدی نروید

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2.5J-11

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-2

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-3

 

 

مرحله اول : ساخت فایل templateDetails.xml

4. در مرحله بعدی قالب جوملا احتیاج به یک فایل به نام templateDetails.xml دارد . این فایل چیست ؟ templateDetails.xml فایل نصب قالب جوملا می باشد که دارای یک سری تنظیمات بوده که در ادامه به طور کامل آموزش میدهم .
برای ایجاد فایل templateDetails.xml نوت پد را باز کرده و بدون وارد کردن هیچ اطلاعاتی آن را با نام templateDetails.xml در پوشه اصلی قالب ذخیره کنید .

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-4

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-5

 

تفاوت templateDetails.xml قالب جوملا 1.5 با جوملا 2.5 چیست ؟
در قالبهای جوملا 1.5 برای نصب قالب از دستور <install version=”1.5″ type=”template”> در ابتدای فایل مذکور استفاده می شد که در جوملا 2.5 به دستور <extension version=”2.5″ type=”template”> تغییر پیدا کرده است .
حالا باید قسمت های تشکیل دهنده فایل templateDetails.xml را ابتدا توضیح داده و در مرحله بعدی ایجاد کنیم .
5. در بخش اول اطلاعات مربوط به فایل نصبی و ورژن قالب تعیین می شود . برای انجام اینکار از 2 خط کد زیر استفاده می شود .

1
2
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-6

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

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-7

قسمت بعدی در فایل templateDetails.xml تگ File می باشد . این قسمت مربوط به نصاب است ، هر فایل که بین 2 تگ files تایپ شود توسط جوملا به سایت هنگام نصب منتقل می شود. شما می توانید تمام تصاویری که در قالب استفاده کرده اید را در این لیست قرار بدهید .
دقت داشته باشید که اگر نام فایلی را در این قسمت وارد کنید و هنگام نصب قالب وجود نداشته باشد با ارور مواجه می شود .

1
2
3
4
5
6
<files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <folder>images</folder>
    <folder>css</folder>
</files>

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-8

مرحله آخر فایل templateDetails.xml مربوط می شود به موقعیت های قرارگیری عناصر در صفحه مثل راست ، چپ ، بالا ، وسط و … که با تگ </positions> مشخص می شود .

1
2
3
4
5
6
7
8
9
10
11
<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>

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-9

ساختار کلی فایل templateDetails.xml به شکل زیر می باشد که می توانید کدهای زیر را کپی و در فایل خودتان Paste کنید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
        <name>Amozesh Template</name>
        <creationDate>2013-05-12</creationDate>
        <author>Saeed Sobhkhiz</author>
        <copyright>Saeed ASA 2013</copyright>
        <license>GNU/GPL</license>
        <version>1.0.2</version>
        <description>قالب آموزشی سایت</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>

بسیار خوب فایل نصبی قالب آماده شده است . باید قالب را به حالت فشرده در بیاورید و در جوملا نصب کنید . من فایل را Zip کرده و بر روی جوملا 2.5 نصب می کنم تا ببینم نتیجه کارم تا به این مرحله به چه صورت در آمده است .

به تصویر زیر دقت کنید قالب به درستی نصب شده است . کافیست به بخش نمایش سایت برویم و مشاهده کنیم که شکل ظاهری قالب به چه صورتی می باشد .

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-10

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-11

 

تا به این مرحله همه چی درست انجام شده است . نوبت میرسه به فایل اصلی یعنی  Index.php

اگر به هر دلیلی نتوانستید قالب را نصب کنید ، ابتدا یکبار موارد را از دوباره بررسی کرده و اطلاعات داخل فایل index.phpرا پاک کنید و از دوباره تلاش کنید . بدون هیچ اطلاعاتی در داخل فایل index.php قالب را نصب و بعد از نصب اطلاعات را دوباره داخل فایل کپی نمایید .

 
مرحله دوم : ساخت فایل Index.php

6. همانطور که مشاهده می کنید قالب دارای هیچ شکل گرافیکی نمی باشد و فقط متنی که در قالب وجود داشته است نمایش داده می شود . پس باید برویم به سراغ فایل اصلی

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-11

 

شما باید کد زیر را بالای فایل INDEX.PHP بدون هیچ تغییراتی اضافه کنید . کد خط اول برای مسائل امنیتی جوملا ست و برای جلوی گیری از دسترسی غیر مجاز است.

1
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

کد <html xmlns=”http://www.w3.org/1999/xhtml”> خط دوم هم باید به شکل زیر تغییر کند .

1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

به تصویر دقت کنید . بعد از اعمال تغییرات کدهای بالای صفحه باید شبیه عکس زیر باشد . برای بزرگ تر شدن تصویر بر روی آن کلیک راست کرده و گزینه View image را انتخاب کنید  . کدهای نوشته شده مربوط به 3 خط اول فایل index.php می باشد

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-12

 
تنظیمات قسمت تگ Header فایل index.php

7. حالا نوبت میرسه به قسمت هدر . کدهای قسمت هدر قبل از تغییرات به شکل زیر می باشد

1
2
3
4
5
6
7
8
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وب سایت شرکت Halcyonic</title>
<link rel="stylesheet" href="/css/template.css" />
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="/css/ie.css"/>
<![endif]-->
</head>

شما باید بین تگ head هر کدی وجود دارد پاک کنید و کدهای زیر را جابجا نمایید .
در HTML کد عنوان صفحه بین تگ title قرار می گیرد ولی در جوملا چنین چیزی وجود ندارد و کمی متفاوت می باشد .
برای نمایش عنوان وب سایت از دستور <jdoc:include type=”head” /> در اولین خط بین دو تگ head استفاده می کنیم . فقط باید تگ title را پاک کنیم .
دو خط کد بعدی مربوط به فایل CSS ای می باشد که تمام قالب های جوملا از آن استفاده  می کنند.
کد خط بعدی هم لینک به فایل css قالب می باشد که بستگی به تعداد فایل های css دارد

1
2
3
4
5
6
<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>

به تصویر زیر دقت کنید

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-13

 

بعد از وارد کردن این 5 خط کد قالب به شکل زیر در می آید

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-14

کافیست صفحه را یکبار رفرش کنید تا تصاویر بارگذاری شود .

 

مرحله سوم : روش اضافه کردن عکس در فایل Index.php

8. به صورت پیش فرض قالب جوملا 2.5 امکان فراخوانی تصاویر از فایل index.php را ندارد و باید حتما شما بوسیله کدی که در قسمت زیر قرار میدهم ، قبل از تصاویر به آن اضافه کنید .
دقت داشته باشید که باید مسیر را بدرستی وارد کنید در غیر اینصورت تصاویر شما درست لود نمی شود .

کدهای قبلی ما به شکل زیر بوده اند :

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-15

بعد از اضافه کردن کد مورد نظر ، لینک تصاویر شما باید به شکل زیر در بیاید . من بدلیل پشتیبانی نکردن قالب بخش آموزش از کدهای PHP مجبور هستم از تصاویر استفاده کنم

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-16

قالب تقریبا شکل ظاهریش کامل شده است

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-17

سوال : من هر کاری میکنم عکس ها نمایش داده نمی شود ؟ این قسمت یکی از مهمترین بخش های این آموزش می باشد دلیل این موضوع هم این مهم می باشد که اگر فقط یک (.) کم یا زیاد بگذارید ، فایل اصلی نمی توانید با پوشه تصاویر ارتباط برقرار کند . پس هنگام وارد کردن کد به نام پوشه تصاویر ، قرارگیری پوشه قالب ها در هاست یا لوکال دقت ویژه داشته باشید .

 
مرحله چهارم : کدهای مربوط به ماژول های و قسمت متن وسط صفحه

9. در صورتیکه 2 مرحله بالا را به درستی پشت سر گذاشته اید وارد این قسمت شوید ، در غیر اینصورت به مرحله قبل باز گردید و از دوباره با تمرین مستمر به نتیجه برسید .
برای اضافه کردن ماژول ها در موقعیت های مختلف نیاز به کار سختی نیست و مثل همانند آموزش قبل در ورژن 1.5 باید از 3 خط کد استفاده کنیم.
ابتدا برای ماژول ها :
دقت داشته باشید که برای هرقسمتی که قصد دارید یک موقعیت ماژول تعریف کنید ابتدا باید یک نام برای آن در نظر بگیرید که مثلا می شود Logo سپس وارد فایل templateDetails.xml شده و یک پوزیشن به نام موقعیت جدید ایجاد کنید . در غیر اینصورت قالب موقعیت Logo را به شما نمایش نمیدهد . برای تغییرات ظاهری قسمت ها هم که باید از فایل Css استفاده کنیم .

کدی که برای ماژول استفاده می شود به شکل زیر می باشد

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

که دقیقا بین کد مورد نظر در فایل index.php همانند زیر مورد استفاده قرار می گیرد . فقط در قسمت name یک نام برای ماژول تایپ کنید

 

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-18

 

1
<jdoc:include type="modules" name="logo" />

حالا وارد مدیریت سایت جوملا شده و یک ماژول را به این قسمت نسبت بدهید . بر فرض مثال جستجو یا یک تصویر دلخواه .

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-19

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-20

 

حالا موقعیت منو . همانند مرحله قبل و بدون هیچ تغییراتی کد را اضافه میکنم و یک نام برای آن در نظر می گیرم .
لینکهای بین تگ UL را حذف و کد <jdoc:include type=”modules” name=”menu” /> را بین دو تگ تایپ کنید .
وارد فایل templateDetails.xml شده و یک <position>menu</position> به آخر موقعیت ها اضافه کنید .
حالا باید یک ماژول منو را به این قسمت نسبت بدهید . اگر منو ندارید یکی به صورت دستی مثل من ایجاد کنید .

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-21

 

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-22

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-23

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-24

نوبت میرسه به توضیحات زیر لوگو . برای این قسمت هم باز مثل 2 مرحله اول .
ابتدا حذف متن داخل کلاس یا دیویژن (به این نکته دقت داشته باشید که شما باید با توجه به قسمت هایی که در Css تنظیمات انجام داده اید متن را حذف کنید . مثلا متن داخل یک متن با بدون دیویژن یا کلاس ایجاد شده حذف شود زیرا تنظیمات آن قسمت در Css بوسیله کلاس یا Div فراخوانی می شود  . مثل منو قبلی که فقط نام منو ها حذف شود و خود UL باقی ماند )

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-25

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-26

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-27

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-28

حالا باید یک منو html که امکان نوشتن متن در اون وجود دارد را برای این قسمت فعال کنیم .

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-29
اضافه کردن قسمت مطالب صفحه نخست

روش جابجایی متن ، منو و عکس با ماژول را متوجه شدید . شما می توانید در هر موقعیتی که منو فعال کنید . می توانید به جای تصویر منو و به جای متن اسلاید شو قرار بدهید .

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

1
<jdoc:include type="component" />

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-30

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-31

آموزش-تصویری-تبدیل-قالب-HTML-به-جوملا-2JO-32

تنظیمات مربوط به ظاهر و چیدمان متن در این بخش توضیح داده نمی شود و جزو آموزشهای مقدماتی CSS می باشد که کاربر قبل از شروع آموزش باید به طور کامل یاد گرفته باشد .
بقیه ماژول ها هم به همین منوال تبدیل به یک موقعیت می شود و قسمت های بعدی شبیه آموزش تبدیل قالب HTML به قالب جوملا 1.5 می باشد که در بخش قبلی به صورت کامل آموزش داده شده است .

موفق باشید

 

پرسش و پاسخ :
چرا بخش های دیگر مثل فوتر توضیح داده نشد ؟ بدلیل تکراری بودن قسمت های مورد نظر با بخش قبلی . زیرا همه قسمت ها به غیر از بخش های ابتدایی با قالب جوملا 1.5 یکی می باشد که می توانید در این قسمت مشاهده کنید .
آیا امکان اضافه کردن یک قسمت دلخواه در قالب وجود دارد یا خیر ؟ بله وجود دارد . به راحتی می توانید یک دیویژن در فایل index.php اضافه کرده ، سپس کد مربوط به ماژول که آموزش داده شد را در آن قسمت اضافی و سپس وارد فایل css شوید و ابعاد و جایی که قرار است این موقعیت قرار بگیرد را مشخص کنید ، در مرحله آخر هم position مربوطه را به فایل templateDetails.XML اضافه و یک ماژول به موقعیت نسبت بدهید .

روش تغییر ظاهری در عنوان تیتر صفحه نخست را چرا آموزش ندادید ؟ این آموزش مربوط به بخش Css می شود و در ابتدا خدمت بازدید کنندگام محترم عرض کرده بودم که دوستانی می توانند از این آموزش بهره کافی ببرند که آشنای کامل با PHOTOSHOP . CSS . HTML داشته باشند .

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

آسارایان

اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در pinterest
اشتراک گذاری در linkedin

یک پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب مرتبط

فرم ورود کاربر

ابتدا باید وارد حساب کاربری خود شوید