Gutenbergエディタのブロック、自作したいと思いませんか？
2018年12月にリリースされたWordpress 5.0から、Gutenbergというブロックエディタでの記事編集がデフォルトとなりました。
慣れれば、直感的で使いやすいものの、用意されているブロックだけでは物足りない…と感じる方は多いはず。
デフォルトの「カスタムHTML」ブロックや、「クラシック」ブロックなど、方法はありますが、毎回それを書くのは手間ですし、一括でテンプレートをカスタマイズできず不便ですよね。
一括で自由にカスタマイズできるブロックを使えるようにしたい…という方のために、自作したブロックをGutenbergエディタで呼び出せるようにする方法を解説します。
細かい部分まで説明するとかなり長くなってしまうので、今回は簡単なブロックを1つ追加するまで解説します。
この記事では冒頭のみとなります。続きはnoteで有料公開していますので、よければご購読ください。
細かいカスタマイズ方法等はnoteにどんどん追記していきますのでお楽しみに。
最低限、必要なスキル。
解説をする前に、この記事の内容を理解・実践するには、
- HTML
- CSS
- PHP
- jQuery
の最低限の知識とスキルが必要です。
わからない箇所を自分で調べて解決できるスキルと理解力があればできるので、何も見ずにできる人でなくても問題ありません。
僕自身もPHPは2年前、Wordpressは1年前から勉強し始めた初心者ですが、なんとか理解して実践できています。
「それなら自分は大丈夫！」という方はnoteにて読み進めてください。
カスタムブロックでさらにオリジナリティのあるページへ。
今回は簡単な構造のブロックですが、これを応用することで複雑な構造のカスタムブロックも自由に追加することができるようになります。
デフォルトで用意されているブロック、テーマやプラグインで追加されるブロックじゃ物足りない方は、この方法で好きなテンプレートのブロックを作成しましょう。
質問のある方や、もっといい方法あるよ！っていう優しい方はぜひコメントしてもらえると嬉しいです。
それでは。
