如何在WordPress中实现JPG图片点击直接下载而非浏览器预览

嘿，我来帮你搞定WordPress里JPG图片直接下载的问题，亲测有效的两种方法都给你整理好了👇

如果你只是想让某几张图片实现点击直接下载，不用改代码就能搞定：

• 打开WordPress后台的文章/页面编辑器，找到要设置的图片
• 选中图片后，点击编辑器里的「链接设置」（古腾堡编辑器在右侧面板，经典编辑器在弹出的图片设置窗口里）
• 把图片的链接地址设为它的原始URL（就是你现在点击会预览的那个地址，比如http://buhehe.de/wp-content/uploads/2018/02/Reisepass-beantragen.jpg）
• 敲黑板！切换到代码编辑模式，找到包裹图片的<a>标签，手动加上download属性，最终代码长这样：

  <a href="http://buhehe.de/wp-content/uploads/2018/02/Reisepass-beantragen.jpg" download>
    <img src="http://buhehe.de/wp-content/uploads/2018/02/Reisepass-beantragen.jpg" alt="Reisepass beantragen" />
  </a>
  

  保存后再点击图片，就会直接弹出下载框啦～

如果想让网站所有JPG图片都默认点击下载，不用一个个改，直接给主题加段函数就行：

• 登录WordPress后台，进入「外观」→「主题文件编辑器」，找到functions.php文件
• 在文件末尾（注意不要覆盖原有代码）粘贴这段代码：

  function force_download_images() {
      global $post;
      if (is_singular()) {
          $content = $post->post_content;
          // 自动给所有JPG/PNG/GIF图片链接加上download属性
          $content = preg_replace('/<a(.*?)href="(.*?)\.(jpg|jpeg|png|gif)"(.*?)>/i', '<a$1href="$2.$3" download$4>', $content);
          $post->post_content = $content;
      }
      return $post;
  }
  add_action('the_post', 'force_download_images');
  

  保存后，全站文章/页面里的图片链接都会自动带上download属性，点击直接下载。

小提醒 #

• 要是你的图片存在CDN或者其他外部域名上，部分浏览器可能会限制跨域的download属性，这时候需要在服务器端配置CORS规则
• 修改functions.php前记得备份文件，万一写错代码也能快速恢复
• 经典编辑器的操作逻辑和古腾堡类似，都是在HTML模式里给<a>标签加download属性

内容的提问来源于stack exchange，提问作者ნიკა ხაჩიძე