آموزش کاربردی, آموزش وردپرس, افزونه وردپرس

افزونه ویرایش آنلاین کدهای استایل SiteOrigin CSS در وردپرس

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

افزونه‌ای که قصد معرفی آن را دارم با عنوان SiteOrigin CSS در مخزن وردپرس به ثبت رسیده است و تاکنون توانسته است تا بیش از ۱۰۰.۰۰۰ نصب فعال و کسب امتیاز ۴.۹ را ازآن خود نماید که با استفاده از آن قادر به ویرایش کدهای استایل در قالب خود خواهید بود.

نصب و فعال سازی

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

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

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

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

پس از اینکه پنجره را کوچک کنید مشابه تصویر فوق خواهید دید که کدهای مورد نظر برای تغییرات قالب اضافه خواهند شد، حال بر روی دکمه Save Css کلیک کنید تا تغییرات ذخیره شده و استایل قالب تغییر یابد.

 

این مقاله چقدر براتون مفید بود؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *