جوملا و وردپرس دو سیستم مدیریت محتوا (Content Management System CMS) هستند که برای ایجاد سریع و آسانتر وب سایت مورد استفاده قرار می‌گیرند. به نظر می‌رسد که قالب‌های جوملا انعطاف پذیری بیشتری در طراحی و توسعه دارند، در حالی که قالب‌های وردپرس با یک هدف خاص طراحی شده اند. قالب های جوملا همه نیازمندی هایی را که یک طراح در نظر دارد را تأمین می کنند. جوملا به طور قابل توجهی همه کاره است و هیچ محدودیتی در طراحی ندارد.

در این مقاله اقدامات لازم جهت ایجاد و ویرایش یک Position در قالب جوملا را مورد بررسی قرار می دهیم.

در این راستا ابتدا به تعریف Position در قالب های جوملا و سپس به نحوه ی نمایش Positionها در یک قالب جوملا می پردازیم و در نهایت به هدف اصلی مقاله که ایجاد Position جدیددر قالب جوملا می‌باشد،می پردازیم.

position چیست؟

به مکانی در صفحه سایت که یک ماژول در آن قرار می گیرد، position گفته می شود. در واقع می توان گفت، یک position، محلی از صفحه است که در قالب تعریف می شود و این قابلیت را دارد که ماژول ها را دربر گیرد.

در شکل زیر صفحه ای شامل چند position نمایش داده شده است.

تعریف پوزیشن در جوملا define position joomla

نحوه نمایش position ها در سایت طراحی شده بوسیله ی جوملا

به منظور مشاهده ی position های قالب جوملا مراحل زیر را انجام میدهیم:

گام 1: بعد از وارد شدن به بخش مدیریت جوملا، از منوی Extension زیرمنویtemplates و سپس style را انتخاب می نماییم.

  tempalte position پوزیشن در قالب

گام 2: مطابق شکل زیر در قسمت بالا سمت راست پنجره باز شده بر روی گزینه Option کلیک کرده تا پنجره ی دیگری باز شود.

tempalte position پوزیشن در قالب

گام 3: در پنجره باز شده در قسمت پیش نمایش موقعیت ماژول (preview module position) گزینه فعال(Enable) را انتخاب نموده و سپس روی ذخیره و بستن (save & close) کلیک می کنیم.

tempalte position پوزیشن در قالب

گام 4: مجددا از منوی Extension وارد زیرمنوی templates شده و این بار به جای گزینه ی style گزینه ی templates را انتخاب می کنیم. در این صفحه کلیه ی قالب‌ها اعم از پیش فرض و نصب شده توسط کاربر قابل مشاهده می باشند. همانطور که در تصویر زیر پیداست آیکن چشم کنار هر قالب جهت پیش نمایش‌ کلیه ی position ها فعال شده است.

tempalte position پوزیشن در قالب

با کلیک بر روی این آیکن، تب جدیدی در مرورگر باز می شود، که position ¬های قالب و ماژول¬ های بکار رفته در صفحه اصلی سایت را نشان می دهد.

 نمایش پوزیشن در قالب view position

برای نمایش position ها در سایر صفحات سایت لازم است که در قسمت نوار آدرس مرورگر در انتهای آدرس صفحه ی مورد نظر ?tp=1 را اضافه کنیم.

مثال :

آدرس یک صفحه از سایت :http://www.fardnia.com/fa/index.php/services/servers/internet-speed-control

آدرس یک صفحه از سایت بهمراه نمایش پوزیشن ها :http://www.fardnia.com/fa/index.php/services/servers/internet-speed-control?tp=1

ایجاد position جدید در تمپلیت

برای ایجاد position جدید، لازم است ابتدا فایل templateDetails.xml در پوشه قالب پیش فرض را ویرایش کنیم.

templates->(نام تمپلیت پیشفرض)-> templateDetails.xml

فایل templateDetails.xml درپوشه قالب را باز کرده و خط زیر را در آن کپی می کنیم.

تعریف position جدید باید بین تگ های انجام شود:

  1. <position>
  2. <position>(نام position )</position>
  3. </position>

برای مثال، در اینجا نام positionas-position-24 انتخاب شده است.

با انجام اینکار نام positionas-position-24 در کادر کشویی لیست position­ های قالب پیش فرض سایت ظاهر می شود.

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

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

templates->(نام تمپلیت پیشفرض)-> index.php

برای مثال، همانطور که در شکل زیر مشاهده می شود می­ خواهیم position as-position-24 را بالای position as-position-30 تعریف کنیم.

templates->(نام تمپلیت پیشفرض)-> index.php

فایل index.php از پوشه قالب پیش فرض را در حالت ویرایش باز کرده و قطعه کد مربوط به as-position-30 را پیدا می کنیم، که به صورت زیر است.

در این مثال قطعه کد زیر را به بخش قبل از بخش فوتر اضافه می نماییم. (position 30 در بخش فوتر است)

  1. <?php if ($this->countModules('as-position-24') && !$hideByView && !$hideByOption): ?>

  2. <div id="featured-row1">

  3. <div class="container">

  4. <div class="row" style="background-color: #FFF0 !important;">

  5. <jdoc:include type="modules" name="as-position-24" style="themeHtml5" />

  6. </div>

  7. </div>

  8. </div>

  9. <?php endif; ?>

کد مربوط به پوزیشن در پی اچ پی

در این بخش توضیحات خلاصه‌ای از کد اضافه شده را شرح می دهیم:

    • countModules: این متد تعداد ماژول های استفاده شده در یک position رو می شمارد و بر اساس آن width خاصی را به هر ماژول اختصاص می دهد.
    • jdoc:include: این جمله متدی از قالب­ های جوملاست که محتویات خاصی را برای نمایش درصفحات وب قرار می­دهد. جمله ­های مختلفی برای <jdoc:include/ > وجود دارد که برای قسمت­های متفاوت از یک صفحه جوملایی اجرا می شوند و خودشان را در قالب JDocumentHTML::_render جایگزین می ­کنند.
    • Type: محتویات ارائه شده در <jdoc:include/ > را ارائه می­ دهد به عنوان مثال : /> jdoc:include type=”modules” > از ویژگی modules استفاده می ­کند (توجه: لازم است ویژگی های Jdoc داخل "" قرا گیرند . همچنین قبل از بستن /> نیاز به یک اسپیس دارند). برای مطالعه بیشتر می ­توانید به اینجامراجعه کنید.
    • Name: نام positionای که در قالب قرار است استفاده کنیم.

type="modules" name="as-position-24" style="themeHtml5/>" < jdoc:include

  • Style: در این بخش اشاره می­ شود که ماژول از چه استایلی برای نمایش استفاده کند.

پس از اضافه کردن قطعه کد اشاره شده، و ذخیره همانطور که در شکل زیر مشاهده می‌شود position as-position-24 اضافه شده و توانستیم ماژولی را در این position قرار دهیم.

پوزیشن در قالب جوملا

منابع

https://docs.joomla.org/Jdoc_statements

https://www.siteground.com/tutorials/joomla/positions

https://docs.joomla.org/Finding_module_positions_on_any_given_pag