Question

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

这是一张图： HOME |关于|标志|新闻|博客

我正在查看钩子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

指南针＆＃39;解决方案，摆脱循环。

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 | LOGO | 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，选择第2和第3个元素。这两个项目中间的边距更多，所以第二个元素30px边距右边和第三个元素30px边距。

然后将带有徽标的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

Answer 4

function add_admin_link($items, $args){
    if( $args->menu_id == 'header_menu' ){
        $items .= '<li class="nav-item">Paste the text or code here</li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_admin_link',20,2);

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

4 个答案:

PHP版

jQuery版本

CSS版