Question

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

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>

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

所有代码都经过测试并有效。

希望这有帮助！

Answer 2

我不太确定wordpress如何设置他们的链接，但这应该模仿，我不认为插入文本节点会起作用。

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

Answer 3

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

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

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

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

显示：无

Answer 4

使用CSS。这样的事情应该有效。

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

在导航链接之间添加元素

4 个答案: