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

[دفاعی 872]

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

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]

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

[reza_az 0]

Airborn - Homepage

Login
Search

Admin Panel

Enter name and password

• 
  
• 
  
• 
  
• Login
  Lost your password?
  
  

Lost Password?

Enter your Email

• 
  
• 
  Submit
  
  

• 
  
• Home page
  
  • 
    
  • With blog and about
    
  • Without blog and about
    
  • Blog list
    
  
  
  
• Blog
  
  • 
    
  • Blog / All posts
    
  • Blog / Single post
    
  
  
  
• Portfolio
  
  • 
    
  • Portfolio / All projects
    
  • Portfolio / Single project
    
  
  
  
• Pages
  
  • 
    
  • Home page
    
  • Blog
    
    • 
      
    • Blog / List
      
    • Blog / Single Page
      
    
    
    
  • Portfolio
    
    • 
      
    • Portfolio / List
      
    • Portfolio / Single Page
      
    
    
    
  • Error 404 / Sitemap
    
  • Full width page
    
  • Contact
    
  
  
  
• Contact
  
• Styles
  
  • 
    
  • 960px
    
    • 
      
    • light
      
    • dark
      
    • background
      
    • blue
      
    • green
      
    
    
    
  • 100% width
    
    • 
      
    • light
      
    • dark
      
    • background
      
    • blue
      
    • green
      
    
    
    
  • 2 menu styles
    
    • 
      
    • right
      
    • bottom
      
    
    
    
  
  
  

Facebook
Twitter
RSS

Connect

This is an example of a HTML caption with

Latest Project 1

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 2

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 3

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Airborn is a fresh and modern project for those who want to show their portfolio and who write a blog

Latest from Blog

Tested on IE7, IE8, IE9, Firefox, Opera, Safari

12 Jan 2011
by Apollo13

Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, eget pretium massa. Read more

Made with W3C Standards XHTML / CSS

12 Jan 2011
by Apollo13

Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, eget pretium massa. Read more

Choose your own style out of 11 available

4 Jan 2011
by Apollo13

Aliquam erat volutpat. Nunc dui dolor, iaculis vitae mollis et, laoreet vel nulla. Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, eget pretium massa. Read more

About site

Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae. Read more

Choose your own style

1
2
3
4
5

Newsletter

Sign me in

Connect

Facebook
Twitter
Facebook
FLickr
Linkedin
MySpace
Behance
BLogger

Recent Post

• 
  
• Get Your Golden Ticket to VaultPress! - 25 Jan
  
• State of the Grid 2010 - 12 Jan
  
• Critical WordPress Security Release - 4 Jan
  
• (ve) Updates: Historical Server Status + Upgrade - 1 Jan
  

Templates pages

• 
  
• Home page
  
• Blog - All posts
  
• Blog - Single post
  
• Portfolio - All projects
  
• Portfolio - Single project
  
• Full width
  

Sitemap

• 
  
• Home page
  
• Blog
  
• Portfolio
  
• Sitemap
  
• Error 404
  
• Full width page
  

• 
  
• Contact
  
• Q & A
  

Copyright

Apollo13 Inc.

www.apollo13.eu

Available for purchase on

© 2011 Airborn. Made by Apollo13 and available for purchase on ThemeForest

W3C Standard XHTML / CSS

Top of Page

[شکیبانیا 59]

سلام دوست عزیز

اولا از آقا مرتضی گل بابت این فعالیت مفیدشون ممنونم.

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

ببینید آقا رضا ، شما در کدی که در بالا گذاشتید ، کدهایی که منو رو میسازه، دستی وارد نموده اید.حالا برای این که منوهای جوملا در قالبتون فراخوانی بشه ، کد زیر در قالبتون رو با کدی که من گذاشتم جایگزین کنید :

کد شما:

Home page

With blog and about
Without blog and about
Blog list


Blog

Blog / All posts
Blog / Single post


Portfolio

Portfolio / All projects
Portfolio / Single project


Pages

Home page
Blog

Blog / List
Blog / Single Page


Portfolio

Portfolio / List
Portfolio / Single Page


Error 404 / Sitemap
Full width page
Contact


Contact
Styles

960px

light
dark
background
blue
green


100% width

light
dark
background
blue
green


2 menu styles

right
bottom











Facebook
Twitter
RSS

Connect

کد که باید جایگزین بشه :

Facebook
Twitter
RSS

Connect

حالا فقط کافیه که در موقعیت menu یک ماژول منو قرار دهید.

موفق باشید و سربلند

یا علی

[دفاعی 872]

سلام

داش حمید گل خواهش می کنم شما خودت استادی اجازه ما هم دست شماست

بی تعارف یکی از کاربران با دانش و فعال انجمنی

اما در تکمیل حرف شما و برای اینکه دوستمون بهتر متوجه بشه می گم :

ببین آقا رضا کد زیر رو وقتی میذاری تو قالب

تو سایتت اینجوری نمایش داده میشه

			
صفحه اصلیرزواسیونگالری تصاویرخدماتمناطق دیدنی انزلیتماس با ما

یعنی در واقع این کد بعد از لود شدن در سایت به این کدها تبدیل میشه که لینک هاش تو مدیریت منو برای منوی اصلی تولید میشه

همونطور که می بینی توش هم ul هست و هم li

پس هرجا می خوای به جای منوی قالب html قالب جوملا رو بذاری باید کد ماژول منو رو بین دایو منو قرار بدی و تمام ul و li های خود قالب رو حذف کنی

بازم اگه مشکل داشتی قالب رو بده تا واست درستش کنم

موفق باشی

[reza_az 0]

خیلی ممنون از توضیحات خوبتون...:thankyou:

خوب اگه الان من بخوام کد ()متنو قرار بدم باید کدوم قسمت ها رو تغییر بدم..

[شکیبانیا 59]

سلام

ببینید، من می تونم جواب رو مثل دفعه قبل راحت بگم ، ولی بگذارید خودتون به جواب سوالتون برسید.

شما تویه متن قالبتون ، کدوم قسمت از کد رو برای محتوای سایت در نظر گرفتید؟

می تونید این رو برای من مشخص کنید؟

[reza_az 0]

من زیاد با html اشنا نیستم..من یه فیلم اموزشی که در مورد تبدیل قالب html به جوملا دیدم و این جوری متوجه شدم برای تبدیل یه قسمت مثلا نوشته ها html به جوملا باید از یه کدی استفاده شه..فکر کنم جایگزین میشه..البیته اگه تا اینجا درست گفته باشم..

منظورتونو از محتوا نفهمیدم..ولی من می خوام این استایل html رو دقیقا تبدیل به قالب جوملا کنم..البته با کمک شما...اره می خوام خودم هم یاد بگیرم..:1:

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

link rel="stylesheet" href="templates/<?php echo $this->template ?>

اقا دفاعی هم یه اشاره تو پست بالا داشتین که برای تغییر منو html باید ul و li رو باید حذف کنی..

اگه اشکالی نداره..شما به من بگین که از کجا شروع کنم..که بتونم زود تر این تغییر قالبو یاد بگیرم..

بازم مرسی که اینقدر واسم وقت میذارین..

[شکیبانیا 59]

سلام آقا رضا

راستش بنظر من بهتر شما قبل از شروع به طراحی قالب ، یک سری مطالعات زیربنایی تر داشته باشید.

این خیلی مهمه که شما کد های HTML رو بفهمید و بتونید درکشون بکنیدو

یعنی شما برای این که بتونید در هدفتون خیلی بهتر پیشرفت بکنید ، باید اشراف نسبتا خوبی رویه CSS و HTML و مختصری PHP داشته باشید.

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

موفق باشید و سربلند

یا علی

[reza_az 0]

حالا یه جوری کمک کنید که من بتونم این قالبو تو سایت قرار بدم بد برم سراغ یاد گیری..الان هیچی تو سایت نیست..می فهمید که چی میگم..

[شکیبانیا 59]

Airborn - Homepage

Login
Search

Admin Panel

Enter name and password

• 
  
• 
  
• 
  
• Login
  Lost your password?
  
  

Lost Password?

Enter your Email

• 
  
• 
  Submit
  
  

Facebook
Twitter
RSS

Connect

This is an example of a HTML caption with

Latest Project 1

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 2

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 3

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Airborn is a fresh and modern project for those who want to show their portfolio and who write a blog

About site

Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae. Read more

Choose your own style

1
2
3
4
5

Newsletter

Sign me in

Connect

Facebook
Twitter
Facebook
FLickr
Linkedin
MySpace
Behance
BLogger

Recent Post

• 
  
• Get Your Golden Ticket to VaultPress! - 25 Jan
  
• State of the Grid 2010 - 12 Jan
  
• Critical WordPress Security Release - 4 Jan
  
• (ve) Updates: Historical Server Status + Upgrade - 1 Jan
  

Templates pages

• 
  
• Home page
  
• Blog - All posts
  
• Blog - Single post
  
• Portfolio - All projects
  
• Portfolio - Single project
  
• Full width
  

Sitemap

• 
  
• Home page
  
• Blog
  
• Portfolio
  
• Sitemap
  
• Error 404
  
• Full width page
  

• 
  
• Contact
  
• Q & A
  

Copyright

Apollo13 Inc.

www.apollo13.eu

Available for purchase on

© 2011 Airborn. Made by Apollo13 and available for purchase on ThemeForest

W3C Standard XHTML / CSS

Top of Page

[reza_az 0]

حق با شماست باید یاد بگیرم مرسی از کد..اقا مرتضی یه جورایی دارم بهم کمک می کنه..انشالله درست میشه

من هم الان مقاله اموزش html رو دان کردم..

[reza_az 0]

Airborn - Homepage

Login
Search

Admin Panel

Enter name and password

• 
  
• 
  
• 
  
• Login
  Lost your password?
  
  

Lost Password?

Enter your Email

• 
  
• 
  Submit
  
  

Facebook
Twitter
RSS

Connect

This is an example of a HTML caption with

Latest Project 1

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 2

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Latest Project 3

Dolor sit ametet, consectetur adipiscing elit. Vestibulum ac. Read more

Airborn is a fresh and modern project for those who want to show their portfolio and who write a blog

About site

Nullam ac lorem orci, facilisis scelerisque ipsum. Morbi vel odio nisi, Aliquam erat volutpat. Nunc dui dolor, iaculis vitae. Read more

Choose your own style

1
2
3
4
5

Newsletter

Sign me in

Connect

Facebook
Twitter
Facebook
FLickr
Linkedin
MySpace
Behance
BLogger

Recent Post

• 
  
• Get Your Golden Ticket to VaultPress! - 25 Jan
  
• State of the Grid 2010 - 12 Jan
  
• Critical WordPress Security Release - 4 Jan
  
• (ve) Updates: Historical Server Status + Upgrade - 1 Jan
  

Templates pages

• 
  
• Home page
  
• Blog - All posts
  
• Blog - Single post
  
• Portfolio - All projects
  
• Portfolio - Single project
  
• Full width
  

Sitemap

• 
  
• Home page
  
• Blog
  
• Portfolio
  
• Sitemap
  
• Error 404
  
• Full width page
  

• 
  
• Contact
  
• Q & A
  

Copyright

Apollo13 Inc.

www.apollo13.eu

Available for purchase on

© 2011 Airborn. Made by Apollo13 and available for purchase on ThemeForest

W3C Standard XHTML / CSS

Top of Page

[شکیبانیا 59]

سلام آقا رضا

ببینید، یه بار دیگه صحبت های قبلی من رو مطالعه کنید:

آخه مشکل شما یکی دوتا نیست...

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

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

ولی تا موقعی که خودتون کار رو یاد نگیرید ، برای تک تک گام ها باید این جا پست بزاید.

در این صورت دیگه باید عنوان تایپیک رو عوض کنید و بگذارید "درخواست تبدیل قالب html به قالب جوملا"...

تازه این کار ها که انجام بشه ، شما مشکل جدیدی خواهید داشت برای راست چین کردن قالبتون ، چون این قالب شما چپ چین هست.

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

فکر می کنم بهترین کار ، همون طی کردن مراحل منطقی یادگیری هستش.

موفق باشید و سربلند

یا علی

[دفاعی 872]

سلام ضمن تشکر از دوست خوبم داش حمید گل

باید عرض کنم که آقا رضا من دارم رو قالب کار می کنم

چون قالب سنگینیه یه کم کار می بره منم سرم یه خورده شلوغه

تقریبا 60 درصد کار تموم شده

تبدیلش کردم میذارم تو انجمن

موفق باشی

[mogtabaa 31]

سلام به دوستان

سوال جدید رو تو تاپیک جدید مطرح کنید

بحث تاپیک منحرف شده انصافا

این دیگه وژدانا مقاله نیست :exclamation:

موفق باشید

:thankyou:

[دفاعی 872]

سلام

دوستان این تاپیک دیگه به آخر رسید اینم لینک دانلود قالب

http://forum.joomina.ir/thread-6016.html

موفق باشید

[bofalo 0]

سلام.می خواستم بدونم آیا باید همه کد هارو به داخل index ببریم مثلا style و این های html رو انتقال بدیم ؟یا نیازی نیست ؟

[دفاعی 872]

سلام

متوجه منظورتون نشدم؟

کدوم کدها ؟؟؟

[alireza.076 0]

سلام. ببخشید چند تا سوال داشتم.

1- من قالبی رو با دریم ویور طراحی کردم. ولی توی این پوشه قالب فقط یه فایل index.html هست با همون پوشهی عکس. این فایل css و اینا توش نیشت. چی کار باید بکنم؟

2- منظور از یک نسخه از جوملا (ترجیحا نسخه 1.5.23) چیه؟ باید رو هاست نصب کنم یا روی کامپیوتر شخصی خودم؟

3- فرق notepad با notepad++ چیه؟

4- حالا فایل index.html را با برنامه Notepad ++ باز می کنیم و از منوی language به منوی P و سپس php را انتخاب می کنیم <<< توی notepad من اصلا منوی language رو نمیبینم.

[دفاعی 872]

سلام

1- اگه کدهای سی اس اس داخل فایل اچ تی ام ال هست نیازی نیست کد مربوط به معرفی فایل css رو تو ایندکس بذاری.

2- البته الان که دیگه نسخه 1.5.25 اومده - میتونید رو لوکال هم جوملا رو نصب کنید آموزشش تو انجمن هست کافیه جستجو کنید.

3- notepad++ یه نرام افزار برای ویرایش کد هستش و تو همین انجمن هم برای دانلود معرفی شده اینجا رو بگردید

http://forum.joomina.ir/forum-34.html

4- اول نرم افزار رو بگیرید بعد اون منوها رو هم می تونید ببینید. البته می تونید save as کنید و نوع فرمت فایل رو روی php بگذارید

موفق باشید

[hesooom 0]

آقا یه مشکلی که هست اینه که من position تعریف کردم مثلا برای منو و اوکی هم شده .بعد یه موقعیت دیگه قرار دادم واسه اسلایدر widgetkit .حالا اسلایدر که میاد وقتی روی منو ها میرم زیر منوها میرن زیر این اسلایدر. چه کار باید بکنم. به z-index هم درست نشد.

[مصطفی صفرعلی 2,891]

با سلام

به انجمن تخصصی جوملا (جومینــــــا) خوش آمدید

لطفا قبل از فعالیت ، قوانین بخشهای مختلف انجمن را مطالعه فرمایید

سوال جدید در تاپیک جدید و در بخش مرتبط با سوالتون !

موفق و پیروز باشید

یا حق

:64 (17):