Menu Close

WordPress Main Custom Navigation Menu Create Short Codes

You can shortcode the site menu, the official name 'WordPress navigation menu', which you can set in the WordPress Appearance> menu, to make it possible to insert it anywhere on the page or anywhere you want.

Normally you do not need to put this navigation menu in a short code and you do not know why,Poly(Polylang)You can use it when you want to create a new one because you do not like the default mobile navigation menu.

To encode a navigation menu, you have to go through two steps: creating a custom menu and registering the created menu with the short code. All the code is WordPressfunctions.phpYou can type in.

    Create WordPress Custom Navigation Menu

First of all,functionsAnd make a state that can be modified in the appearance> menu. Enter the code below.

register_nav_menus( array(
  'custom_menu' => 'Custom Menu',
) );

functionsWait a few moments to apply,Custom MenuIs activated.'custom_menu' => 'Custom Menu'You can continue to create new menus by simply swapping and pasting.

    Make Menu Shot Code

You can now shortcode the created menu and register it. In fact, the method of short coding is very easy. If you enter the code as a basic type, you will see that all skins are ignored and positioned at the top of a certain skin. Therefore, if you input it in the following way, you can short code custom menu without error.

function get_menu($args){
    $menu = isset($atts['menu']) ? $atts['menu'] : '';
    ob_start();
    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
    ) );
    return ob_get_clean();
}
add_shortcode('Custom_nav_menu', 'get_menu');

In the above code, the bluecustom_menuParts must be the same, redCustom_nav_menuThe part is the short code name. In other words,[Custom_nav_menu], The custom menu that you set up is called the short code.

Inside the codewp_nav_menu(array(You can add or change the settings in the navigation menu.

    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
        'fallback_cb'      => false,
    ) );

This way you can add it like a red part.fallback_cbIs a code that determines what to do if there is no menu specified in the code. The default is to show the page list,falseYou will see an empty space.

    Available Attributes

Here are the codes you can use here: Since I have not used it all, but have consulted the official help, some of the code might be different from the description.

  • 'menu'
  • Enter the ID, slug, and name of the menu that you want to allow

  • 'menu_class'
  • The menu consists ofClassGive the name. The class name of the menu is created literally.

  • 'menu_id'
  • The menu consists ofIDGive the name.

  • 'container'
  • UlOr not. The default value isdiv

  • 'container_class'
  • Container around the menucontainerofclassSpecify the name.

  • 'container_id'
  • containerofIDSpecify the name.

  • 'fallback_cb'
  • The above code. Sets the value to be called when there is no menu specified in the code. The default is a list of pages.falseIf you type, nothing appears.

  • 'before'
  • Let's put the text, images and icons freely with CSS::before, ::afterDescribed in::beforeLike attributes, you can specify the text that appears before the link's markup.

  • 'after'
  • Overbefore, But it sets the text to appear later than the previous one.

  • 'link_before'
  • As above, we specify the text before the link text.

  • 'link_after'
  • As above, specify the text after the link text.

  • 'echo'
  • It is said that the menu is displayed or returned. The default value istrue

  • 'depth'
  • Determines the hierarchy of menus to load. here2, The menu in the menu is represented by two levels. The default is 0, which means that all layers are represented.

  • 'walker'
  • Defines an instance of a custom worker class.

  • 'theme_location'
  • You define the location of the theme you want to use, just put in the name of the custom menu you want to use.

  • 'items_wrap'
  • Wraps list items. The default value isidWowulIn addition,printf().

  • 'item_spacing'
  • MenuHTMLDefine whether or not to preserve internal whitespace. Preserve defaultspreserveego,discardDo not save if you type.

    All of the available attributes are as above,WordPresswp_nav_menuOfficial help.

    Leave a Reply

    Your email address will not be published.

    Posted in All, Wordpress

    이메일 구독 - Email Subs

    최선을 다해 직접 만든 콘텐츠만 공유합니다.
    We share the best content we have created.