Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Chirlison

Carregar a página category com ajax

Por , em Desenvolvimento com Wordpress

Recommended Posts

Chirlison    1

Chirlison
Postado

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();

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

A página que recebe os dados, a ajax.php, não precisa ter cabeçalhos, ela só precisa ter os dados que serão carregados, sobre a categoria você pode passar o ID delas através do clicks e listas os posts delas por aqui: https://developer.wordpress.org/reference/functions/get_category/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento com Wordpress
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito