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

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

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

اگر بخواهیم دو ستون سایدبار در کنار هم داشته باشیم، بایستی فایل index.php را ویرایش کرده و پوزیشن-8 را به بعد از پوزیشن-7 منتقل کنیم تا دو پوزیشن در سمت راست صفحه نمایش در کنار هم قرار بگیرند.

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

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

در اینجا فایل templateDetails.xml را ویرایش کرده و نام ماژول جدید که عرض آن دو برابر عرض ستون راست است، را به آن اضافه می کنیم. برای اینکار ابتدا فایل templateDetails.xml را در ویرایشگر متنی باز کرده و پوزیشن زیر را به بخش <positions> اضافه کنید:

<positions>
    <position>doublerightcoltop</position>
    ...
</positions>

برای اینکه نام پوزیشن در لیست پوزیشن های موجود قالب در مدیر ماژول جوملا ظاهر شود، بایستی نام پوزیشن را به این فایل اضافه کرد.

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

فایل index.php از فلدر تمپلیت پروتواستار جوملا را با یک برنامه ویرایشگر متن باز کنید. بخشی که پوزیشن-8 را بارگذاری می کند پیدا کنید، کل کد PHP آن که در بین دو تگ <?php و ? > قرار دارد را انتخاب کرده و برش دهید و سپس در بالای بخش پوزیشن-7 درج کنید. هر دو پوزیشن در زیر بخش <main>...</main> فایل 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="span3">
        <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
        <!-- End Right Sidebar -->
    </div>
<?php endif; ?>

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

اضافه کردن پوزیشن جدید در فایل index.php

کدهای بین دو تگ <?php و ?> مربوط به پوزیشن-8 را کپی کنید و در بالای تگ <?php مربوط به پوزیشن-8 درج کنید. متن را ویرایش کنید تا به شکل کد زیر درآید:

<?php if ($this->countModules('doublerightcoltop')) : ?>
    <!-- Begin double right column -->
    <div id="doublerighttop" class="span6">
        <div class="doublecol">
            <jdoc:include type="modules" name="doublerightcoltop" style="xhtml" />
        </div>
    </div>
    <!-- End double right column -->
<?php endif; ?>
<?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="span3">
        <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" style="well" />
        <!-- End Right Sidebar -->
    </div>
<?php endif; ?>

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

همچنین به این پوزیشن جدید کلاس "class="span6 تخصیص داده شده است. این کلاس مربوط به سبک بندی ریسپانسیو بوت استرپ2 است.

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

سبک دهی پوزیشن جدید

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

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

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

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

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

با ما باشید

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

وبمستر گرامی

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