Найти результат пользовательского типа записи на той же странице шаблона.

Вопрос или проблема

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>">
<div class="row">
<div class="col-md-3">Ключевое слово для поиска:</div>
<div class="col-md-3"><input type="text" placeholder="Поиск продукта..."></div>
<div class="col-md-2"><input type="submit" id="searchsubmit" value="Поиск"> <input type="hidden" name="post_type" value="product"></div>
</div>
<div class="row">
<lable for="r1"><input type="radio" name="product-filter" id="r1" checked="chcecked"> Любые слова</lable>
<lable for="r2"><input type="radio" name="product-filter" id="r2"> Все слова</lable>
<lable for="r3"><input type="radio" name="product-filter" id="r3"> Точная фраза</lable>
</div>
<em>Термин поиска должен содержать минимум 3 символа и максимум 20 символов</em>
</form>

add_action('init', 'product_register');
function product_register() {
    $args = array(
    'label' => __('Продукты'),
    'singular_label' => __('Продукт'),
    'public' => true,
    'show_ui' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => true,
    'supports' => array('title', 'editor', 'thumbnail')
    );

    register_post_type('product', $args);
}
add_action('admin_init', 'admin_init');
register_taxonomy('catalog', array('product'),
    array('hierarchical' => true,
    'label' => 'Каталоги',
    'singular_label' => 'Каталог',
    'rewrite' => true)
);

function admin_init() {
    add_meta_box('prodInfo - meta', 'Опции продукта', 'meta_options', 'product', 'side', 'low');
}
function meta_options() {
    global $post;
    $custom = get_post_custom($post -> ID);
    $price = $custom['price'][0];
    echo '<label> Цена: </label><input type="text" name="price" value="'. $price .'"/ > ';
}
function save_price() {
        global $post;
        update_post_meta($post->ID, 'price', $_POST['price']);
}
add_action('save_post', 'save_price');

archive-(cpt).php

taxonomy-(cpt).php

.

Ответ или решение

Для того чтобы настроить поиск и отображение кастомных типов записей (Custom Post Type, CPT) в WordPress, требуется определенный подход и знание о том, как WordPress работает с шаблонами и AJAX технологиями. Рассмотрим пошагово, как добиться этого:

1. Теория

WordPress предоставляет мощную систему для работы с кастомными типами записей, позволяющую разработчикам создавать, изменять и управлять такими записями. Ваша задача состоит в создании формы для поиска, которая отправляет запрос на сервер и отображает результаты на той же странице. Чтобы это осуществить, можно использовать AJAX, который позволяет загружать данные в фоне без перезагрузки страницы. Это не только улучшает пользовательский опыт, но и позволяет более гибко управлять динамическим контентом.

Для создания шаблонов отображения используются файлы с именами, соответствующими вашим типам записей и таксономиям, такие как single-(cpt).php и archive-(cpt).php. Это дает WordPress возможность понимать, какой шаблон использовать для отображения соответствующих данных.

2. Пример

PHP и WordPress часть

Шаблон поиска, предоставляемый вами, имеет небольшой недостаток в action формы. Она должна быть направлена на домашнюю страницу, а не на другой сайт. Исправим это:

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div class="row">
        <div class="col-md-3">Search Keyword:</div>
        <div class="col-md-3"><input type="text" name="s" placeholder="Search Product..."></div>
        <div class="col-md-2">
            <input type="submit" id="searchsubmit" value="Search">
            <input type="hidden" name="post_type" value="product">
        </div>
    </div>
    <div class="row">
        <label for="r1"><input type="radio" name="product-filter" id="r1" value="any" checked="checked"> Any Words</label>
        <label for="r2"><input type="radio" name="product-filter" id="r2" value="all"> All Words</label>
        <label for="r3"><input type="radio" name="product-filter" id="r3" value="exact"> Exact Phrase</label>
    </div>
    <em>Search term must be a minimum of 3 characters and a maximum of 20 characters</em>
</form>

Перейдем к созданию кастомного типа записи:

add_action('init', 'product_register');
function product_register() {
    $args = array(
        'label' => __('Products'),
        'singular_label' => __('Product'),
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'rewrite' => array('slug' => 'products'),
        'supports' => array('title', 'editor', 'thumbnail')
    );

    register_post_type('product', $args);
}

Создание таксономии для категорий продуктов:

register_taxonomy('catalog', array('product'), array(
    'hierarchical' => true,
    'label' => 'Catalogs',
    'singular_label' => 'Catalog',
    'rewrite' => true
));

AJAX часть

Для использования AJAX в WordPress, сначала добавьте следующий скрипт в файл functions.php:

function my_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('ajax-script', get_template_directory_uri() . '/ajax-script.js', array('jquery'), null, true);
    wp_localize_script('ajax-script', 'my_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
    ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Создайте файл ajax-script.js в корневой директории вашей темы:

jQuery(document).ready(function($) {
    $('#searchform').submit(function(e) {
        e.preventDefault();
        var searchKeyword = $('input[name="s"]').val();
        var filter = $('input[name="product-filter"]:checked').val();

        $.ajax({
            url: my_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'get_search_results',
                keyword: searchKeyword,
                filter: filter
            },
            success: function(response) {
                $('#search-results').html(response);
            }
        });
    });
});

Добавьте обработчик AJAX на серверной стороне:

add_action('wp_ajax_get_search_results', 'get_search_results');
add_action('wp_ajax_nopriv_get_search_results', 'get_search_results');

function get_search_results() {
    $keyword = $_POST['keyword'];
    $filter = $_POST['filter'];

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
        's' => $keyword,
    );

    // Примените нужный фильтр в зависимости от выбранного значения
    if ($filter == 'all') {
        $args['s'] = '"' . implode(' ', explode(' ', $keyword)) . '"';
    } elseif ($filter == 'exact') {
        $args['s'] = '"' . $keyword . '"';
    }

    $query = new WP_Query($args);

    if($query->have_posts()) {
        while($query->have_posts()) : $query->the_post();
            echo '<div>' . get_the_title() . '</div>';
        endwhile;
    } else {
        echo '<p>No products found with the provided search criteria.</p>';
    }

    wp_die();
}

3. Применение

Теперь у вас есть форма поиска, которая использует AJAX для получения результатов и отображает их на той же странице в блоке, который вы можете добавить на страницу шаблона, например, так:

<div id="search-results"></div>

Этот подход позволяет оставаться на той же странице и получать результаты поиска без необходимости перезагрузки страницы, что значительно улучшает взаимодействие пользователей с вашим сайтом. Результаты отображаются в HTML-блоке #search-results, что позволяет вам стилизовать их так, как вам нужно.

Заключение

При правильном подходе к реализации, использование кастомных типов записей и AJAX в WordPress значительно повышает удобство и функциональность сайта, предоставляя пользователям возможность получить доступ к нужной информации быстро и удобно.