wrodpress 编辑器 增加下载图片按钮！

如果目标是点击按钮后，将文章中的图片下载到本地电脑的文件夹中，而不是服务器，那么需要通过 JavaScript 实现。具体步骤如下：

1. 创建一个自定义插件
仍然需要创建一个插件来添加按钮和处理逻辑。

步骤：
在 wp-content/plugins/ 目录下创建一个新文件夹，例如 download-images-to-local。

在该文件夹中创建一个 PHP 文件，例如 download-images-to-local.php。

在文件中添加以下代码：

<?php
/*
Plugin Name: Download Images to Local
Description: Adds a button to the classic editor to download all images from the current post to the local computer.
Version: 1.0
Author: Your Name
*/

// 添加按钮到经典编辑器
function add_download_images_button($buttons) {
array_push($buttons, 'separator', 'download_images');
return $buttons;
}
add_filter('mce_buttons', 'add_download_images_button');

// 加载自定义 TinyMCE 插件
function add_download_images_plugin($plugin_array) {
$plugin_array['download_images'] = plugins_url('download-images.js', __FILE__);
return $plugin_array;
}
add_filter('mce_external_plugins', 'add_download_images_plugin');

// 引入 JSZip 库
function enqueue_jszip_script() {
wp_enqueue_script('jszip', 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js', array(), '3.7.1', true);
wp_enqueue_script('jszip-utils', 'https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.min.js', array(), '0.1.0', true);
}
add_action('admin_enqueue_scripts', 'enqueue_jszip_script');

2. 创建 JavaScript 文件
在插件文件夹中创建一个 JavaScript 文件 download-images.js，用于处理按钮点击事件并下载图片到本地。

(function() {
tinymce.PluginManager.add('download_images', function(editor, url) {
editor.addButton('download_images', {
text: 'Download Images to Local',
icon: false,
onclick: function() {
// 获取当前文章内容
var content = editor.getContent();

// 使用正则表达式提取所有图片 URL
var imageUrls = [];
var imgRegex = /<img[^>]+src="([^">]+)"/g;
var match;
while ((match = imgRegex.exec(content)) !== null) {
imageUrls.push(match[1]);
}

if (imageUrls.length === 0) {
return; // 如果没有图片，直接退出
}

// 使用 JSZip 打包图片
var zip = new JSZip();
var date = new Date();
var dateString = date.toISOString().slice(0, 10).replace(/-/g, ''); // 格式化为 YYYYMMDD
var promises = [];

imageUrls.forEach(function(url, index) {
var fileName = dateString + '_' + pad(index + 1, 2) + '.' + getFileExtension(url);
var promise = fetch(url)
.then(response => response.blob())
.then(blob => {
zip.file(fileName, blob);
})
.catch(error => {
console.error('Failed to download image:', url, error);
});
promises.push(promise);
});

// 等待所有图片下载完成并打包
Promise.all(promises).then(function() {
zip.generateAsync({ type: 'blob' }).then(function(content) {
// 创建下载链接
var link = document.createElement('a');
link.href = URL.createObjectURL(content);
link.download = dateString + '_images.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});
}
});

// 获取文件扩展名
function getFileExtension(url) {
return url.split('.').pop().split(/\#|\?/)[0]; // 获取文件扩展名
}

// 补零函数
function pad(num, size) {
var s = num + '';
while (s.length < size) s = '0' + s;
return s;
}
});
})();

3. 启用插件
将插件文件夹上传到 wp-content/plugins/ 目录。

登录 WordPress 后台，进入“插件”页面，找到“Download Images to Local”插件并启用。

4. 测试功能
打开经典编辑器，编辑一篇文章。

在编辑器工具栏中会看到一个新的“Download Images to Local”按钮。

点击按钮，浏览器会自动下载文章中的所有图片到本地电脑的“下载”文件夹中，文件名格式为 YYYYMMDD_序号.扩展名（例如：20231015_01.jpg）。

5. 注意事项
该功能依赖于浏览器的下载功能，因此图片会保存到浏览器的默认下载文件夹中。

如果图片 URL 是外部的，确保这些 URL 可以直接访问。

如果文章中有大量图片，浏览器可能会弹出多个下载确认框（取决于浏览器设置）。

通过以上步骤，你就可以在 WordPress 经典编辑器中实现一个按钮，点击后将文章中的所有图片下载到本地电脑的文件夹中，并按照指定规则命名。

学习资料见知识星球。

以上就是今天要分享的技巧，你学会了吗？若有什么问题，欢迎在下方留言。

快来试试吧，小琥 my21ke007。获取 1000个免费 Excel模板福利​​​​！

更多技巧， www.excelbook.cn

欢迎 加入 零售创新 知识星球，知识星球主要以数据分析、报告分享、数据工具讨论为主；