WordPress中无需硬编码ID修改元素src属性的方法

硬编码ID确实是个头疼的问题——主题更新后自定义的ID大概率会被覆盖，下面给你两个更可靠的方案，从前端适配到后端最佳实践都有：

方案一：优化前端jQuery选择器（无需硬编码ID） #

与其自己加ID，不如利用WordPress或主题自带的默认类名来定位logo元素，这些类名主题更新时一般不会随意修改：

很多WordPress主题启用自定义logo后，会自动给logo图片添加.custom-logo类；或者logo的父容器会有.site-logo、.header-logo这类主题通用类。你可以用这些类来替换原来的ID选择器：

jQuery(document).ready(function () {
  // 定义目标页面的关键词
  const targetPages = ["livathome", "eigendom"];
  // 检查当前页面URL是否包含目标关键词
  const isTargetPage = targetPages.some(page => window.location.href.includes(page));
  
  if (isTargetPage) {
    // 用WordPress默认的.custom-logo类定位logo，根据你的主题实际类名调整
    const logoElement = jQuery(".custom-logo");
    if (logoElement.length) {
      logoElement.attr("src", "/uploads/Logo-livathome-retina.png");
      // 如果需要适配视网膜屏幕，可同步修改srcset
      // logoElement.attr("srcset", "/uploads/Logo-livathome-retina.png 2x");
    }
  }
});

小技巧 #

如果不确定主题的logo类名，右键检查页面上的logo元素，看它自带的class属性是什么，选一个最稳定的（比如包含logo、site等关键词的类）。

方案二：后端用WordPress钩子修改（推荐最佳实践） #

前端替换会有短暂的logo闪烁问题，而且依赖页面结构，后端修改才是WordPress的标准做法——直接在页面渲染时输出正确的logo，完全不受主题更新影响：

你可以在主题的functions.php文件中添加以下代码：

add_filter('wp_get_attachment_image_attributes', 'custom_livathome_logo', 10, 3);
function custom_livathome_logo($attributes, $attachment, $size) {
    // 获取当前主题的自定义logo ID
    $custom_logo_id = get_theme_mod('custom_logo');
    
    // 确认当前处理的是自定义logo图片
    if ($attachment->ID === $custom_logo_id) {
        // 获取当前页面的URL
        global $wp;
        $current_url = home_url(add_query_arg(array(), $wp->request));
        
        // 检查是否是目标页面
        if (strpos($current_url, 'livathome') !== false || strpos($current_url, 'eigendom') !== false) {
            // 获取上传目录的绝对路径，避免硬编码URL出错
            $upload_dir = wp_upload_dir();
            $new_logo_url = $upload_dir['baseurl'] . '/Logo-livathome-retina.png';
            
            // 替换logo的src和srcset属性
            $attributes['src'] = $new_logo_url;
            $attributes['srcset'] = $new_logo_url . ' 2x';
        }
    }
    
    return $attributes;
}

优势 #

• 无前端闪烁问题，页面加载直接显示目标logo
• 完全依赖WordPress的原生钩子和主题自定义logo机制，主题更新只要不破坏这个机制就不会失效
• 用wp_upload_dir()动态获取上传目录，比硬编码路径更可靠

如果你不想修改functions.php，也可以用自定义插件来添加这段代码，这样主题更新时代码也不会丢失。

内容的提问来源于stack exchange，提问作者Arne De Belser