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

如何在WordPress中通过一个简单的自定义古腾堡块来获取唯一的id?

在WordPress中,可以通过一个简单的自定义古腾堡块来获取唯一的id。以下是实现该功能的步骤:

  1. 创建一个自定义古腾堡块(Custom Gutenberg Block):首先,在你的主题或插件中创建一个自定义古腾堡块。你可以使用WordPress提供的Block API来创建一个新的块。
  2. 添加一个唯一的id属性:在自定义古腾堡块的代码中,为块添加一个唯一的id属性。你可以使用WordPress提供的函数wp_generate_uuid4()来生成一个唯一的id。
  3. 在前端显示id:在古腾堡块的渲染函数中,将生成的唯一id作为HTML属性添加到块的输出中。例如,你可以将id添加到一个<div>元素的data-id属性中。

以下是一个示例代码,演示如何在WordPress中通过一个简单的自定义古腾堡块来获取唯一的id:

代码语言:txt
复制
// 自定义古腾堡块注册函数
function register_custom_block() {
    // 注册古腾堡块
    register_block_type('your-namespace/your-block', array(
        'render_callback' => 'render_custom_block',
    ));
}

// 古腾堡块渲染函数
function render_custom_block($attributes) {
    // 生成唯一id
    $unique_id = wp_generate_uuid4();

    // 输出古腾堡块
    return '<div class="custom-block" data-id="' . $unique_id . '">This is a custom block.</div>';
}

// 添加古腾堡块注册函数到init钩子
add_action('init', 'register_custom_block');

在上述示例中,我们创建了一个名为your-namespace/your-block的自定义古腾堡块,并在渲染函数中生成了一个唯一的id。这个id被添加到一个<div>元素的data-id属性中。

通过以上步骤,你可以在WordPress中通过一个简单的自定义古腾堡块来获取唯一的id。这个功能可以用于标识和操作特定的古腾堡块,例如在JavaScript中根据id执行特定的操作。

请注意,以上示例中的代码仅为演示目的,实际使用时需要根据你的具体需求进行适当的修改和扩展。

腾讯云相关产品和产品介绍链接地址:

请注意,以上提到的腾讯云产品仅为示例,实际使用时应根据具体需求选择适合的产品。

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

相关·内容

WordPress 5.7 发布,更好用编辑器

WordPress 5.7 发布,新版本改善了编辑器编辑体验,并使用户能够轻松创建更多高级,并为编辑器添加更强大自定义项,还有 HTTPS 切换等其他功能改进​。...编辑器更易使用 增强字体调整:编辑器很多地方都可以调整字体,比如列表,代码等,并且无需切换界面。 增强可重用,更加稳定,更好用,并且支持自动保存。...支持拖放:支持将组从插入器中直接拖放到编辑器。 更多 不懂代码也可以实现功能,做更多事情。 封面:可以制作一个填充整个窗口封面。...更简单默认调色板 全新简化调色板参照 WCAG 2.0 AA 推荐白色或黑色对比度将 WordPress 源代码所有颜色分解为 7 种核心颜色和 56 种阴影。...一键切换 HTTP 到 HTTPS 从现在开始,将站点从 HTTP 切换到 HTTPS,只需一次点击,WordPress 会自动更新数据库 URL,无需自己去做更多处理了。

73420
  • WordPress新添加一个编辑器

    WordPress添加一个额外编辑器(Gutenberg Editor)实例可以通过自定义代码实现。以下是一个基本步骤指南,帮助你在WordPress添加第二个编辑器实例。...步骤 1: 创建一个自定义插件首先,创建一个自定义插件包含你代码。你可以在 wp-content/plugins 目录下创建一个文件夹,并在其中创建一个PHP文件。...JavaScript文件在你插件文件夹创建一个 js 目录,并在其中创建一个名为 custom-gutenberg-editor.js 文件。...; });})(jQuery);步骤 3: 添加自定义编辑器容器在你主题文件(例如 functions.php 或 header.php),添加一个容器承载第二个编辑器实例。步骤 4: 激活插件在WordPress后台,导航到“插件”页面,找到你创建自定义插件并激活它。步骤 5: 测试访问你网站,并检查页面底部是否出现了第二个编辑器实例。

    7010

    屏蔽 WordPress 编辑器,换回经典编辑器

    WordPress 5.0 带来编辑器(英文名是 Gutenberg)非常酷,也叫做编辑器(block editor),它把内容当作一来处理,每一有自己设置,使用起来非常清晰好用:...编辑器使用不习惯 但是习惯是一件很难改变事情,很多人习惯了经典编辑器,对于编辑器总是用不习惯。...我为了习惯编辑模式,我把很多针对文章操作都移到了文章列表,比如在后台文章列表设置文章特色图片,设置文章摘要,一键上传外部图片等,让编辑器专注于文章内容管理。...如何屏蔽编辑器 为了兼容,WordPress 官方也提供了 Classic Editor 插件,可以通过各种方式在编辑器和经典编辑器切换使用: 管理员可以设置默认编辑器。...搞得挺复杂,如果你不想额外安装一个插件,其实只需一行代码就可以屏蔽编辑器: add_filter('use_block_editor_for_post_type', '__return_false

    41520

    WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

    整个插件自己写代码只有不到 30 行,就是利用 WordPress wp_enqueue_scripts 接口让页面加载 prism 样式和脚本代码。...然后插件也兼容 WPJAM「静态文件」插件,不单独加载 prism 样式和脚本代码,把 prism 样式和脚本代码合并到整个站点唯一样式和脚本文件: 所以这个从另外一个侧面说明 WPJAM 出品插件...非常简单,首先根据你使用不同编辑器略用不同。...如果你使用编辑器的话,先点击选择创建一个代码: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外CSS类输入:language-php,如果你代码是 JS 则,输入 language-javascript...定义就是语言,如何设置,和上面设置方式是一样,自己灵活处理一下,个人感觉还是编辑器方便一点。

    1.8K30

    WordPress 推出了全新区块样板构建器

    不过你多喜欢和怀念经典编辑器,WordPress 已经在编辑器路上狂奔了,为了让大家更加方便使用编辑器,现在 WordPress.org 推出了全新区块样板构建器,这个距离 WordPress.org...只要你拥有一个 WordPress.org 账号,就可以通过「区块样板构建器」构建、编辑和提交自己制作区块样板到 WordPress.org 区块样板目录了,其他人可以复制到自己 WordPress...,效率更好,可以节省大量时间,最后还有超强自由度,比如一些非常复杂布局,也可以通过几次简单点击搞定,和平时文档复制粘粘操作一样简单。...简单说,区块样板创建器无需你懂代码,开玩笑说,你有很好审美和设计能力,可以简单通过拖拽就能做出很好 WordPress 区块样板,然后分享给全世界 WordPress 用户使用,从这一点说无疑可以让更多人参与...最后需要简单说一下,WordPress 区块样板,基本都可以运行在所有的 WordPress 主题,但是在一些针对堡主题,可能运行更好,比如你可以尝试一下默认 2022 主题测试这些区块样板

    38940

    WordPress 6.2 发布,全面提升站点编辑体验

    在编辑器直接使用 Openverse 资源 Openverse 已经有超过了 7 亿免费和公开许可图片和音频,现在通过区块插入器直接集成到 WordPress 编辑器。 ...无干扰模式专注写作 编辑器也支持无干扰写作模式了,可以一键隐藏侧边栏,所有面板和控件等,专注自己创作。...新样式手册 通过样式手册可以在在站点编辑器一个地方一眼就看到站点每个区块外观。...自定义 CSS 用户可以通过设计工具和自定义 CSS 以自己希望方式增强站点外观,这不仅达到了更高级别的样式控制,也能实现在站点设计实现最大创造力和艺术性。...简单WordPress 6.2 主要更新就是编辑器更新,没有类似 WordPress 6.1 无需第三方插件就能实现首页 0 SQL 这个大更新。

    1.1K40

    WordPress 5.6 发布,新 2021 主题和编辑器大更新

    WordPress 5.6 发布,这个版本发布了新默认主题 2021,然后给增加大量模块,让你更加方便插入图片,声音和视频。...编辑器更新 更灵活布局:编辑器更加方便设置布局,支持单栏或者多栏,支持固定宽度,全屏头部,背景图支持渐变。...更多模式:在某些主题中,预配置模式让在站点上创建页面变得轻而易举,所以更多模式让你创建页面的时候变得更加方便快捷。...2021主题 2021 是一个完全为全新编辑器创建主题,并且带有自己专属快模式,花几秒钟试试它不同布局,就可以让你文章脱颖而出。...虽然 WordPress Core 自动更新功能已在 WordPress 存在多年,但是 WP 5.6 首次引入了新用户界面,以使用户对自动更新操作更加容易。

    85240

    屏蔽 WordPress 小工具区块编辑器模式,切换回经典模式

    通过 WPJAM Basic 屏蔽 WordPress 编辑器,换回经典编辑器之后,WordPress 小工具还是区块编辑模式,本来我想在屏蔽编辑器时候,同时也屏蔽小工具区块编辑器模式...不过提供一下如何禁用 WordPress 小工具区块编辑器模式,切换回经典模式方法,一共有三种: 一、使用 remove_theme_support 函数 主题可以通过调用 remove_theme_support...( 'widgets-block-editor' ) 屏蔽小工具区块编辑器模式,在主题 functions.php 文件添加如下代码: add_action('after_setup_theme...Widgets 插件屏蔽小工具区块编辑器模式,安装并激活之后即可屏蔽。...比如可以通过以下代码屏蔽小工具区块编辑器模式: add_filter('use_widgets_block_editor', '__return_false'); 使用过滤器接口,就有更多可定制性,可以加入一些自定义功能

    28710

    WordPress 5.5 发布,关键词:速度,搜索,安全

    WordPress 5.5 发布,这个版本在「速度」、「搜索」、「安全」这三个方面加强了网站能力: 速度 图片给网站增添了很多光彩,同时也让网站变得很慢,WordPress 5.5 使用了传说中“懒加载...搜索 WordPress 5.5 默认提供了一个 XML sitemap 文件,具体怎么工作,还没仔细了解,我之后会把 WPJAM Basic 简单SEO」扩展基于该功能,进行升级。...通过上传 ZIP 文件进行更新:如果需要手动更新插件和主题,现在只需要上传一个 ZIP 压缩文件即可。 编辑器 模式:通过使用文本和媒体组合创建复杂精美的布局。...新目录:在后台编辑器就可以选择各种好用好玩”。 内联图像编辑:使用「图像」就能直接裁剪,旋转和缩放照片。...WordPress 已经换成了 allowed_options,WPJAM Basic 最新版已经做了兼容了,接下来,我将针对 WordPress 5.5 最新功能,进行优化。

    42130

    WPJAM Basic 5.9 详细更新说明

    昨天 WordPress 5.9 发布,我第一时间就升级了测试站点到 WordPress 5.9,经过一天观察,没有发现什么问题。 因为 WordPress 5.9 更新主要还是围绕编辑器。...兼容文章列表页操作 就像上面说 WordPress 现在更新方向就是编辑器,因为编辑器编辑器特性,需要大界面,甚至全凭编辑,所以尽量不要去在文章编辑界面添加设置框。...所以就把很多操作都移到了 WordPress 后台文章列表页面,WPJAM Basic 有一子菜单是关于文章列表: 所以我继续优化后台文章列表页面的操作交互,比如在把鼠标移到缩略图上面,会在右上角显示一个编辑图标...新增登录界面去掉语言切换器功能 WordPress 5.9 在登录界面增加了一个语言切换起功能,用户可以通过它快速切换登录界面的语言: 如果你不是运行国际化博客的话,这个功能基本无用,我们可以屏蔽它...优化「文章目录」扩展,首先使用子标题 ID 来作为锚点,子标题没有 ID,则自动添加 ID,应该会兼容更多情况,然后支持独立设置,开启之后,可以在文章列表页设置: 「简单 SEO」 扩展支持「确保唯一设置

    7.2K30

    WordPress 禁用 Rest API 默认路由兼容 Gutenberg 编辑器

    禁用 WordPress Rest API 默认路由后有利于 WordPress 站点安全及避免暴露网站所有内容,所有子凡所有 WordPress 网站都是直接禁用了 WordPress 默认路由,...但是由于 WordPress 默认使用编辑器( Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。...故此子凡就来分享一个兼容 WordPress 编辑器情况下,对外也能够禁用 WordPress rest api,具体代码如下: add_action('plugins_loaded',function...(){//兼容 编辑器 global $post; if( !...需要说明是,以上代码主要实现原理就是判断用户是否登录以及是都有编辑权限,只有当用户登录,且拥有文章编辑权限用户才不会禁用默认路由,以达到兼容编辑器目的,当然如果你像子凡一样只用 WordPress

    71390

    如果你 WordPress 安装了 PHP Everywhere 插件,请赶快升级或者删除

    PHP Everywhere 插件 PHP Everywhere 可以让你在 WordPress 随时随地使用 PHP 代码,使用户能够在 WordPress 文章,页面和侧边栏插入和执行 PHP...代码,根据 WordPress 官方插件库数据,该插件已被 3 万多个 WordPress 站点使用。...CVE-2022-24665 - 通过编辑器进行远程代码执行(同样需要贡献者权限) 如果网站存在这三个漏洞,黑客将可以利用它们并执行恶意 PHP 代码,甚至可以实现对网站完全接管。...3.0.0 版本通过移除短代码功能,并且提供一个升级向导,将旧短代码升级到 Gutenberg 编辑器里面的(block)。但是 3.0.0 版本只支持编辑器,不再支持原来经典编辑器了。...我个人不太建议直接在后台输入 PHP 代码,然后让前台执行,首先这个对用户代码能力要求非常高,然后这类插件安全性一直会存在问题,个人还是觉得通过修改模板或者其他模板能力插件实现类似的功能。

    40130

    WordPress 文章摘要介绍和使用优化

    怎么设置文章摘要 在使用经典编辑器年代,摘要是非常容易设置,就在文章内容下面,很多人写完文章,顺手也设置了文章摘要: 但是升级到编辑器之后,很多人就发现不知道去哪里设置摘要了,摘要设置文本框被移到编辑器右侧文章设置很下面...WPJAM Basic 插件支持一键屏蔽编辑器,此外 WPJAM Basic 还提供一个扩展「摘要快速编辑」,让你可以在文章列表快速设置文章摘要: 使用文章摘要 WordPress 提供了两个文章摘要模板函数...: get_the_excerpt( post = null ) 函数获取文章摘要,它只有一个参数,就是 post,可以是文章对象,或者文章 ID, 也可以不传,不传则获取当前文章摘要。...自动获取文章摘要 由于种种原因,并不是每篇文章都设置了摘要,这个时候,WordPress 默认是会做一些处理简单描述一下: WordPress 默认会使用 wp_trim_excerpt 去获取文章内容...这种算法对于中文来说,非常不好,因为一个中文字符,宽度基本上是一个英文字符两倍,如果文章中英文混排的话,截取出来肯定会长度不一。

    1.1K30

    WPJAM TinyMCE:一键增强 WordPress 经典编辑器

    现在大家都开始使用编辑器了,特别是 WordPress 最新几个版本发行,大部分更新都围绕编辑器,不过在一些地方还是有用到经典编辑器,比如我们花生小店商品编辑,就用不到那么高级编辑器...经典编辑器基本够用,但是有些格式化工具缺失,还是挺烦人,所以我们为了商家在花生小店时候方便编辑商品,我们做了一个 WordPress 经典编辑器增强插件,为了方便就叫做 WPJAM TinyMCE。...做个简单对比,就很清楚了。...,列增删改等各种操作: 总之让在编辑器内编辑表格变成了一件非常简单事情。...现在在屏幕截图之后,只需要按快捷键就能粘贴到编辑器里面,然后文章保存时候自动把图片上传到媒体库。非常方便快捷。

    82310

    WPJAM Basic 去掉了「屏蔽 REST API」功能

    这是一个非常纠结过程,你听我娓娓道来,开发不是一个想当然事情,一个小小功能都有演化过程,还有程序员心酸。...随着 WordPress 版本推进,功能叠加,功能也产生了依赖,WordPress REST API 成为很多功能基础,比如编辑器就是基于 REST API ,所以很多人在 WPJAM Basic...「优化设置」把 REST API 功能屏蔽了,然后发现没法用了,就来怼我:装了 WPJAM Basic,都不能用了。...所以很无语,虽然在「优化设置」已经做了处理,勾选了「屏蔽」才能勾选「屏蔽 REST API」,但是不知道什么原因,可能其他插件或者主题把编辑器屏蔽了,然后所有的罪都由 WPJAM Basic...背。

    45620

    WordPress 官方推出简洁文字阅读主题 Livro

    今天给大家推荐 WordPress 官方出一个非常简洁 WordPress 主题:Livro,这个主题使用深色背景,白色文字,适合文字阅读,按照官方说法,这样设计是旨在让你获得如同阅读古典书籍时一样平静感觉...我测试了一下,在中文环境下显示效果也是可以: Livro 支持全站编辑 Livro 主题虽然简洁,但是支持编辑器全站编辑,所以就很容易进行自定义设置。...比如它首页显示文章内容,可以在全文编辑里面把文章内容替换成文章摘要,在文章详情页会在文章内容前面显示特色图片,简单在全站编辑删除一下即可: Livro 主题还内置了 15 种区块样板,但是大部分是页眉和页脚...,其中两个是页面的,一个是关于我们页面,一个是联系页面: 作为一个适合阅读主题,我觉得对于一些主要作为文字博客是非常合适,并且是 WordPress 官方出主题,所以主题质量也是能够得到保证...,并且作为一个支持全站编辑主题,作为研究 WordPress 主题开发也是一个很好例子。

    55630

    一文详解 WordPress Shortcode 简码

    WordPress Shortcode 指的是使用[]包含简码或者短代码,WordPress 会识别这些代码并根据它们定义回调函数输出为内容。...="123"]一些内容[/mycode] 使用 Shortcode 在后台撰写文章时候,如果是编辑器,直接可以选择简码区块,它在小工具分类比较下面: 然后在简码区块输入具体简码:...如果不是编辑器则直接输入简码。...所有 Shortcode WordPress 系统定义了哪些 Shortcode,我们可以使用 WPJAM Basic 插件「常用简码」扩展查看,激活扩展之后,在 「WPJAM」菜单「常用简码」子菜单即可查看.../ 移除所有的 Shortcode return = do_shortcode(content); // 解析 return = strip_shortcodes(content); // 删除 一个简单

    1.6K20

    微软MIT出品,AI自动朗读6万本电子书,还能用自己声音定制化

    ---- 新智元报道 编辑:润 【新智元导读】微软MIT等机构用AI将计划电子书转录为语音书,免费向公众开放,还公开了制作流程。而且用户还可以用自己声音进行配音。...世界上最大电子书库正被AI转录为有声书,免费向所有人开放! 这个项目由微软,谷歌和计划共同发起,有望将计划包含接近6万本电子书库,利用AI文本转语音技术,全部转化为有声读物。...任何用户都可以通过以下5个平台,免费获取到生成语音书。...https://podcasts.apple.com/au/podcast/the-project-gutenberg-open-audiobook-collection/id1680867884 计划是全球最大开源电子书库...使得研究团队能将注意力集中在读取后可以生成高质量录音文件任务上来。 下图显示了该聚类过程结果,表明计划收藏自然出现了几个结构相似的电子书集群。

    33730

    WordPress 4.9“Tipton”正式版已于11月14号正式发布

    自定义面板增加了设计草稿,定期发布,以及锁定,预览等功能,让内容创建者可以更好地进行协同工作。 此外,代码语法高亮显示和错误检查功能,会给你一个简洁、流畅建站体验。...新相册小工具 对WordPress 4.8媒体小工具采取了渐进式改进。选择你可以通过这个新小工具添加相册。没错! 点击按钮,发布媒体 想要给你文本小工具添加媒体文件吗?...将图片、视频、音频等文件插入到你文字周围,只需要一个简单却实用媒体按钮。哇! 网站建设改进 ? 更可靠主题切换 当您更换主题时候,小工具有时候会觉得他们只是换了个位置。...我们设计了符合使用体验更加顺利菜单创建过程。最新更新副本会引导你。 与合作 WordPress 团队正在致力于一种新方式,创建和管理你网站内容,需要所有用户合作。...感兴趣用户可以进行测试这个项目,并帮助开发者一起改进!

    1.1K20
    领券