Posts über AJAX in einem versteckten Div mit aktualisierter URL laden?

Ich verwende den folgenden Code, um Posts auf der gleichen Indexseite über AJAX asynchron zu laden. Ich würde gerne in der Lage sein, die URL ebenfalls zu aktualisieren, bin mir aber nicht sicher, wie ich das zu dem machen kann, was ich gerade habe.

Das Endziel ist ein ähnlicher Effekt. Wenn du auf einen Beitrag klickst, kannst du sehen, dass die Beiträge im versteckten Teil oben erscheinen und du wirst sehen, dass die URL auch in der Adressleiste aktualisiert wird.

Kann mir jemand helfen?

Indexvorlage

<a class="post-link" rel="" href="">

Einzelpostvorlage

  <div id="single-post post-">     

jQuery

  $(document).ready(function(){ $.ajaxSetup({cache:false}); $(".post-link").click(function(){ var post_link = $(this).attr("href"); $("#single-post-container").html("content loading"); $("#single-post-container").load(post_link); return false; }); }); 

Edit: Außerdem habe ich aus ein paar Quellen gelesen, dass die Verwendung von WordPress ‘eingebauter admin-ajax.php empfohlen wurde. Wäre es für mich von Vorteil, admin-ajax.php zu benutzen und wenn ja, wie würde ich es ” admin-ajax.php ” mit dem, was ich gerade habe?

Update (1/4/2015):


Indexvorlage

 
<a class="post-link" rel="" href="">

Einzelpostvorlage

 <div id="single-post post-">     

functionen.php

 /** * Enqueue scripts and styles. */ function starter_scripts() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true ); wp_enqueue_script( 'jquery' ); wp_enqueue_style( 'starter-style', get_stylesheet_uri() ); wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array('jquery'), '', true ); wp_enqueue_script( 'gray', get_template_directory_uri() . '/js/min/jquery.gray.min.js', array('jquery'), '', true ); wp_localize_script( 'includes', 'site', array( 'theme_path' => get_template_directory_uri(), 'ajaxurl' => admin_url('admin-ajax.php') ) ); } add_action( 'wp_enqueue_scripts', 'starter_scripts' ); /** * AJAX nopriv */ add_action('wp_ajax_load-single-post', 'prefix_ajax_single_post'); add_action('wp_ajax_nopriv_load-single-post', 'prefix_ajax_single_post'); function prefix_ajax_single_post() { $pid = (int) filter_input(INPUT_GET, 'pID', FILTER_SANITIZE_NUMBER_INT); if ($pid > 0) { global $post; $post = get_post($pid); setup_postdata($post); printf('
', $pid); the_title(); the_content(); echo '
'; } exit(); }

jQuery (includes.js)

 // Load posts via AJAX (function($, D){ $.ajaxSetup({cache:false}); $(".post-link").click(function(){ var postID = $(this).attr('rel'); var $container = $("#project-container"); $container.html("content loading"); $.get(D.ajaxurl, {action: 'load-single-post', pID: postID}, function(content) { $container.html(content); }); }); })(jQuery, site); 

Solutions Collecting From Web of "Posts über AJAX in einem versteckten Div mit aktualisierter URL laden?"

Das Aktualisieren der URL über Javascript, hängt nicht mit WordPress zusammen, aber Sie müssen nur window.location.hash in Ihrem jQuery-Code ändern.

In Bezug auf die Verwendung von admin-ajax.php empfiehlt es sich, Aufgaben über AJAX zu erledigen, die WordPress-Umgebung laden müssen, anstatt manuell wp-load.php .

In deinem Fall sendest du eine Anfrage an eine reguläre WordPress-URL, also ist es nicht so schlimm, aber dein aktueller Code hat einige Probleme.

Das ” $_POST['id']$_POST['id']

In Ihrem singulären Beitrag haben Sie

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

das ist überhaupt nicht notwendig, weil Sie eine Anfrage an singuläre Post-URL senden, dh Post-Variable wird automatisch von WordPress gesetzt.

Darüber hinaus ist $_POST['id'] möglicherweise nicht gesetzt, besonders wenn Sie hübsche Permalinks verwenden, die eine PHP-Warnung auslösen.

Das Problem “Einzelansicht”

Ihre einzelnen Posts haben immer noch eigene Permalinks. Wenn Sie einen dieser Permalinks besuchen, sehen Sie eine errorshafte HTML-Seite, die kein , oder -Tag enthält, sondern nur den Inhalt der Seite.

Sie können das Problem auf zwei Arten beheben:

  • Verwenden Sie den 'post_link' Hook, um den Permalink von Posts zu ändern und ihn auf die Indexseite mit einem richtigen Hash zu richten, und richten Sie eine Umleitung ein, um Benutzer, die eine singuläre URL eingeben, in die Adressleiste zur Indexseite mit einem korrekten Hash zu schicken. Das mag in Ordnung sein, aber auf diese Weise kann Ihr Beitrag nie in einer einzigen Ansicht gesehen werden.

  • Der zweite Weg besteht darin, Ihre einzelne Beitragsvorlage zu bearbeiten und bedingt korrekte HTML-Tags auszugeben, wenn die Seite in einer regulären (dh nicht AJAX-) Anfrage geladen wird.

     function is_ajax() { return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'; } if (is_ajax()) { // open here ,  and  tags } // page content here if (is_ajax()) { // close here ,  and  tags } 

Auf diese Weise werden Ihre Posts bei einer Anfrage mit regulären Anfragen in einer gut formatierten HTML-Seite angezeigt.

performance Implikationen

Mit einer der beiden oben vorgeschlagenen Möglichkeiten können Sie das Hauptproblem Ihres aktuellen Codes lösen, aber es gibt immer noch ein performancesproblem.

Anfragen an WordPress-URLs sind etwas teurer als Anfragen an admin-ajax.php . Auch wenn beide volle WP-Umgebung laden, muss für reguläre WordPress-Anfragen der Permalink zu einer Abfrage aufgetriggers werden. Dazu werden eine Reihe von Rewrite-Regeln aus der database geladen und programmgesteuert eine Regex-Prüfung mit einer der Regeln durchgeführt, bis eine der Regeln mit der aktuellen URL übereinstimmt.

Wenn Sie eine Ajax-Anfrage senden können, die die Post-ID als Teil der Anfrage selbst enthält, können Sie den Post-Inhalt ausgeben, der diese Prüfung überspringt und so die performance verbessert.

Um das zu erreichen, sollten Sie WordPress AJAX API verwenden . Etwas wie:

in functions.php

 add_action('wp_enqueue_scripts', function() { // $script_url is the full url to your js file wp_enqueue_script('myjs', $script_url, array('jquery'), true, null, true); wp_localize_script('myjs', 'myData', array('ajaxurl' => admin_url('admin-ajax.php)); }); add_action('wp_ajax_load-single-post', 'prefix_ajax_single_post'); add_action('wp_ajax_nopriv_load-single-post', 'prefix_ajax_single_post'); function prefix_ajax_single_post() { $pid = (int) filter_input(INPUT_GET, 'pID', FILTSER_SANITIZE_NUMBER_INT); if ($pid > 0) { global $post; $post = get_post($pid); setup_postdata($post); printf('
', $pid); the_title(); the_content(); echo '
'; } exit(); }

jQuery (geht in die Datei, deren URL die $script_url im obigen Code ist)

 (function($, D){ $.ajaxSetup({cache:false}); $(".post-link").click(function(){ var postID = $(this).attr('rel'); var $container = $("#single-post-container"); $container.html("content loading"); $.get(D.ajaxurl, {action: 'load-single-post', pID: postID}, function(content) { $container.html(content); }); }); })(jQuery, myData); 

Ihr Indexvorlagencode kann unverändert bleiben.

Mit diesem Ansatz werden alle Probleme getriggers und, wie Sie sehen können, ist die einzelne Postvorlage überhaupt nicht beteiligt, dh Sie können damit die singuläre Postansicht nach Belieben anzeigen. (Wenn Sie keine singuläre Postansicht wünschen, kann der erste Vorschlag unter dem Thema “Einzelansicht” noch verwendet werden).