php - 在我的 WordPress 导航菜单中插入设计元素

Question

大家好，非常感谢所有努力帮助我的人。

这是我的问题，请多多包涵，因为我对这一切还比较陌生。

我正在尝试为我网站上的博客创建一个自定义 WordPress 主题，以便我的博客和我的网站的外观和感觉是无缝的。

现在我的问题是导航菜单。我用垂直线分隔导航链接，我一直无法找到任何示例来说明如何执行此操作，或者在 WordPress 中找到类似的操作，如果可能的话，可以在没有 jQuery 的情况下完成。

这是我的视觉网站； http://is-images.com/

如果有帮助，这里是菜单和 css 的 html 代码

<div id="HeaderNav">
                <ul>
                    <li class="link"><a href="/" class="nav about">about</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="web.php" class="nav web">web</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="photo.php" class="nav photo">photo</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="#" class="nav blog">blog</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="contact.php" class="nav contact">contact</a></li>
                </ul>
            </div>

CSS

#HeaderNav
{
    display:block;
    width:300px;
    height:24px;
    float:right;
    margin-top:70px;
    margin-right:37px;
}

#HeaderNav ul
{
    position:relative;
    display:block;
    float:right;
}

#HeaderNav ul li
{
    padding:0 4px;
    display:block;
    height:100%;
    float:left;
    margin:0 auto;
    text-align:center;
}

#HeaderNav ul li.navsep
{
    width:1px;
    height:24px;
    margin:0 7px;
    padding:0;
    background-color:#ffffff;
}

如果有人能以任何方式提供帮助，我将不胜感激。

再次感谢所有付出努力的人。

Answer 1

如果你想在 wordpress 主题上添加垂直线来分隔导航菜单选项，你可以使用一些 CSS 规则来实现。不需要 jQuery。

给你:

li.menu-item a {
    border-right: 1px solid #fff;
    padding-right: 5px;
    padding-left: 5px;
}