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

وب سایت های امروزی معمولا از چند ستون تشکیل شده اند. وب سایت های خبری بیشترین ستون را دارند و وبلاگ ها معمولا از یک ستون اصلی (محتوا) و یک یا دو ستون کناری (سایدبار چپ و راست) تشکیل شده اند. ممکن است بخواهید ستون محتوا را پهن تر کنید و یا عرض سایدبار وب پیج را افزایش دهید. در ادامه پیشنهاداتی برای انجام این اصلاحات ارائه شده است. ابتدا به تنظیمات پیش فرض ستون های کناری فایل index.php و template.css قالب پروتواستار جوملا (Protostar Template) نگاهی می اندازیم.

تنظیمات پیش فرض ستون های چپ، وسط و راست قالب پروتواستار

ستون سمت چپ – پوزیشن 8

اگر قالب انتخابی وبسایت شما پروتواستار باشد و ماژولی را در پوزیشن 8 قرار دهید، این ماژول در ستون سمت چپ نمایش خواهد یافت. در زیر قطعه کد فایل index.php آمده است که محل ماژول پوزیشن-8 در sidebar div# را نشان می دهد و کلاس span3 به آن تخصیص یافته است.

<div id="sidebar" class="span3">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>

ستون سمت راست – پوزیشن 7

برای ماژول هایی که در پوزیشن-7 قالب پیش فرض جوملا یعنی قالب پروتواستار ایجاد شده است، کد پوزیشن در فایل index.php به صورت زیر است:

<div id="aside" class="span3">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

قالب تعیین شده برای کلاس .span3 در فایل Template.css

در فایل template.css کلاس .span3 به صورت زیر قالب بندی شده است (برای مانیتورهای عریض)

.row-fluid .span3 {
    width: 23.4043%;
}

تنظیمات پیش فرض ستون وسط قالب جوملا

محتوای اصلی وب پیج و ماژول هایی که در پوزیشن-3 و پوزیشن-2 قالب پروتواستار جوملا گذاشته شده اند، همگی در توسط قطعه کد زیر در فایل index.php در وب پیج چیده می شوند و در ستون وسط نمایش داده می شوند:

<main id="content" role="main" class="<?php echo $span;?>">
    <!-- Begin Content -->
        <jdoc:include type="modules" name="position-3" style="xhtml" />
        <jdoc:include type="message" />
        <jdoc:include type="component" />
        <jdoc:include type="modules" name="position-2" style="none" />
    <!-- End Content -->
</main>

اگر برای ستون های سمت راست و چپ ماژولی تعریف شود، عنصر <main> دارای کلاس .span6 خواهد بود. در صورتی که فقط برای یکی از ستون های راست یا چپ ماژولی تعریف شده باشد، عنصر <main> دارای کلاس .span9 خواهد بود. اگر برای هیچیک از ستون های راست یا چپ قالب ماژولی تخصیص نیافته باشد، عنصر <main> دارای کلاس .span12 خواهد بود. اینکار توسط بخش <? ... php?> فایل index.php انجام می شود. این فایل با استفاده از یکسری دستورهای شرطی if و elseif پوزیشن ها را تست کرده و براساس وضعیت پوزیشن های جپ و راست، متغیر span$ را مقدار دهی می کند. در این کد PHP فرض می شود که به هر دوی پوزیشن-7 و پوزیشن-8 کلاس .span3 اختصاص داده می شود.

// 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";
}

سبک و استیل این کلاس های span در فایل template.css به صورت زیر است:

.row-fluid .span6 {
    width: 100%;
}
.row-fluid .span9 {
    width: 48.9362%;
}
.row-fluid .span12 {
    width: 100%;
}

چگونه تنظیمات پیش فرض کلاس های .spanرا در قالب پروتواستار تغییر دهیم

رویکردهای مختلف متعددی برای اصلاح و تعدیل تنظیمات دیفالت قالب جوملا برای سفارشی سازی وبسایت در دسترس می باشد. می توان درصد پهنای هر یک از کلاس های span را در فایل استایل شیت سفارشی (custom.css) خود رونویسی و تغییر داد. می توان فایل index.php را ویرایش کرد به طوری که کلاس پهن تر یا باریک تری به ستون های راست و چپ وب پیج اختصاص دهد.

تغییر کلاس .span ستون های راست و چپ به کلاس .span2 و تنظیم ستون وسط

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

لازم است که در قطعه <?php ... ?> عبارت if را تنظیم کرد که به ستون وسط کلاس .span مناسبی اختصاص دهد.

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

حال می توانیم کلاس .span پوزیشن های راست (پوزیشن-7) و چپ (پوزیشن-8) را به کلاس .span2 تغییر دهیم:

<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>
<div id="aside" class="span2">
    <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

حال فایل index.php ویرایش شده را در دایرکتوری تمپلیت پروتواستار در سرور هاستینگ خود ذخیره و بارگذاری کنید. سایت را در یک مرورگر وب باز کنید. حالا ستون های کناری سمت راست و چپ بایستی باریک تر شده باشند و ستون وسط یا ستون اصلی محتوای وب پیج بایستی عریض تر شده باشد. ممکن است برای تعدیل عرض ماژول های این ستون ها لازم باشد کمی استیل دهی انجام دهید.

تغییر ستون چپ به span2 و ستون سمت راست به span4

رویکرد مشابهی برای باریک کردن ستون سمت چپ و پهن تر کردن ستون سمت راست اعمال می شود، بجز اینکه بایستی با دستور شرطی php if فایل index.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 = "span8";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span10";
}
else
{
    $span = "span12";
}
<div id="sidebar" class="span2">
    <div class="sidebar-nav">
        <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div>
</div>
<div id="aside" class="span4">
    <!-- Begin Right Sidebar -->
    <jdoc:include type="modules" name="position-7" style="well" />
    <!-- End Right Sidebar -->
</div>

در این مقاله شیوه تغییر عرض ستون های سمت راست یا چپ (سایدبار راست یا سایدبار چپ) قالب پروتواستار جوملا بحث شد. با ویرایش فایل index.php در دایرکتوری ریشه نصب جوملا و پوشه تمپلیت، می توان گرید قالب جوملا را تعدیل کرد، از قبیل اضافه کردن ستون جدید یا حذف ستون های موجود از قالب وب سایت خود.

سفارشی کردن قالب پروتواستار

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

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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