طریقه اضافه کردن سه ماژول جدید به بالای صفحه وب سایت

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

در روش مورد استفاده در این مقاله، پوزیشن ها در بالای بخش <header> سند قرار می گیرند. اگر می خواهید که بخش هدر را در داخل این نوار قرار دهید، بایستی تغییرات بیشتری در فایل index.php اعمال کنید تا این عنصر و محتوای آن را به نوار بالای صفحه منتقل کند.

برای اجرای این اصلاحات ظاهر وبسایت، لازم است که فایل های index.php و templateDetails.xml در ریشه دایرکتوری تمپلیت پروتواستار جوملا سه (Joomla 3+ Protostar template) ویرایش شوند. گام سوم سبک دهی پوزیشن ها است که توصیه می شود سبک آنها در فایل استیل شیت سفارشی (custom.css) اجرا شود. می توانید مقاله طریقه اضافه کردن استیل شیت سفارشی به قالب جوملا را بخوانید.

برای اجرای این اصلاحات ظاهر وبسایت، لازم است که فایل های index.php و templateDetails.xml در ریشه دایرکتوری تمپلیت پروتواستار جوملا سه (Joomla 3+ Protostar template) ویرایش شوند. گام سوم سبک دهی پوزیشن ها است که توصیه می شود سبک آنها در فایل استیل شیت سفارشی (custom.css) اجرا شود. می توانید مقاله طریقه اضافه کردن استیل شیت سفارشی به قالب جوملا را بخوانید.

به عنوان استاندارد عملکرد برتر، فراموش نکنید که قبل از هرکاری از فایل های خود نسخه پشتیبان تهیه کنید.

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

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

<position>topbar-left</position>
<position>topbar-middle</position>
<position>topbar-right</position>

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

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

ایجاد میله تمام عرض در بالای صفحه وب پیج

زمانی که تنظیم پیش فرض قالب پروتواستار (Protostar template) به حالت استاتیک (Static) ست شده باشد، تمامی محتوای وب پیج در داخل یک تگ <div class="container> قرار می گیرد. این محفظه یا تگ در وسط صفحه نمایشگر عریض ظاهر می شود و سبک تخصیص یافته آن برای پهنای عریض (width: 940px) است.

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

فایل index.php را در یک ویرایشگر متن باز کنید. بلافاصله بعد از تگ <div class="body"> و قبل از کد <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">، قطعه کد زیر را درج کنید:

<!-- CUSTOM -->
<?php if (($this->countModules('topbar-left')) || ($this->countModules('topbar-middle')) || ($this->countModules('topbar-right'))) : ?>
<div id="top-bar">
<!-- CUSTOM POSITIONS ADDED HERE -->
    <div id="topbarleft">
        <jdoc:include type="modules" name="topbar-left" class="span4" style="xhtml" />
    </div>
    <div id="topbarmiddle">
        <jdoc:include type="modules" name="topbar-middle" class="span4" style="xhtml" />
    </div>
    <div id="topbarright">
        <jdoc:include type="modules" name="topbar-right" class="span4" style="xhtml" />
    </div>
<!-- END CUSTOM POSITIONS -->
</div><!-- END TOP BAR -->
<?php endif; ?>
<!-- END CUSTOM -->

این کد یک <div id="top-bar"> جدید به صفحه اضافه می کند. سپس از دستورات شرطی PHP برای تعیین وجود ماژول تخصیص یافته به هر پوزیشن استفاده می کند. اگر ماژولی به هر یک از این پوزیشن ها تخصیص یافته باشد، #top-bar و تمام <div> های آن ایجاد می شود. در غیر اینصورت این پوزیشن ها ایجاد نشده و #top-bar اضافه نخواهد شد.

اضافه کردن سبک و ویرایش ظاهر این بخش جدید

استیل شیت سفارشی (custom.css) خود را باز کرده و قطعه زیر را به آخر آن اضافه کنید. اگر هنوز استیل شیت سفارشی ایجاد نکرده اید یا در این مورد اطلاعات کافی ندارید، مقاله طریقه اضافه کردن استیل شیت سفارشی (custom.css) به قالب جوملا را بخوانید.

#top-bar { width: auto; height: 200px; padding: 10px;}
#top-bar [id^="topbar"] {float: left; width: 31.914893614%; margin-left: 2.127659574%;}
#top-bar #topbarleft {margin-left: 0px;}
@media (max-width: 767px) {
    #top-bar {height: auto;}
    #top-bar [id^="topbar"] {float: none;margin-left: 0px;width: auto;}
}

می توانید از سبک css را با توجه به نیاز خود ویرایش کنید. مثلا می توانید ارتفاع میله #top-bar را با توجه به نیاز خود کم یا زیاد کنید یا رنگ پس زمینه سفارشی خود را برای آن تعیین کنید. از آنجایی که تمامی divهای داخل این ناحیه دارای float هستند، حتما بایستی ارتفاع تعیین شود. سبک @media موجب می شود که divهای ایجاد شده در صفحه نمایش باریک و کوچکتر از 767 پیکسل روی هم قرار بگیرند.

نکات مهم این روش

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

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

اگر به هر یک از این پوزیشن ها ماژولی اختصاص داده شود، هر سه پوزیشن (<div>) ایجاد خواهد شد. اگر ماژولی به پوزیشن مرکز یا راست اختصاص داده شود، یعنی فقط یک پوزیشن ماژول داشته باشد، در بخش وسط نمایش می یابد. اگر هیچ ماژولی به #top-bar یک وب پیج اختصاص داده نشود، این ناحیه ایجاد نخواهد شد.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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