在导航链接之间添加元素

Question

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

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

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

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

Answer 2

已更新v2

You can use after parameter of wp_nav_menu(), with a small CSS trick.

代码如下：

$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 3

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

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

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

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

显示：none

Answer 4

使用CSS。像这样的东西应该有用。

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

在导航链接之间添加元素

Adding elements inbetween navigation links

html

php

wordpress

wordpress-theming

navbar