{"id":425,"date":"2019-09-12T08:30:42","date_gmt":"2019-09-12T08:30:42","guid":{"rendered":"https:\/\/kenzap.blog\/?p=425"},"modified":"2019-12-14T10:46:21","modified_gmt":"2019-12-14T10:46:21","slug":"comment-d%C3%A9sactiver-temporairement-et-masquer-les-blocs-gutenberg-de-laper%C3%A7u","status":"publish","type":"post","link":"https:\/\/kenzap.blog\/fr\/comment-d%C3%A9sactiver-temporairement-et-masquer-les-blocs-gutenberg-de-laper%C3%A7u\/","title":{"rendered":"Comment d\u00e9sactiver temporairement et masquer les blocs Gutenberg de l&#8217;aper\u00e7u"},"content":{"rendered":"<p>Lorsque vous concevez votre site Web et cr\u00e9ez plusieurs it\u00e9rations dans le m\u00eame message ou la m\u00eame page, il est assez courant que vous ayez besoin de cacher certaines sections (blocs Gutenberg) de l&#8217;aper\u00e7u du site Web.<\/p>\n<p>Ce petit guide vous donnera un bref aper\u00e7u de la fa\u00e7on la plus optimale de proc\u00e9der. Nous vous recommandons deux m\u00e9thodes :<\/p>\n<ul>\n<li>Cacher l&#8217;\u00e9l\u00e9ment \u00e0 l&#8217;aide du CSS.<\/li>\n<li>Suppression temporaire des blocs \u00e0 l&#8217;aide de la fonction <strong>Ajouter aux blocs r\u00e9utilisables<\/strong>.<\/li>\n<\/ul>\n<h2>Approche SSC<\/h2>\n<p>Ces deux approches sont fondamentalement diff\u00e9rentes. Le CSS maintient toujours votre section dans la page et la charge pendant la pr\u00e9visualisation de page mais la r\u00e8gle CSS demande aux navigateurs de la masquer m\u00eame si elle est charg\u00e9e. <\/p>\n<p>Cette approche est bonne si vous voulez garder la structure du bloc de page sans aucun changement mais est mauvaise \u00e0 long terme et pour le r\u00e9f\u00e9rencement car la section est toujours r\u00e9cup\u00e9r\u00e9e de la base de donn\u00e9es WordPress et en cours de chargement.<\/p>\n<h3>\u00c9tape 1 &#8211; Attribuer une classe personnalis\u00e9e<\/h3>\n<p>Cliquez sur le bloc que vous souhaitez masquer. Ensuite, dans la partie droite de votre page, sous le volet de contr\u00f4le de l&#8217;inspecteur, trouvez le champ de <em>saisie Avanc\u00e9 &gt; Classe CSS suppl\u00e9mentaire<\/em>. C&#8217;est ici que vous pouvez fournir votre classe personnalis\u00e9e, par exemple, <strong>custom_class<\/strong>.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kenzap.blog\/wp-content\/uploads\/2019\/09\/custom_class_to_block.jpg\" alt=\"\" class=\"wp-image-428\"\/><\/figure>\n<h3>\u00c9tape 2 &#8211; Cr\u00e9er une r\u00e8gle CSS<\/h3>\n<p>La prochaine et derni\u00e8re \u00e9tape consiste \u00e0 connecter cette classe \u00e0 une r\u00e8gle CSS qui demandera \u00e0 tous les \u00e9l\u00e9ments et \u00e0 ses enfants contenant cette classe d&#8217;\u00eatre cach\u00e9s. Le code peut ressembler \u00e0 ce qui suit et peut \u00eatre copi\u00e9 coll\u00e9 dans la section Apparence &gt; Personnaliser &gt; CSS personnalis\u00e9 de votre administrateur WordPress.<\/p>\n<p>Notez qu&#8217;il y a un point devant .<strong> custom_class<\/strong> alors qu&#8217;il n&#8217;\u00e9tait pas et ne devrait pas \u00eatre pr\u00e9sent dans le champ de saisie <em>Classe CSS suppl\u00e9mentaire<\/em>.<\/p>\n<h2>Approche des<strong> blocs r\u00e9utilisables<\/strong><\/h2>\n<p>Un des principaux avantages de cette approche est qu&#8217;elle permet de supprimer compl\u00e8tement un ou plusieurs blocs adjacents de la page. M\u00eame si le bloc peut \u00eatre lourd, la fonction de <strong>bloc r\u00e9utilisable<\/strong> du personnalisateur maintiendra sa structure et son contenu personnalis\u00e9s.<\/p>\n<h3>\u00c9tape 1 &#8211; S\u00e9lectionner un ou plusieurs blocs<\/h3>\n<p>Vous ne pouvez s\u00e9lectionner qu&#8217;un ou plusieurs blocs si vous souhaitez masquer plusieurs sections en une seule op\u00e9ration. S\u00e9lectionnez donc le premier bloc que vous voulez masquer et ne rel\u00e2chez pas le bouton shift sur votre clavier et \u00e0 l&#8217;aide de la souris ou des fl\u00e8ches du clavier, s\u00e9lectionnez les blocs adjacents.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kenzap.blog\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-12-at-4.00.36-PM.jpg\" alt=\"\" class=\"wp-image-432\"\/><\/figure>\n<p>Notez la couleur bleue de la s\u00e9lection.<\/p>\n<h3>\u00c9tape 2 &#8211; Ajouter aux blocs r\u00e9utilisables<\/h3>\n<p>Comme le montre l&#8217;image de la section pr\u00e9c\u00e9dente, il y a une ic\u00f4ne \u00e0 trois points. Cliquez dessus et trouvez l&#8217;option <strong>Ajouter aux blocs r\u00e9utilisables<\/strong>. Cette op\u00e9ration permet d&#8217;enregistrer toutes les personnalisations et l&#8217;\u00e9tat de votre bloc. Vous pouvez maintenant supprimer compl\u00e8tement les blocs s\u00e9lectionn\u00e9s et appeler cet ensemble de blocs r\u00e9utilisables sous toute autre page ou message WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous concevez votre site Web et cr\u00e9ez plusieurs it\u00e9rations dans le m\u00eame message ou la m\u00eame page, il est assez courant que vous ayez besoin de cacher certaines sections (blocs Gutenberg) de l&#8217;aper\u00e7u du site Web. Ce petit guide vous donnera un bref aper\u00e7u de la fa\u00e7on la plus optimale de proc\u00e9der. Nous vous &hellip; <a href=\"https:\/\/kenzap.blog\/fr\/comment-d%C3%A9sactiver-temporairement-et-masquer-les-blocs-gutenberg-de-laper%C3%A7u\/\" class=\"more-link\">Continue reading <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,18],"tags":[],"_links":{"self":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts\/425"}],"collection":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":0,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"wp:attachment":[{"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kenzap.blog\/fr\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}