如何将HTML代码添加到WordPress菜单？

Question

假设我在导航栏中有“MyAccount”和“MyStats”，我想在“My”文本周围添加标签。在WordPress中，我该如何操作？

例如：MyHouse，MyStreet。

- scottgemmell

---

你是否在使用任何JavaScript/jQuery？ - Wez

Answer 1

如果我正确理解您的问题，您只想将单词"My"加粗？请查看此屏幕截图，根据您要添加的内容，您应该能够将其直接发布到导航菜单中：

- Chris Cummings

---

这本来是理想的解决方案。下面我使用了一个更复杂的解决方案。 - scottgemmell

Answer 2

如果您正在使用jQuery，您可以这样做，以便使用<span>元素包装每个菜单项的前两个字母。

$('li').each(function(){
    $(this).html('<span>'+$(this).text().substring(0,2)+'</span>'+$(this).text().substring(2));
});

你可能需要更改选择器或者更加具体，以便不影响站点上的所有li元素。

这里是一个有效的Fiddle - http://jsfiddle.net/dM5sb/ 如果你目前正在使用wp_nav_menu()，并且想要PHP解决方案，你可能需要切换到get_pages()，然后像这样做。

<ul>

<?php

$args = array(
'sort_order' => 'ASC',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'child_of' => 0,
'parent' => -1,
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
); 

$pages = get_pages($args); 

foreach($pages as $page) {

    $title = $page->post_title;
    $my = substr($title, 0, 2);
    $the_rest = substr($title, 2);

?>

<li><a href="<?php echo get_page_link( $page->ID ); ?>"><span><?php echo $my ?></span><?php echo $the_rest?></a></li>

<?php } ?>

</ul>

这还未经过测试，但你可以在这里阅读更多关于WordPress get_pages()函数的信息 - http://codex.wordpress.org/Function_Reference/get_pages

- Wez

---

我考虑过这个，但我宁愿使用PHP。 - scottgemmell

我刚刚添加了一个使用PHP的选项。 - Wez

Answer 3

你需要通过编辑head.php/header.php文件来完成这个任务。为了做到这一点，你需要做两件事中的一件。要么通过FTP登录到你的服务器并导航到...

sitefolder/wp-content/themes/themefolder/header.php 

查找nav或menu。或者在WordPress的后台，转到

appearance->editor 

在这里找到文件并进行必要的更改。

使用该方法，您将需要硬编码菜单项。因此，对页面名称等的任何更改都不会被表示。但这是最简单的方法来实现这个目标。

- The Humble Rat

---

是的，抱歉，我应该说一下。我并不指望通过图形用户界面来使这个工作起来。我预计我需要进一步编辑我的模板。 - scottgemmell

Answer 4

如果你想要自定义导航名称，你可以简单地创建一个自定义菜单：

- Bradly Spicer

Answer 5

这个链接对我非常有帮助，让我得到了我想要的： 如何在WordPress中使用wp_get_nav_menu_items生成自定义菜单/子菜单系统？

如果代码验证是一个问题，我会把我的代码放在这里。

谢谢你们的回答

- scottgemmell