روش افزودن CSS سفارشی به وردپرس: با استفاده از پلاگین و تم کودک + خطاهای رایج

آیا تا به حال خواسته اید جنبه های خاصی از ظاهر وب سایت خود را تغییر دهید اما به سادگی نمی دانید چگونه؟ یک راه حل وجود دارد – می توانید CSS سفارشی (Cascading Style Sheet) را به سایت وردپرس خود اضافه کنید!

در این مقاله، همه چیزهایی را که باید در مورد CSS بدانید و روش استفاده از آن برای تغییر ظاهر کلی وب سایت خود، مورد بحث قرار خواهیم داد.

CSS چیست؟

CSS یک زبان شیوه نامه است که ظاهر ساختار اصلی وب سایت شما را که در HTML نوشته شده است، تغییر می دهد. CSS به شما این امکان را می‌دهد که ویژگی‌های مختلفی مانند رنگ، اندازه، طرح‌بندی و نمایش را به تگ‌های HTML اختصاص دهید.

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

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

به روز رسانی وردپرس 5.9 تغییرات زیادی در سفارشی سازی سایت ایجاد کرد. یکی از آنها پیاده سازی CSS سفارشی است.

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

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

ابتدا کلاس های CSS را در stylesheet با پیمایش به آن تعریف کنید ابزار → ویرایشگر فایل تم. تم فعال را انتخاب کرده و باز کنید برگه سبک فایل تم برای ویرایش style.css فایل.

کلاس CSS و کد را با استفاده از ویرایشگر متن اضافه کنید. به عنوان مثال، بیایید یک کلاس justify-class برای توجیه متن اضافه کنیم.

p.justify-class {
  text-align: justify; 
}

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

اکنون ویرایشگر سایت را با پیمایش به آن باز کنید ظاهر → ویرایشگر سایت. بلوکی را برای سفارشی کردن انتخاب کنید و تنظیمات آن را با کلیک کردن باز کنید روی را تنظیمات دکمه در گوشه سمت راست بالای صفحه نمایش.

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

متن موجود در پاراگراف بلوک پس از افزودن کلاس justify-class توجیه می شود.

می توانید چندین کلاس CSS را با جدا کردن آنها با فاصله به یک بلوک اضافه کنید.

افزودن CSS سفارشی وردپرس از طریق افزونه ها

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

CSS سفارشی ساده

یکی از محبوب‌ترین افزونه‌های CSS سفارشی وردپرس در میان جامعه، Simple Custom CSS به شما امکان می‌دهد سبک‌های خود را پیاده‌سازی کنید یا CSS تم فعلی خود را لغو کنید.

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

اگر می خواهید تغییرات را ببینید، تنها کاری که باید انجام دهید این است که وب سایت خود را به روز کنید.

WP افزودن CSS سفارشی

WP Add Custom CSS ابزار عالی دیگری است که می توانید برای پیاده سازی CSS سفارشی وردپرس از آن استفاده کنید. پس از نصب، در بخش اختصاصی خود در داشبورد شما ظاهر می شود. از طریق آن، می توانید CSS را برای کل وب سایت اعمال کنید.

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

SiteOrigin CSS

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

پس از نصب، ابزار در دسترس خواهد بود ظاهر → CSS سفارشی بخش.

این افزونه دارای یک رابط ویرایشگر مناسب است که در آن می توانید هر قسمت از سایت خود را انتخاب کرده و با استفاده از ابزارهای داخلی یا با افزودن کد به صورت دستی آن را ویرایش کنید.

CSS و JS سفارشی ساده

تبلیغات CSS سفارشی ساده JS دارای چند قابلیت اضافی در مقایسه با ورودی های قبلی است. یکی از آنها امکان اضافه کردن ورودی های جاوا اسکریپت سفارشی است.

پس از نصب افزونه، در قسمتی جداگانه زیر داشبورد شما ظاهر می شود. در آنجا، می‌توانید ورودی‌های CSS سفارشی مشابه روش ایجاد پست‌های وردپرس ایجاد کنید.

برای آزمایش آن، ما آن را تغییر دادیم H1 برچسب ها کمی رنگارنگ تر

افزودن CSS سفارشی وردپرس با سفارشی ساز تم

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

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

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

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

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

اگر هنوز مطمئن نیستید که می‌خواهید چه کاری انجام دهید، می‌توانید CSS سفارشی خود را آزمایش کنید روی ابتدا تم کودک به این ترتیب به شما اجازه داده می شود تا به اندازه دلخواه خود آزمایش کنید.

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

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

تغییرات ظاهر نمی شوند

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

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

حتماً کش مرورگر خود را از قبل پاک کنید تا تغییرات جدیدی را که اعمال کرده اید مشاهده کنید – به خصوص اگر کش را فعال کرده باشید.

آخرین اما نه کم اهمیت، برخی از ارائه دهندگان میزبانی وب، مانند هاستینگer، برای کمک به عملکرد بهتر سایت وردپرس خود، ذخیره سازی داخلی سمت سرور را ارائه دهید. می توانید آن را از قسمت غیرفعال کنید مدیر کش روی hPanel شما

متناوبا، فعال کنید بدون کش حالت برای دور زدن حافظه پنهان. این حالت کش سرور، کش مرورگر، افزونه های کش CDN و کش وردپرس را به مدت 24 ساعت غیرفعال می کند.

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

دستور CSS غلط املایی

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

انتخاب های خیلی زیاد

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

این یک اتفاق رایج در هنگام فراخوانی یک شیوه نامه جدید است روی بالای یک موجود اگر می‌خواهید عنوان H2 را تغییر دهید اما هیچ اتفاقی نمی‌افتد، شیوه نامه را برای ورودی‌های موجود دوباره بررسی کنید.

خارج از ایده

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

در اینجا چند منبع وجود دارد که می تواند به شما در ایجاد ایده های تازه کمک کند:

• نهایی هاستینگer برگه تقلب CSS
• اصول CSS توسط BitDegree
• آموزش Codecademy CSS
• آموزش های CSS توسط W3Schools

نتیجه

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

چهار روش برای این کار وجود دارد:

• با استفاده از ویرایشگر بلوک
• استفاده از افزونه ها
• با استفاده از شخصی سازی تم
• بهینه سازی آن از طریق یک موضوع کودک

اکنون شما آماده هستید تا طراحی وب سایت خود را تغییر دهید و تنظیم کنید. موفق باشید!