Usando Ajax en categorías y bucles de WordPress

8 dic 2011, 08:53:45
Vistas: 30.2K
Votos: 3

Quiero que mi index.php sea una página simple con una lista horizontal de nombres de categorías en la parte superior. Pero en lugar de que la página se recargue con la lista de publicaciones en ese bucle cada vez que se hace clic en una categoría, quiero que el conjunto de publicaciones de cada categoría se muestre instantáneamente después de cada clic en una categoría diferente. ¿Es esto posible en WordPress?

0
Todas las respuestas a la pregunta 1
4
10

Sí, esto es posible con WordPress, pero yo no usaría index.php sino una plantilla personalizada front-page.php, luego crear una página llamada "inicio" y configurarla como página frontal en opciones-generales.

Para tu menú de categorías:

<?php
$categories = get_categories(); ?>

<ul id="menu-categorias">
    <?php foreach ( $categories as $cat ) { ?>
    <li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>
    <?php } ?>
</ul>

Donde llamamos a nuestra función jQuery ajax cuando se hace clic en una categoría y pasamos el ID de la categoría a jQuery en el nombre de la función.

El marcador de posición HTML donde se cargarán tus publicaciones vía ajax:

<div id="animacion-carga" style="display: none;"><img src="<?php echo admin_url( 'images/loading-publish.gif' ); ?>" alt="Cargando contenido" title="Cargando publicaciones..." /></div>
<div id="contenido-categoria"></div>

La función jQuery llamada a través del manejador onclick en los elementos del menú:

<script>
function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("actual");
    jQuery("a.ajax").addClass("actual"); //añade clase actual al ítem de menú de categoría que se muestra para poder estilizarlo con css
    jQuery("#animacion-carga").show();
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); //debemos imprimirlo ?>';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "load-filter", cat: catID },
        success: function(response) {
            jQuery("#contenido-categoria").html(response);
            jQuery("#animacion-carga").hide();
            return false;
        }
    });
}
</script>

La función PHP de WordPress para devolver las publicaciones de la categoría seleccionada:

add_action('wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts');
add_action('wp_ajax_load-filter', 'prefix_load_cat_posts');
function prefix_load_cat_posts() {
    $cat_id = $_POST['cat'];
    $args = array(
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'
    );

    $posts = get_posts($args);

    ob_start();

    foreach ($posts as $post) {
        setup_postdata($post); ?>

        <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
            <h1 class="titulo-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

            <div id="contenido-post">
                <?php the_excerpt(); ?>
            </div>
        </div>

    <?php }
    wp_reset_postdata();

    $response = ob_get_contents();
    ob_end_clean();

    echo $response;
    die(1);
}

Estamos usando el almacenamiento en búfer de salida (output buffering) que ayuda a prevenir que la función falle, lo que puede ocurrir a veces con Ajax en WordPress.

11 dic 2011 06:08:48
Comentarios

¿dónde va el último fragmento de código? Actualmente lo tengo funcionando sin él y carga la página de categoría, pero quiero agregar ese último fragmento ya que lo necesitaré para mostrar las publicaciones también. Gracias

User User
21 dic 2011 14:05:00

Sé que esta es una pregunta antigua, pero tiene la increíble cantidad de 9k visitas y se hace referencia a ella como en esta pregunta. Tal vez quieras actualizarlo :)

kaiser kaiser
11 nov 2014 00:03:00

Falta un echo en var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

Sherbrow Sherbrow
14 dic 2014 16:14:44

Sé que esta es una publicación muy antigua... pero ¿cómo podemos hacer esto con entradas personalizadas y taxonomías personalizadas? D:

artist learning to code artist learning to code
30 ene 2019 03:55:22