هنگام نوشتن یک کامپوننت برای جوملا، بسیار اتفاق می افتد که نیاز داشته باشیم فایل css نیز به پروژه اضافه کنیم. البته می توان کدهای css را در فایل css قالب نیز نوشت ولی اگر ظاهر خاصی را برای اینترفیس کامپوننت در نظر گرفته باشیم و بخواهیم با تغییر قالب اصلی جوملا مشکلی در ظاهر برنامه ما ایجاد نشود باید بتوانیم کدهای css را در یک فایل ذخیره کرده و به کامپوننت اضافه کنیم تا هنگام اجرا روی قالب های مختلف، ظاهر برنامه ما حفظ شود. البته پس از تغییر قالب یک سایت جوملایی، اصلاح css هر چند در موارد جزئی برای کامپوننت ها و ماژول های مختلف نصب شده روی سایت، امری اجتناب ناپذیر است.
کدهای css مورد نظرمان را در یک فایل با عنوان stylesheet.css قرار داده و آن را در مسیر زیر ذخیره می کنیم.
[joomla_root_directory]/media/[com_example]/css/stylesheet.css
[joomla_root_directory] = مسیر نصب جوملا (مثلا: c:\wamp\www\joomla)
[com_example] = نام کامپوننت ما
یک روش معمول برای افزودن فایل stylesheet.css به کامپوننت، نوشتن متد مورد نظر در فایل helper و سپس صدا زدن آن در فایل اصلی کامپوننت (یعنی فایل enterance) است. به این ترتیب فایل css در تمام صفحات کامپوننت بارگذاری خواهد شد. ما فایل stylesheet.css را در مسیر media جوملا ذخیره کردیم تا به راحتی کد مربوط به فراخوانی متد مذکور را بتوانیم هم در سمت backend و هم frontend استفاده کنیم و فایل استایل شیت ما در هر دو سمت بارگذاری شود.
ویرایش فایل helper موجود در مسیر زیر:
[joomla_root_directory]/administrator/components/[com_example]/helpers/example.php
example.php
<?php
defined('_JEXEC') or die;
class ExampleHelper
{
// todo other codes here
public static function addStyleSheet()
{
$document = JFactory::getDocument();
$document->addStyleSheet(JUri::root() . 'media/com_example/css/stylesheet.css');
}
// todo other codes here
}
در کد فوق ابتدا شیئ JDocument را در یک متغیر ذخیره کرده ایم سپس متد addStyleSheet شیئ JDocument را فراخوانی کرده ایم. و مسیر فایل استایل شیت را به عنوان پارامتر به این متد ارسال کرده ایم.
عبارت JUri::root() ، متد استاتیک root() از کلاس JUri را اجرا می کند که خروجی آن رشته ای است که مسیر وب سایت جوملایی ما را نشان می دهد. یعنی:
http://sitename.com/joomla_directory/
حالا باید متد addStyleSheet را در جایی از کامپوننت com_example فراخوانی کنیم که در تمام صفحات ما اجرا شود بهترین جا برای فراخوانی آن فایل enterance است زیرا این فایل همانطور که از نام آن پیداست، در تمام صفحات کامپوننت ما اجرا می شود. فایل enterance همان فایل ورودی کامپوننت است که هم نام با نام کامپوننت ولی بدون پیشوند com_ در پوشه اصلی کامپوننت قرار می گیرد.
به عنوان مثال فایل enterance کامپوننت فرضی com_example در مسیرهای زیر است:
Backend:
[joomla_root_directory]/administrator/components/[com_example]/example.php
Frontend:
[joomla_root_directory]/components/[com_example]/example.php
ویرایش فایل enterance سمت Frontend :
[joomla_root_directory]/components/[com_example]/example.php
example.php
<?php
defined('_JEXEC') or die;
// todo other codes here
JLoader::register('ExampleHelper', JPATH_ADMINISTRATOR . '/components/com_example/helpers/example.php');
ExampleHelper::addStyleSheet();
$controller = JControllerLegacy::getInstance('Example');
$controller->execute(JFactory::getApplication()->input->getCmd('task'));
// todo other codes here
// Redirect by the controller
$controller->redirect();
کد هایلایت شده فوق را می توانیم در فایل ورودی کامپوننت در سمت Backend نیز قرار دهیم تا فایل استایل شیت در سمت Backend نیز بارگذاری شود.
خب حالا لازم است تست کنیم تا مطمئن شویم فایل css مورد نظر ما بارگذاری می شود.
فرض کنیم کامپوننت com_example را روی یک سایت جوملایی در لوکال هاست در آدرس زیر نصب کرده ایم:
http://localhost/joomla
برای تست، آدرس زیر را در نوار آدرس مرورگر کروم تایپ کنید:
Frontend:
http://localhost/joomla/index.php?option=com_example
Backend:
http://localhost/joomla/administrator/index.php?option=com_example
در مرورگر کروم ، گزینه View Page Source را از منوی کلیک سمت راست انتخاب کنید و یا از کلیدهای میانبر Ctrl + U استفاده کنید.
جایی بین دو تگ باز و بسته شدن <head></head> باید عبارت زیر را مشاهده کنید:
<html> <head> ... <link rel="stylesheet" href="http://localhost/joomla/media/com_example/css/stylesheet.css" type="text/css" /> ... </head> <body> ... </body> </html>
اگر این اتفاق نیافتاد، یک بار دیگر با دقت مطلب فوق را مطالعه کرده و انجام دهید.
