Le message unique a \u00e9t\u00e9 con\u00e7u pour fournir une introduction en gras, une grande image en vedette et un contenu propre et facile \u00e0 lire. Il commence par un en-t\u00eate de h\u00e9ros personnalis\u00e9 et se termine par une section de posts associ\u00e9s. Il devrait fournir tout ce dont vous avez besoin pour cr\u00e9er un contenu de post cat\u00e9goris\u00e9 pour soutenir votre boutique. Toutes les fonctionnalit\u00e9s personnalis\u00e9es sont 100% dynamiques et vous n’avez qu’\u00e0 les utiliser : <\/p>
\n
\n
\u00c9crivez votre message<\/li>
Ajouter un extrait manuel<\/li>
S\u00e9lectionnez votre image en vedette<\/li>
Donnez-lui une cat\u00e9gorie<\/li><\/ul>
\n
\n
A note on Categories : The custom post navigation and related posts section displays content based on the current posts category. Elle utilise la premi\u00e8re cat\u00e9gorie attribu\u00e9e au post. Ainsi, si vous choisissez d’attribuer un message \u00e0 plusieurs cat\u00e9gories, il n’interrogera que la premi\u00e8re cat\u00e9gorie. <\/p>
\n
\n
L’en-t\u00eate du h\u00e9ros<\/h2>
\n
\n
L’en-t\u00eate de message unique est une configuration assez complexe. En utilisant quatre \u00e9l\u00e9ments GeneratePress distincts. Y compris 2 crochets, un en-t\u00eate d’image en vedette et un \u00e9l\u00e9ment de mise en page. L’utilisateur n’a rien \u00e0 faire pour que cela s’affiche ou soit mis \u00e0 jour dynamiquement. <\/p>
\n
\n
Les bases<\/h3>
\n
\n
Avant d’entrer dans les d\u00e9tails, si vous n’\u00eates pas familier avec le module Elements et ses \u00e9l\u00e9ments Hook, Header et Layout, commencez par lire ceci :<\/p>
\n
\n
#1 Hook : En-t\u00eate d’entr\u00e9e personnalis\u00e9e Single Post<\/h4>
\n
\n
Cet \u00e9l\u00e9ment d’accroche contient du PHP personnalis\u00e9. Il supprime la cat\u00e9gorie, le titre du post et l’extrait du post. La modification de cette configuration requiert des connaissances en PHP. Il est donc conseill\u00e9 de le laisser seul. <\/p>
\n
\n
Si vous ne souhaitez pas l’en-t\u00eate de message personnalis\u00e9, vous pouvez supprimer l’\u00e9l\u00e9ment d’accroche de l ‘en-t\u00eate de message personnalis\u00e9 <\/strong>. Vous n’aurez pas non plus besoin de l’\u00e9l\u00e9ment d’accroche et de l’\u00e9l\u00e9ment de mise en page suivants. <\/p>
\n
\n
#2 Accroche : Fade Out \u00e9l\u00e9ment d’en-t\u00eate sur d\u00e9filement vers le haut<\/h4>
\n
\n
Ce crochet contient un simple javascript vanille. Il permet d’obtenir un fondu subtil sur l’\u00e9l\u00e9ment d’en-t\u00eate personnalis\u00e9 lors du d\u00e9filement. Il n’y a pas de CSS requis. Voici le JS si vous \u00eates int\u00e9ress\u00e9. <\/p>
\n\r\n
<script>\r\nwindow.onscroll = function () {\r\n var target = document.getElementById(\"custom-post-entry-header\");\r\n\r\n var height = window.innerHeight;\r\n\r\n var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;\r\n\r\n \/\/ Change this if you want it to fade faster\r\n height = height \/ 3;\r\n var fader = (height - scrollTop) \/ height;\r\n if (fader > 0) {\r\n target.style.opacity = fader;\r\n }\r\n\r\n};\r\n<\/script><\/code><\/pre>\r\n
\n
#3 Mise en page : Supprimer le titre d’un seul post<\/h4>
\n
\n
Comme nous avons l’\u00e9l\u00e9ment d’en-t\u00eate et de navigation du message unique personnalis\u00e9<\/strong>, nous n’avons pas besoin du titre du message dans notre contenu. Cet \u00e9l\u00e9ment le supprime donc tout simplement. <\/p>
\n
\n
#4 En-t\u00eate : image en vedette de l’en-t\u00eate du message unique<\/h4>
\n
\n
Un \u00e9l\u00e9ment d’en-t\u00eate standard qui utilise l’image en vedette des posts pour l’arri\u00e8re-plan. Il a \u00e9t\u00e9 param\u00e9tr\u00e9 \u00e0 une taille pr\u00e9d\u00e9finie \u00e0 l’aide de Padding et utilise l’effet de d\u00e9filement parallaxe. <\/p>
\n
\n
Une note sur l’utilisation d’Elements<\/h3>
\n
\n
\u00c9l\u00e9ments dupliqu\u00e9s<\/h4>
\n
\n
Les \u00e9l\u00e9ments sont comme un type de message personnalis\u00e9 intelligent. Vous pouvez parfois avoir envie d’en faire plusieurs variantes. Mais au lieu de les cr\u00e9er \u00e0 partir de rien, vous pouvez utiliser le plugin Duplicate Post. Assurez-vous simplement de v\u00e9rifier l’option \u00c9l\u00e9ments dans les param\u00e8tres du plugin et utilisez l’option New Draft qu’il propose sur chaque \u00e9l\u00e9ment. <\/p>
\n
\n
Le contenu<\/h2>
\n
\n
Le message unique utilise une largeur de contenu plus \u00e9troite pour une lecture plus facile. Dans GP Premiums 1.8, l’\u00e9l\u00e9ment de mise en page mis \u00e0 jour est vraiment simple \u00e0 r\u00e9aliser. Il suffit d’aller sur Apparence > Elements > Single Post Layout -> Content Tab > Content Width<\/strong>. <\/p>
\n
\n
Notez que vous pouvez combiner ce param\u00e8tre avec l’\u00e9l\u00e9ment Remove Single Post<\/strong> Layout ci-dessus. J’ai gard\u00e9 les deux s\u00e9par\u00e9s pour plus de clart\u00e9 et au cas o\u00f9 vous souhaiteriez en supprimer un mais pas l’autre. <\/p>
\n
\n
L’\u00e9l\u00e9ment d’en-t\u00eate personnalis\u00e9 n\u00e9cessite un peu de CSS pour obtenir le m\u00eame effet. Pour modifier cette largeur, il faut \u00e9diter un peu de CSS. Veuillez noter que ce CSS a \u00e9t\u00e9 sp\u00e9cialement con\u00e7u pour l’en-t\u00eate personnalis\u00e9. Le rendre plus large peut entrer en conflit avec la navigation du post. <\/p>
\n\r\n
Si vous n’utilisez pas GP Premium 1.8, la largeur du message ne sera pas r\u00e9duite. Vous pouvez soit mettre \u00e0 jour \u00e0 la version 1.8, soit trouver le CSS ci-dessus dans Customizer > Additional CSS et le modifier en : <\/p>
\n\r\n
Single Post - Date centr\u00e9e et ligne d’en-t\u00eate<\/h3>
\n
\n
La plupart des m\u00e9tadonn\u00e9es du message unique ont \u00e9t\u00e9 d\u00e9plac\u00e9es vers l’en-t\u00eate du message personnalis\u00e9. Les m\u00e9ta restantes, la date et le by-line sont centr\u00e9s. <\/p>
\n\r\n
Pour une d\u00e9finition plus claire de la structure du contenu des posts, j’ai augment\u00e9 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\u00e9e un espace blanc plus grand au-dessus du bloc H2 que n’importe quel autre type de bloc. <\/p>
\n\r\n
Ce site a \u00e9t\u00e9 construit avec l’\u00e9diteur WP 5.0 Block (Gutenberg). C’est un excellent outil pour la r\u00e9daction de messages. Vous pouvez bien s\u00fbr installer et utiliser l’\u00e9diteur classique pour votre r\u00e9daction. De m\u00eame, vous pouvez ajouter votre constructeur de page favori, bien que personnellement je n’en utiliserais jamais un pour \u00e9crire des messages. <\/p>
\n
\n
Posts associ\u00e9s<\/h2>
\n
\n
Les messages associ\u00e9s sont affich\u00e9s 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\u00eame cat\u00e9gorie que le post en cours. <\/p>
\n
\n
Comment j’ai cr\u00e9\u00e9 les messages associ\u00e9s<\/h3>
\n
\n
#1 A WP Show Posts List<\/h4>
\n
\n
Dans le tableau de bord > WP Show Posts<\/strong> vous verrez une liste de messages nomm\u00e9e Related<\/strong>. Le titre de cette liste est tr\u00e8s important car il sera utilis\u00e9 dans l’\u00e9tape suivante. Si le nom de la liste est modifi\u00e9, vous devrez mettre \u00e0 jour le code qui suit. La mise en place de la liste est assez simple. Nous s\u00e9lectionnons le contenu et le nombre de colonnes \u00e0 afficher. Nous ne s\u00e9lectionnons pas de taxinomie. Cela sera fait par notre code. <\/p>
\n
\n
#2 Crochet : Posts associ\u00e9s<\/h4>
\n
\n
Nous utilisons le crochet trouv\u00e9 dansAppearance > Elements > Related Posts.<\/strong> Nous avons s\u00e9lectionn\u00e9 le crochet before_footer<\/code> et coch\u00e9 Execute PHP. Nos r\u00e8gles d’affichage sont d\u00e9finies 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. <\/p>
\n\r\n
Comme not\u00e9 au #1, le nom de la liste doit correspondre \u00e0 cette \u00e9tiquette.<\/p>
\n
\n
#3 Styling les posts associ\u00e9s bloc<\/h4>
\n
\n
Dans notre PHP \/ HTML, vous verrez deux classes ajout\u00e9es \u00e0 la DIV parent. Elles sont wpsp-related-posts<\/strong> et grid-container<\/strong>. grid-container<\/strong> est une classe GeneratePress et elle d\u00e9finit simplement la largeur du conteneur \u00e0 celle du Customizer. Son caract\u00e8re dynamique est agr\u00e9able. wpsp-related-posts<\/strong> est une classe personnalis\u00e9e qui d\u00e9finit le padding, les marges et les couleurs d’arri\u00e8re-plan. Pour cela, consultez le Customizer > Additional CSS<\/strong>: <\/p>
\n\r\n
La modification des couleurs ou des styles d’arri\u00e8re-plan s’effectue en \u00e9ditant ce CSS.<\/p>
\n","protected":false},"excerpt":{"rendered":"
Cat\u00e9goriser les posts pour cr\u00e9er des guides, des modes d’emploi et des contenus en vedette est un excellent moyen de booster la pr\u00e9sence de votre boutique. L’en-t\u00eate de post unique et le post unique ont \u00e9t\u00e9 con\u00e7us pour faire exactement cela. Avec un titre de h\u00e9ros, un extrait et une navigation de post personnalis\u00e9s. 100% dynamique, tout ce dont vous avez besoin est d’ajouter du contenu. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[71],"tags":[],"class_list":["post-5611","post","type-post","status-publish","format-standard","hentry","category-stylisme-des-produits-derives","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/comments?post=5611"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5611\/revisions"}],"predecessor-version":[{"id":5612,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5611\/revisions\/5612"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/media?parent=5611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/categories?post=5611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/tags?post=5611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}