Wordpress - Charger du contenu ajax via jQuery et WP-Rest-API du core

Le but de la manœuvre est de charger des articles en tant que contenu dans une page.
A la maniere d'un systeme de tabulaton, navigation... L'avantage de faire ca a la main, est que l'on garde une grande flexibilite d'integration.

|==== |==========|
| lien1 |
| lien2 | CONTENU  |
| lien3 |
===============


Tout d'abord activer les permalinks, puis creez les articles a charger


Dans votre child theme:

function.php

<?php
// add your custom functions here
add_action( 'wp_enqueue_scripts', 'fc_enqueue', 999);

function fc_enqueue() {
    wp_register_script( 'fc_ajax_loading', get_stylesheet_directory_uri(). '/js/fc_ajax_loading.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_script('fc_ajax_loading');

/js/fc_ajax_loading.js

jQuery(document).ready(function($) {
 
    /* Append GIF Loader after ajax links */
    $('a.ajax-call').each(function(i){
        $(this).append("<span class='ajax-loading' style='display:none;'>&nbsp;<img src='/wp-includes/images/spinner.gif' alt='chargement...' /></span>");
    });
 
    /* Load default section */
    setTimeout(function() {
        $('a.ajax-call.default').trigger("click");
    },100);
 
    /* Handle ajax call for each links */
    $(document).on("click", "a.ajax-call", function(e){
        e.preventDefault();
        $("a.ajax-call").removeClass("active");
        var current_link = $(this);
        var container_selector = "#" + $(this).data("container");
        var container = $(container_selector);
     
        if(current_link.data("request") === 0){
         
            current_link.data("request", 1);
            current_link.addClass("active");
            current_link.children(".ajax-loading").show();
            container.html("<div class='ajax-loading' style='text-align:center;'>&nbsp;<img src='/wp-includes/images/spinner-2x.gif' alt='chargement...' /><br>Chargement en cours...</div>");
         
            var fc_xhr = $.ajax({
                url: '/wp-json/wp/v2/posts?slug=' + current_link.data("slug"),
                method: 'GET',
                error: function(x,s,e){
                    container.html('<h5 class="error">Impossible de charger le contenu.<h5>');
                },
                success: function(d,s,x){
                    if(x.responseText != "[]"){
                        container.html('<h3 class="widget-title">' + d[0].title.rendered + '</h3>' + d[0].content.rendered);
                        $(container_selector + ' .kt-flexslider ul.slides a.lightboxhover').on("click",function(e){
                            e.preventDefault(); // prevent click
                        });
                    }else{
                       /* because wp return 200 with empty content on 404 pages */
                       container.html('<h5 class="error">Impossible de charger le contenu.<h5>');
                    }
                },
                complete: function(x,s) {                
                    $(".ajax-loading").hide(); //close all
                    current_link.data("request", 0);
                },
                timeout: 7000
            });
        }
    }); 

Dans le contenu de votre page Wordpress:

<ul id="liens">
  <li><a class="ajax-call default" href="#" data-slug="lien1" data-container="sub-container" data-request="0">lien1</a></li>
  <li><a class="ajax-call" href="#" data-slug="lien2-viande-crue" data-container="sub-container" data-request="0">lien2/ Viande crue</a></li>
  <li><a class="ajax-call" href="#" data-slug="lien3" data-container="sub-container" data-request="0">lien3</a></li>
</ul>

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