آموزش اضافه کردن آیتم های سفارشی به منوهای وردپرس

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

این منو در دستگاه های تلفن همراه، اغلب با ضربه زدن روی نماد نمایش داده می شوند. و معمولاً از سردرگمی کاربران جلوگیری می کنند.

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

مراحل اضافه کردن آیتم های سفارشی به منو های وردپرس

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

به عنوان مثال، برخی از کاربران ممکن است بخواهند فرم جستجو را همانند مثال نمایش دهند. یک وب سایت عضویت ممکن است بخواهد پیوند های ورود و خروج را نشان دهد، یا ممکن است بخواهید نماد ها یا تصاویری را به منوی خود اضافه کنید.

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

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

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

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

1. افزودن پاپ آپ جستجو در منوی وردپرس

به طور معمول، می‌توانید با استفاده از ابزارک یا بلوک جستجوی پیش‌فرض، فرم جستجو را به نوار کناری وردپرس خود اضافه کنید.

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

اگر برای شما این طور نیست، می توانید از روش زیر استفاده کنید:

برای این کار باید افزونه SearchWP Modal Search Form را نصب و فعال کنید. این افزونه یک افزونه برای SearchWP است که بهترین افزونه جستجوی وردپرس موجود در بازار است.

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

پس از نصب افزونه، به سادگی به صفحه Appearance » Menus بروید. در زیر ستون « Add menu items»، روی برگه «SearchWP Modal Search Forms» کلیک کنید تا آن را باز کنید.

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

روی “Modal search form” در زیر آیتم های منو کلیک کنید تا آن را بزرگ کنید و برچسب را به جستجو یا هر چیز دیگری که می خواهید تغییر دهید.

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

2. افزودن آیکون ها و تصاویر سفارشی به منوهای خاص

یکی دیگر از موارد سفارشی محبوب که کاربران اغلب می خواهند به منو اضافه کنند، یک تصویر یا یک نماد است. برای این کار، باید افزونه Menu Image Icon را نصب و فعال کنید.

پس از فعال سازی، به صفحه Appearance » Menu بروید و ماوس خود را روی آیتم منو ای که می خواهید نماد یا تصویری در آن نمایش دهید حرکت دهید.

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

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

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

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

3. افزودن پیوندهای ورود / خروج را به منوی وردپرس

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

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

• افزودن پیوندهای ورود / خروج با استفاده از یک افزونه به منوها

این یک روش آسان است که به همه کاربران نیز توصیه می شود. ابتدا باید افزونه Login یا Logout Menu Item را نصب و فعال کنید.

پس از آن، باید به صفحه Appearance » Menu مراجعه کرده و روی زبانه Login/Logout کلیک کنید تا باز شود.

در این قسمت، باید مورد “Log in|Log Out” را انتخاب کنید و روی دکمه افزودن به منو کلیک کنید. فراموش نکنید که در پایان تنظیمات روی گزینه ذخیره منو کلیک کنید.

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

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

• افزودن پیوندهای ورود / خروج با استفاده از کد سفارشی

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

برای انتخاب ابزار Inspect کلیک راست کنید و سپس نام مکان را در کد منبع زیر مشاهده خواهید کرد. برای مثال، demo theme مثال از منوی اصلی، پاورقی و نوار بالایی استفاده می‌کند.

به نام مورد استفاده برای مکان مورد نظر خود توجه کنید که در آن می خواهید پیوند ورود / خروج را نشان دهید. در مرحله بعد، باید کد زیر را به فایل functions.php در تم یا یک افزونه مخصوص سایت اضافه کنید.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

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

4. افزودن متن سفارشی به منوی متحرک وردپرس

اگر فقط بخواهید متنی را اضافه کنید و لینکی را به منوی پیمایش خود اضافه نکنید، دو راه برای انجام این کار وجود دارد:

• افزودن متن سفارشی به یک منوی خاص (راه آسان)

به سادگی به صفحه Appearance » Menu بروید و یک پیوند سفارشی با علامت # به عنوان URL و متنی که می خواهید به عنوان متن پیوند نمایش داده شود اضافه کنید.

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

فراموش نکنید که روی دکمه Save Menu کلیک کنید و پیش نمایش وب سایت خود را مشاهده کنید. متوجه خواهید شد که متن سفارشی شما در منوی متحرک ظاهر می شود.

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

• افزودن متن سفارشی به منوی متحرک با استفاده از کد

برای این روش، یک قطعه کد به وب سایت خود اضافه می کنید. ابتدا، باید نام مکان موضوع خود را همانطور که در بالا در بخش پیوند ورود/خروج به آن توضیح داده شد، بیابید. پس از آن، باید کد زیر را به فایل functions.php در theme یا یک افزونه مخصوص سایت اضافه کنید.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

قسمتی که “Custom Text” نوشته شده است را با متن خود جایگزین کنید. اکنون می توانید تغییرات خود را ذخیره کرده و از وب سایت خود دیدن کنید تا متن سفارشی خود را در انتهای منوی متحرک خود مشاهده کنید. اگر می خواهید عناصر پویا را به صورت برنامه نویسی به منوی خاص وردپرس اضافه کنید، این روش اضافه کردن کد ممکن است مفید باشد.

5. اضافه کردن تاریخ فعلی در منوی وردپرس

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

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
    }
    return $items;
}

فراموش نکنید که «primary» را با مکان منوی خود جایگزین کنید. اکنون می توانید از وب سایت خود دیدن کنید تا تاریخ فعلی را در منوی وردپرس خود مشاهده کنید. همچنین می توانید قالب تاریخ را به دلخواه تغییر دهید.

6. نمایش نام کاربری در منوی وردپرس

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

ابتدا باید کد زیر را به فایل functions.php تم یا افزونه مخصوص سایت خود را اضافه کنید.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
             if ( is_user_logged_in() )     {
                $current_user = wp_get_current_user();
                 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
             } else {
             $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
             }
        }
    }
    return $menu_items;
}

این کد ابتدا بررسی می کند که آیا یک آیتم منو با #profile_name# به عنوان متن پیوند اضافه کرده اید یا خیر. پس از آن آیتم منو را با نام کاربری وارد شده یا یک تبریک عمومی برای کاربرانی که وارد نشده اند جایگزین می کند.

در مرحله بعد، باید به صفحه Appearance » Menus بروید و یک پیوند سفارشی جدید #profile_name# به عنوان متن پیوند اضافه کنید.

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

7. نمایش پویای منوهای متحرک در وردپرس

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

به عنوان مثال، ممکن است بخواهید منویی را فقط برای کاربرانی که وارد سیستم شده اند نشان دهید. بخش دیگر زمانی است که می خواهید منو بر اساس صفحه ای که کاربر مشاهده می کند تغییر کند.

این روش به شما این امکان را می دهد که چندین منو ایجاد کنید و تنها زمانی آنها را نمایش دهید که شرایط خاصی مطابقت داشته باشند.

برای شروع باید افزونه منوهای متحرک را نصب و فعال کنید. پس از فعال سازی، باید به Appearance » Menus مراجعه کنید. از اینجا باید منوی جدیدی ایجاد کنید که می خواهید نمایش داده شود.

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

پس از ایجاد منو، به تب Manage Locations بروید. از اینجا باید روی پیوند Conditional Menus در کنار بخش منو کلیک کنید.

پس از آن، باید منویی را که قبلا ایجاد کرده اید از منوی کشویی انتخاب کنید. سپس، برای ادامه روی دکمه “+ Conditions” کلیک کنید.

با انجام این کار یک پنجره بازشو برای شما ظاهر می شود. از اینجا می توانید شرایطی را که برای نمایش این منو باید رعایت شود را انتخاب کنید.

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

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

آذرسیس با ارائه پهنا باند و سرعت بی نهایت در سرور اختصاصی یک شبکه ایمن با انعطاف پذیری بالا را به شما تضمین می دهد.

نتیجه گیری

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

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