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

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

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

CSS مخفف عبارت Cascading Style Sheets است و زبانی است که به شما کمک می‌کند وبسایت وردپرس خود را سبک دهید. CSS و HTML با هم هستند زیرا از CSS برای استایل دادن به عناصر مختلف و از HTML برای رنگ، اندازه، طرح‌بندی و نمایش استفاده می‌شود.
افزودن CSS سفارشی به شخصی‌سازی طراحی و ظاهر سایت شما کمک می‌کند، که از طریق گزینه‌های پیش فرض امکان پذیر نیست. این کار به شما کنترل بیشتری می‌دهد و می‌توانید به راحتی با چند خط کد تغییراتی در قالب وردپرس خود ایجاد کنید.
به عنوان مثال، فرض کنید می‌خواهید رنگ پس زمینه هر پست را به جای استفاده از رنگ یکسان در وبسایت تغییر دهید. با افزودن یک کد ، می‌توانید پس زمینه یک پست یا صفحه خاص را شخصی سازی کنید.
به طور مشابه، می‌توانید سبک و ظاهر دسته‌بندی‌های محصولات را در فروشگاه اینترنتی خود با استفاده از اضافه کردن CSS اختصاصی تغییر دهید.
پس، بیایید باهم نگاهی به راه‌های مختلف اضافه کردن CSS سفارشی به وبسایت وردپرس خود بیاندازیم. می‌توانید روی پیوندهای زیر کلیک کنید تا به هر قسمتی که به آن علاقه دارید بروید:
_ با استفاده از تم سفارشی ساز (theme customizer)
_ اضافه کردن با استفاده از یک پلاگین
_ افزودن CSS اضافی با ویرایشگر کامل سایت (FSE)

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

از زمان وردپرس ۴.۷، تا امروز کاربران می‌توانند مستقیماً از ناحیه مدیریت وردپرس اضافه کنند. این کار بسیار آسان است و شما می‌توانید تغییرات خود را با یک پیش نمایش زنده سریع مشاهده کنید.
ابتدا باید از پیشخوان وردپرس خود به صفحه ظاهر سفارشی‌سازی بروید.

با این کار رابط سفارشی کننده تم وردپرس راه اندازی می‌شود.
پیش نمایش زنده سایت خود را با تعدادی گزینه در سمت چپ مشاهده خواهید کرد. از پنل سمت چپ روی تب «CSS اضافی» کلیک کنید.

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

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

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

روش اول فقط به شما امکان می‌دهد CSS سفارشی را برای تم فعال فعلی ذخیره کنید. اگر تم را تغییر دهید، ممکن است لازم باشد CSS سفارشی خود را کپی کرده و در تم جدید جای‌گذاری کنید.
اگر می‌خواهید CSS سفارشی شما صرف نظر از اینکه از کدام قالب وردپرس استفاده می‌کنید اعمال شود، این روش برای شما مناسب است.
اولین کاری که باید انجام دهید این است که افزونه Simple Custom CSS را نصب و فعال کنید. اگر به کمک نیاز دارید، لطفاً راهنمای ما در مورد نحوه نصب افزونه وردپرس را ببینید.
پس از فعال‌سازی، به سادگی به Appearance رفته و css سفارشی خود را یادداشت یا جایگذاری کنید

فراموش نکنید که برای ذخیره تغییرات خود دکمه «به روزرسانی» را فشار دهید.
اکنون می‌توانید وبسایت وردپرس خود را مشاهده کنید تا CSS سفارشی را در عمل مشاهده کنید.

روش ۳: ویرایشگر کامل سایت (FSE)

راه دیگری که می‌توانید CSS سفارشی در وردپرس اضافه کنید، استفاده از ویرایشگر سایت کامل (FSE) است. با FSE، می‌توانید طرح‌بندی و طراحی کل وبسایت را با استفاده از ویرایشگر بلوک وردپرس، درست مانند ویرایش یک پست یا صفحه وبلاگ، ویرایش کنید.
توجه داشته باشید که ویرایشگر کامل سایت فقط برای مضامین انتخاب شده در دسترس است.
استفاده از یک افزونه برای افزودن CSS کمی ساده‌تر است. با این حال، اگر ترجیح می‌دهید از افزونه‌ای استفاده نکنید، به شما نشان می‌دهیم که چگونه به (شخصی‌سازی‌کننده) دسترسی داشته باشید، حتی زمانی که دیگر در منوی مدیریت شما موجود نیست.
تنها کاری که باید انجام دهید این است که وارد ادمین وردپرس خود شوید.
سپس، به سادگی URL زیر را کپی کرده و در مرورگر خود جایگذاری کنید و «example.com» را با نام دامنه وبسایت خود جایگزین کنید.
https://example.com/wp-admin/customize.php
این کار شما را به نسخه محدودی از سفارشی‌کننده تم می‌رساند. در منوی سمت چپ، باید گزینه افزودن CSS سفارشی را در پایین مشاهده کنید.
به سادگی روی برگه «CSS اضافی» کلیک کنید.

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

استفاده از افزونه CSS سفارشی در مقابل افزودن CSS در Theme

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

همچنین می‌توانید با افزونه SeedProd اضافه کنید. SeedProd یک سازنده وبسایت کشیدن و رها کردن است که به شما امکان می‌دهد تم‌های وردپرس سفارشی و صفحات فرود برای سایت وردپرس خود ایجاد کنید. شما به راحتی می‌توانید تنظیمات جهانی CSS را ویرایش کنید، بدون نیاز به کد.

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

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

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