ُسلام کاربران عزیز ، حال شما خوبه ؟ وقتتون بخیر ، امیدوارم که سلامت و شاد باشید . امروز میخوام درمورد استفاده از پسوند کلاس در جوملا توضیح بدیم . با ما همراه باشید.
محتویات
۱ مقدمه
۲ پس زمینه
۳ چه موقع شما از پسوند کلاس استفاده می‌کنید؟
۴ پسوند کلاس صفحه
۴.۱ صفحات، بدون پسوند کلاس صفحه چگونه کار می‌کند؟
۴.۲ پسوند کلاس صفحه (بدون فاصله)
۴.۳ پسوند کلاس صفحه ( با یک فاصله)
۴.۴ افزودن سبک CSS به کلاس جدید
۵ پسوند کلاس ماژول
۵.۱ برای تغییر در سبک CSS مراقب باشید
۶ پسوند کلاس منو و شناسه تگ منو
۶.۱ پسوند کلاس منو
۶.۲ پارامتر شناسه تگ منو
۷ نتیجه گیری
مقدمه
این آموزش برای جوملا ۱٫۵ آماده شده ولی برای نسخه‌های بعدی جوملا نیز کاربرد دارد.
در این آموزش یاد می‌گیریم که چگونه پسوند کلاس‌های جوملا را در صفحه، ماژول و منو استفاده کنیم تا ظاهر سایت را به سبک دلخواه و جذابی تنظیم کنیم.
این آموزش با استفاده از جوملا ۱٫۵٫۲۵ آماده شده است.
پس زمینه
جوملا صفحات HTML را با استفاده از CSS برای کنترل ظاهر سایت ایجاد کرده است. اینها شامل مواردی از جمله فونت‌ها، رنگ‌ها، حاشیه‌ها و پس زمینه می‌باشد. فایل‌های CSS بخشی از فایل‌های قالب شما هستند.
زمانیکه جوملا یک صفحه ایجاد می‌کند، توسط کلاس‌های مختلف CSS که ایجاد می‌شوند بیان می‌کنند که این کلاس‌ها به چه قسمتی از صفحات HTML اشاره می‌کند. نام کلاس‌ها در جوملا از قبل تنظیم شده‌اند. اما جوملا به شما این اجازه را می‌دهد تا تغییرات لازم را اعمال کرده و یا کلاس‌های جدید دیگری در فایل‌ها CSS اضافه نمایید.
شما می‌توانید در ظاهر صفحات سایت با کمی برنامه نویسی تغییراتی داده و تنظیمات لازم را اعمال کنید.
برای درک بهتر نمونه‌هایی را برای شما مثال می‌زنیم.
چه موقع شما از پسوند کلاس استفاده می‌کنید؟
به عنوان مثال، سایت شما دارای بخش‌هایی مختلفی از جمله وبلاگ است که هر بخش متفاوت می‌باشد. اگر شما بخواهید همه این بخش‌ها به یک شیوه نمایش داده شوند، نیازی به استفاده از پسوند کلاس نخواهید داشت. ولی اگر بخواهید که هر بخش با بخش دیگر در شکل ظاهری متفاوت باشد، می‌بایست از پسوند کلاس استفاده کنید.
برای مثال شاید بخواهید یک تصویر یا رنگ پس زمینه متفاوتی برای هر بخش تنظیم کنید.
یا اینکه بخواهید سرصفحه یکی از صفحات را با صفحات دیگر متفاوت نمایش دهید.
در همه این موارد، شما نیاز دارید که فایل “template.css” را برای تنظیم کلاس CSS استاندارد ویرایش کنید. برای مثال اگر تغییراتی در کلاس “CSS “componentheading دهید، این تغییرات تاثیر خود را در کلاس‌های آیتم‌های منو خواهد گذاشت.
با این حال، اگر شما پسوند کلاس منحصر به فردی به آیتم منو اضافه کنید، سپس جوملا، کلاس CSS جدیدی برای هر آیتم منو ایجاد خواهد کرد، بنابراین شما می‌توانید از سبک‌های متفاوتی برای منوها نیز استفاده کنید.
پسوند کلاس صفحه
ابتدا مطمئن شوید که وب سایت نمونه‌ای دارید و قالب پیش فرض آن “rhuk_milkyway” باشد.
وارد مدیریت جوملا شده سپس به افزونه‌ها ← مدیریت قالب‌ها بروید و بررسی کنید که این قالب پیش فرض است یا خیر؟
صفحات، بدون پسوند کلاس صفحه چگونه کار می‌کند؟
قبل از اینکه ما پسوند کلاس صفحه را ایجاد کنیم، بررسی کنیم که این صفحات بدون پسوند چگونه کار می‌کنند.
در صفحه اصلی ← نکات مهم ← صفحات نمونه ← بخش وبلاگ را باز کنید. در مرورگر خود سورس صفحه را مشاهده کنید.
برای مثال در Firefox کلیدهای Ctrl+U را فشار دهید. در Internet Explorer منوی View ← Source را انتخاب کنید. در Safari منوی View ← View Source را انتخاب کنید.
با استفاده از فرمان Find ابتدا کلمه “componentheading” را پیدا کنید. باید همانند دستور زیر باشد.
<div class=”componentheading”>
سورس را بررسی کنید و تگ‌های زیر را ببینید:
<table class=”blog” cellpadding=”0″ cellspacing=”0″>
<table class=”contentpaneopen”>
<td class=”contentheading” width=”100%”>
<table class=”contentpaneopen”>
توجه کنید: در تصاویر زیر ما از افزونه Firebug برای Firefox استفاده کرده‌ایم.
در تصویر زیر شما کلاس “componentheading” را می‌بینید. عنوان مقاله در بالای صفحه قرار دارد.
تصویر زیر کلاس “وبلاگ” را نشان می‌دهد. این جدول بیرونی است که مقالات را در خود جای داده است.
در تصویر بعدی شما کلاس “contentpaneopen” مربوط به سرصفحه مطلب را مشاهده می‌کنید. این بخش شامل عنوان و آیکن‌های PDF، پرینت و ایمیل در سمت راست می‌شود.
در تصویر بعدی شما کلاس “contentpaneopen” را برای بدنه مطلب مشاهده می‌کنید. در این بخش اطلاعاتی شامل نویسنده، تاریخ و محتوای مقاله قرار گرفته است.
بنابراین به راحتی می‌توانیم بفهمیم که چگونه این تغییرات را در جوملا بدهیم. این کلاس‌ها در جوملا بصورت متن HTML نوشته شده است. قالب شامل فایل‌های CSS است که عناصر و کلاس‌ها را برای استفاده فراهم می‌کند.
پسوند کلاس صفحه (بدون فاصله)
خب ، دیدید که چطور بدون استفاده از پسوند کلاس صفحه ما این کارها را انجام دادیم. برای نمونه مثالی بیاوریم.
وارد مدیریت جوملا شوید. سپس مدیریت منو ← منوها ← Example Pages و “بخش وبلاگ” را انتخاب نمایید. زمانیکه شما صفحه آیتم‌های منو: [ ویرایش ] را مشاهده کردید، در سمت چپ بخش پارامترها – سیستم را انتخاب نمایید.
در مقابل عبارت پسوند کلاس صفحه عبارت “_myBlogSuffix” را وارد نموده و همچنین عنوان صفحه را نیز مشخص کرده و ذخیره کنید.
در مرورگر خود همانطور که قبلا نیز گفته شده عبارت “_myBlogSuffix” را جستجو نمایید. این عبارت در یک تگ div قرار گرفته است.
<div class=”componentheading_myBlogSuffix”>
اگر شما به سورس توجه کنید می‌بینید که کلاس‌های زیر نشان داده شده است.
blog_myBlogSuffix، contentpaneopen_myBlogSuffix، و contentheading_myBlogSuffix
با افزودن پسوند کلاس صفحه، نام کلاس نیز تغییر کرده است. به این معنی که دیگر سبک ویژه‌ای برای نام‌های کلاس پایه در فایل CSS نخواهد بود.
(مانند componentheading در وبلاگ و موارد دیگر)
اکنون شما می‌توانید این مشکل را با ویرایش فایل CSS قالب با اضافه کردن کلاس‌های جدید به آن (برای مثال “componentheading_myBlogSuffix”) انجام دهید. اما راه ساده تری برای انجام اینکار با استفاده از بخش پارامترها – سیستم وجود دارد.
پسوند کلاس صفحه ( با یک فاصله)
دوباره به مدیریت جوملا برگشته و وارد منوها ← Example Page ← بخش وبلاگ شوید. ما قصد داریم پسوند کلاس صفحه را تغییر دهیم.
اینبار قصد داریم پسوند کلاس را با یک فاصله وارد کنیم، یعنی یک فاصله + “myBlogClass” ، در تصویر زیر ببینید.
اکنون با رفتن به مدیریت جوملا و نمایش مجدد Example Pages ← بخش وبلاگ پسوند کلاس صفحه را ذخیره کنید.
حال در سورس HTML صفحه اگر دقت کنیم عبارت “myBlogClass” با جستجویی که در سورس داشتیم خواهیم یافت.
کد بشرح زیر خواهد بود
<div class=”componentheading myBlogClass”>
به این دلیل ما یک فضای اضافه در پسوند کلاس صفحه قرار دادیم، کلاس دوم را بدون اینکه در کلاس اول تغییری دهیم ایجاد کردیم (تمامی مرورگرهای جدید این روش را پشتیبانی می‌کنند). بنابراین ما برای این صفحه سبک‌های CSS جاری را نشکستیم.
(یک اخطار: ما باید مطمئن شویم که نام کلاس‌های جدید با نام کلاس‌های بکار رفته در صفحه متفاوت هستند. در غیر اینصورت ممکن است چیزی که ما می‌خواهیم بدست نیاید.)
افزودن سبک CSS به کلاس جدید
در این مرحله، ما یک کلاس جدید CSS در HTML با یک سبک جدید ایجاد کردیم. حالا ما از کلاس جدید استفاده می‌کنیم تا تغییراتی که در صفحه ایجاد می‌شود را ببینیم. اولین چیزی که نیاز داریم باز کردن فایل CSS مربوط به این کلاس است.
فایل <joomla_root>/templates/rhuk_milkyway/css/template.css را باز کنید.
حالا قصد داریم یک رنگ پس زمینه فقط در بخش وبلاگ در سایت خود اضافه نماییم. (در نظر داشته باشید، اگر ما قصد داشته باشیم در تمامی صفحات بخش وبلاگ در سایت خود این تغییرات را اعمال کنیم، باید تغییراتی در کلاس‌های “componentheading” یا “blog”اعمال کنیم).
برای انجام اینکار باید محدوده مورد نظر را مشخص کنیم (“componentheading”، “blog”یا “contentpaneopen”) . ما قصد داریم محدوده “componentheading” را تغییر دهیم.
ابتدا در فایل CSS، پس از یافتن محدوده مورد نظر، عبارت “div.myBlogClass” را باید اضافه نماییم و کدهای زیر را در ادامه این کد در فایل CSS قرار دهید:
/* Custom Styling */
div.myBlogClass {
background-color: #FFE4E1; /* mistyrose */
