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

بدون دردسر بر روی قالب های وردپرس خود تغییرات اعمال کنید
  • 1390/7/6
  • محمد حسین آقانبي
  • 5

شاید شما هم یک طراح قالب باشید و قالب های متفاوتی رو برای وب سایت های مختلف طراحی کرده باشید و یا یک مدیر وب سایت که طراحی theme سایتش رو خودش به عهده گرفته باشه.


یکی از مسائلی که در طراحی برای شما پیش خواهد آمد تغییراتی هست که به مرور زمان بنا به تغییر در قالب و یا جهت همخوانی با مرورگرها و پرداختن به نکات ریز قالب در 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 میشه و استایل های قبلی مورد استفاده قرار نمیگیره. این ویژگی در مواقعی هم که شما حتماً خواهان این هستید که یک صفت در مرورگر یک کاربر که از لحاظ نمایش صفحات وب سفارشی شده همیشه به یک صورت نمایان بشه مورد استفاده قرار میگیره.

خوب اکنون باز هم فایل custom.css رو باز کرده و این بار به صورت زیر خطوط رو وارد کنید :

a { color: purple !Important; }

a:visited { color: blue !Important; }

a:hover { color: yellow !Important; }

در این روش نیازی به تعریف کلاس نیست و با ذخیره ی فایل و رفرش صفحه می تونید تغییرات رو مشاهده کنید.

البته وردپرس در این مورد پلاگینی رو در اختیار میذاره که توسط اون فقط کافیه تغییرات جدید استایل رو درون یک فایل که از پنل وردپرس قابل دسترس هست قرار بدید و فایل رو ذخیر کنید. این پلاگین به نام Persistent Styles در دایرکتوری پلاگین های وردپرس وجود داره و در لینک زیر هم می تونید دانلودش کنید.

http://wordpress.org/extend/plugins/persistent-styles-plugin/

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 5 دیدگاه
  1. سلام دوست عزیز
    یه سوال ازتون دارم امیدوارم بتونید جوابمو بدید
    http://daneshnea.persiangig.com/wb-bazar.css
    این فایل استایل یه افزونه ی وردپرسه
    و این آدرس سایتمه
    shop.JondiGod.ir
    افزونه که برای خرید آنلاینه یه مشکل داره و اونم اینه که فضای کل زیر هدر رو اشکال می کنه
    اگه ممکنه کمکم کنید تا فایل فوق رو ویرایش کنم تا مثل پست هام در محل مربوطه نمایش داده بشه محتویات افزونم

    می دونم تقاضای زیادیه اگه براتون مقدوره کمکم کنید

  2. ابا سلامح مشکل. من اینه که ویرایش قالب کجاست مثلا میهن بلاگ یه جاداره به نام ویرایش قالب امما ورد پرس نداره ممنون میشم به ایمیلم ایمیل کنیدk244amir062@gmail.com

  3. سلام و وقت بخیر
    من چند سوال در مورد وردپرس دارم
    و نیاز به راهنمایی دارم در صورتی تمایم لطفا با شماره ۰۹۱۲۱۱۵۳۸۱۵
    تماس بگیرید
    باتشکر
    کامبیز هجیر

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *