WordPress（Nantes主题）：为桌面端与移动端配置不同图片的代码实现方案

Hey there, let's tackle that responsive image issue with your Nantes theme. Since the theme doesn't have built-in support for swapping images between desktop and mobile, we can add this functionality with a couple of straightforward code tweaks. Here are two solid methods you can use:

Method 1: Use the HTML <picture> Element (Quick Frontend Fix) #

This is the simplest way if you only need to fix this specific image on one page/post:

1. Upload both your desktop and mobile versions of the "how to use" image to your WordPress media library. Grab the direct URLs for each (right-click the image in media library > Copy link address).
2. Open the page/post where the image is inserted, switch to the Text Editor (not the Visual Editor), and find the existing <img> tag for your image.
3. Replace that tag with this code, swapping in your actual image URLs:

   <picture>
     <!-- Mobile image: displays when screen is 767px or smaller -->
     <source media="(max-width: 767px)" srcset="https://crickmeup.nl/wp-content/uploads/your-mobile-image-path.jpg">
     <!-- Desktop image: default fallback for larger screens -->
     <img src="https://crickmeup.nl/wp-content/uploads/your-desktop-image-path.jpg" alt="How to use" style="width:100%; height:auto;">
   </picture>
   

4. Adjust the max-width value if needed—match it to your theme's existing mobile breakpoint (check your theme's CSS for @media rules to confirm the right number).

Method 2: Add Custom Fields (Flexible for Multiple Pages) #

If you want to reuse this responsive image setup across multiple pages, this method lets you upload desktop/mobile images directly from the page editor:

Step 1: Add Custom Field Support to Your Theme #

First, add this code to your theme's functions.php file (use a child theme to avoid losing changes when the theme updates):

// Add custom meta box for responsive images
function crickmeup_responsive_images_meta_box() {
    add_meta_box(
        'crickmeup_responsive_imgs',
        'Responsive Image Settings',
        'crickmeup_render_responsive_imgs_fields',
        'page', // Change to 'post' if you need this for posts too
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'crickmeup_responsive_images_meta_box');

// Render the custom fields
function crickmeup_render_responsive_imgs_fields($post) {
    $desktop_img_id = get_post_meta($post->ID, '_crickmeup_desktop_img', true);
    $mobile_img_id = get_post_meta($post->ID, '_crickmeup_mobile_img', true);
    wp_nonce_field('crickmeup_save_responsive_imgs', 'crickmeup_responsive_imgs_nonce');
    ?>
    <p>
        <label for="crickmeup_desktop_img">Desktop Image:</label><br>
        <input type="hidden" id="crickmeup_desktop_img" name="crickmeup_desktop_img" value="<?php echo esc_attr($desktop_img_id); ?>">
        <?php if ($desktop_img_id) echo wp_get_attachment_image($desktop_img_id, 'medium'); ?>
        <button type="button" class="button crickmeup-img-upload" data-target="crickmeup_desktop_img">Upload/Select</button>
    </p>
    <p>
        <label for="crickmeup_mobile_img">Mobile Image:</label><br>
        <input type="hidden" id="crickmeup_mobile_img" name="crickmeup_mobile_img" value="<?php echo esc_attr($mobile_img_id); ?>">
        <?php if ($mobile_img_id) echo wp_get_attachment_image($mobile_img_id, 'medium'); ?>
        <button type="button" class="button crickmeup-img-upload" data-target="crickmeup_mobile_img">Upload/Select</button>
    </p>
    <?php
}

// Save the custom field data
function crickmeup_save_responsive_imgs($post_id) {
    if (!isset($_POST['crickmeup_responsive_imgs_nonce']) || !wp_verify_nonce($_POST['crickmeup_responsive_imgs_nonce'], 'crickmeup_save_responsive_imgs')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['crickmeup_desktop_img'])) {
        update_post_meta($post_id, '_crickmeup_desktop_img', absint($_POST['crickmeup_desktop_img']));
    }
    if (isset($_POST['crickmeup_mobile_img'])) {
        update_post_meta($post_id, '_crickmeup_mobile_img', absint($_POST['crickmeup_mobile_img']));
    }
}
add_action('save_post', 'crickmeup_save_responsive_imgs');

// Add media uploader script
function crickmeup_enqueue_img_upload_script() {
    if (is_admin()) {
        wp_enqueue_media();
        wp_add_inline_script('media-editor', '
            jQuery(document).ready(function($) {
                $(".crickmeup-img-upload").click(function(e) {
                    e.preventDefault();
                    const target = $(this).data("target");
                    const frame = wp.media({
                        title: "Select Image",
                        multiple: false,
                        library: {type: "image"},
                        button: {text: "Use This Image"}
                    });
                    frame.on("select", function() {
                        const attachment = frame.state().get("selection").first().toJSON();
                        $("#" + target).val(attachment.id);
                        $("#" + target).siblings("img").remove();
                        $("#" + target).before(`<img src="${attachment.url}" style="max-width:200px; height:auto;" />`);
                    });
                    frame.open();
                });
            });
        ');
    }
}
add_action('admin_enqueue_scripts', 'crickmeup_enqueue_img_upload_script');

Step 2: Update Your Template File #

Find the template file where you want to display the responsive image (e.g., page.php for static pages) and replace the existing image code with this:

<?php
$desktop_img_id = get_post_meta(get_the_ID(), '_crickmeup_desktop_img', true);
$mobile_img_id = get_post_meta(get_the_ID(), '_crickmeup_mobile_img', true);
if ($desktop_img_id && $mobile_img_id) :
    $desktop_url = wp_get_attachment_image_url($desktop_img_id, 'large');
    $mobile_url = wp_get_attachment_image_url($mobile_img_id, 'medium');
    $alt_text = get_post_meta($desktop_img_id, '_wp_attachment_image_alt', true);
?>
<picture>
    <source media="(max-width: 767px)" srcset="<?php echo esc_url($mobile_url); ?>">
    <img src="<?php echo esc_url($desktop_url); ?>" alt="<?php echo esc_attr($alt_text); ?>" style="width:100%; height:auto;">
</picture>
<?php endif; ?>

Step 3: Add Custom CSS (Optional) #

Go to Appearance > Customize > Additional CSS and add this to ensure images scale correctly:

picture img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    picture img {
        /* Adjust mobile styles here if needed */
        width: 100%;
    }
}

Key Notes: #

• Always back up your theme files before making changes, and use a child theme to prevent losing customizations during theme updates.
• The 767px breakpoint is standard for mobile, but you can adjust it to match your theme's existing responsive breakpoints (check your theme's CSS for @media rules).

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