Dropzone 到 WordPress 主题

Dropzone 是一个开源的 JavaScript 库，可为文件拖放提供丰富的功能和易用性，现在已经应用于许多网站和 Web 应用程序上。本文将介绍如何在 WordPress 主题中使用 Dropzone。

安装 Dropzone

要在 WordPress 主题中使用 Dropzone，请先下载和安装 Dropzone 库。您可以通过使用以下命令来安装 Dropzone：

npm install dropzone

您也可以直接从 Dropzone 的网站上下载 Dropzone 的源代码，然后将其添加到 WordPress 主题中。

添加 Dropzone 到 WordPress 主题

一旦 Dropzone 库已经安装，您就可以将其添加到 WordPress 主题中了。首先，在您的 WordPress 主题中的 head 标签中添加以下代码：

<link rel="stylesheet" type="text/css" href="path/to/dropzone.css">
<script src="path/to/dropzone.min.js"></script>

接下来，在您的 WordPress 主题中添加一个表单元素以允许用户上传文件：

<form action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" class="dropzone" id="myDropzone">
  <input type="hidden" name="action" value="my_upload_action">
  <?php wp_nonce_field( 'my_upload_action', 'my_upload_nonce' ); ?>
</form>

在此代码中，我们为表单元素添加了一个 “myDropzone” 类名，并将其指定为 Dropzone 对象。注意，我们在表单中添加了一个隐藏的字段来设置一个动作名称和一个安全性的随机值。

处理上传

现在，我们需要处理上传文件的代码。在您的 WordPress 主题的 functions.php 文件中添加以下代码：

add_action( 'wp_ajax_my_upload_action', 'my_upload_action_callback' );
add_action( 'wp_ajax_nopriv_my_upload_action', 'my_upload_action_callback' );

function my_upload_action_callback() {
  // 检查是否正确上传，并检查安全性
  if ( isset( $_FILES['file'] ) && wp_verify_nonce( $_POST['my_upload_nonce'], 'my_upload_action' ) ) {
    // 创建上传路径和文件名
    $upload_dir = wp_upload_dir();
    $target_path = $upload_dir['path'] . '/' . basename( $_FILES['file']['name'] );
      
    // 移动文件到上传目录
    move_uploaded_file( $_FILES['file']['tmp_name'], $target_path );
    // 成功响应，设置http状态码
    header( 'HTTP/1.1 200 OK' );
    // 返回文件URL
    echo $upload_dir['url'] . '/' . basename( $_FILES['file']['name'] );
  }
  
  wp_die();
}

此代码部分处理上传文件的代码，首先验证请求是否包含文件和一个安全性随机值，然后创建一个上传路径并将文件移动到此路径。最后，它返回上传文件的 URL。

完成

现在您的 WordPress 主题中已经添加了 Dropzone，并允许上传文件。您可以根据需要调整和自定义样式和上传路径。感谢您的阅读。

返回的代码片段如下：

# Dropzone 到 WordPress 主题

Dropzone 是一个开源的 JavaScript 库，可为文件拖放提供丰富的功能和易用性，现在已经应用于许多网站和 Web 应用程序上。本文将介绍如何在 WordPress 主题中使用 Dropzone。

## 安装 Dropzone

要在 WordPress 主题中使用 Dropzone，请先下载和安装 Dropzone 库。您可以通过使用以下命令来安装 Dropzone：

npm install dropzone

您也可以直接从 Dropzone 的网站上下载 Dropzone 的源代码，然后将其添加到 WordPress 主题中。

## 添加 Dropzone 到 WordPress 主题

一旦 Dropzone 库已经安装，您就可以将其添加到 WordPress 主题中了。首先，在您的 WordPress 主题中的 head 标签中添加以下代码：

```html
<link rel="stylesheet" type="text/css" href="path/to/dropzone.css">
<script src="path/to/dropzone.min.js"></script>

接下来，在您的 WordPress 主题中添加一个表单元素以允许用户上传文件：

<form action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" class="dropzone" id="myDropzone">
  <input type="hidden" name="action" value="my_upload_action">
  <?php wp_nonce_field( 'my_upload_action', 'my_upload_nonce' ); ?>
</form>

在此代码中，我们为表单元素添加了一个 “myDropzone” 类名，并将其指定为 Dropzone 对象。注意，我们在表单中添加了一个隐藏的字段来设置一个动作名称和一个安全性的随机值。

处理上传

现在，我们需要处理上传文件的代码。在您的 WordPress 主题的 functions.php 文件中添加以下代码：

add_action( 'wp_ajax_my_upload_action', 'my_upload_action_callback' );
add_action( 'wp_ajax_nopriv_my_upload_action', 'my_upload_action_callback' );

function my_upload_action_callback() {
  // 检查是否正确上传，并检查安全性
  if ( isset( $_FILES['file'] ) && wp_verify_nonce( $_POST['my_upload_nonce'], 'my_upload_action' ) ) {
    // 创建上传路径和文件名
    $upload_dir = wp_upload_dir();
    $target_path = $upload_dir['path'] . '/' . basename( $_FILES['file']['name'] );
      
    // 移动文件到上传目录
    move_uploaded_file( $_FILES['file']['tmp_name'], $target_path );
    // 成功响应，设置http状态码
    header( 'HTTP/1.1 200 OK' );
    // 返回文件URL
    echo $upload_dir['url'] . '/' . basename( $_FILES['file']['name'] );
  }
  
  wp_die();
}

此代码部分处理上传文件的代码，首先验证请求是否包含文件和一个安全性随机值，然后创建一个上传路径并将文件移动到此路径。最后，它返回上传文件的 URL。

完成

现在您的 WordPress 主题中已经添加了 Dropzone，并允许上传文件。您可以根据需要调整和自定义样式和上传路径。感谢您的阅读。