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

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

فعال کردن پوزیشن استفاده نشده ساده نیست. بایستی با استفاد از دستورات HTML، PHP و API جوملا در فایل index.php درج شوند. می توان از کدهای استفاده شده برای سایر پوزیشن های مصرف شده استفاده کرده و پوزیشن های غیرفعال را استفاده کرد.

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

طریقه ظاهر شدن ماژول یک پوزیشن در وب پیج

جوملا برای ساخت هر یک از صفحات وب سایت از سند index.php موجود در دیرکتوری تمپلیت استفاده می کند. همچنین برای کمپایل تمامی بخش های تشکیل دهنده یک وب پیج در زمان وارد کردن URL آن صفحه در آدرس بار مرورگر، از زبان PHP استفاده می کند.

تعدادی عبارت if/end if در فایل index.php قالب پروتواستار جوملا وجود دارد که وجود ماژول فعال در هر پوزیشن را برای نمایش در وب پیج بررسی می کنند. اگر ماژولی اختصاص یافته باشد، برای آن پوزیشن یک <div> یا سایر عناصر HTML ساخته می شود تا در صفحه ظاهر شود. اگر ماژول فعالی وجود نداشته باشد، آن <div> یا عنصر 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; ?>
<?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; ?>

این دستورات چکار می کنند؟ دستور PHP if بررسی می کند که آیا ماژولی به پوزیشن-1 یا پوزیشن-7 اختصاص یافته است یا خیر. اگر خروجی این شرط Yes باشد، یک <nav> و یک <"div id="aside> برای صفحه ایجاد می شود. اگر ماژولی اختصاص نیافته باشد، این عناصر <nav> و یک <"div id="aside> برای صفحه خلق نمی شوند.

حال با استفاده از دستور API جوملا یعنی </"..."=jdoc: include type="modules" name="..." style> ماژول به پوزیشن اختصاص داده شده و در صفحه چیده می شود. عبارات شرطی متعدد دیگری نیز در فایل index.php برای سایر پوزیشن ها وجود دارد.

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

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

اگر می خواهید از پوزیشن های "Unused" موجود قالب پروتواستار جوملا استفاده کنید، که پوزیشن-9 تا پوزیشن-14 است، لازم نیست که فایل templateDetails.xml را ویرایش کنید و نام جدیدی به این لیست اضافه کنید زیرا نام پوزیشن ها از قبل به آن اضافه شده است.

در صورتی که می خواهید پوزیشنی با نام جدید بسازید بایستی فایل templateDetails.xml را ویرایش کرده و نام پوزیشن جدید را به لیست پوزیشن های آن اضافه کنید. زمانی که نام پوزیشن در این فایل درج شود، در بخش پوزیشن های مدیر ماژول ظاهر می شود.

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

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

فایل index.php که بایستی ویرایش شود در مسیر templates/protostar/index.php در سیستم فایل جوملا قرار گرفته است. همیشه قبل از ویرایش این فایل یک نسخه پشتیبان تهیه کنید.

فایل index.php را با یک ویرایشگر متن مثل نوت پد باز کرده و به بخش تگ <body> سند بروید. برای مثال این مقاله ما یک <div> می سازیم که در زیر سه ستون اصلی وب پیج یعنی <"div id="sidebar">, <main id="content"> and <div id="aside> که معادل ستون چپ، ستون وسط و ستون راست است، قرار می گیرد. عرض این <div> برابر عرض <"div class="container> است و در داخل آن <div> قرار می گیرد. این دایو بایستی در خارج تگ های <div/> و <main/> بنشیند که این عناصر دیگر را می بندند.

در این مثال فرض می شود که چارچوب HTML فایل قبلا ویرایش نشده است. آخرین <div/> بلافاصله قبل از تگ <footer> را پیدا کنید. این جایگاه تقریبا در انتهای فایل است. آخرین تگ <div/> عنصر <"div class="body> را می بندد. تگ <div/> بعدی تگ <"div class="container> را در پیکربندی استاتیک و یا تگ <"div class="container-fluid> را در پیکربندی شناور می بندد. تگ <div/> بعدی پایان تگ <"div class="row-fluid> است که حاوی سه ستون اصلی است. ما پوزیشن جدید خود را می خواهیم در داخل این بخش (div) ایجاد کنیم. بنابراین کدهای زیر را در بالای سومین <div/> مانده به آخر فایل درج کنید (یعنی بعد از این کد بایستی سه تگ <div/> وجود داشته باشد).

<!-- Custom Edit - add position-9 -->
<?php if ($this->countModules('position-9')) : ?>
    <div id="pagebottom" class="span12">
        <jdoc:include type="modules" name="position-9" style="XHTML" />
    </div>
<?php endif; ?>
<!-- End custom edit -->

عملکرد این قطعه کد به صورت زیر است:

خط <!-- Custom Edit - add position-9 --> یک کامنت است تا براحتی بتوان محل ویرایش فایل index.php را پیدا کرد.

خط کد <?php if ($this->countModules('position-9')) : ? > از دستورات شرطی PHP استفاده کرده و وجود ماژول فعال تخصیص یافته به پوزیشن-9 را بررسی می کند. اگر ماژول فعال وجود داشته باشد جایگاه آن به کد HTML صفحه اضافه می شود.

خط کد <"div id="pagebottom" class="span12> یک <div> جدید در صفحه می سازد. کلاس span12 از سبک دهی بوت استرپ استفاده کرده و کل پهنای محفظه حاوی عنصر <"div class="container> را اشغال می کند. ایجاد <div> برای پوزیشن جدید به ما امکان استیل دهی به ماژول هدف در فایل css را می دهد.

کد </ "jdoc:include type="modules" name="position-9" style="XHTML> از دستور API جوملا استفاده کرده و هر ماژول تخصیص یافته به پوزیشن را در خصیصه "" = name قرار می دهد. "style = "XHTML به ما اجازه میدهد که عنوان ماژول را نمایش دهیم. گزینه دیگر آن عدم نمایش عنوان ماژول است که به صورت "style="none بیان می شود و یا از "style="well می توان استفاده کرد که از تمامی استیل های موجود در فایل template.xml که برای کلاس well. تعریف شده است، استفاده می کند. در سبک "style="well نیز نام ماژول نمایش داده می شود.

خط <div/> نیز تگ بستن تگ <"div id="pagebottom> است و <?php endif; ? > نیز دستور شرطی if را می بندد.

خط <!-- End custom edit --> نیز یک کامنت برای یادآوری پایان قطعه کد است.

به روز رسانی جوملا

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

گزینه 1: اعمال مجدد تمامی تغییرات در فایل index.php جدید (به همین خاطر گذاشتن کامنت در حین ویرایش فایل اهمیت دارد. تا به راحتی تغییرات را بتوان شناسایی کرد)

گزینه 2: جایگزین کردن فایل index.php جدید با نسخه پشتیبان index.php قبلی (تغییرات حفظ می شود اما بهینه سازی های جوملا از دست می رود)

گزینه 3: کپی کردن و نامگذاری یک نسخه از قالب پروتواستار (این عملکرد برتر است. بهتر است از قالب پروتواستار جوملا یک کپی گرفته و بعد از تغییر نام به قالب پیش فرض سایت ست کرد. سپس تغییرات را در این قالب ایجاد کرد. بدین ترتیب با به روز شدن جوملا و قالب پروتواستار هم تغییرات باقی می ماند و هم بهینه سازی ها از دست نمی رود).

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

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

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

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

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

با ما باشید

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

وبمستر گرامی

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