طریقه ایجاد قالب دو ستونی با نسبت 2 به 1

چیدمان تمپلیت پروتواستار (Protostar template) جوملا دارای پیکربندی استاندارد و پیش فرض است. در این چیدمان یک ستون مرکزی برای محتوا وجود دارد و یک ستون در سمت راست و یک ستون سمت چپ آن تعبیه شده است. اگر ماژول ها در پوزیشن 7 و پوزیشن 8 گذاشته شود، نسبت پهنای ستون ها به صورت 3:6:3 خواهد بود. اگر فقط یک ستون کناری دارای ماژول باشد، نسبت ستون ها به صورت 9:3 خواهد بود که همان 3:1 است.

چگونه ستون راست را پهن تر کرده و هرگز از ستون چپ استفاده نکنیم

اگر بخواهیم ستون سمت چپ قالب پروتواستار را بطور کلی حذف کنیم و تنها ستون راست و ستون وسط را حفظ کنیم، در حالی که نسبت آنها 3:1 نباشد، می توانیم فایل ایندکس را ویرایش کنیم تا چیدمان پوزیشن های قالب پروتواستار به صورت تصویر زیر باشد.

اگر بخواهیم ستون سمت چپ قالب پروتواستار را بطور کلی حذف کنیم و تنها ستون راست و ستون وسط را حفظ کنیم، در حالی که نسبت آنها 3:1 نباشد، می توانیم فایل ایندکس را ویرایش کنیم تا چیدمان پوزیشن های قالب پروتواستار به صورت تصویر زیر باشد

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

تغییر چیدمان پوزیشن های تمپلیت پروتواستار را می توان با اندکی ویرایش و تعدیل فایل های index.php و templateDetails.xml در دایرکتوری پروتواستار در پوشه تمپلیت جوملا انجام داد. همیشه قبل از ویرایش فایل اصلی، از آن یک نسخه پشتیبان تهیه کنید.

ابتدا فایل templateDetails.xml را در ویرایشگر متنی باز کرده و خط زیر را حذف کنید:

<position>position-8</position>

بعد از این عمل دیگر position-8 در مدیر ماژول ادمین جوملا وجود نخواهد داشت. اگر از قبل ماژولی به این پوزیشن تخصیص داده باشید، دیگر نمایش نخواهد یافت و بایستی پوزیشن آن را تغییر دهید.

حالا ما پیکربندی Bootstrap 2 span تخصیص یافته به ناحیه محتوای صفحه (content) و ستون کناری (aside#) را ویرایش می کنیم. فایل index.php را در یک ویرایشگر متنی باز کنید.

قطعه کد زیر را در فایل index.php پیدا کرده و محتوای بین <?php..?> را حذف کنید:

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}

حال بجای کد حذف شده، قطعه کد زیر را درج کنید:

// Adjusting content width
if ($this->countModules('position-7'))
{
$span = "span8";
}
else
{
$span = "span12";
}

این کد همانند تخصیص یک ماژول به پوزیشن-7 قالب (position-7) عمل می کند، ناحیه محتوا اندکی باریکتر می شود و 12/8 فضا را اشغال می کند که برابر دو سوم صفحه است.

همچنین بایستی در فایل index.php کلاس span پوزیشن-7 را از span3 به span4 تغییر دهیم. این بدین معنی است که اگر پوزیشن-7 به ماژول خاصی تخصیص داده شود، این مازول 4 قسمت از 12 قسمت صفحه یا یک سوم آن را اشغال می کند. در قالب پروتواستار جوملا پوزیشن-7 در <"div id="aside> قرار می گیرد.

خط کد زیر را در فایل index.php پیدا کنید:

<div id="aside" class="span3">

آن را با خط کد زیر تعویض کنید:

<div id="aside" class="span4">

از آنجایی که ما از کلاس های span استفاده کرده ایم که از قبل ریسپانسیو می باشند، این چیدمان در صورت باریک شدن صفحه نمایش نیز درست کار خواهد کرد. ماژول های موجود در پوزیشن-7 زیر ناحیه محتوا در نمایشگر باریکتر قرار خواهند گرفت.

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

زمانی که جوملا به روز رسانی می شود، فایل های index.php و templateDetails.xml رونویسی می شوند و تغییراتی که در این ویرایش ایجاد شده است، از بین می روند.

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

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

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