Stylisme de produits dérivés

Le courrier unique

Catégoriser des posts pour créer des guides, des comment faire et des contenus en vedette est un excellent moyen de booster la présence de votre boutique. L'en-tête de message unique et le message unique ont été conçus pour faire exactement cela. Avec un titre de héros personnalisé, un extrait et une navigation dans le post. 100% dynamique tout ce dont vous avez besoin est d'ajouter du contenu.

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. Commencez par un en-tête de héros personnalisé et terminez 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, il suffit de le vouloir :

  • Écrivez votre message
  • Ajouter un extrait manuel
  • Sélectionne ton 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. Il utilise la première catégorie attribuée au message. 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. Utiliser quatre éléments GeneratePress distincts. Comprend 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 de manière dynamique.

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 : Single Post Custom Entry Header

Cet élément d’accroche contient du PHP personnalisé. Il supprime la catégorie, le titre du post et l’extrait du post. Changer 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 Single Post Custom Entry Header Hook. Vous n’aurez pas non plus besoin de l’élément d’accroche et de l’élément de mise en page suivants.

#2 Accrocheur : Fade Out élément d’en-tête sur défilement vers le haut

Ce crochet contient quelques simples javascript vanille. Cela permet d’obtenir un fondu subtil sur l’élément d’en-tête personnalisé lors du défilement. Aucun CSS n’est 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 unique du post

Comme nous disposons de l’en-tête d’entrée unique personnalisée et de l’élément de navigation du message, nous n’avons pas besoin du titre du message dans notre contenu. Cet élément supprime donc simplement cela.

#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 de la page d’accueil pour l’arrière-plan. Elle a été configurée à 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 de duplication

Les éléments sont comme un type de message personnalisé intelligent. Parfois, vous pouvez vouloir en faire de multiples variations. Mais au lieu de les créer à partir de zéro, vous pouvez utiliser le plugin Duplicate Post. Assurez-vous simplement de vérifier l’option Éléments dans les paramètres des plugins et d’utiliser l’option Nouveau brouillon qu’elle propose sur chaque élément.

Le contenu

Le message unique utilise une largeur de contenu plus étroite pour faciliter la lecture. Dans GP Premiums 1.8 updated Layout Element, c’est vraiment simple à faire. Il suffit d’aller sur Apparence > Elements > Single Post Layout –> Content Tab > Content Width.

To note you can combine this setting with the above Remove Single Post Layout element. J’ai gardé les deux séparés pour plus de clarté et au cas où tu souhaiterais en enlever 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 quelques 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 dans les messages.

#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
}

Courrier unique – date centrée et by-line

La plupart des métadonnées du message unique ont été déplacées dans l’en-tête du message personnalisé. Le méta restant, la date et le by-line sont centrés.

.single-post .entry-header {
    text-align: center;
}

Single Post – 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 indique clairement au lecteur qu’ils commencent 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 à l’aide de l’éditeur WP 5.0 Block (Gutenberg). C’est un excellent outil pour la rédaction de posts. Vous pouvez bien sûr installer et utiliser l’éditeur classique pour votre écriture. Likewise you could add your favorite page builder although I personally would never use one for writing posts.

Posts associés

Les messages associés sont affichés en dessous de chacun d’entre eux. Ceci est fourni par l’excellent WP Show Posts. Il est à nouveau 100% dynamique et affiche les posts dans la même catégorie que le post actuel.

Comment j’ai fait les posts lié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 très simple. Nous sélectionnons le contenu et le nombre de colonnes à afficher. Nous ne sélectionnons pas de taxinomie. C’est notre code qui s’en chargera.

#2 Crochet : Posts associés

Nous utilisons le crochet trouvé dansAppearance > Elements > Related Posts. Nous avons sélectionné le crochet before_footer et vérifié Execute PHP. Nos règles d’affichage sont définies pour tous les messages. Pour le contenu, nous utilisons un peu de PHP au lieu de l’habituel shortcode 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 indiqué au point 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 au DIV parent. Ils sont des wpsp-related-posts et des grid-container.
grid-container est une classe GeneratePress et elle définit simplement la largeur du conteneur à celle du Customizer. C’est dynamique, ce qui est agréable.
wpsp-related-posts est une classe personnalisée et définit le padding, les marges et les couleurs d’arrière-plan. Regarde pour cela dans 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 se fait en éditant ce CSS

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00