Использование AJAX для категорий и циклов WordPress

Question

Использование AJAX для категорий и циклов WordPress

8 дек. 2011 г., 08:53:45

Просмотры: 30.2K

Голосов: 3

Я хочу, чтобы мой index.php был простой страницей с горизонтальным списком названий категорий вверху. Но вместо того, чтобы страница перезагружалась со списком постов в этом цикле каждый раз при клике на категорию, я хочу, чтобы набор постов из каждой категории отображался мгновенно после каждого клика на другую категорию. Возможно ли это в WordPress?

LND

31

ajax

Все ответы на вопрос

Комментарии

куда вставляется последний фрагмент кода? Сейчас у меня всё работает без него, и страница категории загружается, но я хочу добавить последний бит кода, так как он мне понадобится для отображения постов. Спасибо.

User

21 дек. 2011 г. 14:05:00

Я знаю, что это старый вопрос, но у него безумное количество просмотров — 9k, и на него ссылаются, как в этом вопросе. Возможно, стоит обновить ответ :)

kaiser

11 нояб. 2014 г. 00:03:00

Пропущен echo в строке var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

Sherbrow

14 дек. 2014 г. 16:14:44

Я знаю, что это очень старый пост... но как мы можем сделать это с пользовательскими записями и пользовательскими таксономиями? D:

artist learning to code

30 янв. 2019 г. 03:55:22

Chris_O 20.6K · Answer 1 · 2011-12-11T06:08:48Z

Да, это возможно в WordPress, но я бы не использовал index.php, а создал бы пользовательский шаблон front-page.php, затем создал страницу с названием "Главная" и установил её в качестве главной страницы в настройках (options-general).

Для меню категорий:

<?php
$categories = get_categories(); ?>

<ul id="category-menu">
    <?php foreach ( $categories as $cat ) { ?>
    <li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>
    <?php } ?>
</ul>

Здесь мы вызываем нашу jQuery AJAX-функцию при клике на категорию и передаём ID категории в функцию jQuery.

HTML-контейнер, куда будут подгружаться записи через AJAX:

<div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>" alt="Загрузка" title="Идёт загрузка..." /></div>
<div id="category-post-content"></div>

jQuery-функция, вызываемая через обработчик onclick в пунктах меню:

<script>
function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("current");
    jQuery("a.ajax").addClass("current"); //добавляет класс current к активному пункту меню для стилизации через CSS
    jQuery("#loading-animation").show();
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "load-filter", cat: catID },
        success: function(response) {
            jQuery("#category-post-content").html(response);
            jQuery("#loading-animation").hide();
            return false;
        }
    });
}
</script>

PHP-функция WordPress для возврата записей из выбранной категории:

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
         $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'
    );

    $posts = get_posts( $args );

    ob_start ();

    foreach ( $posts as $post ) {
    setup_postdata( $post ); ?>

    <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
        <h1 class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

        <div id="post-content">
        <?php the_excerpt(); ?>
        </div>

   </div>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
   }

Мы используем буферизацию вывода, что помогает предотвратить сбои в работе функции, которые иногда случаются при использовании AJAX в WordPress.