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

تا کنون در نسخه 3 جوملا کدی برای شناسایی کلاس صفحه (Page Class) نوشته نشده است. ممکن است در نسخه های بعدی اضافه شود. کلاس وب پیج در آیتم منو و در زیر گزینه های پیشرفته نمایش صفحه (Advanced Options -> Page Display options -> Page Class) درج می شود.

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

برای اینکه قالب پروتو استار جوملا این کلاس را تشخیص دهد، بایستی دو کد به فایل index.php در پوشه template -> protostar وبسایت جوملا 3 خود در سرور میزبانی سایت اضافه کنید. دقت کنید که منظور فایل index.php روت نیست، بلکه فایل index.php موجود در پوشه Protostar Template است.

برای اینکه قالب پروتو استار جوملا این کلاس را تشخیص دهد، بایستی دو کد به فایل index.php در پوشه template -> protostar وبسایت جوملا 3 خود در سرور میزبانی سایت اضافه کنید. دقت کنید که منظور فایل index.php روت نیست، بلکه فایل index.php موجود در پوشه Protostar Template است.

1- از فایل index.php اورجینال یک پشتیبان تهیه کنید و با نامی متفاوت در پوشه ذخیره کنید. بدین طریق اگر مشکلی پیش آمد می توانید فایل اورجینال را ریستور کنید

2- فایل index.php را با یک ویرایشگر متنی مثل ++Notepad باز کنید

3- کد زیر را بین بخش <?php ?> در بالای خط <!DOCTYPE html> قرار دهید

$app = JFactory::getApplication('site'); 
$pageclass = & $app->getParams('com_content');

دقت داشته باشید که این کد به زبان برنامه نویسی PHP است، بنابراین بایستی قبل از نماد بسته شدن قطعه کد ?> قرار داده شود.

4- گرچه در تگ بدنه پیج کلاس ها و پارامترهای زیادی اضافه شده است، لازم است که دو خط کد برای کلاس صفحه به آن اضافه شود. دقت کنید که سمی کالن (;) فقط در پایان خط آخر گذاشته می شود. تگ <body> نهایی بایستی به شکل زیر باشد:

<body class="site <?php echo $option
    . ' view-' . $view
    . ($layout ? ' layout-' . $layout : ' no-layout')
    . ($task ? ' task-' . $task : ' no-task')
    . ($itemid ? ' itemid-' . $itemid : '')
    . ($params->get('fluidContainer') ? ' fluid' : '')
    . (' ') 
    . ($pageclass ->get('pageclass_sfx')); 
?>">

5- به منوی مورد نظر در ادمین جوملا بروید. در قسمت Advanced Options -> Page Display options -> Page Class یک نام کلاس دلخواه اضافه کنید. برای مثال: aboutpage

6- صفحه مورد نظر را در مرورگر باز کنید و کد منبع را با استفاده از کلیک راست در وسط صفحه و زدن گزینه View Source باز کنید. حالا خواهید دید که نام کلاس به پایان سایر کلاس های تگ <body> اضافه شده است، چیزی مثل کد زیر:

<body class="site com_content view-article no-layout no-task itemid-119 aboutpage "> 

حالا می توانید استایلی برای این کلاس در استیل شیت خود تعریف کنید. برای مثال:

body.aboutpage {color: #fd6734;}