使用ajax过滤图片库

Question

我正在使用 WordPress，我正在尝试学习如何使用 ajax 自己创建可过滤的图库。为了实现这一目标，我创建了一个带有名为 filterable-gallery-template.php 的模板的页面。该文件位于我的子主题中。在我的页面中，我使用 wpcode 添加了一个 JavaScript 片段，并使用短代码调用它。

我试图做的是在单击按钮时获取类别值，将该值发送到我的 PHP 模板，然后过滤我的图库（我已经使用插件为我的图像添加了类别）。但是，我遇到了 500 错误。我尝试检索 var_dump($category) 的值，并且在第一次访问该页面时仅成功获取一次类别名称。之后，按钮不起作用，我看不到任何图像。这是我的代码，提前感谢您的帮助:)

filterable-gallery-template.php

`<?php
/* Template Name: filterable Gallery */
?>

<nav class="filterable-gallery">
    <ul>
        <li><a class="wp-block-button__link filterable-gallery__btn on">Print</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Webdesign</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Branding</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Illustration</a></li>
    </ul>
</nav>

<div class="gallery">
    <?php
    
   $category = isset($_POST['category']) ? $_POST['category'] : 'Print';
    
    
    echo '<pre>';
    var_dump($category);
    echo '</pre>';
    
    $args = array(
        'numberposts'    => -1,
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
        'post_mime_type' => 'image',
        'post_parent'    => get_the_ID(),
        'post_status'    => null,
        'post_type'      => 'attachment',
        'tax_query'      => array(
            array(
                'taxonomy' => 'attachment_tag',
                'field'    => 'slug',
                'terms'    => $category,
            ),
        ),
    );

    $images = get_posts($args);

    if ($images) {
        foreach ($images as $image) {
            $image_id = $image->ID;
            $title = get_the_title($image_id);
            ?>
            <div class="gallery-item">
                <img src="<?php echo wp_get_attachment_url($image_id); ?>" alt=""/>
                <div class="overlay">
                    <h5><?php echo $title; ?></h5>
                </div>
            </div>
            <?php
        }
    } else {
        echo '<p>Aucune image trouvée avec la catégorie "' . esc_html($category) . '".</p>';
    }
    ?>
</div>
`

Javascript 片段

`jQuery(document).ready(function($) {
    let isActive = document.getElementsByClassName('on');
    let buttons = document.getElementsByClassName('filterable-gallery__btn');

    for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
        buttons[buttonIndex].addEventListener('click', function(event) {
            activer(event);
        });
    }

    function activer(e) {
        let categoryClicked = null;

        if (!e.target.classList.contains('on')) {
            for (let i = 0; i < isActive.length; i++) {
                isActive[i].classList.remove('on');
            }
            e.target.classList.add('on');
            categoryClicked = e.target.innerText.toLowerCase();
        } else {
            return;
        }
        console.log(categoryClicked);
        // Utilisation de jQuery pour simplifier la requête AJAX
        $.ajax({
            type: 'POST',
            url: '/wp-content/themes/twentytwentyone-child/filterable-gallery-template.php',
            dataType: 'html',
            data: {category: categoryClicked },
            success: function(response) {
                console.log(response);
            },
        });
    }
});
`

Answer 1

看看这篇文章。 我认为您错过了一步：WordPress 中的 ajax 路由。 祝你好运！