定制 Divi 博客模块的过滤器

Question

所以我一直在使用 Divi 和构建器的子主题开发一个 Wordpress 网站。 我修改了我的博客模块以包含自定义帖子类型（使用 ACF 制作）及其自定义字段和分类法。例如：食谱，具有“recipe_label”和“recipe_categories”分类法，“recipe_short-description”等字段等

我的自定义帖子很好地显示在我的页面中。 然而，我现在在为其制作过滤器时遇到了麻烦。我有我的过滤器表单，我尝试使用 javascript、php 制作自定义插件，但无法使任何东西工作得足够好。

食谱页面

有人可以帮助我吗？ （PS：告诉我你需要看什么来帮助我，我可以提供代码片段，但无法访问我的网站，因为它仍然是机密......）

另外，我知道有插件可以完成这项工作，但我无法支付费用，因为大多数所需的功能都是高级的。

谢谢！

我最接近成功的是一个具有永久链接格式的 php 函数，它使用以所选分类法的 id/slug 结尾的基本永久链接（单击另一个分类法时，id/slug 被新的分类法替换）并且生成类别和标签的 Divi 模板。问题是无法选择多个标签、多个类别或类别+标签。

其余的（几个 javascript/ajax - 用于动态过滤器 - 尝试）根本不起作用，在控制台上显示 404 错误。

//下面是初始函数的代码

//filtering buttons
function custom_recipe_filter_query($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    $recipe_labels = isset($_GET['recipe_label']) ? array_map('sanitize_text_field', $_GET['recipe_label']) : array();

    if (!empty($recipe_labels)) {
        $tax_query = array(
           'taxonomy' => 'recipe_label',
            'field'    => 'slug',
            'terms'    => $recipe_labels,
            'operator' => 'IN',
        );

       $query->set('tax_query', array($tax_query));
    }
}

add_action('pre_get_posts', 'custom_recipe_filter_query');

function custom_recipe_rewrite_rule() {
    add_rewrite_rule('^recettes-easy/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
}
add_action('init', 'custom_recipe_rewrite_rule', 10, 0);


//WORKING CODE

//label filters

<div class="isFilterButtonCloud" >
  <div class="isSidebarTitle">
    Filtres
  </div>
  <div class="categoryInputList"> 
    <form method="get" action="<?php echo esc_url(home_url('/recettes-easy')); ?>" id="recipeFilterForm">
         <button type="submit" name="recipe_label" value="fetes" id="fetesBtn" class="isRecipeFilterBtn">
            Fêtes
         </button> 
           <button type="submit" name="recipe_label" value="facile" id="facileBtn" class="isRecipeFilterBtn">
             Facile
           </button> 
         <button type="submit" name="recipe_label" value="rapide" id="rapideBtn" class="isRecipeFilterBtn">
           Rapide
         </button> 
          <button type="submit" name="recipe_label" value="epice" id="epiceBtn" class="isRecipeFilterBtn">
           Épicé
         </button> 
         <button type="submit" name="recipe_label" value="vegetarien" id="vegetarienBtn" class="isRecipeFilterBtn">
           Végétarien
          </button> 
            <button type="submit" name="recipe_label" value="sans-gluten" id="sansGlutenBtn" class="isRecipeFilterBtn">
             Sans gluten
           </button> 
           <button type="submit" name="recipe_label" value="sans-lactose" id="sansLactoseBtn" class="isRecipeFilterBtn">
              Sans lactose
           </button> 
           <button type="submit" name="recipe_label" value="sans-sucre" id="sansSucreBtn" class="isRecipeFilterBtn">
              Sans sucre
           </button> 
           <button type="submit" name="recipe_label" value="cuisine-du-fenua" id="cuisineDuFenuaBtn" class="isRecipeFilterBtn">
              Cuisine du fenua
           </button> 
           <button type="submit" name="recipe_label" value="cuisine-du-monde" id="cuisineDuMondeBtn" class="isRecipeFilterBtn">
              Cuisine du monde
           </button>
    </form>
  </div>
</div>

<script>
    // Get all checkboxes in the form
    var checkboxes = document.querySelectorAll('#recipeFilterForm input[type=checkbox]');

    // Add an event listener to each checkbox
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('change', function(e) {
            // Remove 'active' class from all checkboxes
            for (var j = 0; j < checkboxes.length; j++) {
                checkboxes[j].classList.remove('active');
            }

            // Add 'active' class to the clicked checkbox
            if (e.target.checked) {
                e.target.classList.add('active');
                
                // Redirect to the new URL when a checkbox is clicked
                var base_url = "https://www.easymarket.pf/recipe_categorie/";
                window.location.href = base_url + e.target.id;
            }
        });
    }
  
    // Get all buttons in the form
    var buttons = document.querySelectorAll('.isRecipeFilterBtn');

    // Add an event listener to each button
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function(e) {
            // Remove 'active' class from all buttons
            for (var j = 0; j < buttons.length; j++) {
                buttons[j].classList.remove('active');
            }

            // Add 'active' class to the clicked button
            e.target.classList.add('active');
        });
    }
</script>

//category filters

<form id="recipeFilterForm" method="get" action="<?php echo esc_url(home_url('/recettes-easy')); ?>">
<div class="isCategoryCheckboxes">
  <div class="isSidebarTitle">
    Catégories
  </div>
  <div class="categoryInputList"> 
    <nobr>
      <label for="snacking">
        <input type="checkbox" id="snacking"> 
        Snacking
      </label>
    </nobr> 
    <nobr>
      <label for="entree">
        <input type="checkbox" id="entree"> 
        Entrée
      </label>
    </nobr> 
    <nobr>
      <label for="plat">
        <input type="checkbox" id="plat"> 
        Plat
      </label>
    </nobr> 
    <nobr>
      <label for="dessert">
        <input type="checkbox" id="dessert"> 
        Dessert
      </label>
    </nobr> 
    <nobr>
      <label for="boissons">
        <input type="checkbox" id="boissons"> 
        Boissons
      </label>
    </nobr>
  </div>
</div>
</form>

//filtering buttons
function custom_recipe_filter_query($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    $recipe_labels = isset($_GET['recipe_label']) ? array_map('sanitize_text_field', $_GET['recipe_label']) : array();

    if (!empty($recipe_labels)) {
        $tax_query = array(
           'taxonomy' => 'recipe_label',
            'field'    => 'slug',
            'terms'    => $recipe_labels,
            'operator' => 'IN',
        );

       $query->set('tax_query', array($tax_query));
    }
}

add_action('pre_get_posts', 'custom_recipe_filter_query');

function custom_recipe_rewrite_rule() {
    add_rewrite_rule('^recettes-easy/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
    add_rewrite_rule('^recipe_label/([^/]*)/?', 'index.php?recipe_label=$matches[1]', 'top');
}
add_action('init', 'custom_recipe_rewrite_rule', 10, 0);

Answer 1

在我看来 pre_get_posts 操作在 divi 上不起作用