Gutenberg専用プラグインWordPressのGutenbergではブロックごとにテキストや画像を入れます。ブロックとは以下のようにアイコン化されていて、入力したい内容に沿って選択します。Blocksの使い方を説明します。Blocksをインストールして、有効化しておきましょう。ステップ1:ブロックの登録ブロックに必要な名前やアイコンなどを登録していきます。全部を入力する必要はありませんが、必ず入力しないといけないのは以下の3項目です。・タイトル・Slug・アイコン登録したブロックを特定の投稿タイプにだけ表示させたい場合はConditionから選べます。設定していなければすべてのページに表示されます。ステップ2:ブロックの中身を登録ステップ1では大枠であるブロックを登録したので、次はそのブロックを使って表示させる中身を登録していきます。このブロックの中に、テキスト、画像、テキストエリアを設置したいのであればこの3つの登録をします。Control】をクリックします。タブが【ブロック】から【Control】に切り替わるので、上から順番に埋めていきます。入力が必要な項目は以下です。・Label・Name・TypePlacementは、記事を投稿するときに、どこに入力欄を表示させるか設定する場所です。Bothで設定すると以下のように両エリアに表示されます。テキスト、画像、テキストエリアの3つを登録すると以下のようになります。ステップ3:ブロックを出力する設定をする入力された内容を記事に出力する設定をしていきます。HTML】の2つのタブがあります。HTML】にコードを書く欄がありますが、ここは必ず入力しましょう。HTML】で書いたコードをコピペして貼り付けます。HTML】の両方にコードを書くと決まっているなら、下のある【Yes】にチェックすれば入力するのも1度で済みます。出力するHTMLを簡単に書いてみました。今回ブロックには、テキスト、画像、テキストエリアを設定しているので以下のようになります。ステップ2で登録したNameを{{}}で囲って出力します。Blocksのオリジナルサイトで確認してみてください。Blocks(画像を出力する場合)すべての設定が終わったら公開ボタンを押しましょう。ステップ4:投稿ページで設定・表示を確認する投稿ページで確認してみると、登録したとおり【一般カテゴリー】の中に作成したカスタムブロックがあります。カスタムブロックをクリックすると設定した項目が表示されます。以下のように入力したときに、ちゃんと出力されているか確認します。入力した内容は出力されました。表示が崩れているのでカスタムブロックにCSSを加えましょう。Blocksで先ほど設定したブロックを選び、編集します。ソースコードに書いてあるHTMLの下にCSSを追加して、終わったら更新を押します。1度テストページの表示を確認すると崩れも直っていますね。単純なレイアウトであればソースコードにCSSを加えてしまえば対応できます。複雑なレイアウトを作るのであればstyle.cssに書いたほうが管理が楽でしょう。カスタムブロックを使ってテンプレート化するカスタムブロックや他のブロックを使って、オリジナルのテンプレートを作成することもできます。以下の3つのカスタムブロックを使って説明します。最初にどの投稿タイプをテンプレート化するか選択します。】からブロックを選択。選択ができたら保存を押します。これで投稿ページには先ほど選択したブロックがデフォルトで表示されるようになります。テンプレートにブロックを追加・削除・移動させないテンプレート化されたページにブロックの操作を禁止する設定もできます。operations】を選択すれば、ブロックの追加・削除・移動を禁止します。カスタム投稿にも使える?カスタム投稿をfunctions.phpに直接書いて作成した場合はなぜかテンプレート化できず。UI」のプラグインを使ってカスタム投稿やカスタムタクソノミーを作成したときは、テンプレート化されました。UI」を使う方法を検討してみてください。※2019.08.29追記カスタム投稿もテンプレート化することができました。カスタム投稿を作成するときにfunctions.phpに書かず、自作のプラグインとして読み込めばテンプレート化できます。手順は以下のとおりです。自分の好きなレイアウトをブロック化する便利なプラグイン。テンプレート機能を使えば、投稿ページごとに違ったレイアウトを作ることが可能です。Fields」と一緒に使うことでもっと自由にサイトが作れそうですね。