內容簡介
可以使用 WP Dropzone 將 Dropzone 整合到 WordPress 網站中。 WP Dropzone 允許您從任何帖子/頁面將文件上傳到 WordPress 媒體庫。它具有大量的選項和功能。
功能：
- 可自定義介面
- 檔案大小限制
- 最大檔案限制
- 檔案擴展名驗證
- 圖像裁剪調整大小
- 圖像品質降低
- 限制訪客用戶
- 支援本地的 Dropzone 事件
使用指南：
在您的帖子/頁面中使用 [wp-dropzone] 短代碼以顯示上傳區域。您也可以在您的模板文件中使用 echo do_shortcode('[wp-dropzone]'); 。
此外，該外掛還提供以下屬性：
- id：給上傳表單分配 ID。如果該字段為空，則會自動生成一個 ID。ID 應僅包含字母（a-z，A-Z）和數字（0-9）。例如： [wp-dropzone id="myID123"]
- callback：使用本地的 Dropzone 事件。有關詳細信息，請參閱 Dropzone 事件。例如： [wp-dropzone callback="success: function(file, response) { console.log(file) }"]
- title：上傳工具的標題。例如：[wp-dropzone title="Drop Files Here"]
- desc：上傳工具的描述。例如：[wp-dropzone desc="Your file will be uploaded to media"]
- border-width：上傳區域的邊框寬度。默認為“2”。例如：[wp-dropzone border-width="2"]
- border-style：上傳區域的邊框樣式。可以是：none、hidden、dotted、dashed、double、groove、ridge、inset、outset、initial、inherit 等。默認為“solid”。例如：[wp-dropzone border-style="dashed"]
- border-color：上傳區域的邊框顏色。使用十六進制顏色代碼。默認值為“＃B0B0B1”。例如：[wp-dropzone border-color="#dd102d"]
- background：上傳區域的背景顏色。使用十六進制顏色代碼。默認為“＃fff”。例如：[wp-dropzone background="#fbfbfb"]
- margin-bottom：在上傳下方添加邊距。默認為“0”。例如：[wp-dropzone margin-bottom="10px"]
- max-file-size：限制最大檔案大小。默認值基於您的服務器設置（php.ini）。例如：[wp-dropzone max-file-size="2"] // 將最大檔案大小設置為2MB
- remove-links：添加文件刪除/取消按鈕。可以是「true」或「false」。默認值為「false」。例如：[wp-dropzone remove-links="true"]
- clickable：如果設置為 true，則可單擊上傳區域。如果設置為 false，則必須將文件拖到上傳區域才能上傳文件。默認值為「true」。例如：[wp-dropzone clickable="false"]
- accepted-files：指定上傳工具接受的檔案類型。一些有效的類型為：audio/ *、video/ *、image/ * 或檔案擴展名，例如：.gif、.jpg、.png、.doc。例如：[wp-dropzone accepted-files="image/*"] // 只接受影像檔案
- max-files：定義允許上傳的檔案數量。例如：[wp-dropzone max-files="1"] // 只允許上傳一個檔案
- max-files-alert：超出最大檔案限制時顯示警報。例如：[wp-dropzone max-files="1" max-files-alert="One file is enough!"] // 當超過一個文件時顯示警報
- auto-process：如果設置為 false，您必須單擊上傳按鈕才能上傳所選擇的檔案。默認值為「true」。例如：[wp-dropzone auto-process="false"]
- upload-button-text：設置上傳按鈕文本。
外掛標籤
開發者團隊
原文外掛簡介
WP Dropzone integrates the powerful Dropzone.js library with WordPress, allowing you to upload files directly into the WordPress media library from any post, page, or front-end location. The plugin provides a modern, user-friendly drag-and-drop interface with extensive customization options and advanced features for file management.
Key Features
Drag & Drop Interface – Modern, intuitive file upload experience
Customizable Styling – Full control over appearance with CSS customization
File Validation – Built-in file type and size validation
Image Processing – Automatic image resizing, cropping, and quality optimization
Thumbnail Generation – Customizable thumbnail previews
Security Features – Nonce verification and user permission checks
Action Hooks – WordPress hooks for customization and integration
Translation Ready – Full internationalization support
Performance Optimized – Assets loaded only when needed
Shortcode Usage
Insert the dropzone anywhere in your posts, pages, or templates with the shortcode:
[wp-dropzone]
Or in PHP templates:
Shortcode Attributes
The following attributes can be used with the [wp-dropzone] shortcode:
id – Unique identifier for the dropzone instance (Default: Auto-generated)
Example: [wp-dropzone id="myUploader"]
title – Title displayed above the dropzone (Default: Empty)
Example: [wp-dropzone title="Drop Files Here"]
desc – Description text for the dropzone (Default: Empty)
Example: [wp-dropzone desc="Upload your files here"]
accepted-files – Allowed file types (Default: All files)
Example: [wp-dropzone accepted-files="image/*"]
max-files – Maximum number of files (Default: Unlimited)
Example: [wp-dropzone max-files="3"]
auto-process – Auto-upload files when dropped (Default: true)
Example: [wp-dropzone auto-process="false"]
clickable – Make dropzone clickable (Default: true)
Example: [wp-dropzone clickable="false"]
remove-links – Show remove file buttons (Default: false)
Example: [wp-dropzone remove-links="true"]
upload-button-text – Text for manual upload button (Default: “Upload Files”)
Example: [wp-dropzone upload-button-text="Upload Selected Files"]
resize-width – Resize images to specified width (Default: Original)
Example: [wp-dropzone resize-width="800"]
resize-height – Resize images to specified height (Default: Original)
Example: [wp-dropzone resize-height="600"]
resize-quality – Image quality (0.1-1.0) (Default: 0.8)
Example: [wp-dropzone resize-quality="0.9"]
resize-method – Resize method: contain/crop (Default: contain)
Example: [wp-dropzone resize-method="crop"]
thumbnail-width – Thumbnail width in pixels (Default: 120)
Example: [wp-dropzone thumbnail-width="150"]
thumbnail-height – Thumbnail height in pixels (Default: 120)
Example: [wp-dropzone thumbnail-height="150"]
thumbnail-method – Thumbnail method: contain/crop (Default: crop)
Example: [wp-dropzone thumbnail-method="contain"]
Styling Options
The following styling attributes can be used to customize the dropzone appearance:
border-width – Border width
Example: [wp-dropzone border-width="3px"]
border-style – Border style (solid, dashed, etc.)
Example: [wp-dropzone border-style="dashed"]
border-color – Border color (hex code)
Example: [wp-dropzone border-color="#007cba"]
background – Background color (hex code)
Example: [wp-dropzone background="#f0f0f1"]
margin-bottom – Bottom margin
Example: [wp-dropzone margin-bottom="20px"]
Advanced Features
Action Hooks
The plugin provides several action hooks for customization:
// Before file upload
do_action( 'wp_dropzone_before_upload_file', $file );
// After file upload
do_action( 'wp_dropzone_after_upload_file', $file );
// After media library insertion
do_action( 'wp_dropzone_after_insert_attachment', $attachment_id );
JavaScript Integration
Access dropzone instance and events:
// Get dropzone instance
var dropzone = Dropzone.forElement("#wp-dz-yourID");
// Add event listeners
dropzone.on("success", function(file, response) {
console.log("File uploaded:", response);
});
Examples
Basic Image Upload
[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]
Document Upload with Restrictions
[wp-dropzone accepted-files=".pdf,.doc,.docx" title="Upload Documents" desc="PDF, DOC, DOCX files only"]
Styled Upload Area
[wp-dropzone title="Drop Files Here" desc="Drag and drop files or click to browse" border-style="dashed" border-color="#007cba" background="#f8f9fa"]
Manual Upload Button
[wp-dropzone auto-process="false" upload-button-text="Upload Selected Files" title="Select Files"]
