如何将自定义项添加到特定的WordPress菜单项位置 - How to add a custom item to a specific WordPress menu item position

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

这是一个图表:主页|关于| Logo |新闻|博客

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

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

我用这种方法解决了类似的问题:

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;
}

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;
}

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

PHP版本

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

header_menu_1 | LOGO | header_menu_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导航菜单

添加新的WordPress菜单

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++;
    });
});

演示

CSS版本

这是一种非常肮脏的方法。

使用n -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>

演示

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);