جوملا, کامپوننت, کامپوننت نویسی, توسعه جوملا, افزونه نویسی, ماژول, پلاگین, قالب, امنیت, سئو, seo, MVC, جوملا کار, جوملا نویس, مشاوره, طراحی قالب, آموزش, سایت, کامپوننت نویسی جوملا

کامپوننت نویسی جوملا و ماژول نویسی جوملا و پلاگین نویسی جوملا و خدمات جوملا و هاست جوملا

کامپوننت جوملا و ماژول جوملا و پلاگین جوملا و خدمات جوملا و هاست جوملا



آموزش طراحی قالب جوملا

این مورد را ارزیابی کنید
(19 رای‌ها)

برای آموزش مقدماتی طراحی قالب جوملا می توانید به لینک زیر مراجعه نمایید

آموزش مقدماتی طراحی قالب


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

یکی از مزایای جوملا نسبت به سیستم های دیگه اینه که طراحی قالب اون ساده ست. برای طراحی قالب جوملا کافیه یه مقدار HTML و CSS بدونید.

توی قالب های جوملا چندتا فایل هس که هر کدوم رو توضیح میدم:

پوشه ی images : نیاز به توضیح نیست که برشهای تصویری که باید HTML بشه, تو این پوشه قرار داده میشه

فایلindex.php: این فایل اصلی قالبمون هست, اگه دقت کنید قطعه کد <?php echo $this->baseurl?> آدرس مسیر نصب جوملا رو میده, پس کد

 

 <?php echo $this->baseurl ?>/templates/YOUR_TEMP_NAME/css/template_fa.css" type="text/css"


آدرس فایل CSS قالب هست. تو تگ body هم شروع میکنیم به HTML کردن قالب.



تو هر ستون یا دایوی که خواسیم ماژول تعریف کنیم از کد

 

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

  استفاده میکنیم مثلا من میخوام تو قالب یه موقعیت ماژول به نام left درست کنم

 <div><jdoc:include type="modules" name="left" /></div>

برای اینکه توی یه موقعیت ماژول, بتونید چندتا ماژول قرار بدین باید از style استفاده کنید. مثلا توی موقعیت ماژول left لازم دارید دو ماژول login و main menu رو قرار بدین

<div><jdoc:include type="modules" name="left" style="xhtml" /></div>

یا" style="rounded 

تفاوت این دو style در اینه که xhtml ماژول ها رو به صورت پیوسته و در یک ستون نمایش میده و جداکننده ی هر ماژول از ماژول بعدی عنوان اون ماژول. ولی rounded هر ماژول رو تو یه باکس جدا قرار میده

فایل xml هم که مشخصه, یه سری توضیحات در مورد نام قالب, نویسنده ی قالب و اینجور چیزاس. فقط دقت کنید که نام ماژول هایی که تو فایل index.php استفاده کردین رو باید تو تگ position وارد کنید, مثلا left

فایلتون رو zip کنید,آماده ی نصب رو جوملا 2.5 و 3 هست.

چند نکته :

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

<?php if($this->countModules('left')) : ?>
<div><jdoc:include type="modules" name="left" style="rounded" />
</div>
<?php endif; ?>

از کد

 <?php if($_REQUEST['view']=="featured") { ?>

وقتی استفاده میکنیم که بخواهیم ماژول مورد نظر فقط در صفحه ی اول نمایش داده بشه

و در آخر اینکه اگه سایتمون دو زبانه بود کافیه دو تا فایل CSS واسه قالب بسازیم, مثلا template_en.css و template_fa.css , و از قطعه کد زیر تو تگ <head> در فایل index.php استفاده کنیم

<?php if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/YOUR_TEMP_NAME/css/template_fa.css" type="text/css" />
<?php else : ?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/YOUR_TEMP_NAME/css/template_en.css" type="text/css" />
<?php endif; ?>

دقت کنید که باید بسته های زبانی مورد استفاده در سایت (در اینجا بسته ی فارسی) نصب شده باشند

برای تبدیل قالب های جوملا به قالب های مولتی استایل (چند استایله) طبق آموزش زیر انجام بدید:

قدم اول :

کد زیر رو قبل از </extension> انتهای فایل templateDetails.xml قالب قرار میدیم :

<config>
<fields name="params">
<fieldset name="advanced">
<field name="templateColor" type="list" default="template" label="Page colour" description="" filter="word">
<option value="template">Default style</option>
<option value="blue">Blue style</option>
<option value="green">Green style</option>
</field>
</fieldset>
</fields>
</config>

قدم دوم :

کد زیر را ابتدای فایل index.php قالب فراخوانی میکنیم :

<?php $app = JFactory::getApplication();
$templateColor = $this->params->get('templateColor');
?>

نکته : اگه خود فایل index.php کد زیر رو داشت حذفش کنید و کدی که در بالا اوردم رو جایگزینش کنید :

<?php $app = JFactory::getApplication(); ?>

قدم سوم :

بعد از فراخوانی فایل استایل پیش فرض قالب در فایل index.php کد زیر را قرار میدهیم :

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

یعنی به این شکل باشه :

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

قدم چهارم :

حال دو تا فایل استایل درست میکنیم با نام های blue.css و green.css و در پوشه css فایل های قالب میزاریم.

محتویات فایل blue.css رو به طور مثال

body { background: #2859A7; }

و محتویات فایل green.css رو به طور مثال :

 body { background: #409723; }

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

بازدید 12454 بار

8 نظرها

  • پیوند نظر m چهارشنبه, 17 ارديبهشت 1393 ساعت 17:01 ارسال شده توسط m

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

  • پیوند نظر جوم استار دوشنبه, 22 ارديبهشت 1393 ساعت 00:54 ارسال شده توسط جوم استار

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

  • پیوند نظر ams یکشنبه, 30 شهریور 1393 ساعت 09:36 ارسال شده توسط ams

    سلام
    آموزشی خوبی بود اما خیلی خلاصه و سطحی بود

  • پیوند نظر کاربر جمعه, 18 مهر 1393 ساعت 12:38 ارسال شده توسط کاربر

    مثلا من میخوام صفحه مربوط به مطالب رو طراحی کنم. چطوری باید این کار رو بکنم؟

  • پیوند نظر سعید دوشنبه, 05 آبان 1393 ساعت 17:48 ارسال شده توسط سعید

    سلام، برا ساخت منو چیکار باید کرد؟

  • پیوند نظر طراحی سایت یکشنبه, 18 آبان 1393 ساعت 11:59 ارسال شده توسط طراحی سایت

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

  • پیوند نظر mohammad پنج شنبه, 27 آذر 1393 ساعت 14:12 ارسال شده توسط mohammad

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

  • پیوند نظر Mobin دوشنبه, 25 خرداد 1394 ساعت 07:30 ارسال شده توسط Mobin

    دمت تون گرم واقعا به دردم خورد.

نظر دادن

از پر شدن تمامی موارد الزامی ستاره‌دار (*) اطمینان حاصل کنید. کد HTML مجاز نیست.

ورود