Microthemer Lite افزونه ویرایشگر CSS برای سفارشی سازی قالب وردپرس

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

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

آموزش افزونه Microthemer Lite و نحوه سفارشی سازی وب سایت وردپرس

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

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

در پیشخوان وردپرس به مسیر Microthemer » Preferences بروید.

هنگامی که وارد صفحه preferences شدید می توانید 4 تب مختلف را مشاهده کنید و تنظیمات افزونه را در این تب ها انجام دهید. تب های موجود در صفحه تنظیمات افزونه عبارتند از:

• General
• CSS/SCSS
• Language
• Integrations
• Inactive

تنظیمات افزونه Microthemer Lite

در تب General می توانید برخی تنظیمات عمومی مورد نظر خود را به سرعت پیکربندی کنید.

در تب CSS / SCSS همه تنظیمات استایل CSS که می توانید بر طبق آن عمل کنید، وجود دارد. همچنین می توانید فونت ها، سایه ها، موقعیت، گرادیان و موارد دیگر را تنظیم کنید.

اگر گزینه موجود در تب “Language” را در حالت Yes قرار دهید می توانید انتخاب کنید که سینتکس معتبر CSS را هنگام کار با Microthemer مشاهده کنید.

در این قسمت می توانید افزونه Microthemer CSS را با Oxygen CSS ادغام کنید.

تب Inactive به شما امکان حذف همه داده های Microthemer را در صورت حذف افزونه می دهد. کافی است گزینه موجود در این صفحه را در حالت Yes قرار دهید. همچنین می توانید تمام کد افزونه را در این برگه مشاهده کنید.

آشنایی با نوار ابزار افزونه Microthemer Lite

هنگامی که آماده سفارشی سازی قالب وردپرس شدید، در پیشخوان وردپرس روی تب “Microthemer” کلیک کنید.

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

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

• All Devices
• Large Desktop
• Desktop & Tablet
• Tablet & Phone
• Phone

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

2- در بالا سمت راست صفحه، فهرستی را مشاهده می کنید که گزینه های مختلف زیادی را ارائه می دهد. نحوه استفاده از آنها به شما بستگی دارد.

3- همچنین در بالای صفحه می توانید دکمه های “Unlock” و “Buy” را مشاهده کنید. این دکمه ها برای وقتی که قصد دارید افزونه Microthemer Lite را ارتقا داده و نسخه حرفه ای آن را خریداری کنید، مناسب هستند.

4- در سمت چپ بالای صفحه می توانید دکمه مشکی “Target” را مشاهده کنید. این دکمه برای هدف قرار دادن عناصر خاص و تغییر آنها به کار رفته و کار را برای شما بسیار آسان می کند. برای استفاده از آن کافی است روی این دکمه کلیک کنید.

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

5- در کنار دکمه Target می توانید بخش Selectors را مشاهده کنید. برای مدیریت انتخابگر های موجود، روی لینک “Selectors” در بالای صفحه سمت چپ کلیک کنید. یک منوی کشویی ظاهر می شود. شما می توانید همه انتخابگر های قالب فعلی خود را در آنجا مشاهده کرده و آنها را هر طور که می خواهید مدیریت کنید.

سفارشی سازی و ویرایش قالب وردپرس

حال که با تنظیمات و نوار ابزار افزونه Microthemer Lite آَشنا شدید می توانید کار سفارشی سازی و ویرایش قالب را به صورت زیر شروع کنید.

روی دکمه Target کلیک کنید.

روی هر یک از قسمت های صفحه که می خواهید استایل دهی کنید، کلیک نمایید.

به عنوان مثال می خواهید یکی از آیتم های فهرست ناوبری سایت را ویرایش کنید. پس از کلیک بر روی دکمه Target ، موس را بر روی آیتم مورد نظر خود قرار داده و روی دکمه سبزرنگ + که مربوط به انتخاب سلکتورها است، کلیک کنید. همچنین می توانید روی دکمه Create Selector کلیک کنید.

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

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

در این قسمت می توانید استایل های جدید را با استفاده از نوار ابزار (رنگ ها، فونت ها، فاصله گذاری و غیره) اعمال کنید.

ویرایشگر کد: در این قسمت می توانید با استفاده از ویرایشگر کد ACE به راحتی به ویرایشگر کد CSS سفارشی سوئیچ کنید.

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

نوار ابزار خصوصیات استایل: این قسمت ویژگی های منحصر به فرد استایل CSS را برای هر یک از 11 گروه استایل دهی فوق نشان می دهد (به عنوان مثال ، فونت، رنگ، اندازه و اندازه قلم در گروه گزینه “font”).

در تب General بالای صفحه می توانید حالت پیش نویس را فعال کنید. در این صورت تنها شما می توانید تغییراتی که در Microthemer ایجاد کرده اید را مشاهده کنید. هنگامی که سایت شما آماده شده، حالت Draft را خاموش کرده و صفحه را انتشار دهید.

مزایای استفاده از Microthemer

یکی از بزرگترین مزایای استفاده از افزونه Microthemer Lite برای شخصی سازی قالب وردپرس میزان کنترل شماست. شما می توانید المان های موجود در صفحات وب خود را به آسانی با کلیک کردن سفارشی سازی کنید.

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

Microthemer در تمام قالب ها کار می کند. این بدان معناست که می توانید در کد CSS هر قالبی که نصب کرده اید، تغییرات بصری ایجاد کنید.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه