如何将WordPress主题顶部菜单SVG搜索图标替换为自定义PNG并修改功能

Hey David, let's break down how to fix this step by step—since you're dealing with the Entrada theme, we'll focus on safe, maintainable changes (always use a child theme to avoid losing edits when the theme updates!).

Step 1: Locate the Search Icon's HTML & CSS Selector #

First, right-click the search icon in Chrome and select "Inspect" to pull up dev tools. You'll see something like this (varies slightly by theme version):

<a href="#" class="search-trigger" aria-label="Search">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
</a>

Note the class name (here it's .search-trigger)—this is what we'll target in CSS and template edits.

Step 2: Replace the SVG with Your Custom "Book Now" PNG #

You have two options here, depending on how comfortable you are with editing template files:

Option A: CSS-Only Replacement (Quickest) #

If the SVG is embedded directly in the HTML, hide it and set your PNG as the background of the link. Add this to your child theme's style.css or the WordPress Customizer's Additional CSS panel:

/* Hide the original SVG icon */
.search-trigger svg {
  display: none !important;
}

/* Add your Book Now PNG as the background */
.search-trigger {
  background-image: url('https://your-site.com/path/to/book-now.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Adjust width/height to match your PNG's dimensions */
  width: 50px;
  height: 50px;
}

Make sure to replace the URL with your actual PNG file path (upload it via Media Library first to get the correct URL).

Option B: Edit the Template File (Cleaner) #

For a more permanent fix, find where the SVG is rendered in the theme files:

1. Using FTP or WP Theme Editor, navigate to your parent Entrada theme's template-parts/header folder (or similar—look for files with "header" or "search" in the name).
2. Copy the file containing the search icon HTML to your child theme (keep the same folder structure!).
3. Replace the <svg>...</svg> code with your image tag:

<img src="https://your-site.com/path/to/book-now.png" alt="Book Now" class="book-now-icon">

You can add custom CSS to style the .book-now-icon class if needed.

Step 3: Change the Click Action to Redirect to Shop Page #

Right now, the link uses href="#" and has a JavaScript click event to open the search form. We need to override this:

Step 3.1: Update the Link URL #

In the same template file you found earlier, change the <a> tag's href attribute to your shop page URL. For dynamic linking (best practice), use WordPress's built-in functions:

<a href="<?php echo get_permalink( get_page_by_path( 'shop' ) ); ?>" class="search-trigger" aria-label="Book Now">
  <!-- Your PNG image tag here -->
</a>

Replace 'shop' with your shop page's slug if it's different.

Step 3.2: Disable the Search Form Trigger #

The theme likely has JavaScript that prevents the default link action and opens the search form. To fix this:

1. Find the theme's main JS file (usually assets/js/theme.js or similar in the parent theme).
2. Search for code targeting .search-trigger—it might look like this:

$('.search-trigger').on('click', function(e) {
  e.preventDefault();
  $('#search-form').toggleClass('active');
});

3. Either delete this block, or comment it out (wrap with /* */). If you're using a child theme, you can dequeue the parent JS file and enqueue a modified version in your child theme's functions.php instead of editing the parent file directly.

Final Checks #

• Clear your browser cache to see the changes take effect.
• Test the link to make sure it redirects to your shop page instead of opening the search form.
• Verify the PNG displays correctly on mobile and desktop.

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