Le message unique a été conçu pour fournir une introduction en gras, une grande image en vedette et un contenu propre et facile à lire. Il commence par un en-tête de héros personnalisé et se termine par une section de posts associés. Il devrait fournir tout ce dont vous avez besoin pour créer un contenu de post catégorisé pour soutenir votre boutique. Toutes les fonctionnalités personnalisées sont 100% dynamiques et vous n’avez qu’à les utiliser :
- Écrivez votre message
- Ajouter un extrait manuel
- Sélectionnez votre image en vedette
- Donnez-lui une catégorie
A note on Categories : The custom post navigation and related posts section displays content based on the current posts category. Elle utilise la première catégorie attribuée au post. Ainsi, si vous choisissez d’attribuer un message à plusieurs catégories, il n’interrogera que la première catégorie.
L’en-tête du héros
L’en-tête de message unique est une configuration assez complexe. En utilisant quatre éléments GeneratePress distincts. Y compris 2 crochets, un en-tête d’image en vedette et un élément de mise en page. L’utilisateur n’a rien à faire pour que cela s’affiche ou soit mis à jour dynamiquement.
Les bases
Avant d’entrer dans les détails, si vous n’êtes pas familier avec le module Elements et ses éléments Hook, Header et Layout, commencez par lire ceci :
Les quatre éléments
#1 Hook : En-tête d’entrée personnalisée Single Post
Cet élément d’accroche contient du PHP personnalisé. Il supprime la catégorie, le titre du post et l’extrait du post. La modification de cette configuration requiert des connaissances en PHP. Il est donc conseillé de le laisser seul.
Si vous ne souhaitez pas l’en-tête de message personnalisé, vous pouvez supprimer l’élément d’accroche de l ‘en-tête de message personnalisé . Vous n’aurez pas non plus besoin de l’élément d’accroche et de l’élément de mise en page suivants.
#2 Accroche : Fade Out élément d’en-tête sur défilement vers le haut
Ce crochet contient un simple javascript vanille. Il permet d’obtenir un fondu subtil sur l’élément d’en-tête personnalisé lors du défilement. Il n’y a pas de CSS requis. Voici le JS si vous êtes intéressé.
<script>
window.onscroll = function () {
var target = document.getElementById("custom-post-entry-header");
var height = window.innerHeight;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
// Change this if you want it to fade faster
height = height / 3;
var fader = (height - scrollTop) / height;
if (fader > 0) {
target.style.opacity = fader;
}
};
</script>#3 Mise en page : Supprimer le titre d’un seul post
Comme nous avons l’élément d’en-tête et de navigation du message unique personnalisé, nous n’avons pas besoin du titre du message dans notre contenu. Cet élément le supprime donc tout simplement.
#4 En-tête : image en vedette de l’en-tête du message unique
Un élément d’en-tête standard qui utilise l’image en vedette des posts pour l’arrière-plan. Il a été paramétré à une taille prédéfinie à l’aide de Padding et utilise l’effet de défilement parallaxe.
Une note sur l’utilisation d’Elements
Éléments dupliqués
Les éléments sont comme un type de message personnalisé intelligent. Vous pouvez parfois avoir envie d’en faire plusieurs variantes. Mais au lieu de les créer à partir de rien, vous pouvez utiliser le plugin Duplicate Post. Assurez-vous simplement de vérifier l’option Éléments dans les paramètres du plugin et utilisez l’option New Draft qu’il propose sur chaque élément.
Le contenu
Le message unique utilise une largeur de contenu plus étroite pour une lecture plus facile. Dans GP Premiums 1.8, l’élément de mise en page mis à jour est vraiment simple à réaliser. Il suffit d’aller sur Apparence > Elements > Single Post Layout -> Content Tab > Content Width.
Notez que vous pouvez combiner ce paramètre avec l’élément Remove Single Post Layout ci-dessus. J’ai gardé les deux séparés pour plus de clarté et au cas où vous souhaiteriez en supprimer un mais pas l’autre.
L’élément d’en-tête personnalisé nécessite un peu de CSS pour obtenir le même effet. Pour modifier cette largeur, il faut éditer un peu de CSS. Veuillez noter que ce CSS a été spécialement conçu pour l’en-tête personnalisé. Le rendre plus large peut entrer en conflit avec la navigation du post.
#post-nav .post-nav-entry-header {
max-width: 680px;
margin-left: auto;
margin-right: auto
}Narrow Content Pre GP Premium 1.8
Si vous n’utilisez pas GP Premium 1.8, la largeur du message ne sera pas réduite. Vous pouvez soit mettre à jour à la version 1.8, soit trouver le CSS ci-dessus dans Customizer > Additional CSS et le modifier en :
#post-nav .post-nav-entry-header, .single-post #content {
max-width: 680px;
margin-left: auto;
margin-right: auto
}Single Post - Date centrée et ligne d’en-tête
La plupart des métadonnées du message unique ont été déplacées vers l’en-tête du message personnalisé. Les méta restantes, la date et le by-line sont centrés.
.single-post .entry-header {
text-align: center;
}Poste unique - espace blanc accru
Pour une définition plus claire de la structure du contenu des posts, j’ai augmenté l’espace entre les paragraphes et les titres H2. Cela permet d’identifier clairement au lecteur qu’il commence une nouvelle section. Cette CSS crée un espace blanc plus grand au-dessus du bloc H2 que n’importe quel autre type de bloc.
.single-post .entry-content *+h2 {
margin-top: 64px;
}Ajouter du contenu
Ce site a été construit avec l’éditeur WP 5.0 Block (Gutenberg). C’est un excellent outil pour la rédaction de messages. Vous pouvez bien sûr installer et utiliser l’éditeur classique pour votre rédaction. De même, vous pouvez ajouter votre constructeur de page favori, bien que personnellement je n’en utiliserais jamais un pour écrire des messages.
Posts associés
Les messages associés sont affichés en dessous de chaque message. Ceci est fourni par l’excellent WP Show Posts. Encore une fois, il est 100% dynamique et affiche les posts dans la même catégorie que le post en cours.
Comment j’ai créé les messages associés
#1 A WP Show Posts List
Dans le tableau de bord > WP Show Posts vous verrez une liste de messages nommée Related. Le titre de cette liste est très important car il sera utilisé dans l’étape suivante. Si le nom de la liste est modifié, vous devrez mettre à jour le code qui suit. La mise en place de la liste est assez simple. Nous sélectionnons le contenu et le nombre de colonnes à afficher. Nous ne sélectionnons pas de taxinomie. Cela sera fait par notre code.
#2 Crochet : Posts associés
Nous utilisons le crochet trouvé dansAppearance > Elements > Related Posts. Nous avons sélectionné le crochet before_footer et coché Execute PHP. Nos règles d’affichage sont définies sur All Posts. Pour le contenu, nous utilisons un peu de PHP au lieu du code court habituel WP Show Posts. C’est ainsi qu’il affiche dynamiquement notre contenu.
<div class="wpsp-related-posts grid-container">
<h2>Related Posts</h2>
<?php
if ( is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
} else {
$cat = get_category( get_query_var( 'cat' ) );
}
$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>Vous verrez dans cette ligne le nom de la liste related:
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );Comme noté au #1, le nom de la liste doit correspondre à cette étiquette.
#3 Styling les posts associés bloc
Dans notre PHP / HTML, vous verrez deux classes ajoutées à la DIV parent. Elles sont wpsp-related-posts et grid-container.
grid-container est une classe GeneratePress et elle définit simplement la largeur du conteneur à celle du Customizer. Son caractère dynamique est agréable.
wpsp-related-posts est une classe personnalisée qui définit le padding, les marges et les couleurs d’arrière-plan. Pour cela, consultez le Customizer > Additional CSS:
.wpsp-related-posts {
background-color: #f2f3f4;
padding: 64px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpsp-related-posts h2 {
margin-bottom: 64px;
}La modification des couleurs ou des styles d’arrière-plan s’effectue en éditant ce CSS.
