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

استیل شیت سفارشی (custom.css) چیست؟ فایده استفاده از فایل استیل شیت سفارشی چیست؟ چه مواردی را می توان در این فایل گنجاند. اینها سئوالاتی است که ممکن است به ذهن هر وبمستر یا مدیر سایتی برسد. اگر از قالب پروتواستار (Protostar Template) جوملا برای طراحی وبسایت خود استفاده می کنید، این مطلب می تواند به شما در ایجاد یک فایل استیل شیت سفارشی (custom.css) کمک کند.

مزایای ایجاد فایل استیل شیت سفارشی

1- فایل template.css دستکاری نمی شود، بنابراین لازم نیست نگران جستجو در یک فایل استیل شیت خیلی طولانی باشید.

2- اگر جوملا را آپدیت کنید، تمامی تغییرات ایجاد شده در فایل template.css رونویسی می شود و سبک و قالبی که برای خود سفارشی کرده اید از بین می رود. بنابراین یا مجبورید نسخه پشتیبان قدیمی خود را دوباره آپلود کنید یا نسخه جدید را مجددا سفارشی کنید.

3- اگر به جایگزینی ساده فایل template.css قبلی خود با نسخه جدید راضی باشید، تغییرات جدیدی که در سبک و نمای قالب در بروزرسانی جدید انجام شده است را از دست خواهید داد.

4- اگر فایل استیل شیت خود (custom.css) را بسازید، مرتب، سازماندهی شده و ماندگار خواهد بود و تنها حاوی سبک هایی است که خودتان تعریف کرده اید. در هر بار آپدیت جوملا یا قالب جوملا، تغییرات و سبک شما باقی خواهد ماند.

5- اگر لینک استیل شیت سفارشی را به طور صحیح در فایل index.php درج کرده باشید، قالب بندی تعریف شده در این فایل بر قالب بندی موجود در فایل template.css اولویت داشته و از قالب سفارشی شما استفاده خواهد شد.

1- فایل template.css دستکاری نمی شود، بنابراین لازم نیست نگران جستجو در یک فایل استیل شیت خیلی طولانی باشید. 2- اگر جوملا را آپدیت کنید، تمامی تغییرات ایجاد شده در فایل template.css رونویسی می شود و سبک و قالبی که برای خود سفارشی کرده اید از بین می رود. بنابراین یا مجبورید نسخه پشتیبان قدیمی خود را دوباره آپلود کنید یا نسخه جدید را مجددا سفارشی کنید. 3- اگر به جایگزینی ساده فایل template.css قبلی خود با نسخه جدید راضی باشید، تغییرات جدیدی که در سبک و نمای قالب در بروزرسانی جدید انجام شده است را از دست خواهید داد. 4- اگر فایل استیل شیت خود (custom.css) را بسازید، مرتب، سازماندهی شده و ماندگار خواهد بود و تنها حاوی سبک هایی است که خودتان تعریف کرده اید. در هر بار آپدیت جوملا یا قالب جوملا، تغییرات و سبک شما باقی خواهد ماند. 5- اگر لینک استیل شیت سفارشی را به طور صحیح در فایل index.php درج کرده باشید، قالب بندی تعریف شده در این فایل بر قالب بندی موجود در فایل template.css اولویت داشته و از قالب سفارشی شما استفاده خواهد شد.

طریقه ایجاد فایل استیل شیت سفارشی در مدیر قالب جوملا

در نسخه 3.x جوملا امکانات ایجاد، کپی و ویرایش فایل ها با استفاده از فایل منیجر بهبود یافته است و انعطاف پذیری بالایی فراهم ساخته است. زمانی که از منوی Extensions وارد صفحه Template Manager می شوید، صفحه ای با جدولی از تمپلیت ها (قالب های) نصب شده سایت شما دیده می شود. ستون های این جدول شامل سبک (Style)، پیش فرض (Default)، تخصیص یافته (Assigned)، موضع (Location)، قالب (Template) و شناسه (ID) می باشند.

برای ایجاد استیل شیت سفارشی برای قالب پروتواستار (Protostar Template) جوملا، در ستون Template روی Protostar کلیک کنید. اطمینان حاصل کنید که در برگه ویرایشگر قالب باشید.

در صفحه ویرایشگر قالب روی پوشه CSS در ستون سمت چپ کلیک کنید، این پوشه باز شده و شما فایل های داخل آن را خواهید دید که شامل template.css نیز می باشد. حال در بالای صفحه روی دکمه New File کلیک کنید.

همانطور که در تصویر فوق می بینید، یک کادر جدید باز می شود که یک تکست باکس برای نام فایل و یک منوی کشویی برای انتخاب نوع فایل دارد. نام فایل را وارد کرده و در منوی کشویی زیر آن پسوند css را انتخاب کنید و سپس دکمه Create را بزنید.

همانطور که در تصویر دیده می شود، می توانید از بخش آپلود فایل استفاده کرده و فایل استیل شیتی که قبلا ساخته اید و کدهای خود را در آن نوشته اید، را بارگذاری کنید.

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

بعد از نوشتن کدهای css مورد نظر برای قالب بندی ظاهر تمپلیت خود، بایستی این فایل به جوملا معرفی شود و در فایل index.php تمپلیت درج شود تا زمان بالا آمدن سایت جوملا این فایل را نیز بارگذاری کند.

ویرایش فایل index.php برای درج استیل شیت custom.css

همانطور که در مدیر تمپلیت جوملا هستید، در ستون سمت چپ روی فایل index.php کلیک کنید تا در صفحه ویرایشگر باز شود. بخاطر داشته باشید که قبل از هر تغییری در فایل های ساختاری سایت خود، یک نسخه پشتیبان (بک آپ) تهیه نمایید. اگر زمانی کار خوب پیش نرفت و سایت به هم ریخت، بتوانید نسخه پشتیبان را بازیافت و سایت خود را ریستور کنید.

در فایل index.php تمپلیت پروتو استار که حالا در ویرایشگر منیجر باز است، خط کد زیر را پیدا کنید (در جوملا نسخه 3.7 این خط کد در لاین 50 می باشد):

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

حال خط کد زیر را دقیقا زیر آن تایپ کنید. نام فایل استیل شیت خود را بجای custom.css بگذارید، اگر فایل خود را به نام دیگری ایجاد کرده اید.

$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

حالا فایل استیل شیت سفارشی شما آماده است و می توانید قالب بندی خود را در آن درج کنید.

توجه: بخاطر داشته باشید که در هر بار آپدیت جوملا فایل index.php رونویسی شده و فایل جدیدی بجای آن کپی می شود. بنابراین بایستی بعد از آپدیت جوملا مرحله بالا را تکرار کرده و فایل استیل شیت خود را در این فایل درج کنید. یک روش بدیل برای این بخش این است که از تمپلیت پروتواستار جوملا کپی گرفته و به نام دیگری ذخیره نمایید و آن را ویرایش و به قالب پیش فرض سایت خود تبدیل کنید. بدینطریق هر بار که جوملا آپدیت شود، سبک و سفارشی سازی شما از بین نخواهد نرفت و لازم نیست اقدامات فوق را تکرار کنید.

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.