چگونه به راحتی CSS سفارشی را به سایت وردپرس خود اضافه کنیم؟

چگونه به راحتی CSS سفارشی را به سایت وردپرس خود اضافه کنیم؟

آیا شما نیاز دارید که Css  دلخواه خودتان را به سایت وردپرس خود اضافه کنید؟ اگر شما مقداری با وردپرس کار کرده باشید حتما نیاز پیدا خواهید کرد که Css به سایت خود اضافه کنید

اما اضافه کردن Css به سایت خود ممکن است کمی مشکل باشد چون تغییر در فایل های اصلی قالب و اضافه کردن کد های Css در قالب اصلی به هیچ عنوان ایده مناسبی نیست(مگر این که از Child Theme استفاده کنید) چند راه ساده برای این کار وجود دارد، ما در این مقاله قصد داریم به شما آموزش دهیم که به چه صورت CSS سفارشی شده به سایت وردپرس خود بدون تغییر در فایل های اصلی قالب اضافه کنید

راه حل اول: اضافه کردن Css  سفارشی با استفاده از Theme Customizer

از وردپرس4.7(به بعد) کاربران میتوانند Css سفارشی شده را مستقیما از طریق پنل مدیریت وردپرس به سایت خود اضافه کنند. این کار بسیار آسان است و شما میتوانید تغییرات را به صورت پیش نمایش زنده همان لحظه مشاهده کنید

شما میتوانید از طریق منو سمت چپ گزینه Additional CSS(Css  اضافی) را انتخاب کنید

بعد یک صفحه باز میشود و شما میتوانید Css سفارشی شده خود را در آن اضافه کنید و همچنین در سمت راست میتوانید به صورت زنده تغییرات را در سایت خود مشاهده کنید

شما تا زمانی که از ظاهر سایت راضی  باشید میتوانید Css سفارشی شده خود را به سایت خود اضافه کنید

فراموش نکنید که بعد از اتمام کارتان روی دکمه ذخیره و انتشار کلیک کنیدتوجه داشته باشید: هر Css سفارشی شده ای که شما با استفاده از theme customizer اضافه میکنید تنها مخصوص برای همان قالب هست. اگر میخواهید از قالب های دیگر استفاده کنید Css خود را دوباره به همین روش به آن قالب اضافه کنید

راه حل دوم: اضافه کردن Css سفارشی شده با استفاده از پلاگین

در این قسمت ما نیاز به نصب کردن پلاگین داریم. این روش بخصوص برای افرادی که از وردپرس 4.7 یا نسخه های بعدی آن  استفاده نمیکنند مناسب هست اول شما نیاز دارید که پلاگین Simple Custom CSS را دانلود و نصب کنید. پس از فعال سازی ابتدا به قسمت Appearance و سپس به قسمت Custom CSS   و در نهایت CSS مورد نظرتان را قرار دهید

فراموش نکنید در نهایت بر روی دکمه Update Custom CSS  کلیک کنید شما هم اکنون میتوانید سایت خود را که سفارشی سازی کردید را مشاهده کنید

توجه داشته باشید: از مزیت های استفاده از این روش این است که Css سفارشی شده شما حتی در هنگام تغییر قالب سایت قابل دسترس هست و میتوانید از آن  بر روی قالب جدید دیگر استفاده کنید.

شاید سوالی فکر شما را مشغول کند،استفاده کردن از پلاگین یا اضافه کردن CSS در قالب کدام روش مناسب تر است؟!

هر دو روشی که در بالا گفته شد برای تازه کاران در وردپرس بسیار مناسب است

کاربران حرفه ای برای تغییر در قالب سایت خود مستقیما Css  های سفارشی شده خود را به قالب های اصلی سایت اضافه میکنند.

اگرچه اضافه کردن Css سفارشی شده به قالب اصلی سایت توصیه نمیشود چون ممکن است شما تغییراتی در Css اصلی قالب بوجود اورید که منجربه هم ریختن Css اصلی است میشود.

بهترین راه برای این کار استفاده از child theme است . اگرچه بسیاری از مبتدیان حاظر به ساختن child theme نیستند به استثنای اضافه کردن CSS سفارشی، آنها واقعا نمی دانند چگونه از child theme استفاده کنند

استفاده کردن از پلاگین سفارشی سازی Css به شما این اجازه را میدهد که CSS  سفارشی خود را جدا از قالب اصلی ذخیره کنید

با استفاده از این راه شما به راحتی میتوانید از Css سفارشی خود در قالب های دیگر نیز به راحتی  استفاده کنید(یعنی شما قالب را عوض میکیند اما Css  سفارشی شما همچنان باقی میماند ) یکی از بهترین روش های  دیگر برای اضافه کردن Css  سفارشی شده شما استفاده از پلاگین Css Hero است. این پلاگین فوق العاده به شما اجازه میدهد که تقریبا همه جای سایت خود را بدون نوشتن حتی یک خط کد در Css  به راحتی تغییر دهید

راه حل سوم: استفاده از Child Theme

اگر شما نیاز دارید که مقدار زیادی Css سفارشی شده استفاده کنید میتوانید به جای استفاده از ترفند های بالا کد های Css اصلی قالب سایت را تغییر دهید یا اضافه کنید.

اما شما نمیتوانید Css سفارشی خود را در قالب اصلی سایت قرار دهید چون ممکن هست باعث overwrite  شدن بشود و مشکلاتی به وجود آورد.

در عوض شما میتوانید از روشی به نام child theme  استفاده کنید. به این ترتیب Css سفارشی شما حتی زمانی که قالب های اصلی را بروزرسانی کنید دست نخورده باقی می ماند

از مزایای استفاده از این روش این است که یک روش خوب برای اضافه کردن هزاران کد Css سفارشی به قالب خود است

معایب استفاده از این روش:

  1- بر خلاف راه حل اول شما نمیتوانید از پیش نمایش زنده دراین روش استفاده کنید

   2- روش مناسب و راحتی نسبت به روش های بالا نیست

3- Css سفارشی شما به قالب شما گره خورده است بنابراین اگر بخواهید قالب را تغییر دهید باید Css سفارشی خود را نیز تغییر دهید

راه حل چهارم: چیدمان سفارشی خود را بردارید

     اکثر کاربران وردپرس از این هرگز روش استفاده نمیکنند

اما این روش برای کاربرانی است  که سعی در اضافه کردن Css سفارشی خودشان به طور مستقیم در

<head> دارند <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

اما نمیشود از روش بالا در وردپرس استفاده کرد

به جای ان ما نیاز به استفاده از wp_enqueue_style برای اضافه کردن Css داریم

برای مثال برای اضافه کردن یه فایل Css به نام customstyles.css که شما داخل پوشه قالب آپلود میکردید شما باید قطعه کدتان را در فایل functions.php یا پلاگینی مانند Code Snippets اضافه کنید

wp_enqueue_style( ‘customstyles’, get_stylesheet_directory_uri() . ‘/customstyles.css’ );

حرف آخر

اگر شما تنها میخواهید مقدار کمی Css به قالب وردپرس خود اضافه کنید بهترین و آسان‌ترین راه استفاده از WordPress Customizer یا پلاگین هایی مانند Simple CSS است

اگر شما میخواهید مقدار زیادی کد Css به قالب سایت خود اضافه کنید بهترین راه استفاده از child theme است

و درآخر اگر شما بخواهید Css خودتان را به صورت فایل اضافه کنید باید ازenqueue  استفاده کنید البته که این روش به هیچ عنوان توصیه نمیشود

ما امیدواریم این مقاله به شما برای سفارشی کردن Css  سایت وردپرس خود کمک کرده باشد

در مقاله های بعدی قصد داریم نحوه ساختن و استفاده با Child Theme را آموزش دهیم با ما همراه باشید

درباره نویسنده

مطالب مرتبط

نظر بدهید

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