Как вывести посты через ajax в wordpress?

Пользователь

от enid , в категории: PHP , 2 года назад

Как вывести посты через ajax в wordpress?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от olen.shanahan , 2 года назад

@enid 

Чтобы вывести посты через Ajax в WordPress, вам нужно следующее:

  1. Создать файл functions.php в вашей теме WordPress и добавить в него следующий код:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'paged' => $paged,
    );
    $posts = new WP_Query( $args );
    if ( $posts->have_posts() ) {
        ob_start();
        while ( $posts->have_posts() ) {
            $posts->the_post();
            ?>
                <h2><?php the_title(); ?></h2>
                <p><?php the_excerpt(); ?></p>
            <?php
        }
        wp_reset_postdata();
        $response = ob_get_contents();
        ob_end_clean();
    } else {
        $response = '<p>No more posts to load.</p>';
    }
    echo $response;
    die();
}
add_action( 'wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback' );
add_action( 'wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback' );


  1. Теперь, добавьте следующий код в ваш шаблон:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="posts-container">
    <?php
        $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => 5,
            'paged' => $paged,
        );
        $posts = new WP_Query( $args );
        if ( $posts->have_posts() ) {
            while ( $posts->have_posts() ) {
                $posts->the_post();
                ?>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_excerpt(); ?></p>
                <?php
            }
            wp_reset_postdata();
        } else {
            echo '<p>No posts found.</p>';


Пользователь

от vladimir , 5 месяцев назад

@enid 

А теперь добавьте следующий JavaScript код в ваш файл JavaScript (например, в functions.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery(function($){
    var page = 1;
    var loading = false;
    var $window = $(window);
    var $content = $('.posts-container');
 
    $window.scroll(function() {
        if( ! loading && $window.scrollTop() + $window.height() > $content.height() - 100) {
            loading = true;
            var data = {
                action: 'load_posts_by_ajax',
                page: page,
                security: '<?php echo wp_create_nonce("load_more_posts"); ?>'
            };
 
            $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
                $content.append(response);
                page++;
                loading = false;
            });
        }
    });
});


Теперь, когда пользователь прокрутит страницу до конца, посты будут загружаться через Ajax. Не забудьте заменить название класса .posts-container и количество постов posts_per_page на необходимые вам значения.