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

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

CSS چیست؟

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

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

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

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

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

برای دسترسی به سفارشی ساز وردپرس، در پیشخوان وردپرس به مسیر نمایش » سفارشی سازی بروید.

به انتهای صفحه اسکرول کرده و روی تب CSS اضافی کلیک کنید.

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

همچنین می توانید نسخه موبایل و تبلت سایت خود را مشاهده کنید.

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

فراموش نکنید که پس از پایان کار بر روی دکمه “ذخیره و انتشار” در بالای صفحه کلیک کنید.

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

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

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

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

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

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

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

ویرایش CSS در وردپرس با افزونه Simple Custom CSS

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

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

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

هر کدی که می خواهید را در ویرایشگر وارد کرده و با کلیک بر روی Update Custom CSS تغییرات را ذخیره کنید.

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

ویرایش CSS در وردپرس با افزونه Simple Custom CSS and JS

Simple Custom CSS and JS یکی دیگر از افزونه های بسیار محبوب ویرایش CSS در وردپرس است که نسبت به افزونه های دیگر معرفی شده در این مقاله قابلیت های اضافه تری دارد. یکی از این قابلیت ها توانایی اضافه کردن کدهای جاوااسکریپت سفارشی است.

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

پس از فعال سازی افزونه، منوی جدیدی به نام Custom CSS & JS در پیشخوان وردپرس اضافه می شود. با کلیک بر روی این منو صفحه ای مشابه شکل زیر مشاهده می کنید.

شما می توانید کدهای CSS سفارشی را با کلیک بر روی دکمه Add CSS Code ، کدهای JS سفارشی را با کلیک بر روی دکمه Add JS Code و کدهای HTML سفارشی را با کلیک بر روی دکمه Add HTML Code اضافه کنید.

به عنوان مثال با کلیک بر روی دکمه Add CSS Code صفحه ای مشابه شکل زیر نمایش داده می شود که در ویرایشگر کد آن می توانید کد CSS مورد نظر خود را اضافه کنید.

ویرایشگر متن دارای ویژگی برجسته سازی خطای Syntax است. در سایدبار سمت چپ صفحه گزینه هایی مشاهده می کنید که با استفاده از آنها می توانید تنظیمات زیر را انجام دهید:

• پرینت کد به صورت درون خطی یا شامل کردن آن در یک فایل خارجی
• وارد کردن کد در هدر یا فوتر سایت
• اضافه کردن CSS یا JS به فرانت اند سایت یا سمت مدیر یا در صفحه ورود

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

پس از قرار دادن کد مورد نظر خود روی دکمه انتشار کلیک کنید. به محض انتشار، کد فعال می شود و یک لینک Deactivate نیز نمایش داده می شود که با کلیک بر روی آن می توانید کد را غیرفعال کنید.

منوی Custom CSS & JS دارای یک زیرمنوی Settings است که با استفاده از آن می توانید تنظیمات افزونه را پیکربندی کنید. با کلیک بر روی این زیرمنو صفحه ای مشابه شکل زیر نشان داده می شود.

Keep the HTML entities, don’t convert to its character : اگر می خواهید از یک مقدار HTML در کد خود استفاده کنید اما ویرایشگر آن را به کاراکتر معادل آن تبدیل می کند، این گزینه را فعال کنید. 

Encode the HTML entities: اگر از تگ های HTML در کد خود استفاده می کنید و متوجه شده اید که آنها ناپدید شده و ویرایشگر عجیب به نظر می رسد، این گزینه را فعال کنید.

Autocomplete in the editor : ویژگی تکمیل خودکار ویرایشگر که به صورت پیش فرض فعال است.

Add the “Web Designer” role:  به طور پیش فرض فقط مدیر سایت قادر به انتشار، ویرایش و حذف کدهای سفارشی است. افزونه Simple Custom CSS and JS به صورت پیش فرض نقشی به نام Web Designer ایجاد می کند که می توانید این نقش را به یک کاربر غیر مدیر اختصاص دهید تا اجازه انتشار یا ویرایش و حذف کدهای سفارشی را داشته باشد. در این قسمت می توانید این نقش را حذف کنید.

Remove the comments from HTML: در HTML صفحات، کامنتی قبل و بعد از CSS یا JS داخلی  اضافه می شود که به شما کمک می کند کد سفارشی خود را جاسازی کنید. فعال کردن این گزینه باعث حذف آن کامنت می شود.

پس از اعمال تغییرات مورد نظر خود روی دکمه ذخیره کلیک کنید.