Menubar Widget مکمل منوی سایت های وردپرسی!

[Mekaeil Andisheh 346]

سلام به همه ی دوستان (♥سال نو مبارک♥)

خواندن این قسمت اختیاریست!

***( همه ی شما عزیزان میدونید که وب فارسی به سرعت در حال پیشرفته و در این میان افرادی پیدا میشن که در این روند تاثیر مهمی دارند و با هدف خدمت رسانی به وب فارسی تلاش میکنند و دسته ای هم پیدا میشن با هدف سو استفاده از موقعیت کسب و کاری غیراخلاقی برای خود راه میندازن و از عدم آگاهی مردم عزیزمون بیشترین سود رو میبرن! ما در ماندگاروب جمع شدیم از افرادی که قصد خدمت رسانی به وب فارسی رو دارند حمایت کنیم و اونها و آثارشون رو به شما معرفی کنیم. کم نیستند این افراد(برای مثال همین افرادی که این انجمن رو راه اندازی کردن و مدتی قبل بسته ی پارسی ساز و...) و مسلما ما نمیتونیم تک تک این عزیزان رو معرفی کنیم ولی با توکل بر خدا در این راه قدم برمیداریم. باشد که با حمایت شما عزیزان جایگاه وب فارسی رو به نحو احسن تغییر بدیم و از این بی قانونی که هست بکاهیم! )***

و اما اصل مطلب : سفارشی کردن منوها در وردپرس

مشکلی که اکثر کاربران در وبسایت با اون روبرو هستند این هست که نمیتونند منویی تمام داینامیک با خاصیت widget درست کنند برای مثال عرض میکنم : من در منویی که دارم یک سبد خرید وجود داره که میخوام زیرمنوی اون کل محصولاتی که خریداری شده رو نشون بده برای اینکار باید به صورت استاتیک دو تا منو ایجاد کنم که یکی همون منوهای داینامیک رو نشون میده و دیگری عنوان سبد خرید رو در بین منوها نشون میده ولی زیرمنوی اون خاصیت widget داره و از طریق ابزارک ها پلاگین مورد نظرم که محصولات رو نشون میده به زیرمنوی سبدخرید اضافه میکنم. عکس زیر گویای این مطلب هست :

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

این مشکل رو از طریق پلاگین Menubar Widgets حل میکنیم و دیگه نیازی نیست دستی کدی رو وارد کنیم و ما فقط منوی داینامیک رو ایجاد میکنیم و مابقی کار رو با پلاگین انجام میدیم.

نحوه ی کار پلاگین Menubar Widget به زبانی ساده در چند جمله :

بعد از اینکه پلاگین رو نصب کردیم وارد قسمت ” نمایش -> ابزارک ” میشیم و در widget ی که به نام ” ناحیه نوار فهرست” (انگلیسی : Menubar Area) ایجاد شده قسمت های مورد نظرمون رو اضافه میکنیم و در مرحله ی بعد وارد قسمت فهرست ها میشیم و زیر منو ها رو فعال و تنظیم میکنیم.

ویژگی های افزونه Menubar Widget:

1 ) نمایش Widget ها در تنظیمات منو

2 ) افزودن چندین Widget به یک آیتم از منوها

3 ) تغییر موقعیت مکانی Widget ها با درگ دراپ کردن

4 ) افزودن کدهای css اختصاصی به آیتم های منو از طریق کلاس های css در فیلد تنظیمات

(کلاس های سی اس اسی که با menu-item شروع می شوند در برچسب li افزوده می شوند.( مانند: <li ></li> ) ، و مابقی مانند کلاس های iconfont در برچسب “” افزوده می شوند. ( مانند: <li><i ></i></li> ))

5 ) فعال کردن / غیر فعال کردن و یا حذف کردن Widget ها از قسمت تنظیمات منوها

شروع مرحله به مرحله کار با پلاگین Menubar Widget :

قدم اول : دریافت Menubar Widgets و نصب آن

قدم دوم : انتخاب مسیر : نمایش -> ابزارک -> ناحیه نوار فهرست

ابزارک های موردنیاز را مطابق شکل زیر در بخش مربوطه قرار میدهم :

قدم سوم : انتخاب مسیر : نمایش -> فهرست ها -> انتخاب منوی مورد نظر

قدم چهارم : فعال کردن هر کدام از ویدجت های مورد نیاز در زیر آیتم مورد نظر

مثلا من قصد دارم در زیر منوی آیتم “صفحه اصلی” یک جستجو نمایش داده بشه . آیتم “صفحه اصلی را انتخاب میکنم و در بخش مورد نظر ابزارک جستجو را تیک میزنم و فهرست را ذخیره میکنم. مطابق شکل زیر :

تغییر موقعیت مکانی و یا حذف widget ها :

و مشاهده تغییرات :

و در نهایت اگر لازم شد هر widget را برای یک منو فعال کنیم و یا حالت های مختلف، مطابق توضیحات فوق عمل میکنیم.

نکته مهم : دوستان عزیز دقت کنید که تیک های css ,… فعال باشه در غیر اینصورت نمایش داده نمیشه.

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

امیدوارم لذت برده باشید.

[هادی خسروجردی 79]

ممنون میکائیل عزیز به خاطر آموزش خوبت.

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

add_filter('widget_text', 'do_shortcode');

رو به فایل functions.php پوستتون اضافه کنید، حالا می تونید با استفاده از ابزارک Text که به صورت پیشفرض در قسمت ابزارک های شما موجود هستش، shortcode دلخواهتون رو به ابزارکتون اضافه کنید، مثلا من با اضافه کردن کد [contact-form-7 id=52" title="Contact form 1] به ابزارک Text و انتخاب یک نام تحت عنوان "تماس با من" می تونم یک فرم تماس با من رو به هر جایی از پوستم که از ابزارک پشتیبانی می کنه اضافه کنم.

یا اینکه با استفاده از پلاگین Menubar Widgets اون ابزارک " تماس با من" رو به قسمت فهرست منوهام اضافه کنم. حالا اون shortcode می تونه هر چیز دیگه ای باشه، مثلا گالری تصاویر، یه فرم لاگین، یک سبد خرید، یک نقشه گوگل و یا حتی یک منوی دیگه با ابزارک های متفاوت و ... که شما می تونید به منوهاتون اضافه کنید و با کمی CSS و جاوااسکریپت منوهای حرفه ای رو تو پوسته خودتون داشته باشید.

من اینجا دو تصویر دارم که می تونه به دوستان کمک کنه درک بهتری نسبت به کارایی این پلاگین داشته باشن.

1. اضافه کردن چند ویجت در زیر آیتم Featured از فهرست منو

2. اضافه کردن ویجت "نمایش سبد خرید" در زیر آیتم سبد خرید که با آیکونی شکل سبد نمایش داده شده.

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

-- هادی خسروجردی

[هادی خسروجردی 79]

یادتون نره به این قسمت هم سری بزنید.