Personnalisation de la page de blog WordPress

Blog WordPress, personnaliser votre page en affichant son contenu statique

WordPress offre la possibilité de définir, quasiment dès le choix de son thème, des pages différenciées pour la page d’accueil et celle qui recevra le blog. Nous allons voir ici et expliquer comment prendre la main sur le template servant à afficher vos posts, et le moyen d’afficher votre contenu statique en amont de la liste ces articles, en clair : comment personnaliser sa page de blog WordPress.

Vous avez sans doute envie d’écrire et présenter une introduction à votre blog ou fil d’actualité WordPress. Nous partons ici du principe que vous tentez de customiser un thème dépourvu de builder, par le biais d’un thème enfant (cette démarche étant assez simple je vous renvoie vers l’article du codex WordPress su la création de thèmes enfants) ou en attaquant directement un starter thème comme Underscore. Alors qu’il n’y a pas de grand mystère sur le paramétrage d’une page d’accueil statique ou dynamique, il peut sembler plus déroutant de tenter d’afficher un contenu statique spécialement créé pour la page de blog en amont de la liste de vos posts (articles). Nous n’allons pas nous contenter de lister trois fonctions à placer dans un endroit précis du thème, nous allons rappeler quelques notions fondamentales du framework de WordPress, du fonctionnement de ses templates, pour enfin nous amuser avec cette page d’articles.

N.B. : Mise à jour

Récupérer l’éditeur WordPress pour la page de blog

Depuis la version 4.2 WordPress ne propose plus l’affichage de l’éditeur pour la page de blog. Afin de personnaliser celle-ci, nous pouvons donc créer un champ de texte avec le Customizer de thèmes de WordPress et récupérer son contenu avec get_theme_mod() ou redonner à notre page son éditeur pour y placer notre contenu personnalisé. Cet article concernant la deuxième méthode, voyons comment retrouver notre éditeur WordPress.

Depuis le fichier functions.php, nous utilisons le hook « edit_form_after_title » appelé juste après le titre d’une page d’édition. Nous testons notre page pour n’intervenir que s’il s’agit de la page du blog et si c’est bien le cas, nous ajoutons (pour l’occasion) le support de l’éditeur :


/**
 * Retreive Blog Page Editoe
 */
function jst_starter_retreive_editor( $post )
{
	if( isset( $post ) && get_option( 'page_for_posts' ) != $post->ID )
	{
		return false;
	}
	add_post_type_support( 'page', 'editor' );
}
add_action( 'edit_form_after_title', 'jst_starter_retreive_editor', 10 );

Repérer le template du blog

Personnaliser la page de blog WordPress requiert de repérer le template de ce dernier. Un template est un modèle servant à afficher le contenu des pages de votre site. Sur WordPress, vous êtes libres de choisir le template de chaque page grâce à une métabox (une boîte de dialogue) située dans la colonne de droite de votre page d’édition. WordPress comme d’autres CMS, vous permet de créer deux types de contenus pour vos pages :

  • Des contenus statiques, c’est-à-dire écrits une fois pour toutes et rendus tels quels.
  • Des contenus dynamiques, allant chercher de l’information en base de données et susceptible d’être mis jour très régulièrement.

Si vous avez créé puis attribué à votre blog WordPress une page dédiée sur votre site, vous pourrez constater dans sa page d’édition que les métaboxes ne vous proposent pas de choisir son template. La raison en est simple et quasi historique : votre thème utilise comme template par défaut celui du fichier index.php, qui, à l’origine, ne servait effectivement qu’à dérouler votre tunnel de posts, et ce sur la home page (cela a son importance).

Ainsi, si vous ouvrez le fichier index.php à la racine du thème Twentysixteen, vous vous rendrez compte qu’il possède deux caractéristiques. Il commence par se demander s’il va trouver des posts avec d’une expression conditionnelle (en clair, il interroge le cœur de WordPress et attend une réponse) :

<?php if( have_posts() ) : ?>

Ce qui revient à dire « S’il y’a des posts publiés … »

Ce qui est notable ici, c’est que contrairement aux templates (les fichiers) page.php ou single.php, on n’est pas certain qu’il y ait effectivement un contenu (en l’occurnce, des articles) à afficher, ce qui est un indice de la nature dynamique du contenu offert par ce code. Une page de blog affichant par essence un nombre d’articles augmentant avec le temps, elle présente un contenu statique. On est sur la bonne voie …

Ensuite vient la logique d’intégration de contenus, et là aussi on a un statement conditionnel, chargé cette fois de définir si vous avez opté pour une page de blog différente de la page d’accueil (aussi appelée front page). Je rappelle ici que le point d’exclamation renvoie là l’opposé de la proposition qui la suit (ici : is_front_page() ) :

<?php if ( is_home() && ! is_front_page() ) : ?>

Littéralement cela dit « Si tu es la page de blog (rappelez-vous la home page) ET PAS sur la page d’accueil … » (celle-là, c’est la front page).

Si la condition est remplie, le blog WordPress affiche alors dans la page d’articles (au sens littéral du terme, puisque la première balise de la page est <article>), un header (l’en-tête de l’article) intégrant un titre principal <h1>, balise réservée au titre du site pour la page d’accueil. Nous voilà donc en présence d’un fichier qui permet d’afficher un contenu différencié en fonction d’une condition : « Ai-je choisi une page d’accueil affichant la liste de mes articles ou ai-je opté pour une page interne de mon choix pour mon blog ? ». Le gros du travail est en fait effectué par WordPress en amont, qui va enregistrer en base de données l’identifiant de la page de blog pour le relier à ce fichier précis. Nous avons donc à retrouver cet identifiant pour avoir accès à « l’objet » représentant notre page de blog dans la base de données.

Votre devis en 48 H chrono !

Demandez à être rappelé !

Nous préciserons ensemble votre projet
de vive voix 

Récupérer facilement la page de blog et ses informations depuis le template

C’est là que notre système nous facilite le travail. WordPress stocke les informations générales dans une table de la base de données appelée « options« . Il nous offre un moyen on ne peut plus mnémotechnique pour récupérer ces informations, j’ai nommé la fonction get_option() (littéralement : « va chercher l’option »).

Cette fonction n’attend qu’une seule info (aussi appelé argument) : le nom de l’option que vous souhaitez avoir. De plus, ces options ont souvent un nom très parlant. Ici, nous cherchons « la page utilisée pour les posts » et l’on va utiliser page_for_posts !

Cette option/information stockée en base de données ne contient qu’un nombre, l’identifiant la page servant à afficher les posts. On va commercer par récupérer cet identifiant pour ensuite aller cherche l’objet correspondant à cet identifiant, et en extraire les données voulues :

<?php $blog_id = get_option( "page_for_posts" ); ?>

Ensuite, on va se servir d’une deuxième  fonction elle aussi bien nommée pour récupérer notre objet page : get_post().

get_post() sert aussi bien à récupérer des posts (articles), que des pages puisque quasiment toute donnée de WordPress destinée à être affichée est stockée sous forme de post dans la base de données (allez faire un tour dans la votre et constatez la présence d’une colonne « post_type » dans la table « post », vous y verrez entre autres se côtoyer des types « post » et « page« ).

Nous récupérons donc notre page de blog depuis la base de données avec :

<?php get_post( $blog_id ); ?>

Extraire le contenu de l’objet page pour le blog WordPress

C’est là que ça devient intéressant, get_post( $blog_id ) nous renvoie des informations sur la page, stockées dans un objet PHP, et comme les choses sont bien faites, on accède à ces infos en les appelant avec une syntaxe simple :

<?php $objet->mon_info; ?>

Le contenu statique de notre page étant stocké dans une information dénommée « post_content », on affiche notre contenu très facilement :

<?php echo get_post( $blog_id )->post_content; ?>

Et voilà ! Nous n’avons plus qu’à identifier l’endroit où notre blog WordPress affiche un header et un titre <h1>pour glisser en dessous un bloc affichant notre contenu. Toujours en prenant exemple sur Twentysexteen cela pourrait ressembler à ce qui suit :


<?php if ( is_home() && ! is_front_page() ) : ?>
	<?header>
		<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
	<?/header>
	<??php  $bog_id = get_option( "page_for_posts" ); ?>
	<?div class="static-home-content">
		<?php echo get_post( $blog_id )->post_content; ?> 
	<?/div>
<?php endif; ?>

Éditeur inaccessible : choisissez l’extrait

Certains thèmes brident l’accès à l’éditeur pour la page de blog. C’est par exemple le cas Pour Salient.

L’astuce consiste ici à passer par le champ « extrait » de la page. S’il n’est pas présent, vérifiez d’abord qu’une checkbox du même nom est présente dans le menu d’options que l’on ouvre avec le bouton en haut à droite de cette même page d’édition. Si la checkbox n’est présente dans ce menu il faudra l’activer en déposant de snippet dans le fichier functions.php du thème :


function moi_add_custom_supports(){
	add_post_type_support( 'page', 'excerpt' );
}
add_action( 'init', 'moi_add_custom_supports' );

La checkbox « extrait » peut désormais être cochée dans le menu « options ». Et voilà ! Maintenant, au lieu d’afficher post_content, il nous faut utiliser la propriété post_excerpt :


	<?php echo get_post( $blog_id )->post_excerpt; ?>

Personnaliser la page de blog : une nécessité

Plus de 25% des sites créés lors de l’année écoulée le sont sous WordPress et nombre d’entre eux sont des blog. Si vous souhaitez vous démarquer de vos semblables (blogueurs), pensez personnaliser votre blog WordPress aussi avec votre contenu statique. Ce contenu éditorial vous permettra de présenter votre page de façon unique. Bon pour vous, bon pour vos visiteurs et bon pour votre SEO !