Comment créer des modèles de publication uniques personnalisés dans WordPress

Avez-vous déjà vu une page de détails de publication avec une mise en page complètement différente des autres publications sur le même site ? C'est probablement parce qu'il utilise un modèle personnalisé. Vous pouvez attribuer un modèle personnalisé à des publications individuelles, ce qui vous donne une flexibilité accrue quant à l'apparence de votre site.

Vous souhaitez apprendre à créer un modèle de publication unique personnalisé ? Dans cet article, je vais vous montrer comment vous pouvez facilement créer le vôtre !

L'avantage des modèles personnalisés

Avant de commencer à en créer un, explorons pourquoi vous pourriez avoir besoin d'un modèle personnalisé et ce qu'il fait.

Si vous souhaitez qu'une publication ou un type de publication particulier se démarque du reste de votre contenu, vous pouvez envisager de créer un modèle de publication unique personnalisé. Ce modèle ne sera appliqué qu'aux publications auxquelles vous l'attribuez, ce qui signifie qu'il peut avoir une mise en page entièrement différente de vos publications standard. Une conception et une mise en page uniques peuvent alors augmenter l'engagement des utilisateurs pour ce poste particulier.

Prêt à développer le vôtre ? La création et l'utilisation d'un modèle de publication personnalisé est similaire à un modèle de page personnalisé.

Comment créer un modèle de message personnalisé

J'utiliserai le thème Twenty Seventeen pour mon exemple, mais le processus sera le même pour tous les thèmes.

Avant de créer un modèle de publication personnalisé, je vais d'abord créer un thème enfant. Vous pouvez travailler dans le thème principal, mais puisque vous créez un modèle personnalisé, si vous mettez à jour le thème parent, vous perdrez votre modèle. Pour cette raison, il est recommandé de séparer vos modèles personnalisés du thème principal.

Pour un modèle personnalisé, vous devez définir un nom de modèle (le nom du modèle) et un type de publication de modèle (où ce modèle sera utilisé). Il ressemble à ceci :

 [php]
<?php
/* Nom du modèle : message pleine largeur * Type de message du modèle : post*/ /*Le modèle pour afficher les messages individuels en pleine largeur. */
get_header( );
?>
[/php]

Lorsque vous enregistrez le fichier, conservez le nom du fichier correspondant au nom du modèle, comme full-width-post.php . Si vous affichez une publication à partir du panneau d'administration, le nouveau modèle s'affichera dans une liste déroulante de la section Attributs de la publication.

Notre modèle personnalisé est prêt, mais il n'est pas encore utile. Rendons-le un peu plus avantageux !

Remarque : Nous allons travailler sur plusieurs fichiers, alors gardez une trace des noms de fichiers et des dossiers.

Voici la disposition actuelle des pages d'articles de blog dans le thème Twenty Seventeen. J'en suis content, alors on va laisser tomber.

Maintenant, disons que vous voulez une mise en page pleine largeur pour quelques articles. Nous mettrons le titre du message au-dessus des métadonnées. Les métadonnées doivent avoir une bordure en haut et en bas, et le titre et les métadonnées doivent être alignés au centre. Voici le wireframe :

Pour créer cette mise en page, vous devez trouver quel fichier est responsable de l'affichage des pages de détails de la publication. Dans la plupart des thèmes, single.php est le fichier, sauf s'il existe certains modèles prédéfinis. La structure du code varie d'un thème à l'autre, il peut donc falloir un peu d'apprentissage pour comprendre le fonctionnement de votre thème particulier.

Une fois que vous avez trouvé le fichier qui affiche les pages de détails des publications, vous devriez savoir si une fonction est utilisée pour appeler un autre fichier ou si le modèle est créé directement. Dans cet exemple avec le thème Twenty Seventeen, il s'agit de la fonction get_template_part.

Le chemin get_template_part est la partie la plus importante à suivre ici.

 [php]

<div class="wrap">

<div id="primaire" class="zone de contenu">
        	<main id="main" class="site-principal" rôle="principal">
              	<?php /* Démarrer la boucle */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // Si les commentaires sont ouverts ou si nous avons au moins un commentaire, chargez le modèle de commentaire. if ( comments_open() || get_comments_number() ) : comments_template(); fin si; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' Précédent', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . Twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</ span>%title</span>',
                          	'next_text' => '<span class="texte-lecteur-d'écran">' . __( 'Article suivant', 'vingt-sept' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Suivant', 'vingt-sept' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . vingt-sept_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
                    	) );
              	pendant ce temps; // Fin de la boucle.
              	?>
[/php]

Comme vous pouvez le voir, cela fait référence à un chemin :

 [php]
get_template_part( 'template-parts/post/content', get_post_format()
);
[/php] 

Ainsi, le fichier content.php est appelé à l'intérieur single.ph pour afficher la page des détails de la publication.

Maintenant que vous savez comment fonctionne le fichier single.php , copions-en le code et collons-le dans notre fichier full-width-post.php précédemment créé dans le thème enfant. Puisqu'il s'agira d'un modèle pleine largeur, nous supprimerons la barre latérale.

Copiez maintenant le fichier content.php à partir du chemin mentionné ci-dessus. Vous pouvez le coller dans le même répertoire où se trouve votre fichier de modèle, mais je suggérerais de suivre la même structure de dossiers que le thème parent.

Vous pouvez conserver le nom du fichier tel quel, mais si jamais vous souhaitez modifier quelque chose dans le modèle par défaut, cela provoquera un conflit. Pour éviter tout problème, je suggérerais de renommer le fichier et de le garder pertinent pour le nom du modèle, tel que content-full-width.php .

Les fichiers sont en place, alors modifions maintenant le code pour échanger le titre du message et publier les métadonnées.

 [php]

<header class="entry-header">
        	<?php

        	si ( est_unique() ) {
              	le titre( '

<h1 class="entry-title">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	le titre( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="signet">', '</a></h3>

' );
        	} autre {
              	le titre( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="signet">', '</a></h2>

' );
        	}

        	si ( 'poster' === get_post_type() ) {

              	écho '

<div class="entry-meta">' ;
                    	si ( est_unique() ) {
                    	  	vingt-sept_posté_le();
                    	} autre {
                          	echo vingt-sept_heure_lien();
                          	vingt-sept_edit_link();
                    	} ;
              	echo '</div>

<!-- .entry-meta -->';
        	} ;
        	?>
  	</header>

<!-- .entry-header -->
[/php]

Pour utiliser ce modèle, modifiez le message souhaité à partir de l'administrateur WordPress et attribuez le modèle à partir du menu déroulant.

Si vous vérifiez le message sur le front-end, il n'est toujours pas en pleine largeur, mais le titre et les métadonnées ont changé de place, nous savons donc que le message utilise notre modèle personnalisé

Nous devons ajouter du CSS pour le rendre en pleine largeur. WordPress génère automatiquement une classe selon le nom du modèle dans la section du corps.

Utilisez cette classe pour cibler ce modèle particulier. Vous pouvez ajouter le CSS au fichier style.css du thème enfant.

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
flotteur : aucun ;
largeur : automatique ;
}

.post-template-full-width-post .entry-header{
text-align:center;
marge inférieure : 1,3 em ;
}

.post-template-full-width-post .entry-meta{
border-top : 1px solide #ccc ;
border-bottom : 1px solide #ccc ;
rembourrage : 15px 0 ;
}
[/cs]

Nous avons maintenant la mise en page que nous voulions. Tout message utilisant ce modèle aura exactement le même style.

Vous pouvez créer autant de modèles personnalisés que vous le souhaitez pour répondre à vos besoins. Vous pouvez même créer des modèles basés sur des catégories de publication.

Puis-je utiliser un plugin pour cela ?

Si vous n'êtes pas à l'aise avec les codes PHP, vous pouvez utiliser certains plugins, mais je dois admettre qu'il existe très peu de plugins disponibles pour créer des modèles de publication personnalisés et la plupart d'entre eux ne sont pas très utiles car vous devez de toute façon créer manuellement le modèle.

J'ai trouvé le plugin Post Custom Templates Lite très utile. C'est un plugin gratuit qui vous permet de créer des modèles de publication sans aucun codage dans une belle interface glisser-déposer. Il a beaucoup d'options de personnalisation, donc si vous souhaitez personnaliser un modèle de publication, en général, ce plugin peut vous aider.

Remarque : La version gratuite vous permet uniquement de personnaliser les modèles de publication normaux. Vous devez utiliser la version pro pour pouvoir créer des modèles de publication personnalisés et obtenir des fonctionnalités supplémentaires.

Conclusion

Que vous travailliez manuellement ou que vous utilisiez un plugin pour créer un modèle de publication unique personnalisé, cela permet à vos publications les plus importantes de se démarquer des autres. Pour vous inspirer, consultez le site de Brian Dean ; il utilise un modèle particulier pour ses messages de guidage définitifs afin de les rendre uniques par rapport au reste de ses messages.

Alors, essayez-le et créez votre propre modèle de publication unique ! Pour obtenir les meilleurs résultats pour chaque site que vous créez, choisissez la plate-forme d'hébergement géré de WP Engine comme source unique d'hébergement WordPress !