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

问题描述

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

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

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

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.

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

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版本

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

PHP Version

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

header_menu_1 | LOGO | header_menu_2

header_menu_1 | LOGO | header_menu_2

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

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

然后在您的header.php文件中，输入以下代码.

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

这将是最简单的方法，而无需使用jQuery或弄乱插件.

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

WP导航菜单

添加新的WordPress菜单

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

演示

这是一种非常肮脏的破解方式.

This is a really dirty hack way of doing it.

使用第n个子元素，选择第二个和第三个元素.两项都在中间有更多的边距，因此第二个元素向右30px边距，第三个元素向左30px边距.

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.

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

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

示例:

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>

演示

这篇关于如何将自定义项添加到特定的WordPress菜单项位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！