首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让wordpress编辑器支持HTML标签"oembed“

要让WordPress编辑器支持HTML标签"oembed",可以通过以下步骤实现:

基础概念

oEmbed 是一种开放标准,允许网站嵌入来自其他网站的内容,如视频、照片、文章等。它通过一个简单的URL格式来嵌入内容,而不需要手动复制HTML代码。

相关优势

  1. 简化嵌入过程:用户只需粘贴URL,oEmbed会自动获取并嵌入内容。
  2. 提高用户体验:内容可以直接在页面上显示,无需跳转到外部网站。
  3. 跨平台兼容性:支持多种内容提供商和服务。

类型与应用场景

  • 视频:如YouTube、Vimeo。
  • 音频:如SoundCloud。
  • 新闻文章:如New York Times。
  • 社交媒体帖子:如Twitter、Instagram。

实现步骤

方法一:使用插件

  1. 安装oEmbed插件
    • 进入WordPress后台。
    • 导航到“插件” > “添加新”。
    • 搜索“oEmbed”并安装一个可靠的插件,如“WP oEmbed Addict”。
  • 激活插件
    • 安装完成后,点击“激活”。
  • 配置插件(可选):
    • 根据需要调整插件的设置,如允许的内容类型和来源。

方法二:手动添加支持

如果你不想使用插件,可以通过自定义代码来实现oEmbed支持:

  1. 编辑主题文件
    • 打开你的主题的 functions.php 文件。
  • 添加oEmbed支持
  • 添加oEmbed支持
  • 确保编辑器支持
    • 确保你的WordPress编辑器(如Gutenberg)默认支持oEmbed。大多数现代编辑器已经内置了这一功能。

遇到问题及解决方法

问题1:oEmbed内容不显示

  • 原因:可能是插件未正确安装或激活,或者内容来源未被允许。
  • 解决方法
    • 检查插件状态,确保其已激活。
    • 在插件设置中添加所需的内容来源。

问题2:嵌入内容格式不正确

  • 原因:可能是oEmbed响应格式有问题,或者主题未正确处理oEmbed内容。
  • 解决方法
    • 使用浏览器的开发者工具检查oEmbed响应是否符合标准。
    • 确保主题正确处理了oEmbed内容,可以通过查看主题的 functions.php 文件中的相关代码。

示例代码

以下是一个简单的示例,展示如何在WordPress中手动添加oEmbed支持:

代码语言:txt
复制
// 添加oEmbed支持
function add_oembed_support() {
    add_theme_support('oembed');
}
add_action('after_setup_theme', 'add_oembed_support');

// 自定义oEmbed响应处理(可选)
function custom_oembed_response($response, $url, $args) {
    // 自定义逻辑,例如过滤特定来源的内容
    if (strpos($url, 'example.com') !== false) {
        return null; // 不允许嵌入example.com的内容
    }
    return $response;
}
add_filter('oembed_response', 'custom_oembed_response', 10, 3);

通过以上步骤和代码示例,你应该能够成功让WordPress编辑器支持HTML标签"oembed"。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 如何让旧浏览器支持HTML5新标签

    HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,那么如果在高端浏览器中使用了新元素,应当如何让低端浏览器兼容呢...如何让旧浏览器支持HTML5新增标签 HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,...自己最近在写响应式布局的范例,里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签。 书写的基本的HML代码: html> html> 让旧浏览器支持HTML5新增标签-独行冰海 ...具体步骤 其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就足够了。 首先我们使用js进行标签的创建,为HTML文件创建我们需要的这几个HTML5标签。

    1.6K70

    WordPress 技巧:为评论模块增加更多 HTML 标签支持

    WordPress 原生的评论模块内容,支持使用 HTML 标签来增强评论内容的格式和效果。...但是这肯定会带来一些安全隐患,特别是评论这种随便一个浏览者都可以提交数据的地方,容易产生跨站攻击(XSS),所以 WordPress 系统严格的限制了评论模块可以使用的 HTML 标签。...本文就是来讲解如何在评论模块中增加更多 HTML 标签的支持。...WordPress 允许的标签和属性 WordPress 出于安全考虑,严格的限制了文章和评论等可编辑内容支持的 HTML 标签类型和标签的属性。...让 WordPress 评论支持更多标签的方法 思路很简单,先按照上面的格式,声明一个标签信息数组,然后 hook 勾到 WordPress 上面。

    1.4K20

    让WordPress 在RSS 中Feed 输出支持“More”标签

    如果你的主题支持“more”标签,在写文章的时候加上“more”标签,首页就可以截断显示。“more”标签截断文章的意义在于能够随心所欲,想断就断(汗,越写越废~)。...但是在RSS 中输出feed 的时候却不支持“More”标签。这么一来,要么全文输出feed,白白流失流量;要么摘要输出feed ,文章惨不忍睹。Jeff 今天决定要解决这个问题。...丢入到主题的functions.php 文件去: //在RSS 中Feed 输出支持“More”标签 devework.com function dw_readmore_rss( $content ){...在RSS Feed 中输出版权信息》的代码结合了一下,如下: //在RSS 中Feed 输出支持“More”标签 devework.com function dw_readmore_rss( $content...在RSS Feed 中输出自定义特色图像(缩略图) WordPress RSS Feed 优化/设置技巧六则

    1.3K50

    使用 WordPress 的 Easy Embeds 功能

    这样是不是很 Cool,这个就是 WordPress 的 Easy Embeds 的功能,让你直接发布一个 URL(需要单独一行,纯文本,不带链接才行),就能把这个 URL 中的视频显示到博客上,并且会根据博客的布局调整视频的大小...oEmbed 设计出来是为了嵌入媒体网站的内容的时候避免复制和粘贴 HTML 代码,它支持视频,图片,文本等等更多。 oEmbed Discovery 什么是 oEmbed discovery?...WordPress 默认是关闭直接嵌入支持 oEmbed discovery 网站的内容,这样做也是为了防止一些网站可能存在恶意代码的风险,但是如果你能保证你引用网站,那么你可以通过以下代码开启 WordPress...add_filter( 'embed_oembed_discover', '__return_true' ); 如何支持更多的网站 添加支持 oEmbed 协议的网站 只需要去调用 wp_oembed_add_provider...函数去产生 HTML。

    69120

    WordPress 4.0 发布:更好的媒体管理和插件查找

    WordPress 4.0 正式版发布,这次更新带来了更好的媒体管理,oEmbed 也变得更容易,体验更佳,插件搜索更精确,当然内容管理也变得更佳轻松。...使用 oEmbed 变得异常容易 在空行中贴入一个 YouTube 的链接,它就会神奇变成嵌入的可播放视频,同样可以试下贴入一条 Tweet,是的,oEmbed 使用变得更加可视化,后台编辑器可以直接显示你嵌入内容的真实预览...另外 WordPress 默认也尽量增加 oEmbed 支持的服务,不过大部分都是国外的网站,你可以点击这里看看目前 WordPress 支持的 oEmbed 服务列表。...专注内容编辑 现在在后台编辑器撰写内容更加顺滑和身临其境,编辑器会随着你的写作,自动扩展高度来适应你的内容,并且保证格式工具任何时候都是可用。...更精准找到你要的插件 WorPress 插件目录已经有 3 万多个免费开源的插件,为了让你更加容易和精确的找到自己想要的插件,WordPress 4.0 通过改进搜索,展示插件的一些新的指标,和更多的可视化浏览体验来帮你优化

    35830

    WordPress 文章 Embed 功能及如何屏蔽

    上一篇我们介绍了 WordPress 的 Easy Embeds 功能,它可以让你直接输入一个视频或者其他媒体网站 URL,这个 URL 里面含有的视频或者媒体就自动显示出来。...WordPress 文章 Embed 功能 除了视频和这些媒体网站之外,WordPress 还能插入自己博客或者会其他 WordPress 博客的文章链接,然后以卡片模式显示: https://blog.wpjam.com...这个功能在引用自己博客的其他文章或者其他博客文章的时候,非常方便,并且效果可视化,让读者一目了然。...Embed 效果: https://jam.wpweixin.com/project/wpjam-basic/embed/ 如果博客文章嵌入没有效果,查看一下后台「WPJAM」子菜单「优化设置」中「增强优化」标签页中...'); remove_action('wp_head', 'wp_oembed_add_host_js');

    56840

    禁用 WordPress Auto Embeds 功能,加快页面解析速度

    WordPress 的 Easy Embeds 功能 这个就是 WordPress 的 Easy Embeds 的功能,可以让我们直接发布一个 URL(需要单独一行,纯文本,不带链接才行),就能把这个...在文章中直接输入这个 TED 地址: https://www.ted.com/talks/matt_mullenweg_why_working_from_home_is_good_for_business WordPress...就会自动把这个 URL 转化成 TED 对应页面的视频: 如果你是用 WordPress 古腾堡编辑器,那么在古腾堡编辑器可以看到目前支持的自动嵌入服务: 点击上图的按钮,点击对应的按钮: 输入链接...,然后点击潜入,也可以一键嵌入: 禁用 WordPress Auto Embeds 功能 从腾堡编辑器默认的潜入按钮, WordPress Easy Embeds 支持的自动嵌入网站大部分都是国外的网站...,对于我们用处也不大,如果我们想禁用 Auto Embeds (oEmbed) 功能怎么办呢?

    1.2K20

    程序员最喜欢用的在线代码编译器,什么?你竟然不知道!可以在网页敲代码,运行调试!

    2.网址 https://www.tutorialspoint.com/codingground.htm 它其实并不单单是一个在线编译器,上面还包括了在线终端,在线编辑器,在线 IDE 等,它的代码块也可以内嵌到网页中...而且上面集成了 CentOS 的在线终端,可以很方便的让你使用 Linux 环境。在这里练习 Linux 下的各种命令、各种操作,还是极好的。 ? 3....支持创建三个免费模板, 有很优秀的外嵌体验。在 WordPress 或 Reddit 等支持 oEmbed 的平台上,只要简单地把链接贴入编辑框,发布后会自动转为嵌入作品。 ?...6.网址:http://jsrun.net/ 支持手机端的在线JS编辑器, HTML/CSS/Javascript在线代码运行工具,js代码在线测试调试。 更新:已经失效,请使用他的哥哥?...*7 7.网址:https://jsfiddle.net/ 可在线编译运行 HTML、CSS、JavaScript代码片段。

    2.7K30

    视频播放插件Typembed

    插件简介 Typembed 是为 Typecho 添加对在线视频支持的一款插件(支持手机、平板等设备HTML5播放)。...目前支持优酷、搜狐视频、土豆、56、腾讯视频、新浪视频、酷6、华数、乐视 等网站。 与 WordPress 支持的 oembed 可以无缝切换,换博客系统也不用担心内容不一致。...你可以直接粘贴视频播放页完整的URL到编辑器(单独一行),就可以加载视频播放器(不能在编辑器里实时渲染,文章发布之后可以看到效果)。 插件安装 下载 Typembed 文件....使用方法 你可以直接粘贴视频播放页完整的URL到编辑器(单独一行),就可以加载视频播放器(不能在编辑器里实时渲染,文章发布之后可以看到效果)。.../cover/t/tyeqdw6rof7t5ow/p0015kjlai9.html http://v.qq.com/cover/k/kl2zy755pnehxi3.html?

    1.1K30

    Meta Box:一个被名字耽误的强大的WordPress自定义字段插件

    meta标签是HTML文档的补充(加强) meta-programming(元编程)在做的事是提升编程语言的能力 统计学中的meta-analysis ,对数据事后的量化分析 作者:幽灵代笔 来源:...根据官网的介绍,meta box是WordPress后台编辑界面上的一些功能框,比如编辑器、发布按钮、目录/Tag选择框等等都叫做meta box。...支持的字段类型和扩展插件 Meta Box支持多达46中字段类型,应有尽有 ,基本可以满足所有场景的需求,完整列表如下: Autocomplete Background Button Button Group...Input File Upload Heading Hidden Image Image Advanced Image Select Image Upload Key Value Map Number oEmbed...HTML字段可以使用HTML代码,所以开发者可以用它来加入一些带有格式的引导介绍。或者在开发插件时可以引入 MetaBox 用来显示一些通知。

    4.2K20
    领券