寻求可实现嵌套JSON分页卡片展示与AJAX搜索的WordPress插件及API数据展示方法

你要的是能从指定URL拉取嵌套JSON数据、以分页卡片形式展示，同时支持AJAX搜索的WordPress方案对吧？确实wpDataTable主打表格展示，完全匹配不了你的卡片需求，我给你分插件方案和自定义开发方案两种方向，你可以根据自己的技术能力和定制需求来选：

一、插件方案（低代码/无代码） #

如果不想写太多代码，这些插件能帮你快速实现需求：

• Toolset Views：这是灵活性很高的付费插件，支持对接外部JSON/API数据源，能通过可视化编辑器自定义卡片布局，自带分页和AJAX搜索功能。处理嵌套JSON时，它支持直接取深层字段（比如item.details.title这种嵌套路径），不用手动解析结构，适合对定制化有要求但不想写代码的场景。
• Elementor Pro + Dynamic.ooo：如果你平时用Elementor建站，这个组合很顺手。Elementor Pro的动态内容模块配合Dynamic.ooo插件，能直接从URL拉取JSON数据，再用Elementor的卡片组件（比如改造Posts Widget模板，或用自定义HTML模块）渲染成卡片样式。分页和AJAX搜索可以通过Elementor内置功能或Dynamic.ooo的扩展实现，Dynamic.ooo有免费版能覆盖基础需求。
• Pods：免费开源的自定义内容插件，虽然主打自定义Post Type，但也支持对接外部JSON数据源。你可以用它的模板系统搭建卡片布局，配合Pods的分页组件，再结合SearchWP实现AJAX搜索。处理嵌套JSON需要研究下它的字段映射规则，用短代码或模板标签就能取到深层数据。

二、自定义开发方案（完全可控） #

如果插件的预设功能满足不了你的定制需求，或者你想完全掌控样式和交互逻辑，自己写代码是最灵活的选择，核心步骤如下：

1. 基础短代码实现卡片渲染与分页 #

先创建一个自定义短代码，负责拉取JSON、解析嵌套结构、渲染卡片和分页：

function custom_json_cards_shortcode($atts) {
    // 解析短代码参数
    $atts = shortcode_atts([
        'json_url' => '',
        'per_page' => 6
    ], $atts);

    if (empty($atts['json_url'])) {
        return '<p class="text-red-500">请提供有效的JSON数据源URL</p>';
    }

    // 拉取并解析JSON数据
    $response = wp_remote_get($atts['json_url']);
    if (is_wp_error($response)) {
        return "<p class='text-red-500'>数据请求失败：{$response->get_error_message()}</p>";
    }
    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return '<p class="text-red-500">JSON数据解析失败</p>';
    }

    // 提取嵌套数据（假设核心数据在items字段下，可根据实际结构调整）
    $items = isset($data['items']) ? $data['items'] : $data;
    $total_items = count($items);
    $paged = max(1, get_query_var('paged'));
    $total_pages = ceil($total_items / $atts['per_page']);
    $paged_items = array_slice($items, ($paged - 1) * $atts['per_page'], $atts['per_page']);

    // 渲染卡片容器
    $output = '<div class="json-cards-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8">';
    foreach ($paged_items as $item) {
        // 取嵌套字段，根据你的JSON结构调整路径
        $title = isset($item['details']['title']) ? $item['details']['title'] : '无标题';
        $desc = isset($item['details']['description']) ? $item['details']['description'] : '';
        $img = isset($item['media']['thumbnail']) ? $item['media']['thumbnail'] : '';

        $output .= <<<HTML
        <div class="json-card border rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
            {$img ? "<img src='{$img}' alt='{$title}' class='w-full h-48 object-cover'>" : ''}
            <div class="p-4">
                <h3 class="text-xl font-bold mb-2">{$title}</h3>
                <p class="text-gray-600">{$desc}</p>
            </div>
        </div>
HTML;
    }
    $output .= '</div>';

    // 添加分页链接
    $pagination_args = [
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => $paged,
        'total' => $total_pages,
        'prev_text' => '← 上一页',
        'next_text' => '下一页 →',
        'mid_size' => 2
    ];
    $output .= "<div class='pagination flex justify-center mt-8'>" . paginate_links($pagination_args) . '</div>';

    return $output;
}
add_shortcode('json_cards', 'custom_json_cards_shortcode');

2. 实现AJAX搜索功能 #

在前端添加搜索框，配合后端AJAX接口实现实时过滤：

前端JS（放到主题的js文件或自定义HTML模块）

jQuery(document).ready(function($) {
    // 监听搜索框输入
    $('#json-search-input').on('keyup', function() {
        const searchTerm = $(this).val().trim();
        const jsonUrl = $('#json-cards-container').data('json-url'); // 从容器获取数据源URL

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'json_card_search',
                search_term: searchTerm,
                json_url: jsonUrl
            },
            success: function(res) {
                if (res.success) {
                    $('#json-cards-container').html(res.data);
                } else {
                    $('#json-cards-container').html(`<p class='text-red-500 text-center'>${res.data}</p>`);
                }
            },
            error: function() {
                $('#json-cards-container').html('<p class="text-red-500 text-center">搜索请求失败</p>');
            }
        });
    });
});

后端AJAX处理（放到functions.php或自定义插件）

function custom_json_card_search() {
    // 校验参数并安全处理
    if (!isset($_POST['json_url']) || empty($_POST['json_url'])) {
        wp_send_json_error('缺少数据源URL');
    }
    $searchTerm = sanitize_text_field($_POST['search_term']);
    $jsonUrl = sanitize_text_field($_POST['json_url']);

    // 拉取并解析JSON数据（和短代码逻辑一致）
    $response = wp_remote_get($jsonUrl);
    if (is_wp_error($response)) {
        wp_send_json_error('数据请求失败');
    }
    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        wp_send_json_error('JSON解析失败');
    }
    $items = isset($data['items']) ? $data['items'] : $data;

    // 过滤匹配数据（这里以标题和描述为例，可根据嵌套字段调整）
    $filteredItems = array_filter($items, function($item) use ($searchTerm) {
        $title = isset($item['details']['title']) ? strtolower($item['details']['title']) : '';
        $desc = isset($item['details']['description']) ? strtolower($item['details']['description']) : '';
        return empty($searchTerm) || str_contains($title, strtolower($searchTerm)) || str_contains($desc, strtolower($searchTerm));
    });

    // 重新渲染过滤后的卡片
    $output = '';
    foreach ($filteredItems as $item) {
        $title = isset($item['details']['title']) ? $item['details']['title'] : '无标题';
        $desc = isset($item['details']['description']) ? $item['details']['description'] : '';
        $img = isset($item['media']['thumbnail']) ? $item['media']['thumbnail'] : '';

        $output .= <<<HTML
        <div class="json-card border rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
            {$img ? "<img src='{$img}' alt='{$title}' class='w-full h-48 object-cover'>" : ''}
            <div class="p-4">
                <h3 class="text-xl font-bold mb-2">{$title}</h3>
                <p class="text-gray-600">{$desc}</p>
            </div>
        </div>
HTML;
    }

    wp_send_json_success($output);
}
add_action('wp_ajax_json_card_search', 'custom_json_card_search');
add_action('wp_ajax_nopriv_json_card_search', 'custom_json_card_search'); // 允许未登录用户搜索

自定义开发注意事项 #

• 代码建议放到自定义插件里，不要直接写在主题的functions.php，避免主题更新丢失代码
• 所有输出到页面的内容都要用esc_html()/esc_url()等函数处理，防止XSS攻击
• 可以用Tailwind CSS或自定义CSS调整卡片样式，适配你的网站风格

备注：内容来源于stack exchange，提问作者Edvin Seddighi