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

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

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

در این مقاله در مورد روش عملکرد تابع wp_nav_menu وردپرس صحبت خواهیم کرد. ما به شما نشان می‌دهیم که چه آرگومان‌ها و کلاس‌هایی با wp_nav_menu کار می‌کنند و سپس توضیح می‌دهیم که چگونه از تابع با موضوع خود استفاده کنید. بیایید به آن برسیم!

عملکرد wp_nav_menu وردپرس چیست؟

wp_nav_menu تابعی است که می تواند منوهای سفارشی را نمایش دهد روی وب سایت های وردپرسی

بر خلاف wp_page_menu، که لیستی از صفحات موجود را نشان می دهد، wp_nav_menu فقط با منوهای سفارشی کار می کند.

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

wp_nav_menu( array $args = array() )

شما باید مشخص کنید که کدام منو را می خواهید نمایش دهید تا کد کار کند. در عمل، یک تابع مثال wp_nav_menu در a page قالب به شکل زیر خواهد بود:

wp_nav_menu( array( 
    'theme_location' => 'custom-menu') );

یک تابع wp_nav_menu می تواند چندین پارامتر را شامل شود. در آن مثال، ما از theme_location برای تعیین نام منوی سفارشی که می‌خواهیم استفاده کنیم، استفاده کردیم.

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

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

پارامترهای wp_nav_menu وردپرس و کلاس‌های CSS

اکثر توابع وردپرس پارامترهای مختلف از پیش تعیین شده را برای تغییر اثرات خود ارائه می دهند. در مورد wp_nav_menu، شما هم پارامترها و هم کلاس های CSS را دارید. از اولی شروع کنیم!

پارامترهای wp_nav_menu

می توانید تابع wp_nav_menu را با استفاده از یک یا چند پارامتر سفارشی کنید. در اینجا گزینه های موجود هستند:

• ‘منو’ – نشان می دهد که از کدام منو استفاده می کنید. می‌توانید با استفاده از شناسه، اسلاگ، نام یا شی، یک منو را مشخص کنید.
• ‘menu_class’ – کلاس CSS را برای منوی خود پیکربندی کنید. به طور پیش فرض، تابع از منو کلاس
• ‘menu_id’ – شناسه منو را مشخص کنید. مقدار پیش‌فرض یا شناسه، اسلاگ منو با یک عدد اضافه یا افزایش‌یافته است.
• ‘container’ – انتخاب کنید چه نوع container برای استفاده در منو به طور پیش فرض، تابع استفاده می کند بخش ظروف
• ‘class_container’ – یک کلاس CSS را تنظیم کنید که مستقیماً در منوها اعمال شود container. به طور پیش فرض، آن کلاس منو خواهد بود منو-{menu slug}-container.
• ‘container_id’ – یک شناسه برای منوها تنظیم کنید container. همانند شناسه منو، container به طور پیش فرض از اسلگ خود استفاده خواهد کرد.
• ‘fallback_cb’ – اگر وردپرس نتواند منوی مورد نظر برای نمایش را پیدا کند، این پارامتر به آن می گوید کدام عنصر دیگر را باید نشان دهد.
• “موضوع_مکان” – اگر یک منوی سفارشی را با استفاده از ثبت نام کنید register_nav_menu، این پارامتر آن را نمایش می دهد.
• “اقلام_پوشش” – به طور پیش فرض، منوی شما نمایش داده می شود لیست نامرتب (ul) قالب این پارامتر به شما امکان می دهد روش بسته بندی آیتم های منو را پیکربندی کنید.
• “فاصله_اقلام” – بیشتر منوها از فضای خالی برای جداسازی آیتم ها استفاده می کنند. اگر می خواهید آن فضای خالی را غیرفعال کنید، می توانید این پارامتر را روی آن تنظیم کنید دور انداختن.

چند مورد اضافی وجود دارد پارامترهای wp_nav_menu که ما به آن اشاره نمی کنیم، از جمله گزینه هایی برای افزودن متن به منو. با این حال، پارامترهای ذکر شده در بالا عناصر اصلی هستند که هنگام افزودن منوهای سفارشی به یک موضوع استفاده می کنید.

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

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

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

wp_nav_menu کلاس های CSS

هنگامی که از تابع wp_nav_menu استفاده می کنید، به طور خودکار طیفی از کلاس های CSS را برای هر آیتم منوی نمایش داده شده اعمال می کند.

در اینجا مهمترین آنها هستند wp_nav_menu کلاس های CSS:

• آیتم منو – این کلاس به طور خودکار برای هر آیتم منو اعمال می شود.
• .menu-item-has-children – فقط برای آیتم های منو با موارد فرعی اعمال می شود.
• .menu-item-object-{object} – برای هر آیتم منو اعمال می شود. را هدف – شی placeholder می تواند post_type یا طبقه بندی باشد.
• .menu-item-object-category – این آیتم های منو با یک دسته بندی خاص وردپرس مطابقت دارند.
• .menu-item-object-tag – آیتم های منو که با یک برچسب وردپرس مطابقت دارند.
• .menu-item-object-page – آیتم های منو در صفحات استاتیک
• .menu-item-object-{سفارشی} – مواردی که با انواع پست سفارشی مطابقت دارند.
• .menu-item-type-{type} – برای هر آیتم منو اعمال می شود. را نوع مکان نگهدار می تواند post_type یا طبقه بندی باشد.
• .menu-item-type-post_type – مواردی که با هر نوع پستی مطابقت دارند.
• .menu-item-type-taxonomy – مواردی که با هر طبقه بندی مطابقت دارند.

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

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

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

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

مرحله 1: با استفاده از تابع wp_nav_register یک منوی سفارشی ایجاد کنید

همانطور که قبلا ذکر کردیم، wp_nav_menu به شما اجازه ایجاد منوهای سفارشی را نمی دهد، اما به شما امکان می دهد آنها را قرار دهید. این بدان معناست که قبل از استفاده از آن عملکرد، باید منوها را به صورت دستی بسازید.

wp_nav_register به شما امکان می دهد منوهایی را برای یک موضوع خاص ایجاد کنید یا “ثبت نام کنید”. شما باید تم را ویرایش کنید functions.php فایل برای استفاده از آن

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

هنگامی که این مشکل حل شد، باید به فایل functions.php تم خود دسترسی داشته باشید. ساده ترین راه برای انجام این کار این است که به آن بروید ظاهر → ویرایشگر فایل تم page در داشبورد

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

از طرف دیگر، می توانید با استفاده از functions.php دسترسی داشته باشید پروتکل انتقال فایل (FTP). اگر ترجیح می دهید از یک ویرایشگر متن کامل استفاده کنید، این روش را توصیه می کنیم. شما فقط یک تکه کد اضافه می کنید، بنابراین ویرایشگر کد داخلی وردپرس کافی است.

به انتهای فایل رفته و کد زیر را به آن اضافه کنید:

function wpb_custom_new_menu() {
  register_nav_menu('custom-menu',__( 'Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

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

تغییرات را در فایل functions.php ذخیره کنید. حال نوبت به ویرایش مواردی است که در منوی جدید قرار می گیرند.

مرحله 2: منوی وردپرس سفارشی خود را ویرایش کنید

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

آن بخش باید شامل مکان منوی جدیدی باشد که در مرحله اول ثبت نام کرده اید.

برای ویرایش مواردی که آن مکان نشان داده می شود، منویی را با استفاده از گزینه انتخاب کنید یک منو برای ویرایش انتخاب کنید: گزینه یا ایجاد یک گزینه جدید.

سپس، با استفاده از لیست سمت چپ، عناصری را که می‌خواهید منو شامل شود انتخاب کنید و آنها را در زیر مرتب کنید ساختار منو بخش.

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

مرحله 3: از تابع wp_nav_menu برای نمایش منوی جدید استفاده کنید

در این مرحله باید یک منوی آماده با موضوع خود ثبت کنید. با این حال، اگرچه منو وجود دارد، اما تا زمانی که از تابع wp_nav_menu برای تعیین مکان آن استفاده نکنید، در هیچ کجا ظاهر نمی شود.

باید تابع wp_nav_menu را در یک اضافه کنید page قالب برای قرار دادن منوی سفارشی. را page فایل های قالبی که به آنها دسترسی دارید بستگی دارد روی از کدام تم استفاده می کنید

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

در مثال خود، ما تک موضوع خود را انتخاب کردیمpage قالب. کدی که باید به قالب اضافه کنید باید چیزی شبیه به این باشد:

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

قبل از ذخیره تغییرات در فایل الگو، به یاد داشته باشید که متغیرهای نگهدارنده را با اسلاگ تم سفارشی خود و سایر پارامترهایی که می خواهید استفاده کنید، به روز کنید. ما شامل کانتینر_کلاس و fallback_cb پارامترها در مثال ما

با این حال، کدی که استفاده می کنید می تواند به سادگی باشد:

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu' ) ); 
?>

موقعیت آن کد مکان منو را تعیین می کند روی را page. اگر مطمئن نیستید که این مکان‌گذاری چگونه کار می‌کند، می‌توانید مکان‌های مختلف را در فایل الگو آزمایش کنید.

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

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

نتیجه

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

در اینجا خلاصه ای سریع از روش استفاده از تابع wp_nav_menu وردپرس آورده شده است:

1. با استفاده از تابع register_nav_menu یک منوی سفارشی ایجاد کنید.
2. منوی سفارشی وردپرس خود را ویرایش کنید.
3. برای نمایش منوی جدید از تابع wp_nav_menu استفاده کنید.

آیا در مورد استفاده از تابع wp_nav_menu در وردپرس سوالی دارید؟ بیایید در بخش نظرات زیر در مورد آنها بحث کنیم!