如何在WordPress后台（外观>菜单）导航中添加HTML框？

Sure thing! You absolutely can add HTML content like images, videos, and custom blocks to your WordPress menus via the Appearance > Menus screen—no extra plugins needed, which is perfect for keeping your site performance-focused. Let me break this down step by step:

Step 1: Enable the Custom HTML Menu Item Option #

First, you need to make sure the Custom HTML option is visible in your menu editor:

• Head to Appearance > Menus in your WordPress dashboard.
• Click the Screen Options dropdown in the top-right corner of the page.
• Check the box labeled Custom HTML—this will add a new section to the left sidebar where you can input HTML directly.

Step 2: Insert Your HTML Content #

Once the Custom HTML section is available, you can add any valid HTML here. Here are common use cases with code examples:

Example 1: Add an Image #

<img src="https://your-site.com/wp-content/uploads/2024/05/menu-icon.jpg" alt="Menu icon for store" width="40" height="40" loading="lazy">

Pro tip: Use loading="lazy" to defer image loading until it’s visible on the screen, which boosts page speed. Always include descriptive alt text for accessibility too.

Example 2: Embed a Video (Performance-Friendly Version) #

Avoid heavy inline video embeds in menus—instead, use a thumbnail that links to the video:

<a href="https://www.youtube.com/watch?v=your-video-ID" target="_blank" rel="noopener">
  <img src="https://img.youtube.com/vi/your-video-ID/hqdefault.jpg" alt="Product demo video thumbnail" width="60" height="45" loading="lazy">
</a>

If you really need an inline small video, use the loading="lazy" attribute on the iframe to optimize:

<iframe width="100" height="80" src="https://www.youtube.com/embed/your-video-ID" title="Product demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write" allowfullscreen loading="lazy"></iframe>

Example 3: Custom HTML Block (e.g., Button with Icon) #

<div class="menu-callout">
  <span class="menu-icon">🎁</span>
  <a href="/sale" class="menu-link">Shop Sale</a>
</div>

Step 3: Position and Save Your Menu #

• Click Add to Menu to add your Custom HTML item to your menu structure.
• Drag and drop it to your desired position (you can even nest it under parent menu items if needed).
• Hit Save Menu and preview your site to see the content live.

Alternative Method: Use Custom Link (For Older WP Versions) #

If the Custom HTML option isn’t available (common in older WordPress versions), use the Custom Link workaround:

• In the Custom Link section, set the URL to # (or javascript:void(0) if you don’t want the item to link anywhere).
• Paste your HTML code directly into the Link Text box.
• Click Add to Menu, position it, and save.

Performance & Styling Tips #

• Optimize media first: Compress images to reduce file size before uploading, and use only the dimensions you need (don’t load a 1000px image for a 40px menu icon).
• Avoid bloat: Steer clear of large inline content like full-size videos in menus—they’ll slow down your site’s load time.
• Style with custom CSS: If your HTML content needs alignment or spacing tweaks, go to Appearance > Customize > Additional CSS and add rules like:

/* Align menu images with text */
.menu-item-type-custom-html img {
  margin-right: 8px;
  vertical-align: middle;
}

/* Style custom menu callout */
.menu-callout {
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

This approach is lightweight, plugin-free, and gives you full control over the content in your menus.

内容的提问来源于stack exchange，提问作者Krystian