Cargar contenido de Wordpress post en DIV usando AJAX


Publiqué una pregunta hace un par de días sobre cómo Desplazarse a Single Post en una plantilla personalizada de Wordpress que estoy desarrollando. Lo que necesito en la cáscara de nuez es cargar un solo post en un DIV definido cuando se hace clic en un enlace en particular y luego desplazarse hacia abajo a ese DIV sosteniendo el contenido recién cargado. Teniendo en cuenta la naturaleza dinámica del contenido de Wordpress o de cualquier otro CMS, la URL de ese enlace no puede ser absoluta.

Desafortunadamente, no había ningún concreto responder en ese momento, así que decidí husmear un poco. Y dado que el problema principal era cargar el contenido dinámicamente, decido hacer zoom sobre cómo puedo hacerlo con AJAX en Wordpress:

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

Solo para darte una mejor idea de lo que he conseguido en mi marcado hasta ahora:

EL AJAX / JQUERY EN LA CABECERA.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;
    });

});

ÍNDICE.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>

UNA SOLA CASA.PHP (ESTO ES UNA COSTUMBRE 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-->

Solo para el registro: Cuando el ID de post no se cargó, intenté instalar ese tema particular de Kubrick utilizado en la demo de Emanuele Feronato e hice 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 manera de cargar dinámicamente el post ID en el .¿función de carga?

Author: Community, 2011-09-23

2 answers

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 post ID se captura en el atributo rel y se carga correctamente en la variable post_id

Inserté una llamada de alerta en el fragmento AJAX / JQUERY para ver si el ID de post se estaba cargando en la variable post_id a la derecha. Así es como se veí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 la precisa ID de publicación asociada con la publicación. Esto un poco aislado el problema hasta la URL definida en el .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 de post ID a post permalink

Decidí que ya que el ID de la publicación claramente no funcionaba, usaría la etiqueta permalink de la publicación en el atributo rel del enlace. Así es como se veía el rel de link 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 .url / valor de la función load ()

A continuación, tuve que hacer un cambio en el fragmento AJAX / JQUERY para que ya no use el ID de post:

$(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 puedes ver en lo anterior, he tomado el valor del atributo rel del enlace (que ahora es el enlace permanente del post) y lo he lanzado a la variable post_link. Esto me permite simplemente tomar esa variable y colocarla en el .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, creo que el uso del enlace permanente en este caso en realidad elimina la necesidad de cambiar la estructura del enlace permanente en Wordpress según las instrucciones de Emanuele Feronato en su post.

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

 25
Author: vynx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-01 15:14:30

En lugar de usar:

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

Debe buscar directamente el href. Ambos son iguales.

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

Esto ayuda con 2 cosas:

  1. Menos marcado en su HTML
  2. Usted se mantiene alejado de usar rel como un atributo de datos, que no es una opción muy sabia hoy en día con HTML5. (leer aquí)
 7
Author: Cosmin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-17 23:24:04