最佳答案

如何在WordPress菜单中显示图片

在WordPress中，菜单是用来导航网站的重要工具，它可以帮助访问者快速找到他们想要的页面或内容。虽然默认情况下菜单只显示文本链接，但你可以通过使用自定义菜单功能来显示菜单上的图片。

下面是在WordPress菜单中显示图片的步骤：

步骤1：创建一个新的自定义菜单

首先，登录你的WordPress后台，然后进入“外观”> “菜单”页面。如果你还没有创建任何菜单，可以点击“创建一个新菜单”并为菜单命名。

步骤2：添加菜单项

在菜单编辑器中，你可以看到页面、帖子、自定义链接和分类等选项。你可以选择要在菜单中显示的项目类型。

在这个例子中，我们假设你想在菜单中添加一个页面，并在页面上显示图片。点击“页面”选项，选择你想添加的页面，并点击“添加到菜单”按钮。

步骤3：设置菜单项标题

在菜单项的标题字段中，你可以输入你想要显示在菜单中的文本。这将是一个超链接文本，点击它可以跳转到相应的页面。

步骤4：添加自定义CSS类

接下来，你需要为菜单项添加一个自定义CSS类。这将用于为菜单项添加额外的样式或图像。

在菜单编辑器中，展开菜单项并找到“CSS类”字段。在此字段中，输入一个自定义的类名，比如“menu-item-image”。你可以根据自己的喜好来选择类名。

步骤5：添加CSS样式

现在，在WordPress管理后台的“外观”>“自定义”>“自定义CSS”中，你需要添加一些CSS样式来为菜单项添加图片。

在自定义CSS编辑器中，你可以输入以下代码：

.menu-item-image {

background-image: url('路径/至/你的图片.jpg');

background-repeat: no-repeat;

background-size: contain;

background-position: left center;

padding-left: 30px;

}

请将上述代码中的“路径/至/你的图片.jpg”替换为你想显示的图片的路径。你还可以根据需要调整其他样式属性，如填充、背景位置等。

步骤6：保存并预览菜单

在完成以上步骤后，点击保存菜单按钮，并预览你的网站。现在你会看到菜单中的项目显示为文本链接和图片。

总结

通过使用自定义菜单功能和自定义CSS类，你可以在WordPress菜单中显示图片。只需按照上述步骤创建菜单项，并添加自定义CSS样式即可实现。希望这个指南对你有帮助！

其他答案

要在WordPress菜单中显示图片，需要进行以下步骤：

1. 登录到WordPress后台管理界面。

2. 在左侧导航菜单中选择“外观”>“菜单”。

3. 在菜单编辑页面中，确保已经创建了所需菜单，并在左侧选择要添加图片的项目。

4. 在“自定义链接”中，输入您希望添加图片的菜单项的URL。

5. 单击右侧的箭头以展开更多选项。

6. 在“属性”部分，将“导航标签属性”设置为“自定义CSS类”。

7. 在“自定义CSS类”字段中，输入您想要为该菜单项应用的CSS类别名，例如“menu-item-with-image”。

8. 单击“添加至菜单”按钮以将该项目添加到菜单中。

9. 然后打开您的主题文件（通常为functions.php）并添加以下代码：

```php

function add_menu_images($items, $args) {

foreach($items as &$item) {

$classes = $item->classes;

if(in_array('menu-item-with-image', $classes)) {

$custom_image_url = 'your-custom-image-url.jpg'; // 替换为您想要使用的自定义图像的URL

$item->title .= '<img src="' . $custom_image_url . '" alt="" />';

}

}

return $items;

}

add_filter('wp_nav_menu_objects', 'add_menu_images', 10, 2);

请注意，您需要将 `'your-custom-image-url.jpg'` 替换为您自己的图像URL。

10. 保存并更新您的主题文件。

11. 刷新您的网站，您将看到菜单项旁边显示了您添加的图片。

希望这可以帮助您在WordPress菜单中显示图片！