web-dev-qa-db-fra.com

Chargement de messages via AJAX dans un div caché avec URL mise à jour?

J'utilise le code ci-dessous pour charger de manière asynchrone des publications sur la même page d'index via AJAX. J'aimerais pouvoir mettre à jour l'URL également, mais je ne sais pas comment l'ajouter à ce que j'ai actuellement.

Le but final est un effet similaire à this . Si vous cliquez sur un article, vous pourrez voir le chargement des articles dans la div masquée ci-dessus et vous verrez que l'URL est également mise à jour dans la barre d'adresse.

Quelqu'un peut m'aider?

Modèle d'index 

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

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

    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

       <?php the_title(); ?> 

    </a>

<?php endwhile; endif; ?>

Modèle de message unique 

<?php

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

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

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

                <?php the_title();?>

                <?php the_content();?>

    <?php endwhile;?> 

    </div>

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: De plus, j’ai lu, à partir de quelques sources, qu’il était recommandé d’utiliser le admin-ajax.php intégré dans WordPress. Serait-il avantageux pour moi d’utiliser admin-ajax.php et si oui, comment pourrais-je "changer" avec ce que j’ai actuellement?

Mise à jour (1/4/2015):

Modèle d'index 

<div id="project-container"></div>

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

    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

       <?php the_title(); ?> 

    </a>

<?php endwhile; endif; ?>

Modèle de message unique 

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

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

    <?php the_title();?>

    <?php the_content();?>

<?php endwhile;?> 

</div>

Functions.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('<div id="single-post post-%d">', $pid);
        the_title();
        the_content();
        echo '</div>';
    }
    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);
jqueryajaxjavascriptxml
1
Desi

La mise à jour de l'URL via javascript, n'est pas liée à WordPress, cependant il vous suffit de modifier window.location.hash dans votre code jQuery.

En ce qui concerne l'utilisation de admin-ajax.php, il est recommandé d'effectuer des tâches via AJAX nécessitant le chargement d'un environnement WordPress, au lieu de manuellementnécessitant wp-load.php.

Dans votre cas, vous envoyez une demande à une URL WordPress standard, ce n'est donc pas trop grave, mais votre code actuel présente quelques problèmes.

Le problème "$_POST['id']"

Dans votre post singulier vous avez

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

cela n'est pas du tout nécessaire, car vous envoyez une demande au singulier post url, cela signifie que la variable post est automatiquement définie par WordPress.

De plus, $_POST['id'] peut ne pas être défini, surtout si vous utilisez de jolis permaliens, un avertissement PHP sera émis.

Le problème de la "vue unique"

Vos messages singuliers auront toujours leurs propres permaliens. Si vous visitez l'un de ces liens permanents, vous verrez une page briséehtml qui ne contient pas de balise <html>, <head> ou <body>, mais uniquement le contenu de la page.

Vous pouvez résoudre ce problème de deux manières:

  • utilisez le 'post_link' hook pour changer le permalien des publications et le faire pointer vers la page d’index avec un hachage approprié, et également mettre en place une redirection pour envoyer aux utilisateurs qui entrent une URL singulière dans la barre d’adresse vers hacher. C'est peut-être bien, mais de cette façon, votre message ne peut jamais être vu de manière singulière.

  • la seconde façon est d’éditer votre modèle de publication unique et de produire de manière conditionnelle les balises HTML appropriées lorsque la page est chargée dans une requête normale (c.-à-d. non AJAX).

    function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH'])
         && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

if (is_ajax()) {
   // open here <html>, <head> and <body> tags
}

// page content here

if (is_ajax()) {
   // close here <html>, <head> and <body> tags
}

De cette manière, lorsque vous êtes sollicité régulièrement, vos messages sont affichés sur une page HTML bien formée.

Implications de performance

En utilisant l’une des deux méthodes suggérées ci-dessus, vous pouvez résoudre le problème principal de votre code actuel, mais il reste un problème de performances.

Les requêtes aux URL de WordPress sont un peu plus coûteusesen performances que les requêtes à admin-ajax.php. Même si les deux chargent un environnement complet WP, pour les requêtes régulières, WordPress doit résoudrele lien permanent vers une requête Cela consiste à charger un ensemble de règles de réécriture à partir de la base de données et à effectuer par programme une vérification des expressions rationnelles par rapport à l’une quelconque des règles jusqu’à ce que l’une d’elles corresponde à l’URL actuelle.

Si vous pouvez envoyer une requête ajax contenant l'ID de publication dans le cadre de la requête elle-même, vous pourrez générer le contenu de la publication en ignorant cette vérification et en améliorant ainsi les performances.

Pour cela, vous devez utiliser WordPress AJAX API . Quelque chose comme:

dans 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('<div id="single-post post-%d">', $pid);
    the_title();
    the_content();
    echo '</div>';
  }
  exit();
}

jQuery (va dans le fichier dont l'url est le $script_url var dans le code ci-dessus)

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

Votre code de modèle d'index peut rester le même.

En utilisant cette approche, tous les problèmes sont résolus et, comme vous pouvez le constater, le modèle de publication unique n'est pas impliqué du tout, cela signifie que vous pouvez l'utiliser pour afficher la vue de publication singulière à votre guise. (Si vous ne voulez aucune vue de publication unique, la première suggestion sousle problème "Vue unique"peut toujours être utilisé).

2
gmazzap