آموزش ساخت حالت شب در المنتور + فیلم آموزشی اختصاصی

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

[toc]

حالت شب در المنتور چه کاربردی داره؟

حالت شب ویژگی بسیار کاربردی هست که امروزه در تمامی وب سایت ها و اپلکیشن های موبایلی قرار داده میشه و کاربر میتونه فعال یا غیرفعالش کنه، اگر به طور مثال شما تلگرام رو در نظر بگیرید می بینید که حالت شب و روز داره که میتونید با یک کلیک فعالش کند و به طوری که ظاهر سایت رنگش عوض میشه و چشم کاربر رو با رنگ های شفاف اذیت نمیکنه.

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

ساخت حالت شب و روز در المنتور

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

افزونه های مورد نیاز :

• افزونه المنتور
• افزونه WP Night Mode

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

مرحله اول : نصب افزونه المنتور

در اولین مرحله باید ابتدا افزونه المنتور رو نصب و فعال کنیم برای این کار میتوانید مقاله و ویدئوی آموزشی (آموزش نصب افزونه المنتور) رو مشاهده کنید. مراحل نصب رو توی این مقاله آموزش نمیدیم و میتونید مقاله بالا رو با فیلم آموزشی مشاهده کنید.

مرحله دوم: نصب افزونه WP Night Mode

در این مرحله باید افزونه دومی رو نصب کنید که افزونه WP Night Mode هستش و همانند افزونه های دیگه میتونید براحتی از مخزن وردپرس نصب و فعالش بکنید، برای نصب افزونه در وردپرس حتما از مقاله و ویدئوی آموزشی (آموزش نصب افزونه در وردپرس) استفاده کنید.

مرحله سول: تنظیمات افزونه

وقتی شما افزونه های بالا رو نصب و فعال کردید باید تنظیمات افزونه رو انجام بدید، برای این کار به مسیر “نمایش » سفارشی سازی” بروید.

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

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

• Night Mode As Default : اگر تیک این گزینه رو بزارید، حالت شب و این تنظیمات به صورت پیشفرض روی سایت اعمال میشه و سایت در حالت پیشفرض در حالت شب نمایش داده میشه.
• Toggle Style : در این قسمت می توانید استایل مربوط به دکمه تغییر حالت به شب رو انتخاب کنید، این گزینه شامل 5 استایل پشفرض هست و میتوانید از این 5 استایل استفاده کنید.
• Toggle Size : در این بخش هم میتوانید اندازه دکمه تغییر حالت به شب رو تنظیم کنید. یعنی اندازه دکمه
• Body Background : در این بخش میتوانید رنگ بنده سایت و قالب رو نتخاب کنید، این برای حالتی هست که شما حالت شب رو انتخاب میکنید.
• Text Color : این هم رنگ متون هستش و میتوانید یک رنگ دلخواه انتخاب کنید.
• Link Color : رنگ لینک ها رو میتوند انتخاب کنید.
• Link Hover Color : در این بخش هم رنگ لینک ها در حالت هاوور موس رو میتوند انتخاب کنید.

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

مرحله چهارم : نمایش دکمه حالت شب و روز در المنتور

در این بخش باید بریم سراغ اینکه دکمه رو توی سایت نمایش بدیم، برای این کار ابتدا صفحه رو توی المنتور ویرایش کنید.

[su_note note_color=”#ededea” text_color=”#000000″ radius=”10″]نکته مهم : چون باید این دکمه در تمامی صفحات نمایش داده بشه باید یا در هدر یا در فوتر سایت قرار بدید تا در تمامی صفحات کاربران بتوانند به این دکمه و امکان دسترسی داشته باشند. ما در این آموزش توی هدر سایت میخواهیم قرار بدیم.

[/su_note]

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

بعد از این که ابزارک شورت کد رو به بخش مورد نظر کشیدید و قرار دادید باید شورتکد افزونه Night Mode رو توی این بخش قرار بدید.

• [wp-night-mode-button] : شورت کد نمایش دکمه با استایل پیشفرضی که شما در تنظیمات افزونه انتخاب کردید.
• [wp-night-mode-button style="4"] : شورتکد مربوط نمایش دکمه با استایل هایی که شما انتخاب میکنید. در کنار Style یک عدد قرار دارد که این اعداد نشان دهنده استایل مورد نظر دکمه هستش که میتوانید از 1 تا 5 قرار بدید.

شما الان باید یکی از شورتکدهای بالا رو توی ابزارک شورت کد در المنتور قرار بدید.

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

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

فیلم آموزشی