有几种方法可以做到这一点，它们主要围绕walker_nav_menu_start_el 滤器

我倾向于向导航菜单项添加自定义字段：一个用于图像，另一个用于图像的备用文本。这样，用户就可以更新图像，开发人员无需在代码中保留所有菜单项和相关图像URL/alt文本的哈希值（并且与实际菜单项保持最新）。

有很多google会让你进入“wordpress菜单项自定义字段”。设置好后，可以使用类似于下面代码段的内容。

如果不添加自定义字段，您可能会出于类似目的滥用菜单项的描述字段。

在外观->菜单->屏幕选项中，确保“说明”可见functions.php 或类似内容，请添加此代码段。您可能需要稍微调整一下HTML以获得所需内容。例如，此代码段将图像插入<a> 标记

---

function mynamespace_nav_add_images( $item_output, $item, $depth, $args ) {
    // You can limit it to certain menus with this check
    if ( \'primary\' == $args->theme_location && !empty( $item->description )  ) {
        // NOTE: by default, link_after will be empty.
        // It\'s here in case it\'s added via wp_nav_menu([\'link_after\'=>\'xyz\'])
        $old =  $args->link_after . \'</a>\';
        $new = \'<img src="\' . $item->description . \'">\' . $args->link_after . \'</a>\';

        $item_output = str_replace( $old, $new, $item_output );
    }
    return $item_output;
}
add_filter( \'walker_nav_menu_start_el\', \'mynamespace_nav_add_images\', 10, 4 );

在打开之前插入图像<a> tag，类似这样的东西应该可以工作：

$old = \'<a\';
$new = \'<img src="\' . $item->description . \'">\' . \'<a\';

这基本上是直接从Twenty-Fifteen 主题http://themefoundation.com/menu-item-descriptions/ 对类似代码有很好的演练。

这会让你走到那里。问题是这些图像并没有备用文本，如果您声明的目的是可访问性，则特别糟糕。

如果您对将在描述框中输入文本的人有信心，可以使用| 拆分URL和备用文本。看起来像这样：

if ( \'primary\' == $args->theme_location && !empty( $item->description ) ) {
    // Description content:
    // http://path.to/image.jpg | This is the alternate text.
    $description = explode(\'|\', $item->description);
    $url = trim($description[0]);
    $alt = trim($description[1]);
    $old =  $args->link_after . \'</a>\';
    $new = \'<img src="\' . $url . \'" alt="\' . $alt . \'">\' . $args->link_after . \'</a>\';

    $item_output = str_replace( $old, $new, $item_output );
}
return $item_output;

那种事很容易搞砸。此外，您要求用户输入URL，这本身就很容易搞糟。但如果输入正常，它就会工作。自定义字段会更好，很抱歉，插件可能会更好。：）https://wordpress.org/plugins/menu-image/