Wordpress: Post Inhalt in div mit AJAX

Question

übergeben Ich versuche, einen Beitrag in einem Bootstrap-modalen Fenster in Wordpress zu öffnen. Das Ziel ist es, den Post-Inhalt über Ajax zu laden, da das modale Fenster in der Fußzeile platziert wird.

Das ist, was ich habe bis jetzt:

My template-Teil, die in der Fußzeile (modal.php)

<div class="modal fade" id="myModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h5 class="modal-title" id="exampleModalLabel"><?php the_title();?></h5> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button> 
     </div> 
     <div class="modal-body"> 
      <?php the_content();?> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
</div> 

Wie Sie, ich würde sehen können, geladen wird brauche etwas Inhalt, der von der Abfrage in das div in der Fußzeile übergeben wurde.

Mein Link, das heißt das modale Fenster zu öffnen:

<a href="#" class="modal-link" data-toggle="modal" data-target="#myModal-<?php the_ID(); ?>" >View more</a> 

So würde was der sauberste Weg, dies zu lösen?

Danke für jede Beratung! Cara

Answer 1

Sie können die REST-API für Worpdress verwenden (bei http://v2.wp-api.org/) auf diese Weise Sie den Beitrag Inhalt mit Ajax laden und hängen Sie ihn an Ihr div wie Sie fit

Beispiel siehe:

$.get('http://demo.wp-api.org/wp-json/wp/v2/posts/470',function(data){ 
    data = JSON.parse(data); 
    $('div.selector').html(data.content); 
}) 

ich hoffe, die

Answer 2

Zuerst hilft, haben Sie eine ajax-uRL innerhalb header.php oder Seite, die den ajax-Aufruf gehört zu deklarieren:

<script type="text/javascript" language="javascript"> 
    var ajax_url = "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php"; 
</script> 

Dann in Ihrem aktuellen Thema offen function.php und erklärt einen Ajax-Aufruf:

function implement_ajax() { 
    include(TEMPLATEPATH . '/ajax_return.php'); 
} 

add_action('wp_ajax_my_special_action', 'implement_ajax'); 
add_action('wp_ajax_nopriv_my_special_action', 'implement_ajax'); 

Nun haben Sie Ajax-Aufruf innerhalb Seite, die Sie arbeiten möchten einzustellen.

<script type="text/javascript"> 
jQuery(function(){ 
    jQuery('.modal-link').click(function(){ 
     var mypostid = ''; Will be contained element that allows you to manage dinamical content (such as post_id). 
     jQuery.post(ajax_url, {action : 'my_special_action', post_id : mypostid}, return_function, 'JSON'); 
    }); 
}); 
</script> 

Also, erstellen Sie ajax_return.php in Ihrem aktuellen Thema. Diese Datei enthält eine Abfrage, die Ihnen einen dynamischen Inhalt für Ihr Modal bietet. ZB:

query_posts('page_id=' . $_POST['id']); 
if(have_posts()) while(have_post()) : the_post(); 
    $dinamic_post_content = get_the_content(); 
endwhile; 

return json_encode(array('return' => $dinamic_post_content)); 
exit; 

Nach jQuery.post, müssen Sie "return_function" nennen, die Sie Antwort verwalten und modal richtig eingestellt:

function return_function(data) 
{ 
    jQuery('.modal-body').html(data.return); 
}