آموزش ایجاد سه پوزیشن ماژول ریسپانسیو در قالب جوملا

در این مقاله طریقه ایجاد سه پوزیشن ماژول جدید در قالب جوملا آموزش داده می شود که ریسپانسیو هستند. بدین معنی که هر یک از ماژول ها بسط یافته یا جمع می شود که بستگی به فعال بودن دو ماژول دیگر دارد. در نمایشگرهای باریک مثل موبایل و تبلت این ماژول ها روی هم چیده می شوند. تصویر زیر نشان می دهد که در صورت وجود ماژول فعال 3، 2، 1 پوزیشن ها به چه شکل ظاهر می شوند:

اگر تنها یک ماژول به این پوزیشن ها اختصاص یافته باشد:

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, ایجاد سه پوزیشن ماژول ریسپانسیو, کنار هم قرار دادن ماژول ها در جوملا, ماژول افقی

اگر دو ماژول برای پوزیشن تعریف شده باشد:

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, ایجاد سه پوزیشن ماژول ریسپانسیو, کنار هم قرار دادن ماژول ها در جوملا, ماژول افقی

اگر سه ماژول برای پوزیشن تعریف شده باشد:

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, ایجاد سه پوزیشن ماژول ریسپانسیو, کنار هم قرار دادن ماژول ها در جوملا, ماژول افقی

نحوه نمایش ماژول ها در این پوزیشن بستگی به تعداد ماژول فعال دارد. همیشه قبل از ویرایش فایل های نصب جوملا، یک نسخه پشتیبان تهیه کنید. در این مثال ماژول ها در بالای <"div class="row-fluid> قرار داده می شود.

اضافه کردن پوزیشن ماژول جدید به فایل templateDetails.xml

<positions>
    ...
    <position>position-a</position>
    <position>position-b</position>
    <position>position-c</position>
</positions>

ویرایش index.php برای اضافه کردن ماژول ها و ایجاد عملکرد ریسپانسیو

برای اینکه کلاس span این ماژول ها تغییر کند بطوریکه با توجه به تعداد ماژول فعال موجود بسط یافته یا کوچک شوند، از یک دستور شرطی if/elseif استفاده می کنیم. لازم است که خطوط کد زیر را در بخش <?php ... ? > در قسمت بالایی فایل index.php درج کنیم.

/* BEGIN CUSTOM */
if ($this->countModules('position-a') && $this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span4";
}
elseif ($this->countModules('position-a') && $this->countModules('position-b') && !$this->countModules('position-c'))
{
    $poswidth = "span6";
}
elseif ($this->countModules('position-a') && !$this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span6";
}
elseif (!$this->countModules('position-a') && $this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span6";
}
else
{
    $poswidth = "span12";
}
/* END CUSTOM */

کاری که این کد انجام می دهد تغییر مقدار متغیر poswidth$ با توجه به حضور یک، دو یا سه ماژول فعال است.

حال کد PHP و HTML را طوری تنظیم می کنیم که این متغیر در آن استفاده شده باشد. در پوزیشن <HTML> فایل index.php خطوط زیر را اضافه کنید. ما این کد را بلافاصله قبل از تگ <"div class="row-fluid> قرار می دهیم.

<!-- BEGIN CUSTOM -->
<div id="respmods">
     <?php if ($this->countModules('position-a')) : ?>
         <div id="posA" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-a" style="xhtml" />
         </div>
     <?php endif; ?>
     <?php if ($this->countModules('position-b')) : ?>
         <div id="posB" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-b" style="xhtml" />
         </div>
     <?php endif; ?>
     <?php if ($this->countModules('position-c')) : ?>
         <div id="posC" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-c" style="xhtml" />
         </div>
     <?php endif; ?> 
</div> 
<!-- END CUSTOM -->

طریقه ویرایش کردن فایل استیل شیت برای ریسپانسیو کردن ماژول

در اینجا طریقه ویرایش کد فایل استیل شیت برای ریسپانسیو کردن ماژول ها را نشان می دهیم. ابتدا انچه که در قالب پروتواستار برای کلاس های span داخل row-fluid. آمده است را کپی کرده و در انتهای فایل استایل شیت سفارشی خود (custom.css) یا انتهای فایل template.css درج می کنیم.

#respmods {width: auto;min-height: 200px; }
#respmods::after {clear: both;}
#posA, #posB, #posC {background: #ddd;height: 100%;padding: 20px;}
#respmods [class*="span"] {
        display: block;
        width: 100%;
        min-height: 28px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        margin-left: 2.127659574%;
        *margin-left: 2.0744680846383%;
}
#respmods [class*="span"]:first-child {
        margin-left: 0;
}
#respmods .span3 {
        width: 23.404255317%;
        *width: 23.351063827638%;
}
#respmods .span4 {
        width: 31.914893614%;
        *width: 31.861702124638%;
}
#respmods .span6 {
        width: 48.936170208%;
        *width: 48.882978718638%;
}
#respmods .span12 {
        width: 99.99999999%;
        *width: 99.946808500638%;
}
@media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], #respmods [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        margin-bottom: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

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

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

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

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

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

با ما باشید

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

وبمستر گرامی

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