بدون دردسر بر روی قالب های وردپرس خود تغییرات اعمال کنید
شاید شما هم یک طراح قالب باشید و قالب های متفاوتی رو برای وب سایت های مختلف طراحی کرده باشید و یا یک مدیر وب سایت که طراحی theme سایتش رو خودش به عهده گرفته باشه.
http://www.gooyait.com/uploads/css.jpg
یکی از مسائلی که در طراحی برای شما پیش خواهد آمد تغییراتی هست که به مرور زمان بنا به تغییر در قالب و یا جهت همخوانی با مرورگرها و پرداختن به نکات ریز قالب در style sheet قالبتون باید اعمال کنید.
شاید بعد از یک زمان خاص استفاده از قالب ، خواهان تغییراتی در رنگ بندی بخش های مختلف قالب ، تغییر فونت ، تغییر رنگ متن ، جا به جایی مکان یک نوشته ، تغییراتی در نوع نمایش li و ul ، تغییر ظاهر مکان نما و … باشید که البته ممکنه پرداختن به همه ی این موارد لیستی حاوی تعداد متفاوتی از این اصلاحیه ها درست بشه که مجبور باشید در css قالب خودتون اعمال کنید.
چون در اکثر اوقات تغییرات جزئی متعددی رو می خواهید اعمال کنید ، لیست کردن این تغییرات ، پیدا کردن استایل مورد نظر در فایل css و اعمال تغییرات جدید و ذخیره ی فایل به این صورت وقت گیر خواهد بود و شما رو دچار سردرگمی خواهد کرد.
معمولاً برای ایجاد یک نسخه ی جدید از استایل شیت و به اصطلاح upgrade کردن فایل css به همین روش سنتی پیش خواهیم رفت. اما اگه وقت براتون مهمه و حوصله ی دردسر و گیجی رو ندارید بهتره راه حلی ساده تر و کاربردی تری رو در نظر بگیریم.
در این روش نیازی به دستکاری فایل (های) css قالب نیست و اضافه بر داشتن فایل های اصلی بدون تغییر ، تغییرات جدید رو اعمال خواهیم کرد.
یک فایل به نام custom.css بسازید و در پوشه ی قالب وردپرستون آپلود کنید. بعد از آپلود کد زیر رو در فایل header.php بین تگهای <head> و </head> قرار بدید :
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘template_url’); ?>/custom.css” />با اضافه کردن این خط در فایل header.php ، این css روی قالب شما موثر خواهد بود. حال وقت اعمال تغییرات است. فرض کنید می خواهید تمام لینک هایی که در تگ body قرار گرفته اند ، صفات دیگری داشته باشند ، مثل رنگ و یا شمایل نوشته.
در css اصلی شما این صفات به صورت زیر نوشته شده اند :
a { color: gray; text-decoration:underline; }a:visited { color: red;text-decoration:underline; }a:hover { color:black; text-decoration:underline;}
برای تغییر این صفات بدون ویرایش فایل css اصلی ، به دو روش می تونیم تغییر استایل رو اعمال کنیم. ( قصد داریم در این آموزش فقط رنگ لینک ها رو تغییر بدیم ) :
روش اول :
در همون فایل header.php به دنبال تگ <body> باشیم و به این تگ یک کلاس اضافه کنیم.
<body>
بعد از اضافه کردن کلاس و ذخیره ی فایل هدر ، فایل custom.css رو باز کنید و خطوط زیر رو درون فایل اضافه کنید :
a { color: purple !Important; }a:visited { color: blue !Important; }a:hover { color: yellow !Important; }حال با ذخیره ی فایل و رفرش وب سایت متوجه تغییرات خواهید شد.
روش دوم :
در این روش ما از کلید !Important استفاده می کنیم. توضیحی که در مورد !Important باید بدم اینه که با استفاده از این ویژگی استایل شما بر روی استایل مشابه دیگه overwrite میشه و استایل های قبلی مورد استفاده قرار نمیگیره. این ویژگی در مواقعی هم که شما حتماً خواهان این هستید که یک صفت در مرورگر یک کاربر که از لحاظ نمایش صفحات وب سفارشی شده همیشه به یک صورت نمایان بشه مورد استفاده قرار میگیره.
http://www.gooyait.com/uploads/important-266x200.gif
خوب اکنون باز هم فایل custom.css رو باز کرده و این بار به صورت زیر خطوط رو وارد کنید :
a { color: purple !Important; }a:visited { color: blue !Important; }a:hover { color: yellow !Important; }در این روش نیازی به تعریف کلاس نیست و با ذخیره ی فایل و رفرش صفحه می تونید تغییرات رو مشاهده کنید.
البته وردپرس در این مورد پلاگینی رو در اختیار میذاره که توسط اون فقط کافیه تغییرات جدید استایل رو درون یک فایل که از پنل وردپرس قابل دسترس هست قرار بدید و فایل رو ذخیر کنید. این پلاگین به نام Persistent Styles در دایرکتوری پلاگین های وردپرس وجود داره و در لینک زیر هم می تونید دانلودش کنید.
http://wordpress.org/extend/plugins/...-styles-plugin
