如何将自定义项添加到特定的 WordPress 菜单项位置

Question

我注册并显示了一个主菜单，其中包含 4 个链接（主页、关于、新闻、博客）。我想在第二个和第三个菜单之间添加 html（徽标），我想知道这是否可能。

这是一个图表： 主页 |关于 |标志 |新闻 |博客

我正在查看挂钩 wp_nav_menu_items 但我只能将自定义项目添加到第一个位置或最后一个位置。

在我使用 jQuery 添加 html 之前，但由于 DOM 必须完全加载，所以徽标最后加载，我试图让徽标首先显示或与页面内容同时显示。

Answer 1

我用这种方式解决了类似的问题：

add_filter('wp_nav_menu_items','add_custom_in_menu', 10, 2);

function add_custom_in_menu( $items, $args ) 
{
    if( $args->theme_location == 'primary' ) // only for primary menu
    {
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) )
        {
            $items_array[] = substr($items, 0, $item_pos);
            $items = substr($items, $item_pos);
        }
        $items_array[] = $items;
        array_splice($items_array, 2, 0, '<li>custom HTML here</li>'); // insert custom item after 2nd one

        $items = implode('', $items_array);
    }
    return $items;
}

请注意，它仅适用于单级菜单。

Answer 2

Compass 解决方案的变化很小，摆脱了循环。

add_filter('wp_nav_menu_items','add_custom_in_menu', 10, 2);

// add in Logo in the middle of the menu
//
function add_custom_in_menu( $items, $args )
{
    if( $args->theme_location == 'footer_navigation' )
    {
        $new_item       = array( '<li class="menu-logo"><a href="/"><img src="' . get_template_directory_uri() . '/assets/img/logo.png" alt=""></a></li>' );
        $items          = preg_replace( '/<\/li>\s<li/', '</li>,<li',  $items );

        $array_items    = explode( ',', $items );
        array_splice( $array_items, 2, 0, $new_item ); // splice in at position 3
        $items          = implode( '', $array_items );
    }
    return $items;
}

不确定使用内置函数是否会快得多。你的选择

Answer 3

PHP 版本

一种方法是创建 2 个导航菜单，然后使用它们。

header_menu_1 |标志 | header_menu_2

在后端，您需要创建一个新的标题位置，然后向其中添加 2 个菜单项。

然后在你的header.php 文件中，有这个代码。

<?php
    $args1 = array( 'menu' => 'header_menu_1' );
    $args2 = array( 'menu' => 'header_menu_2' );
    wp_nav_menu($args1);
?>

<img src="LOGO SOURCE" />

<?php
    wp_nav_menu($args2);
?>

这将是最简单的方法，无需使用 jQuery 或使用插件。

WP Nav Menu

Adding New WordPress Menus

jQuery 版本

$(document).ready(function() {
    var i = 1;
    $('ul li').each(function() {
        if(i == 2) {
            $(this).after('<img src="http://www.socialtalent.co/images/blog-content/so-logo.png" width="250" />');
        }
        i++;
    });
});

Demo

CSS 版本

这是一种非常肮脏的黑客方式。

使用 nth-child 选择第二个和第三个元素。这两个项目的中间都有更多的边距，所以第二个元素右边距为 30px，第三个元素左边距为 30px。

然后将带有logo的div放在绝对中间。

例子：

CSS：

#container {
    width: 100%;
}

ul {
    display: block;
    width: 100%;
}
li {
    display: inline-block;
    width: 15%;
    padding: 1.25%;
    margin: 1.25%;
    background: blue;
}

li:nth-child(2) {
    margin-right:10%;
}
li:nth-child(3) {
    margin-left: 10%;
}

#container img {
    width: 20%;
    position: absolute;
    left: 50%;
    margin-left: -7.5%;
}

HTML：

<div id="container">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
    <ul>
        <li>Home</li>
        <li>Home</li>
        <li>Home</li>
        <li>Home</li>
    </ul>
</div>

Demo