在导航链接之间添加元素答案

【问题标题】：Adding elements inbetween navigation links在导航链接之间添加元素
【发布时间】：2017-03-11 02:22:33
【问题描述】：

我有以下代码将我的导航输入/输入到我的网站。链接是通过管理面板创建的。我想添加一个'|'链接之间的分隔符

HTML

<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

functions.php

/* Register 'primary' navigation */

function wptutsplus_register_theme_menu() {
    register_nav_menu('primary', 'Main Navigation Menu');
}

add_action('init', 'wptutsplus_register_theme_menu');

电流输出

Link 1     Link 2    ...

期望的输出

Link 1   |   Link 2   ...

html

<div class='col-md-6'>
    <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</div>

【问题讨论】：

标签： php html wordpress wordpress-theming navbar

【解决方案1】：

更新v2

您可以使用wp_nav_menu() 的after 参数，以及一个小的CSS 技巧。

代码如下：

$menuParameters = [
    'container_class' => 'main-nav',
    'theme_location' => 'primary',
    'menu_class' => 'my_custom_class', //<-- add this
    'after' => '<span class="sep">|</span>' //<-- add this
];
wp_nav_menu($menuParameters);

将此添加给您style.css

.my_custom_class li:last-child .sep{ display:none; }

替代方式（纯 PHP 方式）

$menuParameters = [
    'container_class' => 'main-nav',
    'theme_location' => 'primary',
    'after' => '|', //<-- add this
    'echo' => false //<-- add this
];

$nav_html = wp_nav_menu($menuParameters);
$needle = isset($menuParameters['after']) ? $menuParameters['after'] : '';
$index = strrpos($nav_html, $needle);
if ($index)
{
    echo substr_replace($nav_html, '', $index, strlen($needle));
}
else
{
    echo $nav_html;
}

所有代码都经过测试并且可以工作。

希望这会有所帮助！

【讨论】：

这会在所有链接上放一个吗，因为我可以设置链接 css 本身的样式，但是最后一个链接会有它，所以菜单会结束 link4 | ...
是的，它会在每个链接之后添加|，这就是我使用trim() 函数删除最后一个管道| 符号的原因。请尝试一下，它会像我最终测试的那样工作。
好的，太棒了！谢谢，我对装饰部分不熟悉，所以不确定
当我将它添加到我的functions.php时似乎不起作用，我认为这是我的问题，有没有特定的方法来包含它？
@user3550879：实际上错误出现在我的最后，我使用的主题覆盖了我的导航 CSS。所以我用两种方法更新了我的答案，两种方法都经过了多个主题的测试，并且没有安装插件，只是为了仔细检查我的输出。请有一个战利品。

【解决方案2】：

添加符号 |（与您拥有的菜单链接一样多）就像您通常在 wordpress 菜单中添加自定义链接一样。

然后使用 devtools 获取每个元素的类或 id，然后将此 css 应用于每个元素

.itemtofind{
   pointer-events: none;
   cursor: default;
}

您可以根据需要自定义 css 元素，添加填充、颜色等。过去我制作了一个具有该功能的网页，并且一切正常。当您使用移动设备时，应用正确的媒体查询并隐藏符号 |用这个 css 到元素

显示：无

【讨论】：

【解决方案3】：

我不太确定 wordpress 如何设置它们的链接样式，但这应该可以效仿，我认为简单地插入文本节点是行不通的。

.wp-navigation {
    border-right:2px solid black;
}
.wp-navigation:last-child {
    border-right:none;
}

【讨论】：

问题是这会在最后的链接上放一个

【解决方案4】：

使用 CSS。这样的事情应该可以工作。

.main-nav a:after {
     content: '|';
     display: inline-block;
     margin: 0 .5em;
}

【讨论】：