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

如何在WP上嵌套可复制的metabox字段?

在WordPress上嵌套可复制的metabox字段可以通过以下步骤实现:

  1. 创建一个自定义的metabox:使用add_meta_box函数创建一个自定义的metabox,指定标题、显示位置和回调函数。回调函数将负责渲染metabox的内容。
  2. 在回调函数中添加可复制的字段:在metabox的回调函数中,使用HTML和JavaScript来创建可复制的字段。可以使用JavaScript库(如jQuery)来实现字段的复制和删除功能。为了确保每个字段都有唯一的标识,可以使用数组作为字段名称的后缀。
  3. 处理保存逻辑:在保存文章时,需要处理metabox字段的保存逻辑。可以使用save_post钩子来拦截保存请求,并从请求中获取metabox字段的值。然后,将这些值保存到数据库中。

以下是一个示例代码,演示如何在WordPress上嵌套可复制的metabox字段:

代码语言:txt
复制
// 添加自定义metabox
function custom_metabox() {
    add_meta_box('custom_metabox', '可复制的字段', 'render_custom_metabox', 'post', 'normal', 'high');
}
add_action('add_meta_boxes', 'custom_metabox');

// 渲染metabox内容
function render_custom_metabox() {
    global $post;
    
    // 获取已保存的字段值
    $custom_fields = get_post_meta($post->ID, 'custom_fields', true);
    
    // 如果没有保存的字段值,则初始化一个空数组
    if (empty($custom_fields)) {
        $custom_fields = array('');
    }
    
    // 渲染字段
    foreach ($custom_fields as $index => $value) {
        ?>
        <div class="custom-field">
            <input type="text" name="custom_fields[]" value="<?php echo esc_attr($value); ?>" />
            <?php if ($index > 0) { ?>
                <button class="remove-field">删除</button>
            <?php } ?>
        </div>
        <?php
    }
    ?>
    <button id="add-field">添加字段</button>
    <script>
        jQuery(document).ready(function($) {
            // 添加字段
            $('#add-field').click(function() {
                $('.custom-field:last').clone().insertAfter('.custom-field:last');
            });
            
            // 删除字段
            $(document).on('click', '.remove-field', function() {
                $(this).parent('.custom-field').remove();
            });
        });
    </script>
    <?php
}

// 保存metabox字段的值
function save_custom_metabox($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    if (isset($_POST['custom_fields'])) {
        $custom_fields = array_map('sanitize_text_field', $_POST['custom_fields']);
        update_post_meta($post_id, 'custom_fields', $custom_fields);
    }
}
add_action('save_post', 'save_custom_metabox');

这个示例代码创建了一个名为"可复制的字段"的metabox,其中包含一个可复制的文本字段。用户可以点击"添加字段"按钮来复制字段,点击"删除"按钮来删除字段。所有字段的值将在保存文章时被保存到数据库中。

请注意,这只是一个示例代码,你可以根据自己的需求进行修改和扩展。在实际使用中,你可能需要添加字段验证、样式调整和其他自定义功能。

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

相关·内容

WordPress 添加音乐盒

米扑重新架音乐盒 2017.10.24 程序员节,米扑博客在网上重新搜集了许多适合WordPress音乐盒,最后选定了 WP-Player WP-Player 官网:https://wordpress.org...WP-Player 支持网易云音乐, 虾米音乐, QQ音乐, 百度音乐平台 2. 如在网易云音乐打开喜欢歌曲页面,复制歌曲页面的网址:http://music.163.com/#/song?...并将复制歌曲网址填写到后面你新建文章下方表单内,音乐类型将根据网址自动做出选择。 4. 点击获取音乐ID按钮,此时音乐ID出现在表单中。 ? 5. 将短代码填入您新建文章内容中。 1 <a...本插件仅供个人学习研究使用,请勿作为各种商业用户,音乐版权归各音乐平台所有 注意: 1)一篇文章只能插入一个播放器,因为用了MetaBox获取参数,只能一篇文章使用一个。

1.9K71
  • WordPress批量导入数据库Tag标签

    遂开始准备从数据库入手,教程如下:导入主要涉及到3个表wp_termswp_term_relationshipswp_term_taxonomy字段说明:wp_termsterm_idnameslug标签...id标签名称别名(url名称)导入内容: 标签id、标签名称、别名wp_term_relationshipsobject_idterm_taxonomy_idterm_order绑定文章id关键词id留空...wp_term_taxonomyterm_taxonomy_idterm_idtaxonomy关键词id关键词id+1post_tag导入演示wp_termsterm_idnameslug留空,让系统自动生成...或者设置别名(非必须,省略留空)wp_term_relationshipsobject_idterm_taxonomy_idterm_order5538551904post_tag5538551905post_tag...导入内容: 文章id、标签id、字段类型 (此处标签id是根据第一张表导入后,提取出来标签id) 第二张表导入标签id要绑定文章,(标签与文章之间存在嵌套关系)wp_term_taxonomyterm_taxonomy_idterm_idtaxonomy5190351904post_tag5190451905post_tag5190551906post_tag

    2.2K30

    如何使用WP-CLI安装WordPress

    您还需要在本服务安装LNMP运行环境,关于如何安装您可以参考在CVM搭建网页服务器(LNMP)。 注意 本教程是为非root用户编写。需要提升权限命令以sudo为前缀。...WP-CLI 基础知识 在继续之前,让我们学习一些WP-CLI如何工作基础知识。 我们已经可以通过wp访问WP-CLI 。您可以使用嵌套子命令执行命令。...例如,下载WordPress命令: wp core download 这wp是命令,而 core和download是它嵌套子命令。嵌套子命令可以扩展一个或两个级别。...10个插件: wp plugin search yoast --per-page=20 现在您已经知道要安装插件名字Yoast(wordpress-seo),将其复制到您命令并激活它: wp plugin...WP-CLI命令 WP-CLI社区命令 如何在Ubuntu 18.04安装带有LAMPWordPress 在CentOS用Caddy安装WordPress 想学习更多知识?

    1.5K31

    NoSQL概述-从Mongo和Cassandra谈谈NoSQL

    复制集(高可用)raft一致性协议 复制集架构模式还并不是一种分布式存储,只是实现了高可用,replicate set 与 master-slave还是不一样 ?...所以通常来说单一字段作为shard key,都会造成问题,需要联合字段来做shard key. cassandra 节点负责partionkey发生变化,因为有虚拟节点存在,每个已有的节点需要移动数据就会很少...,进行水平扩展时,更改应用端 查询模式,mongo 在这一点很坑 索引 mongo mongo 索引基于B+ tree,与关系型数据库很类似 对于scalar(标量字段) 和关系型数据库就很类似...同样可以在非标量字段(array,embeded document)建立索引array创建多键索引 https://yq.aliyun.com/articles/74635 cassandra cassandra...- 数据模型 mongo 支持复杂数据模型,数据类型更加丰富,还可以嵌套文档。 cassandra 相对要弱点。

    1.8K20

    PySpark 数据类型定义 StructType & StructField

    虽然 PySpark 从数据中推断出模式,但有时我们可能需要定义自己列名和数据类型,本文解释了如何定义简单、嵌套和复杂模式。...PySpark StructType 和 StructField 类用于以编程方式指定 DataFrame schema并创建复杂列,嵌套结构、数组和映射列。...下面的示例演示了一个非常简单示例,说明如何在 DataFrame 创建 StructType 和 StructField 以及它与示例数据一起使用来支持它。...,例如,DataFrame中是否存在列或字段或列数据类型;我们可以使用 SQL StructType 和 StructField 几个函数轻松地做到这一点。...,以及如何在运行时更改 Pyspark DataFrame 结构,将案例类转换为模式以及使用 ArrayType、MapType。

    1.1K30

    XShell常用命令总结

    在XShell上面,很多我们日常使用快捷键是不能用或者意思不同,比如CTRL+C,这个在XShell中是强制退出运行程序意思。如果需要复制,就先选中,然后右键-复制。.../test1/test2/test3 在当前目录下建立嵌套子目录 cd 进入目录命令,后面接你要进入目录(对应电脑文件夹),cd /etc/nginx/ cd / 切换到根目录...cat test.txt 就是显示test.txt内容 cp 复制命令,后面接你要复制源文件和新文件名, cp php.ini new-php.ini ls 列出当前目录下所有的文件及文件夹.../latest.tar.gz 下载wp最新版本文件意思 mv 移动命令,后面接源文件和目的目录 , mv wp-config.php /var/www rm 删除命令,后面接文件名...1、clear命令:这个命令将会刷新屏幕,本质只是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前操作信息。

    2.4K30

    wordpress速度优化-静态页写入内存

    如果不考虑服务器带宽,那最大瓶颈就是硬盘了,因为这些生成静态页面都存储在硬盘上,访问量大时,硬盘读写速度低会导致网站访问缓慢,如何在较大访问量下依然保持页面的迅速打开呢?...如果你使用VPS、云服务器或独立服务器,继续阅读下去,你会有大收获: (*文章结构和部分字段网络复制。...wordpress如何使用tmpfs: 钻芒博客用宝塔面板,实际宝塔可以直接设置挂载内存盘。...图片 然后新创建这个cache-tmpfs文件夹就是挂载在内存 我们去WP Super Cache 插件设置里把缓存位置换成刚才创建挂载在内存文件夹目录 比如我:/www/wwwroot/www.zuanmang.net.../wp-content/cache-tmpfs/ 图片 更新缓存位置后WP Super Cache 会自动在新缓存位置生成缓存文件,以后缓存都缓存在新目录里。

    1.8K30

    如何保护Wp-Config.Php文件

    推荐:如何在WordPress中编辑wp-config.php文件保护wp-config.php 文件方法1、通过.htaccess文件保护  使用 FTP 客户端连接到网站并下载位于网站根目录中...将以下内容复制到您 .htaccess 以拒绝访问您 wp-config.php 文件。您可以在所有其他条目之后复制 .htaccess 文件底部以下文本。...通常,wp-config.php 文件通过将其移一层从而将其置于您网站公共文件夹之外来保护。所以最好选择是向上移动并在您网站目录中一个未公开位置。...推荐:什么是Theme.json文件3、创建新wp-config.php文件  创建一个名为“config.php”新文件。需要将该文件创建在非 WWW 访问目录中。...如果您不确定您网站绝对路径是什么,请参考博主提示如何使用 PHP 在网络服务器查找绝对路径。

    1.2K30

    同步 WordPress 博客日志到新浪微博

    ,同步日志到新浪微博非常简单,我前面介绍了同步到嘀咕,雷猴等微博客,同步到新浪微博方法基本也一致,分为两步: 首先我们创建更新状态到新浪微博函数,这里我用到了 WordPress 自带 WP_Http...类(关于 WP_HTTP 介绍你可以查看这篇文章:如何在WordPress 发起HTTP Requests): function update_sina_t($status){     $username...headers = array( 'Authorization' => 'Basic '.base64_encode("$username:$password") );     $request = new WP_Http...WordPress 后台点击更新日志都会触发这个 action,所以我们要用自定义字段记录是否已经把日志同步到了新浪微博: add_action('publish_post', 'publish_post...post_ID);     update_sina_t($status);     add_post_meta($post_ID, 'sina_t', 'true', true); } 把上面两段代码复制到主题

    31610

    MongoDB实战面试指南:常见问题一网打尽

    MongoDB支持多种类型索引,字段索引、复合索引、多键索引等。 3. 问题:如何在MongoDB中执行聚合操作?...答案:MongoDB复制集是一组维护相同数据集mongod服务实例。复制集提供了数据冗余和高可用性,当主节点发生故障时,可以自动切换到其他可用节点。...答案:MongoDB分片是将数据集分布在多个MongoDB实例过程。分片可以提高系统伸缩性和性能,因为数据可以分布在多个服务器,每个服务器只处理部分数据。...创建文本索引后,可以使用text操作符在索引字段执行全文搜索查询。此外,还可以使用 meta操作符来获取有关文本搜索结果元数据,搜索得分和匹配项高亮显示。 12....需要注意是,如果不使用elemMatch,而是直接在数组字段指定多个查询条件({ items.price: { gt: 10 }, items.quantity: { 16.

    74910

    WordPress 6.1 新增必填字段相关函数和钩子

    文章目录[隐藏] 过滤标记 指示符示例 消息示例 当表单包含多个必填字段时,它们标签可能带有一个带有图例星号,以说明这些字段是必填。...必填字段标签使用wp_required_field_indicator()函数,它给出了包含必填星号span标签添加了“required”类名。翻译人员现在可以用他们语言中更合适字形替换星号。...该符号与wp_required_field_indicator()函数生成标记相匹配。...在 WordPress 5.9 和 6.0 中,屏幕阅读器不会阅读评论表单星号或必填字段消息文本,因为它们是视觉提示。在 6.1 中,修订版恢复了这些项目,因此看到文本屏幕阅读器用户也能听到它。...任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者合法权益,联系我们进行处理。

    68110

    23个高手都在用Figma小技巧!(2022新专辑)-Part 01

    快速调整字段数值 将鼠标悬停在 Figma 中某些属性字段时,会出现一个横向双箭头。只需按下鼠标键 并将箭头从左向右移动,数值就会发生变化。按住shift以增加调整数值速度。...这适用于任何在将鼠标悬停在其时显示横向双箭头字段。 005.复制为PNG而不导出图片 按cmd+ shift+ c(或通过右键菜单访问)将框架作为 png 复制到剪贴板。...006.添加左右约束网格 当您在将网格添加到框架(Frame)同时设置约束时,(非嵌套)项目会将列作为其父容器。如果您希望您元素与网格完美结合,请将它们设置为left-right。 ‍...然后在图像视图中,再次右键单击检查模式,然后在整个 SVG 元素,右键单击并选择“复制元素”。...你现在可以将它粘贴到你 Figma 文件中,它仍然是一个扩展和可编辑SVG,它所有图层都包含在内。 试试阿里巴巴图标库中复制SVG功能,那个更方便。

    3.8K30

    WordPress 自定义字段(Custom Fields)详细介绍和使用

    换句话说,我们所创建自定义字段数据是属于当前日志或者页面,所以我们能够显示当前日志或者页面相关自定义字段信息。...如何在博客显示自定义字段数据 当我们想显示日志或者页面的自定义字段时候,我们有几种方法。这里介绍两种简单方法和一些更高级用法。...通过使用 get_post_meta(post->ID, "Key2″, single = true); 可以返回自定义字段 "Key2" 值,也可以输出它:echo get_post_meta(...> 统计当前日志浏览数 下面的代码是目前我爱水煮鱼所使用日志浏览数统计代码核心部分,和 WP-Postviews 有点不同,因为我爱水煮鱼博客使用内存缓存,所以我把统计数写入到 WordPress...php $post_id = $post->ID; $post_views = wp_cache_get($post_id,'views'); if($post_views === false

    3.3K20

    深入学习下 TypeScript 中泛型

    要在 macOS 或 Ubuntu 18.04 安装,请按照如何在 macOS 安装 Node.js 和创建本地开发环境或如何在 Ubuntu 18.04 安装 Node.js 使用 PPA 安装部分中步骤进行操作...第一个,Keys,是你想要确保你对象拥有的所有键。在这种情况下,它是所有商店代码联合。 T 是当嵌套对象字段具有与父对象键相同键时类型,在这种情况下,它表示运送到自身商店位置。...此时,KeyPart1 不是点表示法:它将包含一个字段的确切名称,该字段包含您希望从原始类型中省略嵌套字段。因此,您可以安全地使用现有的实用程序类型。...这将重新创建一个没有您需要省略嵌套字段字段。在 NestedOmit 最终评估中,第一个条件将返回 false,因为传递字符串类型现在只是“c”。...发生这种情况时,您可以使用内置助手从对象中省略该字段。 这将返回 b 字段类型,即省略了 c 原始类型。现在评估结束,TypeScript 返回您要使用新类型,并省略嵌套字段

    15510

    xwiki开发者指南-一分钟创建App

    我们没有尝试包含所有类型功能(通知、复杂字段或工作流)。这些可以通过编程来添加。...第一步,你必须提供应用程序名称和位置(location),这将决定应用程序主页URL。应用程序代码和数据将作为嵌套页面在指定位置里面生成。 ?...正如你可以看到这个类只有一个属性,priority,用于指定在字段配置面板类别列表中位置。类别标题实际是wiki页面的标题。...假设你已经创建了 "External Image"属性类型,让我们看看如何在基础添加一个字段类型。 首先你需要创建一个新wiki页面。wiki页面的标题为新字段类型标题。...基本,当你在应用程序中添加新"External Image"字段时,该属性模板将被会复制。 保存就大功告成了。现在,让我们创建一个新应用程序,或者你也可以编辑现有的。

    8.3K30

    WordPress使用Cloudflare cf CDN为网站加速

    当前速度已经足够 钻芒博主前前后后折腾过 阿里云CDN、腾讯云CDN、有拍云CDN、七牛云融合CDN、百度云加速等国内多家厂商分发服务,但在WordPress却总是不可避免出现问题,比如css、js...这下不仅仅用了CDN,还嵌套了多层CDN。(嵌套这么多感觉很牛逼,实则对速度并没有太多提升,因为一个CDN用好就已经很快了。...推荐笨牛网(每天限制绑定一个CNAME 接入域名)、CF宿云等 然后就来到了今天重头戏,WordPress使用cloudflare 页面缓存规则,这个钻芒测试了几个小时,速度稳定性都是比较好。...如下供参考: 第一条: zmki.cn/wp-admin/* 全选 复制 缓存级别设置为绕过或者不缓存,WordPress后台要屏蔽缓存。...(如果发部分js或者样式无效果,可以用这条来屏蔽缓存,直接回源) 把这些配置好以后,原本卡不行网页也基本能秒开了。

    8.1K20

    MongoDB数据模型设计和索引创建

    在MongoDB中,数据模型是非常重要,它可以直接影响到数据库性能和扩展性。在本文中,我们将介绍如何设计MongoDB数据模型,并创建索引来提高查询效率。...下面是一些在MongoDB中设计数据模型最佳实践:尽量将相关数据放在同一个文档中,这样可以避免多次查询或使用$lookup等聚合操作。避免使用嵌套文档层数过多,这样会影响查询效率和扩展性。...下面是一些在MongoDB中创建索引最佳实践:对于经常用作查询条件字段,应该创建单字段索引。对于多个字段一起查询情况,应该创建复合索引。...对于查询频率较低字段,可以不创建索引,以减少存储和维护索引开销。在创建索引时,需要根据查询模式和数据量来选择适当索引类型(B树索引、哈希索引等)。...下面是一些示例代码,演示如何在MongoDB中创建索引:创建单字段索引:db.collection.createIndex({ name: 1 })上述代码将为名为“collection”集合中“name

    2.3K10
    领券