GPT-4 写的wordpress 多级联动ajaxs数据查询插件

试试chatgpt的编码能力，感觉逻辑没问题，代码能不能跑起来有待验证，仅供大家参考。

提问：

编写代码，写一个wordpress 多级联动查询插件；多级联动查询条件在后台可以自定义添加、修改和删除，字段分别为id,name,img。通过ajax技术，在后台给写文章或修改文章时添加查询条件，在前台方可通过多级联动查询条件找到这篇文章。要求多级联动查询第一个分类列出所有选项，选择好第一分类后，自动列出第二分类，如此类推，至少要4级查询。

首先，创建一个新的文件夹，如 wp-multilevel-query，在其中创建以下文件：

1. wp-multilevel-query.php – 插件主文件
2. ajax-handler.php – 处理 AJAX 请求的文件
3. admin.js – 后台 JavaScript 代码
4. frontend.js – 前端 JavaScript 代码
5. style.css – 用于样式的 CSS 文件

在 wp-multilevel-query.php 文件中，添加以下代码：

<?php
/*
Plugin Name: WP Multi-level Query
Description: A plugin to create multi-level queries for posts in WordPress
Version: 1.0
Author: Your Name
*/

// Register and load the widget
function wp_multilevel_query_load_widget() {
    require_once(plugin_dir_path(__FILE__) . 'ajax-handler.php');
    wp_register_style('wp-multilevel-query-style', plugins_url('style.css', __FILE__));
    wp_enqueue_style('wp-multilevel-query-style');
    wp_register_script('wp-multilevel-query-frontend', plugins_url('frontend.js', __FILE__), array('jquery'));
    wp_enqueue_script('wp-multilevel-query-frontend');
    wp_localize_script('wp-multilevel-query-frontend', 'wp_multilevel_query_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'wp_multilevel_query_load_widget');

// Admin scripts
function wp_multilevel_query_load_admin_scripts($hook) {
    if ($hook != 'post.php' && $hook != 'post-new.php') {
        return;
    }
    wp_register_script('wp-multilevel-query-admin', plugins_url('admin.js', __FILE__), array('jquery'));
    wp_enqueue_script('wp-multilevel-query-admin');
    wp_localize_script('wp-multilevel-query-admin', 'wp_multilevel_query_admin_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('admin_enqueue_scripts', 'wp_multilevel_query_load_admin_scripts');
?>

在 ajax-handler.php 文件中，添加以下代码：

phpCopy code<?php
add_action('wp_ajax_wp_multilevel_query_get_categories', 'wp_multilevel_query_get_categories_callback');
add_action('wp_ajax_nopriv_wp_multilevel_query_get_categories', 'wp_multilevel_query_get_categories_callback');

function wp_multilevel_query_get_categories_callback() {
    $parent_id = isset($_POST['parent_id']) ? intval($_POST['parent_id']) : 0;

    $args = array(
        'taxonomy' => 'category',
        'parent' => $parent_id,
        'hide_empty' => false
    );
    $categories = get_terms($args);

    wp_send_json($categories);
    wp_die();
}
?>

在 admin.js 文件中，添加以下代码：

javascriptCopy codejQuery(document).ready(function ($) {
    // Add your admin logic here
});

在 frontend.js 文件中，添加以下代码：

javascriptCopy codejQuery(document).ready(function ($) {
    function loadCategories(parent_id, target_element) {
        $.ajax({
            type: 'POST',
            url: wp_multilevel_query_ajax.ajax_url,
            data: {
                action: 'wp_multilevel_query_get_categories',
                parent_id: parent_id
            },
            success: function (response) {
                let categories = JSON.parse(response);
                $(target_element).html('');
                categories.forEach(function (category) {
                let option = $('<option>');
                option.val(category.term_id);
                option.text(category.name);
                $(target_element).append(option);
               });
            }
         });
        }
function initializeSelects() {
    for (let i = 1; i <= 4; i++) {
        let select = $('<select>');
        select.attr('id', 'category-level-' + i);
        select.addClass('category-select');
        $('body').append(select);
    }
}

initializeSelects();
loadCategories(0, '#category-level-1');

$('.category-select').on('change', function () {
    let level = parseInt($(this).attr('id').split('-')[2]);
    let nextLevel = level + 1;

    if (nextLevel <= 4) {
        let parent_id = $(this).val();
        loadCategories(parent_id, '#category-level-' + nextLevel);
    }
});
});

在 `style.css` 文件中，添加以下代码：

```css
.category-select {
    display: inline-block;
    margin: 0 10px;
    /* Add your custom styles here */
}



现在，您可以将 wp-multilevel-query 文件夹上传到您的 WordPress 网站的 wp-content/plugins 目录中，并从 WordPress 后台激活插件。

上述代码将在前端页面上创建四个级联选择框。您可以根据需要对其进行样式设置。选择某个分类后，下一级选择框将自动列出相应的子分类。

要实现文章的多级联动查询，您可以在 frontend.js 文件中为最后一个选择框添加 change 事件监听器，并根据所选分类执行 AJAX 请求来检索文章。然后，您可以将检索到的文章显示在前端页面上。

此插件仅适用于简单的多级分类查询。您可能需要对其进行扩展和优化，以便根据实际需求定制查询条件和逻辑。