Caricare Wordpress postare contenuti in DIV utilizzando AJAX

Question

Ho inviato una domanda un paio di giorni fa su come Scroll to Single Post in un modello Wordpress personalizzato che sto sviluppando. Quello che mi serve nella shell dado è caricare un singolo post in un DIV definito quando si fa clic su un particolare collegamento e quindi scorrere verso il basso fino a quel DIV che contiene il contenuto appena caricato. Considerando la natura dinamica del contenuto di Wordpress o di qualsiasi altro CMS, l'URL di quel collegamento non può essere assoluto.

Sfortunatamente, non c'era una risposta concreta in quel momento, quindi ho deciso di curiosare un po '. E poiché il problema principale è stato caricare il contenuto in modo dinamico, decido di ingrandire come posso farlo con AJAX su Wordpress:

Finora, ho avuto una leggera idea da un grande post (Loading WordPress posts with Ajax and jQuery) di Emanuele Feronato. In pratica memorizza l'ID post nell'attributo rel del link cliccabile e poi lo chiama. Bene, ci sono alcuni altri passaggi per farlo funzionare, ma la ragione per cui sto solo citando il post ID adesso è perché sembra che sia l'unica parte dell'equazione che non è giusta; l'ID post viene caricato nell'attributo rel del collegamento ma non viene caricato nella funzione .load.

solo per darvi una migliore idea di quello che ho ottenuto nel mio markup finora:

L'AJAX/jQuery IN 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 (questo è un modello personalizzato)

<?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--> 

Tanto per la cronaca: Quando l'ID messaggio non è stato caricato, ho provato a installare quel particolare tema Kubrick utilizzato nella demo di Emanuele Feronato e apportate le modifiche necessarie secondo la sua guida, ma nulla ha funzionato.

Qualcuno ha idea di cosa sta succedendo o se esiste un altro modo per caricare dinamicamente l'ID post nella funzione .load?

Answer 1

Beh, per un colpo di fortuna e un caffè con le sigarette, sono riuscito a risolvere il problema:

Ecco quello che ho fatto:

1. Verificare se postale ID viene catturato nel attributo rel e caricato correttamente nella variabile post_id

Ho inserito una chiamata di avviso sullo snippet AJAX/JQUERY per vedere se l'ID del post si stava addirittura caricando nella variabile post_id a destra. Questo è come sembrava:

$(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; 
    }); 

}); 

Così, quando ho cliccato sul link, la chiamata ha dato l'ID messaggio preciso associato con il post. Questo tipo ha isolato il problema fino all'URL definito nella funzione .load(). Sembrava che il post ID non fosse sufficiente per caricare il post in DIV definito.

2.Modifica l'attributo rel del link dall'ID post al post permalink

Ho deciso che poiché l'ID del post non funzionava chiaramente, avrei invece utilizzato il tag permalink del post nell'attributo rel del link. Questo è come rel di collegamento sembrava in precedenza:

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

E questo è come sembra ora:

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

3. Modifica .load() la funzione URL/valore

In seguito, ho dovuto apportare una modifica allo snippet AJAX/JQUERY in modo che non utilizzi più l'ID del 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; 
     }); 

    }); 

Come potete vedere da quanto sopra, ho preso il valore dell'attributo rel del collegamento (che ora è il permalink del post) e lo ho gettato nella variabile post_link. Questo mi consente semplicemente di prendere quella variabile e inserirla nella funzione .load(), sostituendo http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id} che ovviamente non ha funzionato.

VOILA! Problema risolto.

Anche se devo ancora verificare ciò, credo che utilizzando il permalink in questo caso in realtà taglia fuori la necessità di cambiare la struttura dei permalink in Wordpress come indicato da Emanuele Feronato nel suo post.

Quindi, se qualcuno ha l'intenzione di caricare dinamicamente i post di Wordpress in un DIV definito, è possibile provare questo!

Answer 2

Invece di usare:

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

si dovrebbe prendere direttamente il href. Sono entrambi uguali.

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

Questo aiuta con 2 cose:

1. Meno markup nel codice HTML
2. stare lontano da utilizzando rel come un attributo di dati, che non è una scelta molto saggia giorno d'oggi con HTML5. (read here)