نحوه اضافه کردن CSS در وردپرس

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

CSS چیست؟

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

کد css برای وردپرس

کد CSS در وردپرس یکی از ابزارهای کاربردی برای شخصی ‌سازی ظاهر سایت بدون نیاز به ویرایش فایل‌ های اصلی قالب است. CSS  که مخفف “Cascading Style Sheets” است، زبان طراحی است که به کمک آن می ‌توان نحوه نمایش المان‌ های مختلف در صفحات وب را کنترل کرد. در وردپرس، این کدها معمولاً برای تغییر رنگ، اندازه، فاصله، فونت و موقعیت عناصر استفاده می‌ شوند.

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

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

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

1- تهیه نسخه پشتیبان از CSS

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

2- استفاده از ابزار Inspect مرورگر

قبل از حذف یک کد، با ابزار Inspect مرورگر بررسی کنید که آن کد دقیقاً به چه عنصر یا بخشی از سایت مربوط است. ممکن است برخی کدها فقط در صفحات خاص یا دستگاه‌ های خاص مثل موبایل اثر داشته باشند.

3- بررسی تأثیر کد در صفحات مختلف سایت

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

4- عدم ویرایش مستقیم فایل ‌های قالب اصلی

اگر از ویرایشگر قالب استفاده می‌ کنید، هرگز CSS را مستقیماً در فایل‌ های قالب اصلی مثل style.css ویرایش نکنید، چون با هر بار بروزرسانی قالب، تغییرات از بین می ‌روند. از ابزارهای جایگزین مثل CSS اضافی در سفارشی ‌سازی یا افزونه ‌های مدیریت CSS  استفاده کنید.

5- شناخت کلاس‌ها و ساختار قالب

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

6- استفاده از افزونه‌ های کش و پاک ‌سازی کش پس از تغییرات

در صورتی که از افزونه‌ های کش مثل WP Rocket یا W3 Total Cache استفاده می ‌کنید، پس از اعمال تغییرات CSS حتماً کش سایت را پاک ‌سازی کنید تا تغییرات در سایت قابل مشاهده باشند.

بیشتر بخوانید: راه های افزایش امنیت سایت وردپرسی؛ چگونه امنیت سایت وردپرس را بالا ببریم؟

آموزش اضافه کردن CSS در وردپرس

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

1- آموزش اضافه کردن CSS به وردپرس با ویرایشگر کلاسیک

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

برای انجام اینکار، در ابتدا وارد پیشخوان وردپرس خود شوید و سپس و سپس از بخش “ابزارها” روی گزینه “ویرایشگر پوسته” کلیک کنید. سپس کلاس های CSS را در stylesheet تعریف کنید. حال قالب فعال را انتخاب کنید و فایل قالب صفحه سبک را برای ویرایش فایل style.css باز نمائید.

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

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

بیشتر بخوانید: بهترین افزونه های ویرایشگر متن (ادیتور) وردپرس پیشرفته و حرفه ای

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

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

بیشتر بخوانید: بهترین قالب فروشگاهی وردپرس چیست؟

2- افزودن CSS سفارشی به وردپرس با افزونه

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

2-1: افزونه Simple Custom CSS

یکی از بهترین افزونه های افزودن سی اس اس در وردپرس ، افزونه Simple Custom CSS می باشد. این افزونه به صورت رایگان در مخزن وردپرس به ثبت رسیده که می توانید به سادگی آن را در سایت خود فعال کنید. پس از فعال کردن افزونه در سایت، از بخش “نمایش” روی گزینه “سفارشی سازی CSS” کلیک کنید. حال می توانید به سادگی هر مقداری را که نیاز دارید در ویرایشگر وارد و تغییرات خود را ذخیره نمائید.

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

2-2: افزونه WP Add Custom CSS

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

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

• افزودن CSS برای صفحات خاص: هنگام ویرایش هر نوشته، برگه یا محصول، یک باکس مجزا برای افزودن CSS مخصوص همان صفحه در اختیار شماست. این ویژگی در کمتر افزونه‌ای وجود دارد.
• سازگار با همه قالب‌ ها و صفحه ‌سازها: این افزونه فقط روی هوک های اصلی وردپرس کار می‌کند و با المنتور، ویژوال کامپوزر، گوتنبرگ و غیره به‌ خوبی سازگار است.
• بدون نیاز به فایل خارجی: کدهای CSS در head قالب به‌ صورت inline وارد می ‌شوند، بنابراین نیازی به ساخت فایل خارجی نیست و سرعت بارگذاری بالاست.

بیشتر بخوانید: آموزش رفع خطای پرونده style.css | طریقه حل خطای فایل style css هنگام نصب قالب 

2-3: افزونه SiteOrigin CSS

یکی دیگر از روش های اضافه کردن فایل های css در وردپرس ، استفاده از افزونه SiteOrigin CSS می باشد. پس از فعال سازی افزونه، می توانید از بخش “نمایش” روی گزینه “CSSسفارشی” کلیک کنید. این افزونه دارای یک رابط ویرایشگر مناسب است که می توانید هر بخشی از سایت خود را انتخاب و آن را با استفاده از ابزارهای داخلی یا با افزودن کد به صورت دستی ویرایش نمائید.

• ابزار انتخابگر المان: تنها با کلیک روی هر بخش از سایت افزونه به‌ طور خودکار کد CSS مربوط به آن عنصر را پیدا می ‌کند و به شما امکان می ‌دهد آن را ویرایش یا سفارشی ‌سازی کنید.
• پیش ‌نمایش زنده و لحظه‌ای: تمامی تغییرات استایل بلافاصله روی سایت نمایش داده می ‌شوند، بدون نیاز به رفرش صفحه. این قابلیت باعث صرفه ‌جویی در زمان تست و طراحی می ‌شود.
• بدون نیاز به صفحه ‌ساز یا قالب خاص: این افزونه با تمام قالب‌ های وردپرس و صفحه ‌سازها از جمله المنتور، گوتنبرگ و ویژوال کامپوزر کاملاً سازگار است و به‌ صورت مستقل کار می ‌کند.

2-4: افزونه Simple Custom CSS and JS

از جمله افزونه های دیگری که می توانید به کمک آن اقدام به اضافه کردن CSS در وردپرس نمائید، افزونه Simple Custom CSS and JS می باشد. این افزونه قابلیت های زیادی را برای سفارشی سازی در اختیار شما قرار می دهد که یکی از آنها امکان افزودن ورودی های جاوا اسکریپت سفارشی می باشد. پس از نصب افزونه، در بخش جداگانه ای در زیر پیشخوان شما ظاهر می شود. حال در این قسمت می ‌توانید ورودی‌های CSS سفارشی را مشابه نحوه ایجاد پست‌های وردپرس ایجاد نمائید.

بیشتر بخوانید: آموزش حل مشکل وردپرس هنگام تغییر آدرس 

3- آموزش افزودن CSS سفارشی به وردپرس با سفارشی ساز قالب

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

بیشتر بخوانید: بهترین افزونه های ویرایش قالب | برترین پلاگین ویرایش پوسته سایت ورپرس کدام است؟

حذف css اضافی وردپرس

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

چرا حذف css اضافی مهم است:

• افزایش سرعت سایت: حذف استایل ‌های استفاده‌ نشده باعث کاهش حجم فایل ‌ها و سریع ‌تر بارگذاری شدن سایت می‌ شود.
• بهبود سئو و رتبه در گوگل: گوگل سرعت را فاکتور مهمی در رتبه ‌بندی در نظر می‌ گیرد.
• کاهش مصرف منابع سرور و پهنای باند: حجم کمتر = فشار کمتر روی سرور.

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

آموزش ویرایش کد html در وردپرس

روش های مختلفی برای ویرایش کدهای html در وردپرس وجود دارد که در ادامه شما را با استفاده از ویرایشگر کلاسیک آشنا می کنیم. در واقع اگر از ویرایشگر کلاسیک وردپرس استفاده می‌کنید، می‌ توانید به راحتی به کد HTML دسترسی داشته باشید:

• وارد پنل مدیریت وردپرس شوید.
• به بخش نوشته‌ها یا برگه‌ها بروید و نوشته یا برگه موردنظر را ویرایش کنید.
• در بالای ویرایشگر، روی تب متن (Text) کلیک کنید. این تب حالت کد HTML را نشان می‌دهد.
• در اینجا می ‌توانید کد HTML را مستقیماً ویرایش کنید.
• بعد از ویرایش، روی تب دیداری (Visual) کلیک کنید تا نتیجه تغییرات را مشاهده کنید.
• در نهایت، تغییرات را ذخیره کنید.

سوالات متداول

بیشتر بخوانید: آموزش تغییر اندازه لوگو در وردپرس | چگونه سایز لوگو را در وردپرس تنظیم نماییم؟

جمع بندی: آموزش ویرایش CSS در وردپرس

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

منبع: hostinger