{"id":2493,"date":"2025-06-11T03:05:20","date_gmt":"2025-06-10T19:05:20","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2493.html"},"modified":"2025-06-11T03:05:20","modified_gmt":"2025-06-10T19:05:20","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%98%be%e7%a4%ba%e5%8e%9f%e5%b0%ba%e5%af%b8%e5%9b%be%e7%89%87%ef%bc%884-%e7%a7%8d%e7%ae%80%e5%8d%95%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2493.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u663e\u793a\u539f\u5c3a\u5bf8\u56fe\u7247\uff084 \u79cd\u7b80\u5355\u65b9\u6cd5\uff09"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

在WordPress中，我们经常需要处理来自其他网站或社交媒体平台的图片，这些图片可能没有经过优化或者被压缩，导致加载速度慢，影响用户体验。为了提高图片的加载速度和质量，我们可以选择原尺寸的图片。下面是四种在WordPress中显示原尺寸图片的方法：<\/p>\n

方法一：使用 wp_get_attachment_image_src()<\/code> 函数<\/h3>\n

这个函数可以帮助我们获取指定ID的图片的URL。<\/p>\n

示例代码：<\/strong><\/p>\n

$image_id = 123; \/\/ 替换为你要显示的图片的ID\n$src = wp_get_attachment_image_src($image_id, 'full'); \/\/ 获取原尺寸图片的URL\necho '<img src=\"' . $src[0] . '\" alt=\"Original Image\">'; \/\/ 显示图片<\/code><\/pre>\n
效果：<\/strong><\/p>\n
    \n
  • 这个方法会显示原始大小的图片。<\/li>\n
  • 如果你希望设置不同的尺寸，可以修改'full'<\/code>为你想要的尺寸，例如 'thumbnail'<\/code>, 'medium'<\/code> 等。<\/li>\n<\/ul>\n
    方法二：使用 CSS 跨域资源共享 (CORS)<\/h3>\n
    通过设置正确的HTTP头，你可以确保跨域请求能够正常访问。<\/p>\n
    示例代码：<\/strong><\/p>\n
    <img src=\"https:\/\/example.com\/image.jpg\" crossorigin><\/code><\/pre>\n
    注意：这里的crossorigin<\/code>属性不是标准的HTML5属性，但在某些情况下它能帮助解决一些浏览器的问题。<\/p>\n
    方法三：使用 WordPress 的插件<\/h3>\n
    有许多插件可以帮助你在WordPress中显示原尺寸的图片，比如“Retina Images”、“Optimize Images”等。<\/p>\n
    安装并激活插件：“Optimize Images”<\/strong><\/p>\n
    然后，在插件设置中，你可以根据需要调整图片的缩放比例和其他参数。<\/p>\n
    方法四：自定义模板文件<\/h3>\n
    如果你有特定的需求，如使用PHP来动态生成图片链接，你可以创建一个新的模板文件（例如single.php<\/code>），并在其中添加相应的代码。<\/p>\n
    示例代码：<\/strong><\/p>\n
    <?php if ( has_post_thumbnail() ) : ?>\n    <figure class=\"post-image\">\n        <?php the_post_thumbnail(); ?>\n    <\/figure>\n<?php endif; ?><\/code><\/pre>\n
    效果：<\/strong><\/p>\n
      \n
    • 这种方法允许你更灵活地控制图片的显示方式和位置。<\/li>\n<\/ul>\n
      以上就是几种常见的在WordPress中显示原尺寸图片的方法。每种方法都有其适用场景和限制，请根据具体需求选择合适的方式。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
      \r\n
      \r\n
      \r\n
      \r\n
      \r\n
      \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
      黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
      \r\n
      \r\n
      如何在 WordPress 中显示原尺寸图片<\/h3>\n
      1. 使用 get_attachment()<\/code> 函数<\/h4>\n
      get_attachment()<\/code> 是 WordPress 提供的一个函数，用于从数据库中获取指定的图片。<\/p>\n
      <?php\n$attachment_id = get_post_thumbnail_id( $post->ID ); \/\/ 获取当前文章的缩略图 ID\n$image_url = wp_get_attachment_image_src( $attachment_id, 'medium' ); \/\/ 获取图片的 URL\n?><\/code><\/pre>\n
      示例代码：<\/h4>\n
      <img src=\"<?php echo esc_url($image_url[0]); ?>\" alt=\"Your Image Description\"><\/code><\/pre>\n
        \n
      • HTML<\/strong>：这里使用了 <img><\/code> 标签来展示图片。<\/li>\n
      • CSS<\/strong>：确保 CSS 文件已正确设置图片样式和链接属性。<\/li>\n<\/ul>\n
        2. 使用 wp_get_attachment_url()<\/code> 函数<\/h4>\n
        wp_get_attachment_url()<\/code> 是一个更高级的方法，它返回原始图片的 URL。<\/p>\n
        <?php\n$attachment_id = get_post_thumbnail_id( $post->ID ); \/\/ 获取当前文章的缩略图 ID\n$image_url = wp_get_attachment_url( $attachment_id );\n?><\/code><\/pre>\n
        示例代码：<\/h4>\n
        <a href=\"<?php echo esc_url($image_url); ?>\">\n    <img src=\"<?php echo esc_url($image_url); ?>\" alt=\"Your Image Description\">\n<\/a><\/code><\/pre>\n
          \n
        • HTML<\/strong>：通过点击链接，用户可以访问到图片。<\/li>\n<\/ul>\n
          3. 使用 WordPress 自带的 <img><\/code> 标签<\/h4>\n
          虽然这种方法相对复杂，但仍然推荐使用 <img><\/code> 标签来控制图片的大小。<\/p>\n
          <img src=\"<?php the_post_thumbnail_url('medium'); ?>\" alt=\"Your Image Description\"><\/code><\/pre>\n
          示例代码：<\/h4>\n
          <img src=\"https:\/\/example.com\/path\/to\/image.jpg\" alt=\"Your Image Description\"><\/code><\/pre>\n
            \n
          • HTML<\/strong>：此方法适用于需要自定义图片尺寸的情况。<\/li>\n<\/ul>\n
            4. 使用 wp_get_attachment_url()<\/code> 和 <a><\/code> 标签<\/h4>\n
            结合上述方法的优点，我们可以创建一个简洁、直观的解决方案。<\/p>\n
            <a href=\"<?php echo esc_url(get_the_permalink()); ?>\" target=\"_blank\">\n    <img src=\"<?php the_post_thumbnail_url(); ?>\" alt=\"Your Image Description\">\n<\/a><\/code><\/pre>\n
            示例代码：<\/h4>\n
            <a href=\"http:\/\/example.com\/path-to-image.jpg\" target=\"_blank\">\n    <img src=\"https:\/\/example.com\/path\/to\/image.jpg\" alt=\"Your Image Description\">\n<\/a><\/code><\/pre>\n
              \n
            • HTML<\/strong>：通过点击链接，用户可以直接访问图片。<\/li>\n<\/ul>\n
              注意事项：<\/h3>\n
                \n
              • 确保图片文件位于 WordPress 主题或插件目录下的相应位置。<\/li>\n
              • 在某些情况下，可能需要使用 the_content()<\/code> 或 the_excerpt()<\/code> 函数代替 the_title()<\/code> 或 the_slug()<\/code> 来获取标题或路径信息。<\/li>\n<\/ul>\n
                通过以上方法，你可以轻松地在 WordPress 文档页面或其他地方显示原尺寸图片。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                Bug编译狮 在WordPress中，我们经常需要处理来自其他&#3..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2493","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2493"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2493\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2493"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}