Создание вывода постов рубрики по AJAX

Предисловие

Во время написания прошлой статьи про аккордеон меню, я наткнулся на функцию wp_dropdown_categories(). Она показалась мне очень интересной, но для реализации аккордеона мне не подходила. И вот в новой статье я решил рассказать о том, как создать выпадающее меню рубрик и вызывать несколько статей по ajax.

Функция wp_dropdown_categories()

Данная функция возвращает html код выпадающего списка с категориями. Подробно вы можете прочитать про эту функцию и её параметры в кодексе. Я остановлюсь лишь на некоторых параметрах.

Exclude

Строка, содержащая id рубрики, разделённые через запятую, которые нужно исключить из вывода, например, 1 («Без рубрики»).

Hierarchical

Выводить как дерево или как отдельные элементы. Я выбрал сплошным списком (0)

Name, id, class

Name – это то значение атрибута name у select, id и class соответственно. По id мы будем ловить события в js. Class form-control я добавлю, чтобы выглядело по bootstrap.

Параметры и вызов функции

У меня получился следующий код

$args = array(
	'show_option_all'    => '',
	'show_option_none'   => '',
	'orderby'            => 'ID',
	'order'              => 'ASC',
	'show_last_update'   => 0,
	'show_count'         => 0,
	'hide_empty'         => 1,
	'child_of'           => 0,
	'exclude'            => '1',
	'echo'               => 1,
	'selected'           => 0,
	'hierarchical'       => 0,
	'name'               => 'cat',
	'id'                 => 'name',
	'class'              => 'form-control',
	'depth'              => 0,
	'tab_index'          => 0,
	'taxonomy'           => 'category',
	'hide_if_empty'      => false,
	'value_field'        => 'term_id', 
	'required'           => false,
); 

 wp_dropdown_categories($args);

Функцию с параметрами можно вывести в шаблоне страницы или обернуть в шорткод и вызывать, например, на странице записи.

JS jQuery для вызова AJAX

Вот код для вызова функции по AJAX

<script>
jQuery('document').ready(function(){        
        jQuery('#name').on('change', function(){
            var e = jQuery(this).val();
            console.log('Не смотри сюда');
            jQuery.post('/wp-admin/admin-ajax.php', {'action':'pcht_posts', 'param':e}, function(response){
                jQuery('.access').html(response);
            });
        });       
    }
);
</script>

Обратите внимание, что для вывода контента у вас на странице должен быть блок с классом .access, ну или поменяйте его на тот класс или id вам нужно в js коде. Если вы хотите больше разобраться в ajax в wordpess или в mvc, прочитайте в статьях ajax wp и ajax mvc php

Функция для вызова поста в functions.php

// Получение постов по ajax pc-health.me
add_action('wp_ajax_pcht_posts', 'pcht_posts');
add_action('wp_ajax_nopriv_pcht_posts', 'pcht_posts');
function pcht_posts($postID){
    $catID=intval( $_POST['param'] );
    ?>

    <?php

    $args = array(
        'cat'=>$catID,
		'showposts'=>'2'
    );
	
    $recent = new WP_Query($args);

    while ( $recent->have_posts() ) : $recent->the_post();?>

        <div class="modal-header">
            <?php the_title( '<h2 class="modal-title text-center">', '</h2>' ); ?>
        </div>
		
        <div class="row loader">
            <div class="col-lg-12" style="padding: 0 30px;">
                <?php //the_content(); 
					the_excerpt();
				?>
            </div>
			<a href="<?php echo get_permalink(); ?>">Читать полностью</a>
        </div>





    <?php endwhile; ?>
    <?php
    wp_die();
}

Это довольно простой код, подобный я уже рассматривал в статье про wp ajax

Пример