0

Possuo um código, que carrega posts wordpress via ajax. Funciona muito bem em todos templates. Index, tag, categorias, etc. O que me chama a atenção nesse código é que aparentemente o carregamento é feito através das divs, não sei explicar bem, só sei que apenas com esse código js é possível carregar os posts com ajax apenas clicando no botão Load More. Já fiz vários experimentos, em outros temas e vi que é bem isso mesmo. Pensei que se é com base nas classes/id dos elementos que é feito a chamada dos posts. Então acho que seria possível utilizar esse mesmo código para carregar posts de Querys personalizadas, numa mesma página. Imagine por exemplo, três caixas, que listam posts de 3 categorias diferentes.

Desse jeito aqui: inserir a descrição da imagem aqui Quero reusar esse código para fazer isso ai.

PS: Eu estava pensando... eu conheço o funcionamento do .attr mas não sei como poderia aplica-lo em caso desses. Se o botão que carrega os posts fosse utilizado primeiro para pegar a ID dos boxes, aplica-lo ao código, e carregar os posts (".minha-classe-ajax").attr('id').

Com o código abaixo, aplicado a qualquer tema wordpress, é possível ver o resultado.

jQuery(function($) {
	$body  = jQuery('body');
var load_ajax_new_count = 0;
$("body").on('click', '.ajax-load-button a', function(e) {
    e.preventDefault();
    var $link = $(this);
    var page_url = $link.attr("href");
    $link.addClass('ajax-loader');
    $body.addClass('opt-pagination-loading');
    $('.ajax-pagination-ajax').addClass('ajax-ajaxpagination-active');
    $("<div>").load(page_url, function() {
        var n = load_ajax_new_count.toString();
        var $wrap = $link.closest('.ajax-primary-main').find('.ajax-primary-content');
        var $new = $(this).find('.ajax-primary-content .ajax-post').addClass('animated fadeInUp ajax-poajax-new-' + n);
        var $this_div = $(this);

        $new.hide().appendTo($wrap).fadeIn(400);

        if ($this_div.find('.ajax-load-button').length) {
            $link.closest('.ajax-primary-main').find('.ajax-load-button').html($this_div.find('.ajax-load-button').html());
            $body.removeClass('opt-pagination-loading');
            $('.ajax-pagination-ajax').removeClass('ajax-ajaxpagination-active');


        } else {
            $link.closest('.ajax-primary-main').find('.ajax-load-button').fadeOut('fast').remove();
        }

        if (page_url != window.location) {
            window.history.pushState({
                path: page_url
            }, '', page_url);
        }

        load_ajax_new_count++;

        return false;
    });

});

});
<?php get_header(); ?>
<div class="container">

<div id="box-latest" class="box-container ajax-primary-main">
	<h1 class="box-title">BOX LATEST</h1>
    <div class="ajax-primary-content">
        <?php while ( have_posts() ) : the_post();?>
        <article class="ajax-post">
            <h1 class="post-title">
            	<a itemprop="url" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            	<?php the_title();?>
            	</a>
            </h1>
            <p class="post-meta">
            	<span class="category"><?php the_category();?></span>
            	<span class="date"><?php $post_date = get_the_date(); echo $post_date;?></span>
            	<span class="author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) );?>"><?php echo get_the_author();?></a></span>
            </p>
        </article>
        <?php endwhile;?>
    </div><!-- ajax-primary-content -->
    
    <div id="ajax-pagination" class="ajax-load-button">
        <div class="ajax-pagination-ajax">
            <?php echo $more_link = get_next_posts_link('<span class="pagination-load">Load More</span>'); ?>
        </div>
    </div><!-- #ajax-pagination -->
    
</div><!-- ajax-primary-main -->


</div> <!-- .container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

EXEMPLO EM HTML DA IMAGEM.

	.main-layout {
		margin: 0px auto;
		max-width: 761px;
	}
    .main-box h2,
		.main-box h3 {
			margin: 0;
			padding: 0;
		}

		.box-title {
			padding: 10px;
			margin-left: -10px;
			color: #fff
		}

		#main-box-1 .box-title h3 {
			background:#325
		}
		#main-box-2 .box-title h3 {
			background: #000
		}
		#main-box-3 .box-title h3 {
			background: #333
		}

		.box-title h3 {
			padding: 10px;
		}
		.main-box-title {
			font-size: 16px;
		}
		.main-box-title a {
			text-decoration: none;
		}
		.main-box-title a:hover {
			color: #333
		}
		.main-box {
			max-width: 761px;
			margin: 0px auto;
			margin-bottom: 30px;
		}

		.main-box-loop {
			display: inline-block;
			position: relative;
			vertical-align: top;
			zoom:-1px;
			margin: 0;
			max-width: 32.5%;
		}
		.main-load-more {
			position: relative;
			text-align: center;
		}
		.main-load-more a {
			margin: 10px auto;
			text-decoration: none;
			padding: 10px;
			display: inline-block;
			background: #ddd;
			text-align: center;
		}
	<div class="main-layout">

	<div id="main-box-1" class="main-box">

		<div class="box-title">
			<h3>Esportes</h3>
		</div>

		<div class="main-box-container">

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Vivamus at eleifend leo. Praesent eu ex ligula. </a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Aenean hendrerit pretium odio, nec pretium nisl ornare vitae.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-load-more">
				<a href="#">Load More</a>
			</div>

		</div> <!-- .main-box-container -->

	</div> <!-- #main-box-1 -->


	<div id="main-box-2" class="main-box">

		<div class="box-title">
			<h3>Science</h3>
		</div>

		<div class="main-box-container">

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Sed tristique tempor arcu sit amet facilisis.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Cras accumsan condimentum urna id tincidunt.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Sed sem eros, cursus in dapibus a, viverra id lorem.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-load-more">
				<a href="#">Load More</a>
			</div>

		</div> <!-- .main-box-container -->

	</div> <!-- #main-box-2 -->

	<div id="main-box-3" class="main-box">

		<div class="box-title">
			<h3>Tec</h3>
		</div>

		<div class="main-box-container">

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Aenean eget justo eu turpis auctor gravida. </a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Mauris in metus vitae libero laoreet malesuada vel a turpis.</a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-box-loop">
				<div class="main-box-image">
					<img src="http://via.placeholder.com/250x150">
				</div><!-- .main-box-image -->
				<h2 class="main-box-title">
					<a href="#">Sed tincidunt, arcu quis commodo auctor, purus erat egestas metus, luctus tempor orci quam sed augue. </a>
				</h2>
			</div> <!-- .main-box-loop -->

			<div class="main-load-more">
				<a href="#">Load More</a>
			</div>

		</div> <!-- .main-box-container -->

	</div> <!-- #main-box-3 -->


</div> <!-- .main-layout -->

2
  • O código que você postou está incompleto. Esse JS apenas conta quantos posts foram carregados. Não tem chamada AJAX ali. Hoje a melhor forma de fazer essa chamada é utilizando a REST API. Você busca os posts em json e insere o conteúdo no HTML. Coloca o HTML daquela imagem lá de cima aqui que eu faço um exemplo pra vc... Commented 6/06/2018 às 14:51
  • @RicardoBRGWeb fiz como pediu, adicionei o html da imagem acima. Tá na pergunta e também no codepen. codepen.io/johnquimera/pen/yEaNjL Commented 6/06/2018 às 19:44

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .