1. خانه
  2. کسب و کار اینترنتی
  3. طراحی سایت
  4. ۲ روش آسان برای نوشتن کدهای CSS در سایت وردپرس

۲ روش آسان برای نوشتن کدهای CSS در سایت وردپرس

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

روش ۱: اضافه کردن کدهای سفارشی CSS از طریق سفارش سازی پوسته

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

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

اضافه کردن کدهای CSS به وردپرس از طریق پوسته

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

بر روی گزینه CSS اضافی کلیک کنید.

css اضافی در ویرایشگر پوسته وردپرس

 

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

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

نوشتن کدهای CSS در قالب وردپرس

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

روش ۲: نوشتن کدهای CSS از طریق افزونه وردپرس

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

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

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

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

 

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

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

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

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

اگرچه اضافه کردن و تغییر کدهای اصلی قالب توصیه نمی شود. چرا که کوچک ترین تغییری می تواند سایت شما را با مشکل مواجه کند. و حتی ممکن است بعد از اعمال تغییرات امکان برگشت نیز وجود نداشته باشد.

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

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

 

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
فهرست