Cargar contenido de publicaciones de Wordpress en DIV usando AJAX

Question

Publiqué una pregunta hace un par de días sobre cómo Scroll to Single Post en una plantilla de Wordpress personalizada que estoy desarrollando. Lo que necesito en el shell nut es cargar una sola publicación en un DIV definido cuando se hace clic en un enlace en particular y luego desplazarme hacia abajo hasta ese DIV que contiene el contenido recién cargado. Teniendo en cuenta la naturaleza del contenido dinámico de Wordpress o de cualquier otro CMS, la URL de ese enlace no puede ser absoluta.

Desafortunadamente, no había ninguna respuesta concreta en ese momento, así que decidí husmear un poco. Y dado que el problema principal era cargar el contenido de forma dinámica, decido ampliar la forma en que puedo hacerlo con AJAX en Wordpress:

Hasta ahora, he tenido una ligera idea de una gran publicación (Loading WordPress posts with Ajax and jQuery) por Emanuele Feronato. Básicamente almacena la ID de la publicación en el atributo rel del enlace que se puede hacer clic y luego la llama. Bueno, hay algunos otros pasos para que esto funcione, pero la razón por la que solo menciono la identificación de la publicación en este momento es porque parece que es la única parte de la ecuación que no está bien; la ID de publicación se carga en el atributo rel del enlace pero no se carga en la función .load.

Sólo para dar una idea más clara de lo que he recibido en mi marcado hasta el momento:

EL AJAX/jQuery header.php

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

INDEX.PHP

<?php get_header();?> 

<!--home--> 
<div id="home"> 

<!--home-bg--> 
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" /> 
<!--home-bg--> 

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"> 

     <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">    

      <?php the_post_thumbnail(); ?> 

      <span class="title"><?php the_title(); ?></span>  

      <span class="ex"><?php the_excerpt(); ?></span> 

     </div> 

    </a> 

    <?php endwhile; endif; ?> 

</div> 
<!--home--> 

<div id="single-home-container"></div> 

SI NGLE-home.php (esta es una nueva plantilla)

<?php 

    /* 
    Template Name: single-home 
    */ 

?>  

<?php 

    $post = get_post($_POST['id']); 

?> 

    <!--single-home--> 
    <div id="single-home post-<?php the_ID(); ?>"> 

    <!--single-home-bg--> 
    <div class="single-home-bg"> 

    </div> 
    <!--single-home-bg--> 

    <?php while (have_posts()) : the_post(); ?> 

     <!--sh-image--> 
     <div class="sh-image"> 

      <?php the_post_thumbnail(); ?> 

     </div> 
     <!--sh-image--> 

     <!--sh-post--> 
     <div class="sh-post"> 

      <!--sh-cat-date--> 
      <div class="sh-cat-date"> 

       <?php 

        $category = get_the_category(); 
        echo $category[0]->cat_name; 

       ?> 

       - <?php the_time('l, F jS, Y') ?> 

      </div> 
      <!--sh-cat-date--> 

      <!--sh-title--> 
      <div class="sh-title"> 

       <?php the_title();?> 

      </div> 
      <!--sh-title--> 

      <!--sh-excerpt--> 
      <div class="sh-excerpt"> 

       <?php the_excerpt();?> 

      </div> 
      <!--sh-excerpt--> 

      <!--sh-content--> 
      <div class="sh-content"> 

       <?php the_content();?> 

      </div> 
      <!--sh-content--> 

    </div> 
    <!--sh-post-->   

    <?php endwhile;?> 

    <div class="clearfix"></div>  

    </div> 
    <!--single-home--> 

Sólo para que conste: Cuando el ID del mensaje no se pudo cargar, He intentado instalar ese tema en particular Kubrick utiliza en demostración de Emanuele Feronato y realizado los cambios necesarios de acuerdo con su guía, pero nada funcionó.

¿Alguien tiene alguna idea de lo que está pasando o si hay alguna otra forma de cargar dinámicamente la ID de la publicación en la función .load?

Answer 1

Bueno, por un golpe de suerte y un poco de café con cigarrillos, me las arreglé para resolver el problema:

Esto es lo que hice:

1. Prueba si el identificador de mensaje es capturado en el atributo rel y cargado correctamente en la variable post_id

Inserté una llamada de alerta en el fragmento de AJAX/JQUERY para ver si la ID de la publicación incluso se estaba cargando en la variable de la variable de postdata derecha. Esta es la forma en que parecía:

$(document).ready(function(){ 

    $.ajaxSetup({cache:false}); 
    $(".trick").click(function(){ 
     var post_id = $(this).attr("rel"); 
     alert(post_id); 
     $("#single-home-container").html("loading..."); 
     $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}); 
    return false; 
    }); 

}); 

Así que cuando hice clic en el enlace, la llamada de vuelta dio el ID del mensaje correcta asociada con el puesto. Esto aisló el problema hasta la URL definida en la función .load(). Parecía que el ID de la publicación no era suficiente para cargar la publicación en el DIV definido.

2.Cambiar el atributo rel del enlace desde la ID de la publicación para publicar el enlace permanente

Decidí que, dado que la identificación de la publicación no funcionaba, utilizaría la etiqueta de enlace permanente de la publicación en el atributo rel del enlace. Así es como se rel de enlace parecía anteriormente:

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a> 

Y así es como se ve ahora:

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a> 

3. Editar .load() la función URL/valor

A partir de ahí, tuve que hacer un cambio en el fragmento de AJAX/JQUERY para que ya no use la ID de la publicación:

$(document).ready(function(){ 

     $.ajaxSetup({cache:false}); 
     $(".trick").click(function(){ 
      var post_link = $(this).attr("rel"); 
      $("#single-home-container").html("loading..."); 
      $("#single-home-container").load(post_link); 
     return false; 
     }); 

    }); 

Como puede ver en lo anterior, tomé el valor del atributo rel del enlace (que ahora es el enlace permanente de la publicación) y lo lancé a la variable post_link. Esto me permite simplemente tomar esa variable y colocarla en la función .load(), reemplazando http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} que obviamente no funcionó.

VOILA! Problema resuelto.

Aunque todavía tengo que probar esto, yo creo que usando el enlace permanente en este caso en realidad reduce la necesidad de cambiar la estructura de enlaces permanentes en Wordpress según las instrucciones de Emanuele Feronato en su post.

Así que si alguien tiene la intención de cargar dinámicamente publicaciones de Wordpress en un DIV definido, ¡probablemente pueda probar esto!

Answer 2

En lugar de utilizar:

var post_id = $(this).attr("rel"); 

usted debe ir a buscar directamente el href. Ambos son lo mismo.

var post_id = $(this).attr("href"); 

Esto ayuda con 2 cosas:

1. menos marcado en el código HTML
2. se mantenga alejado de usar rel como un atributo de datos, que no es una elección muy acertada hoy en día con HTML5. (read here)