larinmj

loadmore

Nov 19th, 2019
135
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function my_load_more_scripts() {
  2.  
  3.     global $wp_query;
  4.  
  5.     // Na maioria dos casos, ele já está incluído na página e esta linha pode ser removida
  6.     wp_enqueue_script('jquery');
  7.  
  8.     // registra nosso script principal, mas ainda não o enfileiramos
  9.     wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
  10.  
  11.    
  12.     // temos que passar parâmetros para o script myloadmore.js, mas podemos obter os valores dos parâmetros apenas no PHP
  13.     // você pode definir variáveis ​​diretamente no seu HTML, mas eu decidi que a maneira mais adequada é wp_localize_script
  14.     wp_localize_script( 'my_loadmore', 'loadmore_params', array(
  15.         'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
  16.         'posts' => json_encode( $wp_query->query_vars ), // tudo sobre seu loop está aqui
  17.         'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  18.         'max_page' => $wp_query->max_num_pages
  19.     ) );
  20.  
  21.     wp_enqueue_script( 'my_loadmore' );
  22. }
  23.  
  24. add_action( 'wp_enqueue_scripts', 'my_load_more_scripts' );
  25.  
  26.  
  27. function loadmore_ajax_handler(){
  28.  
  29.     // prepara nossos argumentos para a consulta
  30.     $args = json_decode( stripslashes( $_POST['query'] ), true );
  31.     $args['paged'] = $_POST['page'] + 1; // precisamos que a próxima página seja carregada
  32.     $args['post_status'] = 'publish';
  33.  
  34.     // é sempre melhor usar WP_Query, mas não aqui
  35.     query_posts( $args );
  36.  
  37.     if( have_posts() ) :
  38.  
  39.         // executa o loop
  40.         while( have_posts() ): the_post();
  41.  
  42.             // analise o código do seu tema como as postagens são inseridas, mas você pode usar seu próprio HTML, é claro         
  43.             //get_template_part( 'template-parts/post/content', get_post_format() );
  44.             // for the test purposes comment the line above and uncomment the below one
  45.              the_title();
  46.  
  47.  
  48.         endwhile;
  49.  
  50.     endif;
  51.     die; // here we exit the script and even no wp_reset_query() required!
  52. }
  53.  
  54.  
  55.  
  56. add_action('wp_ajax_loadmore', 'loadmore_ajax_handler'); // wp_ajax_{action}
  57. add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler'); // wp_ajax_nopriv_{action}
  58.  
  59. <!-------------------------------------------------------------------------------------------------------------------------------->
  60.  
  61. <script>
  62. jQuery(function($){ // use o código jQuery dentro disso para evitar o erro "$ is not defined"
  63.     $('.loadmore').click(function(){
  64.  
  65.         var button = $(this),
  66.             data = {
  67.             'action': 'loadmore',
  68.             'query': loadmore_params.posts, // é assim que obtemos os parâmetros da função
  69.             'page' : loadmore_params.current_page
  70.         };
  71.  
  72.         $.ajax({  // você também pode usar $ .post aqui
  73.             url : loadmore_params.ajaxurl, // AJAX Manipulador
  74.             data : data,
  75.             type : 'POST',
  76.             beforeSend : function ( xhr ) {
  77.                 button.text('Carregando...'); // altera o texto do botão, você também pode adicionar uma imagem do pré-carregado
  78.             },
  79.             success : function( data ){
  80.                 if( data ) {
  81.                     button.text( 'Carregar Mais' ).prev().before(data);  // insere novas postagens
  82.                     loadmore_params.current_page++;
  83.  
  84.                     if ( loadmore_params.current_page == loadmore_params.max_page )
  85.                         button.remove(); // se última página, remova o botão
  86.                    
  87.                 } else {
  88.                     button.remove(); // se não houver dados, remova o botão também
  89.                 }
  90.             }
  91.         });
  92.     });
  93. });
  94.  
  95.  
  96.  
  97. </script>
RAW Paste Data