سئو برای زندگی

customize

یکی از کاربران ما میخواست پس زمینه متفاوتی برای صفحه اصلی سایتش داشته باشد. جوملا چند راه برای بخ شکل دلخواه در آوردن (customize ) صفحات ارائه میکند. در اینجا چهار راه حل جوملا را به شما توضیح میدهیم.

راه اول: به قالب کنونی تان، CSS اضافه کنید.

بررسی کنید ببینید قالب سایت شما پیش از این نشان کردن صفحه خاصی را تسهیل کرده است یا خیر. مثلا برخی از قالبها ID آیتم منویی به عنوان کلاس، اضافه میکنند. این به شما امکان میدهد بدون انجام کار دیگری صفحاتی را با استفاده از CSS، هدف قرار دهید. از ابزار بررسی مرورگر خود یا فایرباگ برای بررسی خروجی HTML استفاده کنید.
joomla code
همان طور که میبینید، در این مثال قالب، آی دی آیتم منویی به مارک آپ (markup ) اضافه میکند بنابراین با استفاده از CSS زیر میتوانیم پس زمینه را هدف قرار دهیم:

body.itemid-101 {
 background-color: yellow;
 }

راه دوم: استفاده از  کلاس صفحه (Page Class)
page class 
اگر قالب، هیچ مارک آپ منحصر به فردی برای هر صفحه اضافه نکند، چه اتفاقی می افتد؟
با استفاده از گزینه کلاس صفحه منو، میتوانیم کلاسهای CSS بیشتری به مارک آپ HTML اضافه کنیم. سپس میتوانیم برای هدف قرار دادن همان صفحه خاص مورد نظر، از CSS استفاده کنیم.
page display 
برای افزودن یک کلاس صفحه مراحل زیر را انجام دهید:
-    ویرایش آیتم منوی خود
-    تب نمایش صفحه (display)
-    کلاس صفحه (کلاس خود را اینجا اضافه کنید)
-    ذخیره
در این مثال پیش از homepage، فاصله اضافه کردیم تا آن را به کلاس جدایی تبدیل کنیم. اگر میخواهید آن را به انتهای کلاس آخر به عنوان پسوند اضافه کنید، از هایفن به جای آن استفاده کنید.
اگر خوش شانس باشید، قالب کلاس را به جایی که آن را نیاز دارید، اضافه میکند.
بیایید خروجی را در این مثال مشاهده کنیم:
home page code joomla
کلاس homepage افزوده شد اما به جایی که مورد نظر بود و میتوانیم آن را با استفاده از CSS در نمونه پس زمینه هدف قرار دهیم، افزوده نشد. ما میتوانیم ناحیه محتوایی را که از آن استفاده میکند هدف قرار دهیم اما نه در پس زمینه.
بنابراین این چیزی نبود که به دنبال آن بودیم. ما باید مقداری کار اضافی انجام دهیم که ما را به مثال بعدی میبرد.
نکته حرفه ای: علت این است که با CSS نمیتوانیم عناصر والد (parent elements) را هدف قرار دهیم. تنها میتوانیم خود عنصر و عناصر فرزند را هدف قرار دهیم.
راه سوم: استفاده از افزونه
اگر نمیخواهید فایلهای هسته قالبتان را اصلاح کنید، از افزونه ای برای خروجی دلخواه CSS برای هر صفحه استفاده کنید.
راه چهارم: کد دلخواه را در قالب خود بنویسید
اگر قالب دلخواهی ایجاد میکنید، بررسی کنید چگونه قالب Protostar این کار را انجام میدهد. در زیر برخی از کدهای Protostar را اضافه کرده ایم. ما آن را اصلاح کرده ایم تا برای هر قالبی ژنریک شود:

<?php
 $app = JFactory::getApplication();
 $option = $app->input->getCmd('option', '');
 $view = $app->input->getCmd('view', '');
 $layout = $app->input->getCmd('layout', '');
 $task = $app->input->getCmd('task', '');
 $itemid = $app->input->getCmd('Itemid', '');
 ?>

<body class="<?php echo $option
     . ' view-' . $view
     . ($layout ? ' layout-' . $layout : ' no-layout')
     . ($task ? ' task-' . $task : ' no-task')
     . ($itemid ? ' itemid-' . $itemid : '');
 ?>">

این کد چه کاری انجام میدهد؟
اپلیکیشن جوملا را میگیرد، سپس همه ویژگیهای آن را پیدا میکند، مانند:
-    گزینه های جوملا در این باره چیست؟ آیا com_content یا چیز دیگری است؟
-    چه ویو (view) در آن دارد؟ آیا در frontpage view است یا چیز دیگر؟
-    چه صفحه آرایی ( layout ) استفاده میکند؟ آیا از صفحه آرایی پیش فرض استفاده میکند؟
-    از چه task استفاده میکند؟
-    آی دی منو آیتم آن چیست؟
سپس اطلاعات را به عنوان کلاسهایی در عنصر body بیرون میدهد.
نگاهی به یک نمونه داشته باشیم:
Protostar
بنابراین توانستیم با استفاده از هر یک از کلاسهای CSS صفحات مختلف را هدف قرار دهیم.

5 1 1 1 1 1 1 1 1 1 1 Rating 100% (1 Vote)
sd-logos-part1
sd-logos-part2

منتخب از مشتریان با ارزش ما

مشتریان ما سرمایه ما
themeforest-logo
codecanyon--logo
graphicriver-logo
audiojungle-logo
photodune-logo
activeden--logo