Publicado em 29 de jan.

Carregar a página category com ajax

#desenvolvimento-com-wordpress #ajax wordpress #carregar posts ajax #category ajax

Bom dia a todos!

Pessoal estou desenvolvendo um tema em Wordpress.

Ao entrar no site são carregados 2 posts via ajax com um efeito fadeIn.

Depois que carrega os dois posts, aparece um botão "Carregar mais posts".

Ao clicar no botão "Carregar mais posts", são carregados mais dois posts e assim sucessivamente até que não aja mais posts para serem carregados.

No tema que estou desenvolvendo tem uma sidebar com categorias, nuvens de tags e arquivos.

Alguém sabe me dizer como faço para que quando eu clicar em uma categoria eu seja redirecionado para a página category e sejam carregados apenas os posts da categoria que eu cliquei.

Ex.: Cliquei na categoria Tecnologia.

A página category seja carregada com ajax apenas com os posts da categoria Tecnologia.

Desde já agradeço a todos que tentarem me ajudar!

Código que faz o carregamento da index do tema com ajax.

Nome do arquivo: ajax.php

<?php
 //FUNÇÃO QUE CARREGA OS POSTS
 function load_posts(){

 //VARIÁVEIS DA QUERY
 $numPosts = (isset($_POST['numPosts']) ? $_POST['numPosts'] : 0);
 $page = (isset($_POST['page']) ? $_POST['page'] : 0);

 $wp_query = new WP_Query(array(
 'posts_per_page'=>$numPosts,
 'paged'=>$page,
 'post_status'=>'publish',
 'post_type'=>'post'
 ));

 //LOOP
 while($wp_query->have_posts()):
 $wp_query->the_post();?>

 <article class="lastnews_destaque cf">
 <div class="content-last-news cf">
 <header>
 <div class="capaaqui">
 <?php if(has_post_thumbnail()): ?>
 <a href="<?php the_permalink();?>">
 <?php the_post_thumbnail('medium', array('class'=>'post_miniatura'));?>
 </a>
 <?php endif;?>
 </div>
 <h1><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h1>
 </header>

 <?php the_excerpt();?>

 <div class="leia_mais"><a href="<?php the_permalink();?>" title="<?php the_title();?>">Ler Mais</a></div>
 </div>
 <footer class="footer-last-news">
 <ul>
 <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));?>"><?php the_author();?></a></li>
 <li><time><?php echo get_the_date();?></time></li>
 <li><?php the_category('/ ');?></li>
 </ul>
 </footer>
 </article>
 <?php endwhile;

 //LIMPA A QUERY DA MEMÓRIA
 wp_reset_query();

 //FINALIZA O SCRIPT
 wp_die();
 }

 add_action('wp_ajax_load_posts','load_posts');
 add_action('wp_ajax_nopriv_load_posts','load_posts');

	Página que recebe os dados vindos do ajax.php

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
	<div class="tudo container cf">

 <section class="lastnews">
 <div class="posts-content">

 </div>
 <div class="btn_carregar_mais">Carregar mais postagens</div>

 </section> <!-- FECHA LASTEWS -->
 </div>

 </body>
</html>

	Código que faz a requisição ajax.

//VARIÁVEIS

 var page = 1;
 var loading = true;
 var $window = $(window);
 var $content = $('.posts-content');

 //FUNÇÃO QUE BUSCA OS POSTS
 var load_posts = function(){
 $('.btn_carregar_mais').hide();
 $.ajax({
 type: 'POST',
 data:{action:'load_posts', numPosts: 2, page: page},
 dataType: 'html',
 url:'./wp-admin/admin-ajax.php',
 beforeSend: function () {
 $content.append('<div id="temp_load" class="cssload-loader"></div>');
 },
 success:function(data){
 //TRANSFORMANDO A DATA EM OBJETO
 var $data = $(data);

 //VERIFICA SE EXISTE DADOS
 if($data.length){
 //OCULTA O CONTEÚDO
 $data.hide();

 //INSERE NA DIV O CONTEÚDO DA DATA
 $content.append($data);

 //DÁ O fadeIn NO CONTEÚDO E OCULTA A DIV #temp_load
 $data.fadeIn(500, function(){
 $('#temp_load').remove();
 $('.btn_carregar_mais').fadeIn();
 loading = false;
 });
 }else{
 $('#temp_load').remove();
 }
 }
 });
 };

 $('.btn_carregar_mais').on('click', function(){
 $(this).hide();
 loading = true;
 page++;
 load_posts();
 });

 //CARREGA OS POSTS
 load_posts();

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<?php //FUNÇÃO QUE CARREGA OS POSTS function load_posts(){ //VARIÁVEIS DA QUERY $numPosts = (isset($_POST['numPosts']) ? $_POST['numPosts'] : 0); $page = (isset($_POST['page']) ? $_POST['page'] : 0); $wp_query = new WP_Query(array( 'posts_per_page'=>$numPosts, 'paged'=>$page, 'post_status'=>'publish', 'post_type'=>'post' )); //LOOP while($wp_query->have_posts()): $wp_query->the_post();?> <article class="lastnews_destaque cf"> <div class="content-last-news cf"> <header> <div class="capaaqui"> <?php if(has_post_thumbnail()): ?> <a href="<?php the_permalink();?>"> <?php the_post_thumbnail('medium', array('class'=>'post_miniatura'));?> </a> <?php endif;?> </div> <h1><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h1> </header> <?php the_excerpt();?> <div class="leia_mais"><a href="<?php the_permalink();?>" title="<?php the_title();?>">Ler Mais</a></div> </div> <footer class="footer-last-news"> <ul> <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));?>"><?php the_author();?></a></li> <li><time><?php echo get_the_date();?></time></li> <li><?php the_category('/ ');?></li> </ul> </footer> </article> <?php endwhile; //LIMPA A QUERY DA MEMÓRIA wp_reset_query(); //FINALIZA O SCRIPT wp_die(); } add_action('wp_ajax_load_posts','load_posts'); add_action('wp_ajax_nopriv_load_posts','load_posts'); Página que recebe os dados vindos do ajax.php

<html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="tudo container cf"> <section class="lastnews"> <div class="posts-content"> </div> <div class="btn_carregar_mais">Carregar mais postagens</div> </section>  </div> </body> </html> Código que faz a requisição ajax.