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

پوزیشن یا جایگاه چیست؟ پوزیشن چه نقشی در وب سایت جوملا دارد؟ چگونه برای قالب وب سایت پوزیشن های جدید ایجاد کنیم؟ وبسایت های ریسپانسیو و تعاملی امروزه از چندین بخش و ناحیه تشکیل شده اند که به هر ناحیه یک پوزیشن اطلاق می شود. مثلا ستون کناری وبسایت یا سایدبار یک پوزیشن است. برای اضافه کردن یک پوزیشن جدید به قالب پروتواستار جوملا (Protostar template) بایستی سه گام اساسی را بردارید:

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

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

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

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

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

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

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

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

در ریشه دایرکتوری تمپلیت پروتواستار فایل templateDetails.xml را باز کنید. پوزیشن جدید خود را در لیست پوزیشن های این فایل اضافه کنید. در مثال زیر یک پوزیشن جدید به نام customposition به لیست پوزیشن های موجود در فایل templateDetails.xml اضافه شده است:

<positions>
    <position>customposition<position>
    <position>banner</position>
    <position>debug</position>
    <position>position-0</position>
    <position>position-1</position>
    ...
</positions>

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

حالا باید برای پوزیشن جدید جایی در فایل index.php در نظر بگیریم به طوری که جوملا پوزیشن را در سند HTML بارگذاری کرده و به مرورگر برای نمایش بفرستد.

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

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

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

در این مرحله فایل index.php را با ویرایشگر متن باز کرده و کد مربوط به پوزیشن-7 را پیدا کنید. در نسخه های جدید جوملا این کد در خط 182 قرار دارد. کد زیر مربوط به پوزیشن 7 قالب پروتواستار جوملا می باشد:

در این مرحله فایل index.php را با ویرایشگر متن باز کرده و کد مربوط به پوزیشن-7 را پیدا کنید. در نسخه های جدید جوملا این کد در خط 182 قرار دارد. کد زیر مربوط به پوزیشن 7 قالب پروتواستار جوملا می باشد:

<?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 ?> این خط به مرورگر می گوید که کد PHP بین براکت باز و بسته قرار دارد.
if ($this->countModules('position-7')) : این یک عبارت شرطی PHP if می باشد و بررسی می کند که آیا ماژولی به پوزیشن 7 این وب پیج تخصیص داده شده است یا خیر. اگر باشد، ادامه کد اجرا می شود و اگر ماژولی تخصیص نیافته باشد، مرورگر قطعه کد بین <?php ... ?> را نادیده می گیرد.
<div id="aside" class="span3"> این خط کد یک div با شناسه () و نام کلاس آن به سند HTML اضافه می کند. شناسه و نام کلاس برای سبک بندی این قطعه است. برای پوزیشن دلخواه خود باید شناسه و کلاس منحصر به فردی تعیین کنید بطوریکه بتوانید آن را قالب بندی کنید. کلاس span3 از سبک های بوت استرپ برای وب پیج ریسپانسیو است.
<!-- Begin Right Sidebar --> این یک کامنت است. به سادگی اطلاعاتی در مورد شروع ستون کناری ارائه می دهد. مرورگر متن بین این قطعه <!—و --> را نمایش نمی دهد.
<jdoc:include type="modules" name="position-7" style="well" /> این کدی است که جوملا برای بارگذاری محتوای ماژول استفاده می کند. توجه کنید که نام پوزیشن به کد HTML اضافه نشده است، فقط محتوای ماژول به این پوزیشن تخصیص یافته است. جوملا اطلاعات خاصی به سبک style="well" اضافه می کند. سایر سبک های محتمل آن شامل style="none" و style="xhtml" می باشند. اگر می خواهید نام ماژول نیز نمایش یابد، از style="xhtml" استفاده کنید.
<!-- End Right Sidebar --> این نیز یک خط کامنت یا توضیح است.
</div> این خط <div id="aside"> را می بندد.
<?php endif; ?> این خط نیز دستور PHP if را می بندد.

برای اینکه قطعه کد فوق با پوزیشن جدید شما کار کند، کد بین <?php..?> را بالای کد پوزیشن 7 (قطعه فوق) کپی کنید.

<?php if ($this->countModules('customposition')) : ?>
    <div id="topright" class="span3">
        <!-- Add custompostion -->
        <jdoc:include type="modules" name="custompostion" style="xhtml" />
        <!-- End Custom Postion -->
    </div>
<?php endif; ?>

اطمینان حاصل کنید که نام پوزیشن جدید خود را در دو جای این کد وارد کنید یکی داخلی دستور شرطی PHP if و یکی هم داخل تگ <jdoc:>

ج- سبک دهی به پوزیشن جدید

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

در مثال ما از آنجایی که از کلاس class="span3" استفاده شده است، سبک مربوط به این کلاس به پوزیشن اعمال خواهد شد.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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