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

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

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

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

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

解决方案

PHP 版本

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

header_menu_1 |标志 |header_menu_2

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

然后在您的 header.php 文件中，包含此代码.

 'header_menu_1' );$args2 = array( 'menu' => 'header_menu_2' );wp_nav_menu($args1);?><img src="LOGO 源"/><?phpwp_nav_menu($args2);?>

这将是不使用 jQuery 或搞乱插件的最简单方法.

WP 导航菜单

添加新的 WordPress 菜单

jQuery 版本

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

演示

CSS 版本

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

使用 nth-child，选择出第二个和第三个元素.这两个项目的中间都有更多的边距，因此第二个元素右边距为 30 像素，第三个元素左边距为 30 像素.

然后将带有徽标的div放在绝对中间位置.

示例:

CSS:

#container {宽度:100%；}ul{显示:块；宽度:100%；}李{显示:内联块；宽度:15%；填充:1.25%；保证金:1.25%；背景:蓝色；}li:nth-child(2) {边距:10%；}li:nth-child(3) {左边距:10%；}#容器 img {宽度:20%；位置:绝对；左:50%；左边距:-7.5%；}

HTML:

<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/><ul><li>首页</li><li>首页</li><li>首页</li><li>首页</li>

演示

I have a primary menu registered and displayed that consists of 4 links (home, about, news, blog). I want to add html (a logo) in between the second and third menu and I was wondering if this was possible.

Here is a diagram: HOME | About | Logo | News | Blog

I was looking at the hook wp_nav_menu_items but I can only add a custom item to either the first position or last.

Before I used jQuery to add html but since the DOM has to be fully loaded the logo loads last and I'm trying to get the logo to show first or at the same time with the content of the page.

解决方案

PHP Version

One way would be to create 2 navigation menu's which are then used.

header_menu_1 | LOGO | header_menu_2

Within the back-end, you'd need to create a new header location and then add the 2 menu items to it.

Then within your header.php file, have this code.

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

That will be the easiest way without using jQuery or messing about with plugins.

WP Nav Menu

Adding New WordPress Menus

jQuery Version

$(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 Version

This is a really dirty hack way of doing it.

Using nth-child, select out the 2nd and 3rd elements. Both items get more margin for the middle so 2nd element 30px margin right and 3rd element 30px margin left.

Then put the div with the logo in it to be position absolutely in the middle.

Example:

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