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

wordpress ACF自定义块内的jquery不能选择块外的元素

WordPress ACF(Advanced Custom Fields)是一款流行的WordPress插件,它允许开发人员自定义WordPress网站的内容字段。ACF自定义块是ACF插件的一个功能,它允许开发人员创建自定义的可重复使用的内容块。

在ACF自定义块内使用jQuery选择块外的元素是一个常见的需求。然而,由于ACF自定义块的特殊性质,直接在自定义块内使用jQuery选择块外的元素是不可行的。这是因为ACF自定义块会在页面加载时动态生成多个实例,每个实例都有自己的DOM结构。

为了在ACF自定义块内使用jQuery选择块外的元素,可以采取以下解决方案:

  1. 使用ACF的"wp_enqueue_scripts"钩子将自定义的jQuery代码添加到WordPress主题的前端脚本中。这样可以确保jQuery代码在页面加载时可用,并且可以选择块外的元素。
代码语言:txt
复制
function enqueue_custom_scripts() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
  1. 在自定义的jQuery代码中使用事件委托(event delegation)来选择块外的元素。事件委托允许将事件处理程序绑定到父元素,以便处理子元素的事件。
代码语言:txt
复制
jQuery( document ).on( 'click', '.block-outside-element', function() {
    // 处理块外元素的点击事件
});

通过使用事件委托,可以确保在ACF自定义块内动态添加的元素也能够触发事件处理程序。

需要注意的是,以上解决方案是基于WordPress和ACF插件的常规使用方式。对于具体的实现细节和代码,可以根据具体的需求和项目进行调整。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。了解更多信息,请访问:腾讯云服务器
  • 腾讯云对象存储(COS):提供安全可靠的对象存储服务,适用于存储和管理大规模的非结构化数据。了解更多信息,请访问:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Wordpress】Crayon Syntax Highlighter 与主题不兼容

找到网上不少插件,最终还是选择了 Crayon Syntax Highlighter 这个插件。江湖称 Wordpress 最强大代码高亮插件! ?...安装完成并启用,然后点击后台菜单栏设置,找到 Crayon 进行自定义编辑。 遇到问题: 问题1、显示出来代码无法点击,右上角复制/粘贴、展开等功能button点击不起作用: ?...这个说明某些主题代码中有可能就做了上面的这种不自动加载 jQuery 改动。 这样就导致了某些依赖js文件插件不起作用。看到这里,我们就不防去验证一下。...打开我们一篇有代码博客,右键检查元素,在 element 中搜索 crayon.min ,果不其然网页元素中只加载了css文件 crayon.min.css : ?...问题2、HTML实体字符转义问题: 在Wordpress中使用 Crayon Syntax Highlighter 时,代码段HTML实体不会被解释,导致'’显示为’>

6.1K10

WordPress 5.7 发布,更好用古腾堡编辑器

WordPress 5.7 发布,新版本改善了古腾堡编辑器编辑体验,并使用户能够轻松创建更多高级,并为编辑器添加更强大自定义项,还有 HTTPS 切换等其他功能改进​。...支持拖放:支持将组从插入器中直接拖放到古腾堡编辑器。 更多 不懂代码也可以实现功能,做更多事情。 封面:可以制作一个填充整个窗口封面。...按钮:支持垂直或水平布局,设置为宽度百分比。 社交图标:现在支持设置图标的大小。...jQuery 升级到 3.5.1 WordPress 还是会一直支持 jQuery,因为太多插件和主题是基于 jQuery交互,WordPressjQuery 升级到最新版,并移除 jQuery...migrate,并且为了减少对开发者打扰,WordPress 会在在 console 输出更少 jQuery 相关信息。

70120

WordPress 2.2 中三个开发者喜欢特性

首先,你需要读取你要附加文件,编码成 base 64,分割成一,然后传递给头部参数,当然要设置正确 Content-Type 和 MIME-Version 和指明分界线。...WordPress 现在包含了 jQuery JavaScript 库 WordPress 自从 2.1 版本开始为增加多种管理界面 JS 效果就已经包含了功能丰富 Prototype 和 Scriptaculous...虽然现在 jQuery 出现在 2.2 唯一地方是新 Blogger 导入器,你可以在 WordPress 任何页面上使用 jQuery。...你所需要去做是在页面的头部输出之前调用 wp_enqueue_script('jquery'); 函数。 打包在 WordPress jQuery 是以“无冲突”模式。...(从这之后,你就可以使用 wpJ 代替 jQuery) jQuery 中我最喜欢特性是它能非常简洁选择 DOM 元素方法,列入,接下来代码搜索所有被命名为“S”文本框(如 WordPress 搜索框

44710

WordPress 初学者词汇表(术语解释)

如果您使用像 Elementor 这样主题,您无需学习或使用代码即可创建完全自定义网站(所有页面部分、颜色选择器、图标等都是内置!)。...jQuery是一个 JavaScript 库 – 旨在让开发人员更轻松地操作网页元素软件。...Block and Block Templates(模板) 是您可以通过内容或页面构建器(例如 Gutenberg 或 Elementor)添加内容构建元素。...这些可以包括基本文本和图像,或者更具体,如电子商务商店产品轮播或自定义捐赠表格。如果您使用是构建器,则会包含基本,但通常您可以找到附加组件或扩展来添加更多。...这可以包括上传自定义徽标、选择主要网站强调色、创建菜单、添加小部件、自定义帖子类型设置等等。此部分可以在外观 > 自定义 WordPress 主仪表板中找到。

7.1K20

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

更多模式:在某些主题中,预配置模式让在站点上创建页面变得轻而易举,所以更多模式让你创建页面的时候变得更加方便快捷。...2021主题还自带了一系列预设柔和色彩调色板,所有这些调色板均符合AAA对比度标准,您还可以为主题选择自己背景颜色,主题就会自动为您选择易于访问文本颜色!...当然还可以从颜色选择器中选择自己调色板。 自动更新改进 WordPress 5.6 现在提供了一个新 UI,可以为 WordPress Core 版本进行自动更新。...jQuery 更新 WordPress 会在三个版本:5.5、5.6 和 5.7 来更新 jQuery 到最新版,2020 年 8 月发布 5.5 删除了 jQuery Migrate 脚本,5.6...版本则将 jQuery 升级到最新版并添加了 jQuery Migrate 3.3.2,5.7 将移除 jQuery Migrate 3.3.2。

82840

2022可视化网页生成工具盘点

使用Squarespace你可以非常方便地创建页面,可以非常方便地调整样式,字体,颜色,按钮样式,动效,你都可以通过点击进行选择,可以说自定义功能还是很强大。...Zyro 一款非常小清新网页生成器,它可以使网页设计变得非常简单。选择模板,拖放新元素,更改颜色、字体、图像等都可以轻松完成,你也可以轻松编辑所有内容。...Elementor Elementor 与此列表中其他所有内容不同,原因很简单:它不是独立站点构建器。它是一个 WordPress 插件,它需要一个 WordPress 站点才能运行。...Elementor 允许您像完整拖放式网站构建器一样使用 WordPress(主要用于博客和发布内容管理系统)。它包括页面模板、内容和小部件。它具有响应式设计和令人难以置信定制。...它技术栈采用jquery和bootstrap,虽然jquery可能会有些落伍,但是它主要是用在页面的拖拽布局上,不会影响网页js。 它优点: 组件和/片段拖放。 撤消/重做操作。

2.8K20

WP Engine推出AI驱动WordPress网站搜索

利用高级自定义字段进行智能搜索 ACF 代表 高级自定义字段,适用于 CMS。...有 解决方案 和插件,允许网站创建者定义和添加超出 WordPress 提供基本字段自定义字段,但 Patterson 谈论是默认 WordPress 搜索,他承认它不能很好地处理这些搜索期望,...他补充说,为了创造增强搜索体验,智能搜索必须与 ACF 很好地配合。就目前而言,索引 ACF 是“WordPress 中搜索出了名难题”。...“我们所做是索引和映射你 ACF 字段,开箱即用,点击一个按钮,无需自定义映射,无需简码,无需任何代码,你只需在智能搜索中默认索引所有 ACF 和所有自定义帖子类型,”他说。...将搜索从 WordPress 数据库中卸载,并自动索引 ACF 字段中所有自定义帖子类型——我们认为这是我们在此处 […] 独一无二地方;再次希望以 WordPress 开发人员工作方式工作,”他说

9410

Code Embed:在WordPress文章和页面中添加Javascript最佳插件

宿主环境:浏览器(web端)、node.js(服务端) 狭义上来说有两种: 一个是基于浏览器端 JavaScript (前端 ),是运行在浏览器环境里脚本语言,更多是对html dom元素操作,...首先,通过JavsScript可以极大丰富和扩展WordPress功能,更好满足自定义需求。...一般来说,在WordPress文章或页面中插入JavaScript方法有如下几种: 编辑器:在古腾堡编辑器中插入一个HTML,把代码以HTML形式插入。...具体方法在本博客jQuery标签里文章里有介绍 管理后台:在WordPress管理后台中可以通过插入Header Scripts、Body Scripts、Footer Scripts 来形式来控制插入范围...第2步:在仪表板中打开选项 激活后,在文章编辑页面中,单击三个点点,在“选项”选择自定义字段”选项。 ?

4.4K40

WordPress 6.0 正式版发布 版本详细讲解

——小狐狸 WordPress 6.0 主要更新 增强写作体验 无论您是在撰写全新文章还是在现有页面中添加元素,写作方面的改进比比皆是。...当您将某些从一种类型转换为另一种类型时(例如,从段落转换为代码),请保留现有样式。 创建自定义按钮,您制作任何新按钮都将自动保留样式自定义。...更多模板选择 WordPress 6.0 包括五个用于主题新模板选项:作者、日期、类别、标签和分类。这些附加模板为内容创建者提供了更大灵活性。...在编辑模板时,在根部或之间,快速插入器会向您显示图案和模板部分,以帮助您更快地工作并发现新布局选项。 查询支持对多个作者进行过滤,支持自定义分类法,并支持自定义没有结果时显示内容。...更好列表视图 新键盘快捷键使您能够从列表视图中选择多个,批量修改它们,并将它们拖放到列表中。列表视图可以轻松打开和关闭;默认情况下它是折叠,只要您选择一个,它就会自动扩展到当前选择

1.6K40

WordPress 6.1 正式版已发布,最全新功能图文介绍

以前只允许您选择边框半径图像现在也允许您添加实际边框。 封面中特色图片 我们用户经常询问WordPress 中特色图片和封面之间区别。许多用户希望使用封面作为他们网站特色图片。...WordPress 6.1 将允许用户选择他们特色图片作为封面。然后,用户只需设置特色图像,它就会开始出现在封面。 使用封面将允许用户在他们想要任何地方显示特色图像。...同样,当使用 引用Quote 时,用户可以设置不同引用和引用样式。 改进导航 WordPress 6.1 带有改进导航,使您可以轻松地从设置中创建和选择菜单。...单个页面 单个文章 分类法中单个分类 单个类别 自定义模板(可用于任何帖子或页面) 只需转到外观»编辑器,然后从左侧边栏中选择模板。之后单击添加新按钮以查看可用选项。...在站点编辑器中快速清除自定义 WordPress 6.1 现在允许您在使用站点编辑器时快速清除自定义

4.6K30

前端编码规范

选择器分组时, 保持独立选择器占用一行 声明左括号 { 前添加一个空格; 声明右括号 } 应单独成行; 声明语句中 : 后应添加一个空格; 声明语句应以分号 ; 结尾; 一般以逗号分隔属性值...不准用"string".match() 多个参数使用对象字面量存储 jQuery 使用最新版本jQuery jQuery变量 以$开头, 并缓存到本地变量中复用, 使用驼峰命名法命名 jQuery选择器...尽量使用ID选择器 父元素选择元素用.find()方法性能会更好 DOM 操作, 尽量先与节点分离, 操作结束后再插入节点 字符串连接 array.join('') >+ > .append() 事件...如果需要,对事件使用自定义 namespace,这样容易解绑特定事件,而不会影响到此 DOM 元素其他事件监听; 对 Ajax 加载 DOM 元素绑定事件时尽量使用事件委托。...); ES6 级作用域 let取代var let const优先使用const(所有的函数应设置为const常量,let表示变量,只应出现在单线程运行代码中,不能是多线程共享,这样有利于保证线程安全

1.7K71

WordPress 6.1 发布,无需插件即可实现站点 0 SQL

WordPress 6.1 无需第三方插件就能实现首页 0 SQL,对于内容创建者,WordPress 6.1 也提供了一系列改善写作和设计体验新功能,比以往有更强控制和更大自定义能力。...新设计工具 对元素设计控件进行了升级,使得创建布局和站点时变得更加一致、完整和直观。...管理菜单更简便 导航中新后备选项意味着无需搜索就可以编辑打开菜单,此外,用于选择和处理菜单控件在设置中具有自己位置。移动菜单系统也升级了功能,可以设置图标选项,让菜单更加富有个性化。...更清晰布局和文档设置 通过更好组织显示来查看和管理文章和页面设置,从而改进比如模板选择器和发布日期设置等功能使用体验。...还有其他非常多主题和站点编辑器改进,为网站所有者提供了更多控制权和更轻松自定义,同时为用户提供了更友好体验。

51920

002.WordPress常见插件

它可以为访问者只加载那些合适缓存内容,而不是加载你WordPress站点中每一个脚本和元素。可以很大降低带宽占用,避免网站在流量高峰时崩溃。...Simple URLs Simple URLs是一个简单实用WordPress链转链短网址插件,调用了wordpress本身发布功能,添加个链接,就向发布文章一样简单,还支持统计链接点击次数哦。...Contact Form 7 Contact Form 7 是一款简单易用扩展性灵活WordPress联系表单插件,可以自定义各式各样不同类型表单功能,而且支持自定义接收邮件,Ajax提交和 jQuery...可结合Akismet过滤垃圾邮件,同时也支持CAPTCHA反垃圾邮件,表单域元素支持各种最常见:单选框、复选框、文本框、下拉菜单、按钮、文件上传等多种表单域。...BackWPup 网站自动备份工具 Taxonomy Order 实现分类列表任意排序功能,并支持默认分类和自定义Taxonomy。

1K20

在Genesis主题中手动添加WordPress相关文章

因为我一直在使用强大Wordpress插件ACF(Advanced Custom Fields )来满足我大部分需求,如果我能用手上现有的东西来实现“相关文章”功能,为什么还要安装别的东西呢?...我们在这里实现效果是以网格形式显示三篇相关文章,包括文章特色图像、标题和最多20个单词摘录,并且允许你自己选择要显示文章。通过这种方式,你可以更好地控制与某篇文章相关内容。...所以,让我们开始吧 第一步:使用ACF创建自定义字段 首先,我们需要创建所需自定义字段,以帮助我们获取所需数据,即关系字段类型。请按照下图进行正确设置。...还有一个更简单方法,你可以在这里下载我导出ACF配置文件,并将文件导入ACF。 related-posts.zipDownload ?...这是“奥姆剃刀”哲学: 如无必要,勿增实体;两个类似的解决方案,选择最简单

1.3K30

Wordpress搭建网站,新手站长常用插件大盘点(01)

1、经典编辑器 国内用户的话基本上是不喜欢也不习惯wordpress级编辑器,用不习惯,觉得不好用,因此一般来说的话我们安装好了wordpress之后第一件事情就是要换回经典编辑器。...4、站跳转Simple URLs Simple URLs 是一个完整链接管理系统,允许您使用自定义帖子类型和 301 重定向来创建、添加新、管理和跟踪来自您附属网站或在线商店出站链接。...这个还是很有必要一个插件,可以用来做站链接跳转工作,号称不输出权重跳转到站。...可以通过这个插件轻松搞定不能全站https彻底问题。有了这个插件的话,一般就可以轻松彻底解决https问题。...iThemes 安全提供 30+ 方法锁定 WordPress 一个易用 WordPress 安全插件。

1K20

前端知识体系整理(不断更新)

handler), removeEventListener(type, handler), detechEvent('on' + type, handler) 事件流: 事件捕获流:沿着文档树由......-> 查找window对象 -> 未定义 js中没有级作用域,可以用匿名函数模拟 未用关键字var申明变量,会自动升级为全局变量挂到window上 顶级作用域使用var申明变量是window...浏览器很慢 尽可能优先使用符合CSS语法规范CSS选择器表达式,以此来避免使用jQuery自定义选择器表达式,因为当jQuery遇到单个id, 标签名,类名,选择器就会快速调用浏览器支持DOM方法查询...jQuery 自带 Sizzle 选择器引擎,而是使用原生API查找元素 $('#parent').find('.child'); // 最快 $('.child', $('#parent'));...') 如获取元素id: $('div').click(function(e) { // 生成了个jQuery对象 var id = $(this).attr('id'); //

1.6K20

前端无法让我冷静

行内标签和标签有哪些以及都有什么特点 标签 每一个属性标签都是从新一行开始,而且之后元素也都会从新一行开始 可以设置宽度、高度,行高,距顶部距离,距底部距离 属性标签宽度假如不做设置,会直接默认为父元素宽度...行属性标签它和其它标签处在同一行 无法设置宽度,高度 行高 距顶部距离 距底部距离 宽度是直接由内部文字或者图片等内容撑开 行属性标签内部不能嵌套行属性标签 、、、<em...: 数字输入框 range :特定范围数值选择器(通过拖动滚动条改变一定范围数字) color : 颜色选取器 只在 Opera 和 Blackberry 浏览器 datetime : 显示完整日期和时间...('box'); var $box = $(box); jQuery对象转原生DOM对象: var $box = $('#box'); var box = $box[0]; jQuery如何扩展自定义方法...let 声明变量只在 let 命令所在代码内有效。 const 声明一个只读常量,一旦声明,常量值就不能改变。 JSON 语法规则 数据为 键/值 对。 数据由逗号分隔。

2.4K40

WordPress主题推荐

为什么要选择速度快WordPress主题在为你网站考虑最快 WordPress 主题时,重要是要寻找一个优先考虑速度和性能而不牺牲特性、功能和设计主题。...它之所以成为市场上最快主题之一,是因为它独立于jQuery等外部依赖项。其代码专门优化用于WordPress,因此它是启动网站强大引擎,速度快如闪电。...它提供大量WooCommerce增强功能,如快速视图、购物车通知、离画布产品过滤、愿望清单等功能。...ArgonArgon是一个充满二次元风格网站主题,许多元素比较偏向于年轻群体。如果你希望创建一个个性鲜明、年轻化博客,Argon是一个不错选择。...然而,在追求美观同时,绝不能忽视性能和速度。上面推荐主题都以其卓越加载速度和综合性能而闻名,你可以放心使用它们。

6800

盘点2020年wordpress常用50个插件合集-吐血推荐

9、Disable Gutenberg 选择禁用古腾堡,禁用古腾堡编辑器,并还原“经典编辑器”和原始“编辑帖子”屏幕。提供用于启用特定帖子类型,用户角色等选项。...18、Lazy Load – Optimize Images 选择延迟加载-优化图像,WordPress小型惰性加载脚本,没有jQuery或其他库。...URLs 选择简单URL,简单网址是一个完整网址管理系统,可让您使用自定义帖子类型和301重定向来创建,管理和跟踪网站出站链接。...26、SSL 不安全内容修复器 选择SSL不安全内容修复器,帮助您清理并修复WordPress站点HTTPS不安全内容 27、tag标签关键词选择标签标签关键字链,可适用于文章内容页关键字标签更改颜色...,从WordPress导出文件中导入日志,页面,评论,自定义标题,分类,标签或更多内容。

5.4K10
领券