ایجاد دو ستون مساوی – تمپلیت پروتواستار

برای ویرایش قالب پروتواستار (Protostar template) و ایجاد دو ستون مساوی در ناحیه اصلی صفحه، فایل index.php بایستی ویرایش شود. برای رسیدن به این منظور، فایل index.php ویرایش می شود بطوری که کلاس span ناحیه محتوا و ستون راست تغییر کرده و ستون چپ حذف شود. اینکار موجب می شود که ستون های باقیمانده ریسپانسیو بوده و در نمایشگرهای کوچکتر بالای هم دیگر قرار گیرند نه در کنار هم.

ما همچنین پوزیشن ماژول استفاده نشده ای که ستون سوم را ایجاد می کنند، را حذف می کنیم تا بطور تصادفی برای ماژول جدید استفاده نشود و ظاهر و چیدمان سایت به هم بریزد.

در این مقاله مراحل ویرایش تمپلیت مرور می شود، بطوری که ناحیه محتوا در سمت چپ قرار گرفته و ساید بار یا ستون راست <"div id="aside> در سمت راست باشد. هر ستون 50% از پهنای صفحه را در نمایشگرهای پهن اشغال خواهد کرد. بعد از این ویرایش دیگر نمی توانید از پوزیشن-8 پروتواستار استفاده کنید.

در این مقاله مراحل ویرایش تمپلیت مرور می شود، بطوری که ناحیه محتوا در سمت چپ قرار گرفته و ساید بار یا ستون راست <"div id="aside> در سمت راست باشد. هر ستون 50% از پهنای صفحه را در نمایشگرهای پهن اشغال خواهد کرد. بعد از این ویرایش دیگر نمی توانید از پوزیشن-8 پروتواستار استفاده کنید.

ویرایش فایل index.php و فایل templateDetails.xml قالب پروتواستار جوملا

همیشه و قبل از ویرایش فایل های اصلی جوملا یک نسخه پشتیبان تهیه کنید. فایل index.php در پوشه تمپلیت محل نصب جوملا واقع شده است (templates/protostar/index.php). اگر از قالب پروتواستار کپی گرفته اید یا آن را نامگذاری کرده اید، فایل index.php در پوشه ای خواهد بود که نامگذاری کرده اید.

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

ویرایش فایل index.php

فایل index.php را در یک ویرایشگر متن باز کنید. خط زیر را در این فایل پیدا کنید:

// Adjusting content width

این خط کامنت معمولا در خط 48 در بخش PHP فایل است.

زیر این خط چندین دستور PHP if elseif وجود دارد. کاری که این دستورات انجام می دهند، بررسی تخصیص یافتن یا عدم تخصیص ماژول به پوزیشن های 8 و 7 و تنظیم کلاس span ناحیه محتوا طبق نتیجه این دستورات شرطی است. متغیر span$ اطلاعات کلاس span را نگهداری می کند و بعدا در بخش <html> سند استفاده خواهد شد.

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

دستورات if elseif را کد زیر جایگزین کنید:

// Adjusting content width
/* CUSTOM EDITS */
if ($this->countModules('position-7'))
{
    $span = "span6";
} else
{
    $span = "span12";
}
/* END CUSTOM EDITS */

حال یک دستور if else جدید می نویسیم که وجود ماژول در پوزیشن-7 را بررسی کند و در صورت عدم تخصیص ماژول به این پوزیشن، کل صفحه نمایشگر به ناحیه محتوا تخصیص داده شود.

حالا به حذف بخشی از کد نیاز داریم که ستون پوزیشن-8 را کنترل می کند و همچنین باید کلاس span پوزیشن-7 را در بخش <html> سند ویرایش کنیم.

فایل index.php را مرور کرده و خطوط کد زیر را پیدا کنید و آنها را از فایل حذف کنید:

<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>
<!-- End Sidebar -->
<?php endif; ?>

مواظب باشید و فقط خطوط کد فوق را حذف کنید نه بیشتر. حال پایین تر رفته و خط کد زیر را پیدا کنید:

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

خط بعدی را تغییر داده و به کد زیر تبدیل کنید:

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

حال فایل index.php را ذخیره کرده و آن را به محل خود بر روی سرور آپلود کنید.

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

<position>position-8</position>

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

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