آموزش وردپرسوردپرس

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

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

آشنایی با کلاس Walker_Nav_Menu

کلاس Walker_Nav_Menu را می توان در فایل class-walker-nav-menu.php در پوشه wp-includes یافت. تمام منوی ها یا فهرست های وردپرس از طریق این کلاس تولید می شوند. این کلاس از 4 تابع اصلی تشکیل شده که هرکدام وظیفه تولید بخشی از منو یا فهرست را بر عهده دارند.

تابع start_lvl

تابع start_lvl وظیفه تولید سطوح یا level در منو را داراست. برای آشنایی بیشتر می توان چنین گفت که منوها در وردپرس به صورت لیست ساخته می شوند. در HTML لیست های بدون ترتیب با تگ ul تولید می شوند. لذا تابع start_lvl وظیفه تولید تگ آغازین ul هر سطح از منو را بر عهده دارد.

<ul class="sub-menu">

تابع end_lvl

تابع end_lvl وظیفه تولید تگ های پایانی سطوح را بر عهده دارد. هر زمان یک سطح از منو کامل می شود، این تابع تگ </ul> را برای پایان سطح ایجاد می کند.

تابع start_el

تابع start_el وظیفه تولید هر المنت یا عنصر منو را داراست. همانطور که گفته شد منوها در وردپرس به صورت لیست تولید می شوند. تابع start_el تولید کننده <li> در منوهای وردپرس است. در هر المان منو در وردپرس مواردی از قبیل لینک ها، محتوای منو، کلاس های المان ها و لینک ها و همچنین تعیین مقادیری نظیر title و target از طریق این تابع ساخته می شود.

<li class="menu-item">

تابع end_el

تابع end_el وظیفه تولید تگ پایانی برای هر المان را در منوهای وردپرس بر عهده دارد. این تابع تگ </li> را تولید می کند.

استفاده از کلاس Walker_Nav_Menu

برای تولید منوهای شخصی شده لازم است تا فایل class-walker-nav-menu.php در پوشه wp-includes را ویرایش کنیم. اما ویرایش فایل های سیستمی وردپرس به هیچ عنوان توصیه نمی شود، پس برای این کار ابتدا یک فایل در پوشه قالب خود ایجاد کنید. برای مثال نام فایل را new-walker.php قرار دهید. سپس در فایل functions.php موجود در قالب، فایل جدید را به وردپرس متصل کنید.

require get_template_directory (). '/new-walker.php';

حال می توانید کدهای فایل class-walker-nav-menu.php را در فایل new-walker.php کپی کنید. سپس در ابتدای فایل new-walker.php کد زیر را پیدا کنید:

class Walker_Nav_Menu extends Walker

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

برای استفاده از کدهای جدید در فایل new-walker.php لازم است تا در کد بالا تغییراتی اعمال کنیم. کد را به صورت کد زیر تغییر دهید:

class IW_Nav_Walker extends Walker_Nav_Menu

با این کار مشخص می کنیم کلاس جدید ما از کدام کلاس (Walker_Nav_Menu) ارث بری شده است. در این مرحله تنها کاری که لازم است انجام شود تغییر نام کلاس جدید است. در اینجا IW_Nav_Walker به عنوان نام کلاس جدید تعیین شده است. استفاده از یک نام یکتا در این مرحله مورد نیاز است.

استفاده از منوی جدید در طراحی

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

ایجاد location برای منو

برای ایجاد یک location یا مکان در وردپرس، در فایل functions.php کد زیر را قرار دهید:

register_nav_menus(array(
'primary-menu' => esc_html('Primary'),
));

در کد بالا تابع register_nav_menus برای تولید location استفاده شده است. مقدار primary-menu نام و Primary برچسب نمایشی منوی جدید است.

ایجاد منو

حال که مکان منوی جدید ایجاد شده است می توان با مراجعه به بخش نمایش > فهرست ها > ایجاد فهرست جدید، یک منوی تازه برای سایت ایجاد نمود و مکان منو را Primary انتخاب کرد. همچنین می توان یک از منوهای موجود را در این مکان تنظیم نمود.

نمایش منو

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

wp_nav_menu(array(
'theme_location' => 'primary-menu',
));

تابع wp_nav_menu وظیفه نمایش منوی متعلق به یک مکان خاص را بر عهده دارد. در اینجا این تابع منوی متعلق به مکان primary-menu نمایش می دهد.

اتصال کلاس Walker_Nav_Menu به منوی جدید

برای استفاده از کلاس Walker_Nav_Menu در منوی جدید لازم است تا در تابع wp_nav_menu نام کلاس را مشخص نماییم. برای این کار لازم است کد زیر را به تابع اضافه نماییم:

'walker' => new IW_Nav_Walker

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

wp_nav_menu(array(
'theme_location' => 'primary-menu',
'walker' => new IW_Nav_Walker
));

حال می توان با اعمال تغییرات دلخواه در توابع شرح داده شده در کلاس جدید IW_Nav_Walker، منوهای شخصی سازی شده را در مکان های مشخص شده برای وردپرس ایجاد نمود.

بیشتر بخوانید  طراحی قالب وردپرس - از کجا شروع کنیم | بخش اول
برچسب ها

ایرانووب

متولد 1368، طراح و توسعه دهنده وب، عاشق کدنویسی، ایده پردازی دیجیتال و بازی های ویدئویی!!!

نوشته های مشابه

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

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

دکمه بازگشت به بالا
بستن
بستن