طریقه اضافه کردن یک ماژول جدید در بالای وب پیج

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

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

برای ایجاد این منوی دوم یا درج هر ماژول سفارشی دیگر، بایستی یک پوزیشن جدید به قالب پروتواستار (Protostar template) جوملا اضافه کرد. می توان بیشتر از یک ماژول به این پوزیشن اختصاص داد، اما لازم است این ماژول ها سبک دهی شوند به طوریکه با ظاهری مناسب و منظم در صفحه ظاهر شوند و به شیوه ای که باید در طراحی ریسپانسیو ظاهر شوند.

برای ایجاد این منوی دوم یا درج هر ماژول سفارشی دیگر، بایستی یک پوزیشن جدید به قالب پروتواستار (Protostar template) جوملا اضافه کرد. می توان بیشتر از یک ماژول به این پوزیشن اختصاص داد، اما لازم است این ماژول ها سبک دهی شوند به طوریکه با ظاهری مناسب و منظم در صفحه ظاهر شوند و به شیوه ای که باید در طراحی ریسپانسیو ظاهر شوند.

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

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

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

فایل templateDetails.xml را دانلود کرده و یا از کنترل پنل هاستینگ (سی پنل یا دایرکت ادمین و غیره) و یا در برنامه کلاینت FTP باز کنید و توسط ویرایشگر متنی باز کنید. برای ویرایش این فایل ها از واژه پرداز استفاده نکنید زیرا ممکن است کارکترهای اضافی به فایل افزوده و مشکل آفرین شود. همچنین می توان این فایل را از داخل خود مدیر قالب (Template Manager) جوملا باز و ویرایش کرد، اگر به ویرایشگر متن یا نرم افزار ftp دسترسی ندارید.

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

<positions>
    ....
    <position>top-menu-bar</position>
    <position>position-0</positions>
    <position>position-1</positions>
    ...
<positions>

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

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

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

فایل index.php را باز کرده و بخش <header>...</header> را در قسمت HTML این فایل پیدا کنید. سپس کد زیر را به آن اضافه کنید:

<?php if ($this->countModules('top-menu-bar')) : ?>
    <div class="topmenubar">
        <jdoc:include type="modules" name="top-menu-bar" style="none" />
    </div>
<?php endif; ?>

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

همانطور که می بینید، در این خطوط کلاسی به <div> اضافه شده است. این عمل برای تعیین سبک خاص برای این عنصر خاص است. حال فایل ها را ذخیره کرده و به محل خود در مسیر نصب جوملا برگردانید.

تعیین ظاهر و سبک دهی به این <div> جدید

برای تعیین ظاهر پوزیشن جدید، در فایل custom.css خود سبک پوزیشن را مشخص کنید. این سبک دهی می تواند شامل خصیصه هایی از قبیل ارتفاع، رنگ پس زمینه، رنگ متن، خانواده فونت و غیره باشد. پهنای پیش فرض پوزیشن auto خواهد بود، بدین معنی که کل پهنای صفحه را اشغال می کند، مگر اینکه غیر از این را تعیین کرده باشید.

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

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

برای تخصیص ماژول به پوزیشن جدیدی که ایجاد کردیم، ادمین جوملا را باز کرده و به مدیریت ماژل ها (Module Manager) بروید. یک ماژول جدید برای جستجوی سایت (search box) با استفاده از پلاگین اسمارت سرچ یا هر افزونه دیگری که در نظر دارید، بسازید.

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

در صورت لزوم برای کادر Module Class Suffix نام کلاسی را وارد کنید که بتوانید از طریق آن کلاس ماژول خود را قالب دهی کنید از قبیل تعیین پهنای ماژول، چیدمان و غیره. مثلا اگر بخواهید دو ماژول به این پوزیشن جدید تخصیص دهید، یکی را به سمت راست و دیگری را به سمت چپ صفحه درج می کنید که از دستور float: right و float: left استفاده می شود.

اگر با کادر Module Class Suffix آشنایی ندارید و یا نمی دانید چطوری کلاسی برای ماژول تعریف کنید، مقاله طریقه اضافه کردن کلاس به ماژول برای تعیین ظاهری سفارشی و دلخواه را بخوانید.

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