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

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

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

walker ها در وردپرس

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

وردپرس از سیستم walker اختصاصی اش برای نمایش دیتا های درختی (‌تو در تو ) استفاده میکند . این کلاس یک سری متد دارد . ما خوشبختانه می توانیم کلاس walker خود را بسازیم و آن را فرزند کلاس اصلی Walker قرار بدهیم.

وردپرس در کل ۳ Walker دارد که در این آموزش ما از Walker_Nav_Menu استفاده میکنیم .

حتما ابتدا درباره ی Walker ها بیشتر بخوانید 

اما قرار است چه کار کنیم ؟

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

ابتدا باید تعریف کنیم که قرار است یک سری تعریف برای خودمان داشته باشیم.

ما یک فیلد text جدید به منو ها اضافه می کنیم . سپس در اکشن ذخیره منو های سایت ، این فیلد را در post meta ها ذخیره میکنیم .‌( میدانید که هر ایتم منو در دیتابیس  یک post به شمار می رود .‌)

خوب بهتر است کد نویسی را شروع کنیم .

آماده سازی قالب تست ما

ابتدا یک فولدر جدید به نام megamenu در پوشه wp-content/themes بسازید و فایل های index.php ، functions.php و style.css را ایجاد نمایید . این پوسته را به عنوان پوسته پیش فرض قرار بدهید .

شروع برنامه نویسی

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

فرض کنید بخواهیم یک متد از یک کلاسمان را به عنوان یک فیلتر یا اکشن به وردپرس بدهیم . در حالتی که تابع داشته باشیم فقط نام تابع را صدا میزنیم اما اکنون یک آرایه که مقدار ۰ آن $this که همان کلاس هست و مقدار ۱ رشته نام تابع را می دهیم .

ابتدا کلاس جدیدی به نام MhrdevCustomMenu بسازید .

خوب حالا باید برای خودمان چند تعریف داشته باشیم .

ما میخواهیم فیلد text جدیدمان دارای name ایی داشته باشید که به صورت آرایه باشد ، یعنی مانند حالت زیر :

ID همان شناسه ی ایتم ما در دیتابیس می باشد ( که در جدول posts ثبت می شود ) . با این روش می توانیم شناسه ی ایتم را هم هنگام ذخیره اطلاعات داشته باشیم و با بقیه حالات قاطی نشود .

خوب پس یک متغیر استاتیک به نام fieldName ثبت می کنیم که مقدار menu-item-subtitle را داشته باشد.

همچنین قرار است این مقادیر در متا های پست ذخیره شود پس ما هم یک شناسه برای متا می خواهیم . پس metaName را هم تعریف میکنیم .

حالا باید هنگام تعریف منو ها ، مقدار این زیر عنوان را بدست آوریم و به ایتم ها اضافه کنیم ( چون قرار است بزودی در walker نمایش از آن استفاده نماییم )

برای این کار ابتدا یک متد به نام addNavFields می سازیم . چون قرار است از فیلتر wp_setup_nav_menu_item استفاده نماییم ، ورودی لیست ایتم های از پیش ساخته شده (‌مانند عنوان ، لینک و … ) را دریافت میکنیم.

در این متد باید ما مقدار subtitle در این ایتم ها را تعریف کنیم ، برای این کار از مقدار ID در ایتم های دریافتی استفاده می کنیم . یعنی :

( این متد باید به MhrdevCustomMenu اضافه شود )

همان طور که می بینید navItems می تواند دارای مقادیر name , url , description , … باشد که از پیش تعریف شده اند … ما می توانیم مقدار جدیدمان یعنی subtitle را ثبت کنیم و مقدارش را که از طریق get_post_meta بدست می آوریم را بهش بدهیم .

حالا باید فیلتر این کار را در constructor ثبت نماییم .

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

خوب حالا باید زمان ذخیره ی مقادیر منو ها ، مقدار subtitle مان را نیز ثبت نماییم . پس باید از اکشن wp_update_nav_menu_item استفاده نماییم .

یک متد به نام saveNavFields بسازید .

در این متد ما باید ببینیم که آیا input ایی که بزودی اضافه خواهیم کرد ارسال شده است یا نه … و اگر ارسال شده بود در دیتابیس ثبت نماییم .

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

خوب حالا باید اکشن را ثبت نماییم . کد زیر را به constructor اضافه نمایید .

خوب حالا همه چیز آماده است که walker را بسازیم و field را اضافه کنیم .

ساخت یک walker جدید برای نمایش منو ها در وردپرس

اول باید بدانیم walker دقیقا چه کار میکند ؟

walker دقیقا مقادیر HTML ایی که برای هر دیتا میسازیم را نمایش می دهد . یعنی اگر بخواهیم مانند وردپرس یک Sortable بسازیم خیلی کارمان گیر است و باید کلی کد بنویسیم !‌

اما یک کار راحت تر هست که از سورس خود وردپرس استفاده کنیم و آن را ویرایش کنیم …

فایل زیر را دانلود نمایید .

دانلود “walker اختصاصی برای توسعه” custom_walker.php_.zip – Downloaded 254 times – 2 KB

این فایل یک کلاس می باشد که فرزند Walker_Nav_Menu می باشد . تمام کار های مورد نیاز را در این Walker انجام داده اییم تنها کاری که مانده این است که کد های HTML مان را وارد نماییم .

می توانید کد های HTML را بین دو کامنت زیر قرار دهید :

خوب حالا کل کلاس را کپی کنید و در functions.php پیست نمایید .

باید کد HTML مربوط به فیلدمان را وارد کنیم :

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

همان طور که می بینید $item_id همان شناسه ی ایتم ما در دیتابیس می باشد ، ما این شناسه را برای post_meta ها نیاز داریم .

مقدار زیر عنوان ما همانطور که در فیلتر addNavFields ثبت کرده ایم، subtitle می باشد .

خوب واکر و هوک ما آماده است ،‌حالا باید walker  پیشفرض وردپرس را برای نمایش آیتم ها تغییر دهیم . برای این کار یک متد به نام makeCustomWalker بسازید و در آن نام  Walker اختصاصی ایی که ساختید را در حالت رشته بر گردانید .

حالا باید فیلتر را ثبت کنیم . کد زیر را در constructor کلاس MhrdevCustomMenu قرار دهید :

حالا باید کلاس MhrdevCustomMenu را صدا بزنیم . کد زیر را در انتهای فایل functions.php قرار دهید :

در GLOBALS ذخیره میکنیم شاید جایی لازم شد 🙂

خوب همه چیز آماده است . حالا باید یک جایگاه جدید در پوسته بسازیم .

کد زیر را در functions.php قرار دهید :

حالا فهرست جدید خود را بسازید 🙂

mhrdev_custom_menu_item_field_subtitle

نمایش اختصاصی منو ها در وردپرس

برای این کار هم نیاز به Walker داریم 🙂 نگران نباشید این بار خیلی ساده تر است …

کد زیر را در functions.php کپی نمایید .

همانطور که می بینید ما در walker اطلاعات هر منو را در $item داریم ( مانند ID , description , title , url , subtitle و … ) حالا هر طور بخواهیم می توانیم آن را در $item_output قرار دهیم . در اصل $item_output خروجی HTML ما برای هر ایتم میباشد ( چون در فیلتر ما تعریف کرده ایم ) .

شما میتوانید بخش آخر را هرطور بخواهید کد دهی کنید و خروجی بگیرید . از این بهتر مگر میشود ؟‌:)

خوب حالا زمانی که میخواهیم از wp_nav_menu استفاده کنیم باید حواسمان باشد که مقدار walker را کلاس walker اختصاصی مان بدهیم (‌new  MhrdevShowingWalker ) .

کد زیر را در index.html قرار دهید :

خروجی کار باید به شکل زیر باشد :

mhrdev_custom_menu_export_final

حالا وقت شعبده است !

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

در این آموزش یادگرفتیم که چگونه فهرست ها را نمایش دهیم … یعنی حالا ما می توانیم معجزه کنیم و بهترین مگا منو های ممکن را پیاده کنیم …

فقط کمی همت و تلاش میخواهد …

سوالی بود بنده در خدمتم .

دانلود خروجی کار

دانلود “خروجی نهایی مگا منوی اختصاصی” megamenu-mhrdev-1.zip – Downloaded 244 times – 4 KB

 

 

 

بر چسب های پست : , , , , , ,
مطالب مرتبط
شاید شما هم منوی راست کلیک سایت ما را دیده باشید ،‌این منو توسط یک افزونه ساخته ...
۲۰ خرداد ۹۵
1 دیدگاه
سلام دوستان امیدوارم حالتان خوب باشد . در این قسمت از دوره آموزش های برنامه نویس ...
۲۵ اسفند ۹۴
3 دیدگاه
سلام دوستان امیدوارم حالتان خوب باشد . در این قسمت از دوره آموزشی برنامه نویسی ا ...
۱۶ اسفند ۹۴
0 دیدگاه
سلام دوستان امیدوارم حالتان خوب باشد . در این قسمت از آموزش ها ما با سیستم اکشن ...
۱۳ اسفند ۹۴
1 دیدگاه
8 دیدگاه برای “آموزش ساخت مگامنو اختصاصی با استفاده از walker در وردپرس”
  1. runy گفت:

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

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

  2. zaman گفت:

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

  3. pourya74 گفت:

    سلام میشه اموزش رو به صورت ویدیوی قرار بدید؟ویه خروجی از چیزی که ایجاد شده هم قرار بدید

    1. نمونه کد هست ، یک wrapper برای همین کار هم اماده کردم که خیلی کار رو راحت تر میکنه .

      فعلا توسعش کامل نشده

  4. آرین گفت:

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

    1. توی این آموزش نشون دادیم چطور کد Html قرار بدید و تجزیه تحلیل کنید .

      طبق نیازتون هر کد html ایی میتونید قرار بدید.

  5. محمد گفت:

    با سلام من که نفهمیدیم چی شد ولی خیلی دوست دارم منوهای والکر را یاد بگیرم ممنون میشم کمکم کنید اگه راهنماییم میکنید به ایمیلم پیغام بفرستید تا ازتون کمک بگیرم ممنون میشم

پاسخ دهید

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

ورود به حساب کاربری
بستن این پنجره