Arts numériques

L’idée générale est donc d’afficher le contenu d’une page ou d’un post en cliquant sur un lien, sans quitter la page courante, comme on le fait avec fancybox pour une image.

Pour réussir cet effet, il faut créer un template wordpress spécifique, que l’on pourra mettre en page comme on le souhaite, et qui sera chargé par le clic.

Ce morceau de page ne devra pas contenir de header (nom du site, navigation, etc) ni de footer, juste le contenu principal.

Allons-y

Créer un lien

Nous allons commencer par faire un lien dans le template "home.php" pour appeller ce contenu. C’est un lien conventionnel, dans une balise a :

<div class="container">
    <div class="row">
        <div class="col-12">
            <a data-fancybox data-type="ajax" data-src="?ajaxpost=1" href="javascript:;">
                charger le contenu d'un article
            </a>
        </div>
    </div>
</div>

Le chiffre "1" doit être le numéro d’un article existant. On peut trouver ce numéro dans l’url de la page d’administration de Wordpress, par exemple.

En cliquant sur ce lien on obtient ceci, si fancybox est fonctionnel :

Forcer Wordpress àcharger un template-part

L’adresse que nous donnons dans le lien ne mène vers rien de connu pour Wordpress. Pour qu’il puisse charger le bon template sur base de l’adresse fournie, nous allons le renseigner sur ce qu’il doit faire quand il reçoit ce lien particulier.

Ça passe par un ajout dans le fichier functions.php, que voici :

/* intercepter les requetes ajax  */
add_filter( 'init', function( $template ) {
    if ( isset( $_GET['ajaxpost'] ) ) {
        $post_id = $_GET['ajaxpost'];
        include plugin_dir_path( __FILE__ ) . 'morceaux/ajax_post.php';
        die;
    }
} );

Créer le template-part adapté

Maintenant que nous lui avons dit quel bout de code charger, il faut créer ce fichier. Il s’appelle ajax_post.php et nous le placerons dans le dossier morceaux, qui existe déjàet a été créé pour ça.

Voici un contenu d’exemple pour ce fichier. Remarquer que les premières lignes du code chargent le contenu de l’article demandé grâce àla fonction query_posts.

<?php 
// charger le post
$args = array(
    'post_type' => 'post',
    'p' => $post_id,
);
// faire la demande
query_posts($args);
?>

<section id="main" class="container">
    <article class="row justify-content-center"  id="post-<?php the_ID(); ?>">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div class="col-12 col-sm-6 mb-3">
            <?php the_post_thumbnail('vignette'); ?>
        </div>
        <div class="col-12 col-sm-6">
            <h2 class="mb-3"><?php the_title(); ?></h2>
            <div class="post_content">
                <?php the_content(); ?>
            </div>
        </div>
        <?php endwhile; ?>
        <?php endif; ?>
    </article>
</section>

Et voilà, ça marche.

Placer le code dans la boucle

Ce code peut maintenant être placé dans une boucle Wordpress, avec ce code

<a href="#" data-fancybox data-type="ajax" data-src="?ajaxpost=<?php the_ID(); ?>" title="<?php the_title(); ?>">
    <?php the_post_thumbnail('vignette'); ?>
</a>

Il est possible évidemment de changer les couleurs de fond et les marges de fancybox avec les paramètres de configuration et les css.

Par exemple le code css suivant, ajouté dans le fichier style.css :

.fancybox-content {
    width  : 800px;
    height : 600px;
    max-width  : 70%;
    max-height : 80%;
    margin: 0;
}

Donnera ceci :