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

پوزیشن چیست؟ ارتباط پوزیشن با ماژول چیست؟ چگونه پوزیشن های جدیدی در قالب وبسایت خود ایجاد کنیم؟ چگونه فوتر سایت را به سه مکان برای درج ماژول های مختلف تقسیم کنیم؟ در این مقاله طریقه افزودن سه پوزیشن ماژول کنار هم در بخش فوتر قالب پروتواستار (Protostar) جوملا آموزش داده می شود.

می توان به راحتی و بدون اضافه کردن پوزیشن ماژول اینکار را انجام داد و تنها پسوند کلاس هر ماژول (Module Class Suffix) را تعیین کرد. اما گاهی می خواهیم پوزیشن جدیدی اضافه کنیم که مجبور نباشیم هر بار پسوند کلاس ماژول را وارد کنیم. بخصوص زمانی که تعداد نویسندگان وبسایت یا وبلاگ بیش از یک نفر است.

برای اضافه کردن پوزیشن جدید لازم است که فایل های index.php، templateDetails.xml و custom.css تمپلیت پروتواستار (Protostar template) ویرایش شوند. به عنوان یک عادت عملکرد برتر، همیشه قبل از هر تغییری یک نسخه پشتیبان از فایل یا سایت خود تهیه کنید. می توانید فایل های مورد نظر را دانلود کرده و بعد از ویرایش مجددا به فضای هاستینگ بارگذاری کرد. همچنین می توان این فایل ها را در مدیر قالب جوملا ویرایش کرد.

برای اضافه کردن پوزیشن جدید لازم است که فایل های index.php، templateDetails.xml و custom.css تمپلیت پروتواستار (Protostar template) ویرایش شوند. به عنوان یک عادت عملکرد برتر، همیشه قبل از هر تغییری یک نسخه پشتیبان از فایل یا سایت خود تهیه کنید. می توانید فایل های مورد نظر را دانلود کرده و بعد از ویرایش مجددا به فضای هاستینگ بارگذاری کرد. همچنین می توان این فایل ها را در مدیر قالب جوملا ویرایش کرد.

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

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

کد موجود برای بخش فوتر تمپلیت پروتواستار در جوملا 3.7 به صورت زیر است:

<footer class="footer" role="contentinfo">
    <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
        <hr />
        <jdoc:include type="modules" name="footer" style="none" />
        <p class="pull-right">
            <a href="#top" id="back-top">
                <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
            </a>
        </p>
        <p>
            © <?php echo date('Y'); ?> <?php echo $sitename; ?>
        </p>
    </div>
</footer>

در پیکربندی استاندارد، اگر شما در مدیر ماژول جوملا ماژولی را به پوزیشن فوتر تخصیص دهید، این ماژول در بالای خط کپی رایت و زیر تگ <hr/> قرار می گیرد. این ماژول در کل عرض div مربوط به <footer> قرار می گیرد، که برابر کل پهنای کانتینر سایت است. در چیدمان استاتیک استاندارد، عرض این ماژول 940 پیکسل در مانیتور بزرگ خواهد بود و برای صفحه های کوچکتر پهنای آن به خودکار ست شده است.

در این مقاله ما با پوزیشن فوتر کاری نداریم و سه پوزیشن ماژول جدید خود را در بالای پوزیشن فوتر و بالای تگ <hr/> ایجاد می کنیم. اگر تگ <hr/> یعنی خط افقی را دوست ندارید می توانید آن را حذف کنید.

روش اضافه کردن پوزیشن ماژول به تمپلیت

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

زمانی که پوزیشن جدیدی برای قالب جوملا ایجاد می کنیم بایستی نام آن را به فایل templateDetails.xml که در ریشه قالب وجود دارد، اضافه کنیم. این فایل در مسیر templates/protostar/templateDetails.xml واقع شده است.

ما این سه پوزیشن جدید را footer-left، footer-middle و footer-right می نامیم. فایل templateDetails.xml را با یک ویرایشگر متن باز کنید. بخش مربوط به اسامی پوزیشن ها را پیدا کرده و نام سه پوزیشن جدید را به آخر آن بیافزایید (همانند مثال زیر). بعد از اینکه نام پوزیشن را به فایل templateDetails.xml اضافه کردیم، اسامی پوزیشن ها را می توانیم در کادر تعیین پوزیشن ماژول در مدیر ماژول جوملا ببینیم

<positions>
    <position>banner</position>
    <position>debug</position>
    <position>position-0</position>
    <position>position-1</position>
    ...
    <position>footer-left</position>
    <position>footer-middle</position>
    <position>footer-right</position>
</positions>

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

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

برای بررسی وجود این سه ماژول که محتوای پوزیشن های جدید ماست، بایستی از عبارت PHP if استفاده کنیم. بعد از بکارگیری حلقه شرطی بررسی وجود محتوا، یک محفظه <div> برای هر سه ماژول و <div> هایی برای هر یک از سه پوزیشن ایجاد می کنیم. اگر ماژولی به هر یک از سه پوزیشن تخصیص داده نشده باشد، divها ایجاد نمی شوند.

برای هر یک از پوزیشن ها یک خط دستور <?... jdoc:include> گنجانده می شود که حاوی محتوای ماژول مربوطه است. اضافه کردن "style="xhtml به معنی آن است که گزینه ای برای نمایش عنوان ماژول در نظر گرفته شده است. اگر به آن پوزیشن ماژولی تخصیص داده نشود، هنوز <div> به عنوان جایگاه ماژول ایجاد می شود. توجه کنید که چگونه <div> جدید اضافه می شود که حاوی پوزیشن فوتر جاری است. این باعث می شود که شناور شدن (float) سه پوزیشن فوق لازم نباشد.

بخاطر داشته باشید که نام پوزیشن و id یا شناسه <div> دو کلیت متفاوت هستند. نام پوزیشن ها توسط PHP استفاده می شود و در کد HTML تولید شده برای صفحه ظاهر نمی شود.

<footer class="footer" role="contentinfo">
    <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">   
    <!-- CUSTOM POSITIONS ADDED HERE -->
    <?php if (($this->countModules('footer-left')) || ($this->countModules('footer-middle')) || ($this->countModules('footer-right'))) : ?>
        <div id="footerThreeMods" >
            <!-- Begin Three Footer Mods -->
            <div id="footerleft">
                <jdoc:include type="modules" name="footer-left" style="xhtml" />
            </div>
            <div id="footermiddle">
                <jdoc:include type="modules" name="footer-middle" style="xhtml" />
            </div>
            <div id="footerright">
                <jdoc:include type="modules" name="footer-right" style="xhtml" />
            </div>
            <!-- End Three Footer Mods -->
        </div>
    <?php endif; ?>
    <!-- END CUSTOM POSITIONS -->
    <hr/>
        <div id="footerfull"> <!-- CUSTOM add this outer div to clear the floats -->
            <jdoc:include type="modules" name="footer" style="none" />
        </div>
        <p class="pull-right">
            <a href="#top" id="back-top">
                <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
            </a>
        </p>
        <p>
            © <?php echo date('Y'); ?> <?php echo $sitename; ?>
        </p>
    </div>
</footer>

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

در اینجا ماژول ها را اندکی سبک بندی می کنیم. این سبک ها بایستی در فایل استیل شیت سفارشی نوشته شوند.

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

در سبک بندی زیر، ما استیل های media@ را به پوزیشن ها اضافه کرده ایم که نسبت به div محفظه خود باریک تر باشند و در صفحه های کوچکتر از 767 پیکسل بر روی هم قرار گیرند. می توانید استیل زیر را مطابق نیاز خود تعدیل کنید.

#footerfull {clear: both;}
#footerThreeMods {width: 100%; }
#footerleft, #footermiddle, #footerright {width: 32%;float: left; }
#footerleft {}
#footermiddle {margin-left: 2%}
#footerright {margin-left: 2%}
@media (max-width: 960px) {
    #footerThreeMods {width: auto; }
}
@media (max-width: 767px) {
    #footerleft, #footermiddle, #footerright {width: auto; float: none; }
}

توجهات لازم

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

البته می توانید ماژول های مختلف را با استفاده از برگه تخصیص منو به منوهای مختلف و صفحات متفاوت تخصیص دهید.

توجه کنید که اضافه کردن padding به این <div>ها موجب افزایش پهنای بیرونی آنها شده و ممکن است چیدمان و نمای مورد انتظار به هم بخورد. مراحل سبک بندی و زیباسازی دیگری نیز وجود دارد که می توانید از آن استفاده کنید.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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