記事一覧

WordPressカスタムブロックをテーマファイル内に作る

テーマファイル納品の場合、なるべくテーマファイル内にブロックなどを入れたいので、テーマファイルにフキダシ機能を追加したいと思います。

10分ほどの動画でも解説してますので、是非そちらもチェック!

Youtube動画はこちら

要件

  • 発言者の画像を挿入/変更できる
  • 発言者の名前を挿入/変更できる
  • 発言がGutenbergエディタでかける
  • テーマにプリインストールされている

準備

開発環境作り

Gutenbergブロックのスターターキットを使います。

開発したいフォルダ内でコマンドを実行

npx create-guten-block fukidashi-block
cd fukidashi-block
npm start

とりあえず今はHello Worldを出したいだけなのでCtrl+Cで止めて先に進みます。

Hello Worldブロックを表示してみる

書き出し先は”テーマファイルディレクトリ/fukidashi-block”とします。

参考にするコードの’fukidashi-block/src/init.php’の中の記述はプラグインを前提としているので、それをテーマファイル用に書き換えている感じです。

Hello Worldを使ってみよう

とりあえずこれでHelloWorldがでます。

投稿画面
ブロックを追加画面

(名前が変なのはとりあえず無視)

開発スタート

本番です。実際に色々とできるようにしましょう

おもむろに開発スタート

npm start

block.jsをプログラム

Gutenbergブロック開発のコア部分です。Reactで書かれていますので、ある程度勉強してください。

ポイントは発言者の写真部分を” InnerBlocks “にしていることです。

MediaUploadも検討したのですが、画像はsizeとか考えると”wp_get_attachment_image”を通したいと思ってまして、面倒なので’core/image’しか許可していないInnerBlocksを作成しています。

スタイル

editor.scssとstyle.scssが別れてますが、通常は同じで良いと思います。

おわりに

カスタムブロックは難易度が中級ぐらいになります。
ちょっと難しい!と思う方はプラグインの”Block Lab”を検討してみてはいかがでしょうか

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ