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

گاهی اوقات ممکن است نیاز داشته باشید که CSS سفارشی را در سایت وردپرس خود اضافه کنید.

شاید به این دلیل است که شما یک آموزش در مورد WPBeginner یا کانال YouTube ما . برای بیشتر مبتدیان ، استفاده از FTP بسیار گیج کننده است ، اما روشهای دیگری برای افزودن CSS سفارشی وجود دارد.

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

Adding custom CSS to your WordPress site

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر آموزش های کتبی را ترجیح می دهید یا می خواهید با سرعت خودتان حرکت کنید ، خواندن دستورالعمل های زیر را ادامه دهید.

روش 1: افزودن CSS سفارشی با استفاده از Theme Customizer

از وردپرس 4.7 ، کاربران اکنون می توانند CSS سفارشی را مستقیماً از قسمت مدیر وردپرس اضافه کنند. این کار بسیار آسان است و شما می توانید تغییرات خود را با یک پیش نمایش مستقیم بلافاصله مشاهده کنید.

ابتدا باید به صفحه تم ها »سفارشی سازی بروید.

Launching the theme customizer

با این کار رابط کاربری سفارشی سازی قالب WordPress راه اندازی می شود.

پیش نمایش زنده سایت خود را با چند گزینه در قسمت سمت چپ مشاهده خواهید کرد. از پنجره سمت چپ روی برگه Additional CSS کلیک کنید.

Additional CSS option in WordPress theme customizer

برگه اسلاید می شود تا یک جعبه ساده به شما نشان داده شود که در آن می توانید CSS سفارشی خود را اضافه کنید. به محض افزودن یک قانون معتبر CSS ، می توانید مشاهده کنید که آن در صفحه پیش نمایش زنده وب سایت شما اعمال می شود.

Adding custom CSS with live preview

تا زمانی که از نحوه نمایش آن در سایت خود راضی نباشید ، می توانید به افزودن کد CSS سفارشی ادامه دهید.

فراموش نکنید که وقتی کارتان تمام شد روی دکمه “ذخیره و انتشار” در بالا کلیک کنید.

Save your custom CSS changes

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

روش 2: افزودن CSS سفارشی با استفاده از یک پلاگین h4>

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

اگر می خواهید CSS سفارشی شما بدون توجه به اینکه قالب وردپرس را که استفاده می کنید ، این روش برای شما مناسب است.

اولین کاری که باید انجام دهید نصب و فعال کردن CSS سفارشی ساده . پس از فعال سازی ، به سادگی به Appearance »Custom CSS بروید و CSS سفارشی خود را بنویسید یا جای گذاری کنید.

Simple Custom CSS

فراموش نکنید که برای ذخیره تغییرات ، دکمه “Update Custom CSS” را فشار دهید.

اکنون می توانید وردپرس وب سایت برای دیدن CSS سفارشی در عمل.

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

هر دو روش توضیح داده شده در بالا برای مبتدیان توصیه می شود. کاربران پیشرفته همچنین می توانند CSS سفارشی را مستقیماً به مضامین خود اضافه کنند.

با این حال ، افزودن قطعه های CSS سفارشی به طرح زمینه والدین توصیه نمی شود. اگر به طور تصادفی موضوع را ذخیره نکنید بدون اینکه تغییرات سفارشی خود را ذخیره کنید ، تغییرات CSS شما از بین خواهد رفت

بهترین روش استفاده از طرح زمینه کودک . با این حال ، بسیاری از مبتدیان نمی خواهند یک موضوع کودک ایجاد کنند. جدا از افزودن CSS سفارشی ، غالباً مبتدیان واقعاً نمی دانند چگونه از آن طرح زمینه کودک استفاده خواهند کرد.

استفاده از پلاگین CSS سفارشی به شما امکان می دهد CSS سفارشی خود را مستقل از طرح زمینه خود ذخیره کنید. از این طریق می توانید به راحتی مضامین را عوض کنید و CSS سفارشی شما همچنان در آن خواهد بود.

روش عالی دیگر برای افزودن CSS سفارشی به سایت وردپرس خود استفاده از قهرمان CSS . این افزونه فوق العاده به شما اجازه می دهد تقریباً هر سبک CSS را در سایت وردپرسی خود ویرایش کنید بدون اینکه یک خط کد بنویسید.

Editing custom CSS with CSS Hero plugin for WordPress

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.

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