WordPressのカスタムブロックの作り方はいろいろありますが、今回は専用のプラグイン(Lazy Blocks)を使って作成してみます。
無料ですが、とても使いやすいプラグインです。
パラメータの作成
テキストや画像、URLといった様々なタイプのパラメータの枠を定義します。

コードの作成
PHPでコードを書きます。先ほどのパラメータを参照しています。

もちろんCSSも書いて見た目も整えます。
最後に保存すれば完了です。
カスタムブロックを使用
作成したブロックを読み込み、記事編集画面のパラメーターを入力していきます。
見た目だけでなく、HTMLのコードや色も変更できるようにできます。

こちらは編集画面のブロックの状態です。

最後に記事を公開して確認します。
