WordPress 常规设置页面调用媒体中心上传图片插入URL(新版可用)

首先,我们需要在主题或插件文件夹中创建一个 JavaScript 文件(如:media-uploader.js),该文件中包含如下代码。

/*** 媒体中心上传 js
**/
jQuery(document).ready(function($){var mediaUploader;$('#upload_image_button').click(function(e) {e.preventDefault();if (mediaUploader) {mediaUploader.open();return;}mediaUploader = wp.media.frames.file_frame = wp.media({title: '选择图片',button: {text: '选择图片'}, multiple: false });mediaUploader.on('select', function() {var attachment = mediaUploader.state().get('selection').first().toJSON();// 插入媒体URL到背景图像字段中$('#bzg_wechat_img').val(attachment.url);});mediaUploader.open();});
});

上面代码所做的工作很简单,当我们点击 #upload_image_button 按钮时,代码调用wordpress的媒体上传工具,用户选择图片后,插入图片网址到 #background_image 字段,作为该字段的值。创建并保存好上面的代码文件后,下一步,我们需要把这个JavaScript文件加载到页面中。

//加到function里
add_action( 'admin_enqueue_scripts', 'custom_script_js' );
function custom_script_js() {if ( ! did_action( 'wp_enqueue_media' ) ) {wp_enqueue_media();}wp_enqueue_script( 'custom-media-uploader', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ) );
}

需要注意的是,因为本示例中,我们开发的是后台页面,需要使用 admin_enqueue_scripts 钩子来加载JavaScript文件,如果是前端页面,我们需要使用 wp_enqueue_scripts 钩子。

实现表单字段

<input id=”background_image” type=”text” name=”background_image” value=”<?php echo get_option(‘background_image’); ?>” /><input id=“upload_image_button” type=“button” class=“button-primary” value=“Insert Image” />

上面代码实现的表单字段大致如下图所示,点击「Insert Image」按钮,我们就可以调起WordPress的媒体上传工具,上传或选择已经上传的图片,然后,插图该图片到前面的 URL 字段中。

如果需要更加良好的用户体验,我们还可以简单调整一下上面的代码,比如,添加一个隐藏的字段用于保存媒体的 ID、添加一个预览字段用于显示缩略图等等。篇幅所限,就不再这里细说了,有需要的朋友可以自行实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160550.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程与计算总结(十七)软件构造

一.概述 1.定义 软件构造是以编程为主的活动&#xff0c;类似于软件实现。但软件构造又不止编程这么简单&#xff0c;除了核心的编程任务之外&#xff0c;还设计详细设计&#xff08;数据结构与算法设计&#xff09;、单元测试、集成与集成测试以及其他活动~ 2.软件构造是设计…

多维时序 | MATLAB实现SSA-CNN-LSTM-Attention多变量时间序列预测(SE注意力机制)

多维时序 | MATLAB实现SSA-CNN-LSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09; 目录 多维时序 | MATLAB实现SSA-CNN-LSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本描…

【vim 学习系列文章 10 -- vim 将代码中空格高亮显示方法】

文章目录 vim 高亮空格使用背景如何配置vim 可以自动显示空格呢&#xff1f;vim highlight 命令使用介绍vim 空白行的处理vim match 命令详细介绍 vim 高亮空格使用背景 开发人员在编写代码之后&#xff0c;在review通过之后会将代码推到服务器然后merge&#xff0c;但是有些代…

uni-app--》基于小程序开发的电商平台项目实战(五)

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…

【C语言进阶】自定义类型:结构体,枚举,联合

自定义类型&#xff1a;结构体&#xff0c;枚举&#xff0c;联合 1.结构体1.1结构体类的基础知识1.2结构的声明1.3特殊的声明1.4结构的自引用1.5结构体变量的定义和初始化1.6结构体内存对齐1.7修改默认对齐1.8结构体传参 2.段位2.1什么是段位2.2段位的内存分配2.3位段的跨平台问…

【Spring Boot】RabbitMQ消息队列 — RabbitMQ入门

💠一名热衷于分享知识的程序员 💠乐于在CSDN上与广大开发者交流学习。 💠希望通过每一次学习,让更多读者了解我 💠也希望能结识更多志同道合的朋友。 💠将继续努力,不断提升自己的专业技能,创造更多价值。🌿欢迎来到@"衍生星球"的CSDN博文🌿 🍁本…

Chrome使用本地修改过的js替换原js内容

步骤 1.进入开发人员工具&#xff1a;按F12 或 按ctrlshitfi 或 菜单“更多工具”->“开发人员工具” 2.在“源代码/来源”页面找到需要更改的js文件&#xff0c;“右键”->“替换内容” 3.在弹出的标签点击“选择文件夹”来选择一个存放内容的本地文件夹 4.弹出的询问标…

Excel——对其他工作表和工作簿的引用

一、引用其他sheet页表区域 若希望在公式中引用其他工作表的单元格区域&#xff0c;可以在公式编辑状态下&#xff0c;通过鼠标单击相应的工作表标签&#xff0c;然后选择相应的单元格区域。 例1 跨sheet页引用其他工作表区域 如图1所示的工作表Sheet2为工资表。 在Sheet1表…

【Golang】grpc环境踩的坑

关于’protoc-gen-go’ 不是内部或外部命令 这个问题的出现是因为没有这个文件导致的 这个文件要通过我们下载的google.golang.org这个文件编译生成的 这里建议下载google提供的grpc包 protobuf的源码&#xff1a; git clone https://github.com/golang/protobuf 下载好之后进…

如何把视频压缩变小?

如何把视频压缩变小&#xff1f;大家都知道&#xff0c;视频一般都伴随着很大的文件体积&#xff0c;&#xff1a;尤其是现在的视频大多是高清晰度的&#xff0c;因此视频文件的体积就更加的大&#xff0c;视频体积太大会给我们带来很多的不便&#xff0c;主要是以下这几点&…

诚迈科技董事长王继平出席中国(太原)人工智能大会并发表演讲

10月14日—15日&#xff0c;2023中国&#xff08;太原&#xff09;人工智能大会在山西省太原市举办。诚迈科技在大会上全面展示了其在人工智能领域的一系列创新技术与解决方案&#xff0c;诚迈科技董事长、统信软件董事长王继平受邀出席产业数字化转型论坛并发表主题演讲&#…

【特纳斯电子】基于单片机的火灾监测报警系统-实物设计

视频及资料链接&#xff1a;基于单片机的火灾监测报警系统-实物设计 - 电子校园网 (mcude.com) 编号&#xff1a; T0152203M-SW 设计简介&#xff1a; 本设计是基于单片机的火灾监测报警系统&#xff0c;主要实现以下功能&#xff1a; 1.通过OLED显示温度、烟雾、是否有火…

docker拉取镜像错误missing signature key

参考地址&#xff1a;docker拉取镜像错误 missing signature key-CSDN博客 linux系统&#xff0c;使用docker拉取的时候&#xff0c;报错如下 missing signature key 就一阵莫名其妙&#xff0c;之前还好好的&#xff0c;突然就不行了 按照网上说的方法&#xff0c;查看doc…

Ant Design Vue设置表格滚动 宽度自适应 不换行

Ant Design Vue设置表格滚动 宽度自适应 不换行 添加以下属性即可解决这个问题&#xff1a; <a-table :columns"columns" :data-source"list":pagination"false"bordered:scroll"{ x: max-content }" >

【QT开发(8)】QT 中使用tensorrt

在之前的文章《【TensorRT&#xff08;2&#xff09;】研究美团tech的yolov6的TensorRT部署》说明了tensorRT 的使用流程。今天尝试将其并入QT 项目中。 文章目录 项目地址参考资料&#xff1a;该分支主要做的工作Task 1:读取视频文件&#xff0c;然后通过 dds 发送的事情Task…

银河麒麟你服务x86访问ftp服务器上的文件

打开我的电脑 地址栏输入 ftp地址 可以选择需要的文件复制出来了

pytorch 入门(二)

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】教案二&#x1f356; 原作者&#xff1a;K同学啊 目录 一、神经网络的组成部分1. 神经元2. 神经网络…

PyQt界面里如何加载本地视频以及调用摄像头实时检测(小白入门必看)

目录 1.PyQt介绍 2.代码实现 2.1实时调用摄像头 2.2 使用YOLOv5推理 2.3 代码中用到的主要函数 1.PyQt介绍 PyQt是一个用于创建桌面应用程序的Python绑定库&#xff0c;它基于Qt框架。Qt是一个跨平台的C应用程序开发框架&#xff0c;提供了丰富的图形界面、网络通信、数据…

阶段性总结

uart协议&#xff1a; 通用异步收发器 UART&#xff08;Universal Asynchronous Receiver/Transmitter)&#xff0c;是一种串行、异步、全双工的通信协议&#xff0c;将所需传输的数据一位接一位地传输&#xff0c;在UART通讯协议中信号线上的状态位高电平代表’1’&#xff0…

竞品价格怎么监测

品牌在做产品营销、产品定价时&#xff0c;除了要做好自身产品的研发设计外&#xff0c;需要非常了解市场&#xff0c;了解消费者偏好、了解竞品数据&#xff0c;通过对比分析&#xff0c;从而知道哪些价位的产品更受消费者喜爱&#xff0c;怎样设计产品更符合市场要求等&#…