在 wordpress 中用“|”分割导航菜单答案

【问题标题】：split the navigation menu by the " | " in wordpress在 wordpress 中用“|”分割导航菜单
【发布时间】：2014-05-13 07:31:02
【问题描述】：

有没有一种简单的方法可以用 ' | 分割我的导航菜单？ '例如？
这是我的菜单：

(home  about us  our work   connect us)

所以我需要这样一个：

(home   |   about us   |   our work   |   connect us)

当编辑器在 (Appearance->Menus) 中添加新项目时，它必须添加 ' | ' 自动地。任何想法？ php html css javascript ...没问题

【问题讨论】：

您需要更改 HTML 模板。我们无法告诉您您的 HTML 模板是什么样的，因此您必须自己做。
谢谢，但是...不，我创建了我的主题，这是一个关于拆分导航菜单中每个项目的特殊问题。

标签： php css wordpress function navigation

【解决方案1】：

你可以做这样的事情来添加行并检查

Fiddle

这是简单的代码

<div class="verticalLine">

home  

</div>

CSS

.verticalLine {
    border-left: 2px solid ;
    display:inline;
    padding-left:5px ;
}

希望这就是你要找的东西。只是一个试图帮助的新手:)

【讨论】：

使用 UL 和列表元素进行导航！
只是教他如何添加垂直线。我猜其他部分在他身上。
我知道将它们排成一行并了解 html 和样式，但我只需要自动拆分它们，所以让我说 ('nav ')); split_by (" | ")?>) 有没有类似.......thanx all ya
@HadiOmary 您需要更改li 项目的样式。这称为 CSS，网上有很多关于它的教程。
@HadiOmary 实际上放一个'|'以这种方式将字符导入导航对语义和可访问性没有帮助。根据答案和 cmets，您最好使用 CSS。

【解决方案2】：

试试这个

<?php wp_nav_menu(array('after' => '|')); ?>

风格

   .main-nav li 
    {
    list-style-type: none;
    display:inline;
    border-left:1px solid #000000;
    }

  .main-nav li:first-child
   {
        border-left: 0;

   }

【讨论】：

'main-nav','container'=>'nav','after' => '|')); ?>
非常感谢....很棒的技术。但我不知道如何设置它的样式，因为菜单下显示的行
@HadiOmary：这有帮助吗？
mmmm 谢谢它的工作，我为下一个 li 添加 .main-nav ul ul>li{border:0; }

【解决方案3】：

我使用 jquery 对我的网站进行了此操作。

 $('ul#mainNav > li').not('ul#mainNav > li:last').append("&nbsp;|&nbsp;");

您需要更新选择器以匹配您自己的导航。

【讨论】：