如何将WordPress Avada主题页面标题栏背景图设为文章可点击链接？

Got it, let's break down how to add a clickable link to your Avada page title bar background image. I'll cover a few approaches, starting with the simplest built-in option (if available) and moving to custom code solutions.

1. Check Avada's Built-in Settings First #

Avada has robust customization options, so let's rule this out first:

• Edit the page where you want the clickable background image.
• Scroll down to the Avada Page Options section (it's usually below the main content editor).
• Look for the Page Title Bar tab. Expand it and check if there's a field labeled something like "Background Image Link" or "Header Background Link".
• If you find it, just paste the URL of your target post and save the page. Done!

2. Custom PHP Hook (Recommended for Long-Term) #

If Avada doesn't have that built-in option, using a hook in your child theme is the cleanest way (this avoids losing changes when Avada updates).

Step 1: Add PHP Code to Your Child Theme's functions.php #

Log into your WordPress dashboard, go to Appearance > Theme File Editor, select your Avada Child Theme, and open functions.php. Add this code:

// Add clickable overlay to Avada page title bar background
add_action('avada_before_page_title_bar', 'make_header_bg_clickable');
function make_header_bg_clickable() {
    // Replace 123 with your target post's ID
    $target_post_id = 123;
    $target_link = get_permalink($target_post_id);
    
    // Output a full-width, full-height link overlay
    echo '<a href="' . esc_url($target_link) . '" class="header-bg-clickable-overlay"></a>';
}

Step 2: Add Custom CSS to Style the Overlay #

Go to Avada > Theme Options > Custom CSS and paste this code to ensure the overlay covers the entire title bar and doesn't block other interactive elements:

.fusion-page-title-bar {
    position: relative; /* Required for the overlay to position correctly */
}

.header-bg-clickable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Make sure it's above the background but below any text/buttons */
    display: block;
}

3. JavaScript Solution (No PHP Editing Needed) #

If you're not comfortable editing PHP, you can use a JavaScript snippet to dynamically add the clickable overlay:

• Go to Avada > Theme Options > Custom JS and paste this code:

document.addEventListener('DOMContentLoaded', function() {
    // Replace with your target post's full URL
    const targetUrl = 'https://your-site.com/your-target-post-slug/';
    const titleBar = document.querySelector('.fusion-page-title-bar');
    
    if (titleBar) {
        // Create the link element
        const clickableLink = document.createElement('a');
        clickableLink.href = targetUrl;
        
        // Style it to cover the entire title bar
        clickableLink.style.position = 'absolute';
        clickableLink.style.top = '0';
        clickableLink.style.left = '0';
        clickableLink.style.width = '100%';
        clickableLink.style.height = '100%';
        clickableLink.style.zIndex = '1';
        
        // Set the title bar to relative positioning
        titleBar.style.position = 'relative';
        
        // Add the link to the title bar
        titleBar.appendChild(clickableLink);
    }
});

Quick Notes: #

• Always use a child theme when editing PHP files—this prevents your changes from being overwritten when Avada updates.
• If the .fusion-page-title-bar selector doesn't work, inspect your page with browser dev tools to find the correct class name for your title bar.
• Adjust the z-index value if the overlay blocks other elements (like breadcrumbs) or doesn't register clicks.

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