گاهی اوقات میخواهید تغییرات کوچکی در ظاهر سایت وردپرسی خود ایجاد کنید؛ مثلاً رنگ یک دکمه را عوض کنید، اندازه فونت یک بخش را تغییر دهید یا فاصله بین عناصر را تنظیم کنید. این تغییرات معمولاً با استفاده از کدهای CSS انجام میشوند. اما سوال اینجاست که بهترین و امنترین روش برای افزودن این کدها به سایت چیست؟ در این مقاله، سه روش استاندارد برای اضافه کردن CSS سفارشی به وردپرس را به شما معرفی میکنیم.
روش اول: استفاده از سفارشیساز وردپرس (ساده و امن)
سادهترین و توصیهشدهترین روش برای افزودن کدهای CSS، استفاده از بخش «سفارشیسازی» خود وردپرس است. این روش امن است زیرا کدهای شما حتی پس از بهروزرسانی قالب نیز حفظ میشوند و تأثیری روی فایلهای اصلی قالب نمیگذارند.
برای استفاده از این روش، مراحل زیر را دنبال کنید:
- از پیشخوان وردپرس به بخش «نمایش» > «سفارشیسازی» بروید.
- در منوی سفارشیساز، گزینهای به نام «CSS اضافی» (Additional CSS) را پیدا و روی آن کلیک کنید.
- یک ویرایشگر کد کوچک برای شما باز میشود. کدهای CSS خود را در این قسمت وارد کنید.
- همانطور که کدها را وارد میکنید، میتوانید تغییرات را به صورت زنده در سمت چپ صفحه مشاهده کنید.
- پس از اتمام کار، روی دکمه «انتشار» در بالای صفحه کلیک کنید تا تغییرات ذخیره شوند.
این روش برای تغییرات کوچک و متوسط ایدهآل است و به هیچ دانش فنی خاصی نیاز ندارد.
روش دوم: استفاده از فایل style.css در پوسته فرزند (Child Theme)
اگر قصد دارید تغییرات گسترده و ساختاری در CSS سایت خود ایجاد کنید، بهترین راه استفاده از «پوسته فرزند» یا Child Theme است. پوسته فرزند، یک پوسته جداگانه است که تمام ویژگیهای پوسته اصلی (Parent Theme) را به ارث میبرد. مزیت بزرگ این روش این است که شما میتوانید فایلهای پوسته (مانند style.css یا functions.php) را بدون نگرانی از دست رفتن تغییرات در هنگام بهروزرسانی پوسته اصلی، ویرایش کنید.
برای این کار، ابتدا باید یک پوسته فرزند برای قالب فعال خود بسازید. سپس میتوانید تمام کدهای CSS سفارشی خود را به فایل style.css پوسته فرزند اضافه کنید. این روش حرفهایترین و پایدارترین راه برای سفارشیسازیهای بزرگ است.
روش سوم: استفاده از افزونههای CSS سفارشی
گزینه دیگر، استفاده از افزونههایی است که برای همین منظور طراحی شدهاند. این افزونهها یک محیط اختصاصی برای وارد کردن، مدیریت و سازماندهی کدهای CSS شما فراهم میکنند. یکی از محبوبترین افزونهها در این زمینه «Simple Custom CSS and JS» است.
مزیت این افزونهها این است که کدهای شما کاملاً مستقل از قالب مدیریت میشوند و میتوانید آنها را بر اساس نیاز در هدر یا فوتر سایت بارگذاری کنید. همچنین برخی از آنها قابلیت اعمال CSS فقط برای صفحات خاص را نیز فراهم میکنند. این روش برای کاربرانی که میخواهند کدهای خود را به صورت سازماندهی شده و جدا از قالب نگهداری کنند، مناسب است.
مشکلات کارایی درج کدهای زیاد
اگر کدهای CSS را به روش اول و سوم در سایت درج کنید، کدهای شما داخل تمام صفحات اضافه میشوند. این کار برای تغییرات جزئی قابل قبول است ولی اگر کدهای شما زیاد هستند، باید روش بهتری را انتخاب کنید تا باعث افزایش حجم صفحات و کاهش سرعت سایتتان نشوید.