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

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

برای نمایش ماژول جستجوی سایت در انتهای منوی اصلی وبسایت، مراحل زیر را انجام دهید:

گام 1- ابتدا مدیر ماژول جوملا را باز کرده و ماژول جستجو را برای ویرایش باز کنید.

گام 2- در این صفحه پوزیشن ماژول جستجو را به پوزیشن-1 تغییر دهید، که پوزیشن بارگذاری منوی اصلی سایت به صورت افقی است.

گام 3- فایل فایل استایل شیت سفارشی خود را باز کرده و خطوط کد زیر را به آن اضافه کنید:

.navigation ul.nav {float: left;}
.navigation form {float: right;width: 300px;}
.navigation {height: 34px}

گام 4- سایت خود را باز کنید و نتیجه این عمل را در مرورگر وب ببینید.

طریقه قرار دادن جستجوی سایت در انتهای منوی اصلی سایت جوملا

در اینجا مراحل فوق شرح داده می شود. زمانی که هر دو ماژول منوی اصلی و جستجو را به پوزیشن-1 قالب پروتواستار جوملا اختصاص می دهیم، قالب پروتواستار جوملا 3.3+ این ماژول ها در درون عنصر <"nav class="navigation> سند HTML کمپایل شده قرار می دهد. اگر فایل index.php قالب جوملا را باز کنید، خطوط کد زیر را خواهید دید:

<?php if ($this->countModules('position-1')) : ?>
    <nav class="navigation" role="navigation">
        <jdoc:include type="modules" name="position-1" style="none" />
    </nav>
<?php endif; ?>

این کد چکار می کند؟ فایل index.php با استفاده از این کد بررسی می کند که آیا ماژولی به پوزیشن-1 اختصاص یافته است. اینکار با استفاده از دستورات شرطی php انجام می شود. اگر ماژولی به پوزیشن-1 اختصاص یافته باشد، سپس عناصر <"nav class="navigation> در کد HTML وب پیج بارگذاری می شود. فقط بخاطر اینکه این یک عنصر <nav> است، بدین معنی نیست که تنها ماژول های از نوع منو در این عنصر قابل جایگذاری است.

در این کد از طریق استیل دهی، این دو عنصر شناور (float) می شوند. زمانی که به عنصری خصیصه float نسبت داده می شود دیگر یک عنصر بلوکی نیست و یک عنصر برخط (inline) است. عناصر بلوکی کل فضای موجود پوزیشن را اشغال می کنند، اما عناصر شناور پهنای پیش فرض auto را می گیرند، بدین معنی که به اندازه محتوای خود بسط می یابند مگر اینکه پهنای خاصی برای آنها در نظر گرفته شده باشد مثل ;width: 300px. اگر برای این دو عنصر خصیصه float ست نشود، بر روی همدیگر در دو سطر نمایش داده می شوند.

در صورت لزوم می توانید سبک خاصی در بخش media@ استیل شیت خود در نظر بگیرید تا سبک ریسپانسیو برای وسایل دارای صفحه نمایش باریک نیز حفظ شود.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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