![\"Ajouter](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152503-61e4e03345086.png\")
<\/a><\/p>\nLa t\u00eate haute!<\/h3>\n
Ceci est un tutoriel pour cr\u00e9er votre propre barre lat\u00e9rale personnalis\u00e9e. Mais si vous souhaitez simplement ajouter des m\u00e9ta\/param\u00e8tres \u00e0 la barre lat\u00e9rale standard de l’inspecteur (onglet "Document"), j’ai un tutoriel pour cela\u00a0:<\/p>\n
Ce que nous allons cr\u00e9er<\/h2>\n
WordPress Gutenberg permet aux d\u00e9veloppeurs de cr\u00e9er des barres lat\u00e9rales personnalis\u00e9es en cr\u00e9ant un plugin dit Javascript. (\u00c0 ne pas confondre avec les plugins WordPress traditionnels). En utilisant un plugin Javascript, nous pouvons cr\u00e9er une nouvelle barre lat\u00e9rale et \u00e9galement nous connecter au menu "Outils et options".<\/p>\n
Nous ajouterons un nouvel \u00e9l\u00e9ment de menu dans les "Outils" qui ouvrira notre barre lat\u00e9rale personnalis\u00e9e. Le contenu de la barre lat\u00e9rale d\u00e9pend enti\u00e8rement de vous, mais je vais passer en revue quelques exemples, y compris comment connecter un champ m\u00e9ta post \u00e0 l’int\u00e9rieur.<\/p>\n
Pour ce tutoriel, j’\u00e9crirai ES6\/ESNext Javascript avec JSX, ce qui signifie que nous devons configurer un compilateur. Si vous souhaitez suivre et ne pas \u00e9crire de Javascript ES5, vous devrez configurer un environnement de d\u00e9veloppement qui compile votre Javascript au fur et \u00e0 mesure. Si vous n’\u00eates pas familier avec cela, suivez mon article expliquant comment le configurer<\/a>, puis revenez ici.<\/p>\n J’ai configur\u00e9 mon J’\u00e9cris ceci dans un th\u00e8me, mais cela fonctionne de la m\u00eame mani\u00e8re dans un plugin. N’oubliez pas d’ajuster les chemins lors de l’ajout du script \u00e0 l’\u00e9diteur.<\/p>\n Pour ajouter notre script \u00e0 l’\u00e9diteur Gutenberg, nous devons \u00e9crire du PHP. Si vous \u00eates dans un th\u00e8me, Nous cr\u00e9ons une fonction accroch\u00e9e \u00e0 Parce que nous mettons le script en file d’attente dans le crochet La premi\u00e8re \u00e9tape consiste \u00e0 enregistrer un plugin. Nous faisons cela avec la En tant que param\u00e8tre du registerPlugin, nous fournissons un nom (assurez-vous qu’il est unique) et un objet avec des param\u00e8tres. Au minimum, vous devez fournir un composant pour la propri\u00e9t\u00e9 de rendu. Vous pouvez \u00e9galement \u00e9ventuellement ajouter une ic\u00f4ne \u00e0 partir des dashicons de WordPress<\/a>. Gardez \u00e0 l’esprit que si vous ne sp\u00e9cifiez pas d’ic\u00f4ne, il reviendra \u00e0 l’ic\u00f4ne du plugin. \u00c0 des fins de d\u00e9monstration, j’utilise l’ En ce qui concerne le composant, nous commen\u00e7ons par d\u00e9finir un composant de base qui renvoie un simple div contenant du texte al\u00e9atoire. Et avant tout le code nous d\u00e9structurons les fonctions des packages que nous voulons utiliser.<\/p>\n Si rien ne se passe (pas m\u00eame des erreurs) lorsque vous actualisez Gutenberg, nous sommes tous pr\u00eats \u00e0 partir. Nous ne voyons pas notre composant car nous n’avons pas indiqu\u00e9 \u00e0 WordPress o\u00f9 le rendre. La prochaine \u00e9tape consiste \u00e0 s’accrocher au menu de la barre lat\u00e9rale personnalis\u00e9e et aux composants du menu des outils pour rendre nos \u00e9l\u00e9ments.<\/p>\n Mais d’abord une explication sur la fa\u00e7on dont Gutenberg g\u00e8re les barres lat\u00e9rales personnalis\u00e9es et pourquoi nous devons faire ce que nous ferons. Lorsque nous enregistrons avec succ\u00e8s une barre lat\u00e9rale personnalis\u00e9e, une chose se produit automatiquement au d\u00e9part. Gutenberg ajoutera un raccourci \u00e0 notre barre lat\u00e9rale dans la barre d’outils sup\u00e9rieure, \u00e0 c\u00f4t\u00e9 du menu Outils. Cela se produit parce que notre barre lat\u00e9rale est automatiquement "\u00e9pingl\u00e9e".<\/p>\n Le probl\u00e8me d’ajouter simplement une barre lat\u00e9rale personnalis\u00e9e est que n’importe quel utilisateur peut "d\u00e9tacher" ce raccourci. Quand ils font cela, il n’y a plus de point d’acc\u00e8s pour ouvrir \u00e0 nouveau la barre lat\u00e9rale\u00a0! C’est pourquoi nous devons \u00e9galement ajouter un \u00e9l\u00e9ment de menu au menu Outils.<\/p>\n L’enregistrement d’une barre lat\u00e9rale personnalis\u00e9e se fait avec le composant Pour le L’ajout d’un \u00c9tant donn\u00e9 que React n\u00e9cessite un seul n\u0153ud d’emballage autour du retour du composant, nous encapsulons tout dans un Avec le code ci-dessus, nous obtiendrons les deux (tr\u00e8s probablement trois) choses suivantes. Vous obtiendrez un raccourci d’ic\u00f4ne de carotte dans la barre d’outils (si vous ne l’avez pas encore retir\u00e9). Cliquer dessus ouvrira la barre lat\u00e9rale. Vous aurez \u00e9galement un nouvel \u00e9l\u00e9ment de menu dans la barre lat\u00e9rale du menu Outils, sous le titre "Plugins".<\/p>\n Le contenu r\u00e9el de la barre lat\u00e9rale d\u00e9pend enti\u00e8rement de vous. Vous avez juste besoin d’ajouter du HTML ou des composants \u00e0 l’int\u00e9rieur du Vous remarquerez peut-\u00eatre que le contenu de la barre lat\u00e9rale manque de rembourrage. Ceci est intentionnel car l’id\u00e9e est que vous allez cr\u00e9er des panneaux \u00e0 l’int\u00e9rieur de cette barre lat\u00e9rale. Les panneaux sont les sections pliables de la barre lat\u00e9rale normale de Gutenberg. Ce sont des composants que vous pouvez tr\u00e8s facilement ajouter dans votre barre lat\u00e9rale personnalis\u00e9e. Vous pouvez ajouter autant de panneaux que vous le souhaitez et ils sont parfaits pour regrouper diff\u00e9rentes choses.<\/p>\n Voyons rapidement comment nous pouvons ajouter des panneaux \u00e0 notre barre lat\u00e9rale. Si vous avez cr\u00e9\u00e9 vos propres types de blocs personnalis\u00e9s, vous connaissez peut-\u00eatre ces composants. Nous utilisons Pour un \u00c0 l’ int\u00e9rieur d’un Par exemple, ajoutons deux panneaux \u00e0 notre barre lat\u00e9rale personnalis\u00e9e.<\/p>\n Avec ce code, notre barre lat\u00e9rale personnalis\u00e9e commence vraiment \u00e0 ressembler \u00e0 Gutenberg\u00a0!<\/p>\n<\/a><\/p>\nConfiguration de votre Javascript<\/h2>\n
webpack.config.js<\/code>pour compiler mon fichier Javascript source dans le dossier \/assets\/js\/sidebar-plugin.js<\/code>. Ce fichier compil\u00e9 est ce dont nous avons besoin pour mettre en file d’attente l’\u00e9diteur Gutenberg. Pendant que j’\u00e9cris ce code, j’ai d\u00e9marr\u00e9 le compilateur d’ex\u00e9cution qui recompile le Javascript \u00e0 chaque fois que j’enregistre des modifications dans le code source (npm run start<\/code>). Tout cela est expliqu\u00e9 en profondeur dans le tutoriel mentionn\u00e9 pr\u00e9c\u00e9demment.<\/p>\nAjout du script \u00e0 l’\u00e9diteur<\/h2>\n
functions.php<\/code>c’est un bon endroit pour commencer, ou quelque part dans vos fichiers de plugin. Notez que nous devons ajouter le script compil\u00e9 final, pas le code source. Dans mon exemple, le Javascript compil\u00e9 se trouve dans le dossier \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\nenqueue_block_editor_assets<\/code>. A l’int\u00e9rieur on fait comme d’habitude [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. En tant que d\u00e9pendances au script, nous en ajoutons deux\u00a0; wp-plugins<\/code>, et wp-edit-post<\/code>. Ces deux packages doivent \u00eatre charg\u00e9s avant notre script car nous utilisons leurs fonctions.<\/p>\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\nenqueue_block_editor_assets<\/code>, notre script ne sera charg\u00e9 que lorsque l’\u00e9diteur Gutenberg est actif. Super! Maintenant tout est pr\u00eat pour \u00e9crire notre plugin Javascript.<\/p>\nEnregistrer un plugin Javascript<\/h2>\n
[registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>fonction dans wp.plugins \u00e0 l’int\u00e9rieur du wp.plugins<\/code>package.<\/p>\n'carrot'<\/code>ic\u00f4ne .<\/p>\nconst { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n return(\n <div>Hey!<\/div>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\nEnregistrer une barre lat\u00e9rale personnalis\u00e9e<\/h2>\n
<\/a><\/p>\nPluginSidebar<\/code>du wp.editPost<\/code>package. L’ajout d’un \u00e9l\u00e9ment de menu au menu Outils se fait avec le composant bien nomm\u00e9 PluginSidebarMoreMenuItem<\/code>(\u00e9galement dans le wp.editPost<\/code>package).<\/p>\nPluginSidebar<\/code>composant, nous devons fournir des accessoires. Vous devez fournir au minimum name<\/code>et title<\/code>. L’accessoire title<\/code>est explicite, c’est le nom qui appara\u00eetra en haut de la barre lat\u00e9rale. Dans l’accessoire name<\/code>, fournissez une limace unique. Lorsque vous ajoutez l’\u00e9l\u00e9ment de menu, vous devez vous r\u00e9f\u00e9rer \u00e0 ce slug.<\/p>\nPluginSidebarMoreMenuItem<\/code>composant (menu outils) n\u00e9cessite au minimum un accessoire\u00a0; target<\/code>. Ici, vous fournissez le m\u00eame nom que celui que vous avez donn\u00e9 dans la name<\/code>prop de la barre lat\u00e9rale. Comme contenu du composant, vous \u00e9crivez le texte qui sera affich\u00e9 comme \u00e9l\u00e9ment de menu. Habituellement, ce serait le m\u00eame que celui de la barre lat\u00e9rale title<\/code>.<\/p>\nFragment<\/code>composant (\u00e0 partir du wp.element<\/code>package). J’emballe \u00e9galement mes cha\u00eenes \u00e0 __()<\/code>partir du wp.i18n<\/code>paquet pour permettre la traduction.<\/p>\nconst { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n return(\n <Fragment>\n <PluginSidebar \n name=\"awp-custom-sidebar\" \n title={__('My Custom sidebar', 'awp')}\n >Hello there.<\/PluginSidebar>\n <PluginSidebarMoreMenuItem \n target='awp-custom-sidebar'\n >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n <\/Fragment>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\n<\/a><\/p>\nAjouter du contenu \u00e0 la barre lat\u00e9rale<\/h2>\n
PluginSidebar<\/code>composant avec ce que vous voulez (\u00e0 la place du texte "Hello there.").<\/p>\nAjout de panneaux dans notre barre lat\u00e9rale<\/h3>\n
PanelBody<\/code>et \u00e9ventuellement PanelRow<\/code>\u00e0 partir du wp.components<\/code>package.<\/p>\nPanelBody<\/code>composant vous fournissez au minimum le prop title<\/code>. Vous pouvez \u00e9ventuellement fournir true ou false \u00e0 la initialOpen<\/code>prop pour d\u00e9cider si le panneau doit \u00eatre d\u00e9velopp\u00e9 par d\u00e9faut ou non. Comme le contenu \u00e0 l’int\u00e9rieur du composant est tout \u00e0 l’int\u00e9rieur du panneau.<\/p>\nPanelBody<\/code>, vous pouvez \u00e9ventuellement utiliser des PanelRow<\/code>composants. Ils ne sont pas vraiment n\u00e9cessaires mais peuvent vous aider \u00e0 obtenir un bon style pour le contenu de votre panneau.<\/p>\nconst { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n return(\n <Fragment>\n <PluginSidebarMoreMenuItem \n target='awp-custom-sidebar'\n >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n <PluginSidebar \n name=\"awp-custom-sidebar\" \n title={__('My Custom sidebar', 'awp')}\n > \n <PanelBody\n title={__('This is a panel section', 'awp')}\n initialOpen={true}\n >\n <PanelRow>\n Put any component or content here.\n <\/PanelRow>\n <\/PanelBody>\n <PanelBody\n title={__('Another section', 'awp')}\n initialOpen={false}\n >\n <PanelRow>\n This is a collapsed section by default.\n <\/PanelRow>\n <\/PanelBody>\n <\/PluginSidebar>\n <\/Fragment>\n );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n render: CustomSidebarComponent,\n icon: 'carrot'\n});<\/code><\/pre>\n