La descarga de artículos sobre el Ajax
La descarga de artículos sobre el Ajax, ya es totalmente estándar de funciones de muchos de los blogs. Hoy en este artículo veremos la manera que está bien implementado en este proyecto — wowclass.ru. Como Se puede ver, en este sitio web funciona bien de esta manera y después de hacer clic en el botón “Mostrar más materiales” cargan a través de los siguientes artículos. Es conveniente? Sin duda. Empecemos!
Para el ejemplo usaré la opción, si necesitamos hacer esta carga en la página del blog, es index.php o category.php (todos los archivos están en la carpeta de Tu tema). Buscando la salida de la base de nuestros artículos, normalmente, esto se ve así.
|
1 2 3 4 5 6 7 8 9 10 |
<?php while ( have_posts() ) : the_post(); ?> <div class="adv_block"> <div class="img_block"><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) {the_post_thumbnail(array(300, 300),array("class"=>"alignleft post_thumbnail"));} ?></a></div> <div class="post_block"> <div class="title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'striped' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div> <div class="price"><?php the_time('j.m.y'); ?> <?php if ( get_post_meta($post->ID, 'patch', true) ) : ?>| Патч: <?php echo get_post_meta($post->ID, 'patch', true) ?><?php endif; ?></div> <div class="text"><a href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a></div> </div> </div> <?php endwhile; ?> |
Este código de muestra en el ciclo “todos los registros”. Inmediatamente después de esto, pegamos el código en el botón “Descargar”.
|
1 2 3 4 5 6 7 8 9 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <script> var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php'; var true_posts = '<?php echo serialize($wp_query->query_vars); ?>'; var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>; var max_pages = '<?php echo $wp_query->max_num_pages; ?>'; </script> <div class="more_block"><div class="btn_more_blocks" id="true_loadmore">Load more</div></div> <?php endif; ?> |
Está bien, todo pegado. Este código comprueba cuántos tenemos páginas, contiene el blog. Si más de una, se muestra en el botón. Si es menor, no se muestra.
ajaxurl – Es el procesador de llamadas AJAX en WordPress.
true_posts – Serializado una matriz que contiene todos los parámetros de la consulta, es una propiedad de la clase WP_Query.
current_page – El número de página actual.
La apariencia del botón se realiza a su voluntad. Así, el botón lo hicimos, pero si se hace clic en él, entonces no funciona. Pasamos al siguiente paso.
La conexión de los scripts
Para nosotros todo funcionaba bien, debemos conectar jQuery. Si aún no lo Habéis hecho, lo conecte. Inferior el código de añadir en el archivo de nuestro tema functions.php. Si Usted no tiene este archivo, si ha creado su propio tema, cree el archivo directamente en el directorio de Tu tema y allí agregue el código siguiente.
|
1 2 3 4 5 6 |
function true_loadmore_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' ); |
El script de carga asíncrona de puestos de wordpress
Para que el botón funcione a la perfección a ella es necesario mostrar la manera de trabajar y de descargar. Para ello, en la carpeta del tema creamos un archivo de script, lo llamaremos loadmore.js.
Y escribiremos en el archivo con el siguiente código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
jQuery(function($){ $('#true_loadmore').click(function(){ $(this).text('Loading...'); var data = { 'action': 'loadmore', 'query': true_posts, 'page' : current_page }; $.ajax({ url:ajaxurl, data:data, // data type:'POST', // type success:function(data){ if( data ) { $('#true_loadmore').text('Load else').before(data); current_page++; if (current_page == max_pages) $("#true_loadmore").remove(); } else { $('#true_loadmore').remove(); } } }); }); }); |
Debo decir que el código he copiado de fuentes abiertas en internet. Pero todo funciona muy bien, el código simplemente excelente. Todo funciona como un reloj.
La descarga de artículos sobre el ajax — como toque final
Por último, el script de forma asincrónica saca los datos de php. Este es el último código de barras, se debe añadir un script en funcions.php.
|
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 31 32 |
<?php function true_load_posts(){ $args = unserialize(stripslashes($_POST['query'])); $args['paged'] = $_POST['page'] + 1; $args['post_status'] = 'publish'; $q = new WP_Query($args); if( $q->have_posts() ): while($q->have_posts()): $q->the_post(); /* * Con puntada 13 al 21 de trata de HTML de la plantilla de la grabación, lo más cerca posible al tema twentyten tiene. * Para su tema que por supuesto puede utilizar otro tipo de código HTML. */ ?> <div class="adv_block"> <div class="img_block"><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) {the_post_thumbnail();} ?></a></div> <div class="post_block"> <div class="title"><a itemprop="name" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div> <a href="<?php the_permalink(); ?>"><div class="text" itemprop="description"><?php the_excerpt(); ?></div></a> <div class="price"><?php the_time('j.m.y'); ?></div> </div> </div> <?php endwhile; endif; wp_reset_postdata(); die(); } add_action('wp_ajax_loadmore', 'true_load_posts'); add_action('wp_ajax_nopriv_loadmore', 'true_load_posts'); ?> |
Cambie en el script, como debe aparecer Tu post de la cinta de puestos y todo funcionará perfectamente. Preguntas, “Me gusta” y mutuas de suscripción son bienvenidos. Gracias a todos por su atención.
P. S. Si desea eliminar el registro y remotos en lugar de insertar nuevas, en este caso, Usted debe cambiar el código de loadmore.js. Es decir, eliminar los bloques que ya hay. Para ello, utilice este código, simplemente reemplace su código en el loadmore.js.
|
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 |
jQuery(function($){ $('#true_loadmore').click(function(){ $('aquí pegamos la clase de elementos que hay que eliminar').hide(); $(this).text('Loading...'); var data = { 'action': 'loadmore', 'query': true_posts, 'page' : current_page }; $.ajax({ url:ajaxurl, data:data, type:'POST', success:function(data){ if( data ) { $('#true_loadmore').text('Load more').before(data); current_page++; if (current_page == max_pages) $("#true_loadmore").remove(); } else { $('#true_loadmore').remove(); } } }); }); }); |
Tenga en cuenta que en el código hay un registro en el que desea insertar la clase de los elementos que desea eliminar. Pegamos allá. En todos los asuntos — escribir los comentarios.
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?