如何将 HTML 添加到 Wordpress 菜单？

Posted 2023-04-13

【中文标题】如何将 HTML 添加到 Wordpress 菜单？

【英文标题】：How do I add HTML to a Wordpress menu?

【发布时间】：2013-10-19 14:32:24

【问题描述】：

假设我在导航中有 MyAccount 和 MyStats，我想在“我的”文本周围加上一个 标签。我将如何在 Wordpress 中执行此操作？

例如我的房子，我的街道。

【问题讨论】：

你在使用任何 javascript/jQuery 吗？

【参考方案1】：

如果我对问题的理解正确，您只想将“我的”这个词加粗吗？看看这个屏幕截图，你应该可以将它直接发布到导航菜单中，具体取决于你想要添加的内容：

【讨论】：

这将是理想的。我在下面使用了一个更复杂的解决方案。

【参考方案2】：

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

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

您可能需要更改选择器，或者更具体一些，以免影响您网站上的所有 li。

这是一个有效的小提琴 - http://jsfiddle.net/dM5sb/

对于 PHP 解决方案，如果您当前使用的是 wp_nav_menu()，您可能需要切换到 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

【讨论】：

我想到了这个，但我宁愿使用 PHP。

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

【参考方案3】：

您很可能需要通过编辑 head.php/header.php 文件来完成此操作。为此，您需要做两件事之一。 FTP 到您的服务器并导航到

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

然后找到导航或菜单。或者在wordpress的后端，转到

appearance->editor 

在此处找到文件并进行必要的更改。

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

【讨论】：

是的，对不起，我应该说。我不希望使用 GUI 让它工作。我希望我将不得不再编辑我的模板。

【参考方案4】：

如果您想要自定义导航名称，您可以简单地制作一个自定义菜单：

【参考方案5】：

这个链接帮助我得到了我想要的东西： How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in wordpress?

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

感谢您的回答