{"id":1947,"date":"2025-06-10T18:10:28","date_gmt":"2025-06-10T10:10:28","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/1947.html"},"modified":"2025-06-10T18:10:28","modified_gmt":"2025-06-10T10:10:28","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8wordpress%e4%b8%ad%e5%8a%a8%e6%80%81%e6%94%b9%e5%8f%98oembed%e7%9a%84%e5%ae%bd%e5%ba%a6%e5%92%8c%e9%ab%98%e5%ba%a6","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/1947.html","title":{"rendered":"\u5982\u4f55\u5728WordPress\u4e2d\u52a8\u6001\u6539\u53d8oEmbed\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6"},"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中，你可以通过修改插件或自定义代码来动态调整oEmbed的宽度和高度。以下是具体步骤：<\/p>\n

    \n
  1. \n

    找到你的oEmbed插件：通常情况下，oEmbed插件会安装在\/wp-content\/plugins\/oembed<\/code>目录下。<\/p>\n<\/li>\n

  2. \n

    修改oEmbed相关文件：<\/p>\n

      \n
    • 在oEmbed插件的主文件（通常是oembed.php<\/code>）中找到与宽度和高度相关的配置。<\/li>\n
    • 例如，在以下代码片段中，你可以看到设置宽度为600px，高度为350px：<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      <?php echo wp_oembed_get($url, array('width' => '600', 'height' => '350')); ?><\/code><\/pre>\n
        \n
      1. 自定义代码实现：\n
          \n
        • 如果你想要更灵活地控制宽度和高度，可以编写自定义函数来获取oEmbed数据并根据需要调整宽度和高度。<\/li>\n
        • 示例代码如下：<\/li>\n<\/ul><\/li>\n<\/ol>\n
          function custom_oembed_width_height($url) {\n    $oembed_data = wp_oembed_get($url);\n    if ($oembed_data && isset($oembed_data['width']) && isset($oembed_data['height'])) {\n        return sprintf('<img src=\"%s\" width=\"%d\" height=\"%d\">', esc_url($oembed_data['url']), (int)$oembed_data['width'], (int)$oembed_data['height']);\n    } else {\n        return '<p>Error loading oEmbed data.<\/p>';\n    }\n}\nadd_filter('the_content', 'custom_oembed_width_height');<\/code><\/pre>\n
            \n
          1. 使用自定义函数：\n
              \n
            • 将上述代码添加到你的主题的functions.php文件中。<\/li>\n
            • 现在，当你使用<figure><\/code>标签时，oEmbed将自动调整其宽度和高度以匹配指定的尺寸。<\/li>\n<\/ul><\/li>\n<\/ol>\n
              请注意，这只是一个基本示例。实际应用中可能需要根据具体需求进行更多的定制化处理。<\/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中，使用oEmbed插件来实现动态调整宽度和高度的功能是非常简单的。以下是如何通过设置嵌入代码的方式来实现这一目标：<\/p>\n
              步骤1：添加oEmbed代码<\/h3>\n
              首先，在你的主题或模板文件中插入oEmbed代码。这通常涉及到一个<iframe><\/code>标签，如下所示：<\/p>\n
              <!-- 位于页面中的任何位置 -->\n<iframe src=\"https:\/\/example.com\/embed\" width=\"500\" height=\"300\"><\/iframe><\/code><\/pre>\n
              步骤2：编辑嵌入代码<\/h3>\n
              接下来，你需要在oEmbed插件中修改嵌入代码以适应需要动态调整大小的需求。要达到此目的，可以考虑使用自定义HTML脚本来处理嵌入的图片。<\/p>\n
              步骤3：编写自定义HTML脚本<\/h3>\n
              示例代码1: 使用JavaScript<\/h4>\n
              \/\/ 获取到oEmbed iframe元素\nconst oembedIframe = document.querySelector('iframe#oembed');\n\n\/\/ 设置宽度和高度属性\noembedIframe.style.width = '500px';\noembedIframe.style.height = '300px';\n\n\/\/ 添加事件监听器以自动更新宽度和高度\noembedIframe.addEventListener('load', function() {\n    const oembedElement = this;\n    const width = window.getComputedStyle(oembedElement).width;\n    const height = window.getComputedStyle(oembedElement).height;\n\n    if (width && height) {\n        \/\/ 将宽度和高度转换为像素\n        const pixelWidth = parseInt(width.replace(\"px\", \"\"));\n        const pixelHeight = parseInt(height.replace(\"px\", \"\"));\n\n        \/\/ 调整iframe元素的宽度和高度\n        oembedIframe.style.width = `${pixelWidth}px`;\n        oembedIframe.style.height = `${pixelHeight}px`;\n    }\n});<\/code><\/pre>\n
              在这个例子中，我们首先获取到oEmbed iframe元素，然后设置其宽度和高度属性。接着，我们添加了一个事件监听器，每当iframe加载完成后，就调用一个函数来检查当前宽度和高度是否可用，并根据这些值调整iframe的尺寸。<\/p>\n
              示例代码2: 使用jQuery<\/h4>\n
              $(document).ready(function(){\n    let oembedIframe = $('iframe#oembed');\n\n    oembedIframe.css({\n        'width': '500',\n        'height': '300'\n    });\n\n    oembedIframe.on('load', function(){\n        var width = $(this).css('width');\n        var height = $(this).css('height');\n\n        if (width && height){\n            width = parseInt(width, 10);\n            height = parseInt(height, 10);\n\n            $(this).css({\n                'width': `${width}px`,\n                'height': `${height}px`\n            });\n        }\n    });\n});<\/code><\/pre>\n
              这个例子与上述JavaScript版本类似，只是采用了jQuery的方式。同样地，我们先获取到oEmbed iframe元素，然后设置其宽度和高度属性。然后，我们在iframe上添加了“on”事件监听器，当iframe加载完成后，再次调用一个函数来检查宽度和高度是否可用，并根据这些值调整iframe的尺寸。<\/p>\n
              注意事项<\/h3>\n
                \n
              • 确保在插入oEmbed代码之前正确安装并启用oEmbed插件。<\/li>\n
              • 在实际应用中，确保使用安全的HTTPS连接，并注意避免包含敏感信息的链接。<\/li>\n<\/ul>\n
                通过以上步骤，你可以轻松地在WordPress中动态调整oEmbed的宽度和高度。这样做的目的是为了更好地适应不同屏幕尺寸和设备需求，提供更好的用户体验。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                Bug编译狮 在WordPress中，你可以通过修改插件或自定&#2..<\/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":[52,53],"tuisongtax":[],"class_list":["post-1947","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-ztjc","tag-ztmbpzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1947","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=1947"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1947\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=1947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=1947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=1947"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=1947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}