WordPressプラグイン「Lazy Blocks」でフロー（ステップ）用のカスタムブロックを作成

ブログを運用していると、割とフロー（ステップ）デザインを使用するケースが多いなと感じていました。

現在、記事の編集作業はブロックエディタを使用しているので、カスタムHTMLブロックに直接HTMLを書き込んでCSSで見栄えを整えればいいかとも考えました。

あとは、ブロックエディタを自作するという方法も考えたのですが、正直ちょっと面倒だなとも思ったので、拡張性なども含め、今回は管理画面内でブロックエディタを作成できるLazy Blocksというプラグインを利用することにしました。

Lazy Blocksのインストール

まず、管理画面のプラグインページにあるプラグインを追加をクリックし、「プラグインを追加」ページを開きます。そして、プラグインの検索に「Lazy Blocks」と入力します。

「Custom Block Builder – Lazy Blocks」が検索結果に表示されますので今すぐインストールをクリックします。

インストール完了後、有効化をクリックします。

カスタムブロックの作成

有効化ができれば、管理画面の左メニューにLazy Blocksが追加されるのでクリックして移動します。その後、Add Blockをクリックします。

テンプレートの選択

初めに、あらかじめ用意されている4つのテンプレートから1つを選択します。

Basic

基本的なコントロール機能が揃っているシンプルなブロックテンプレートで、以下のテンプレートを使用しないのであればこれを選択しれば問題ないと思われます。

Hero

いわゆる「ヒーローセクション」と言われるものを作成するためのテンプレートで、Webサイトのトップ部分やLPの最上部に配置されるバナーやメッセージエリア用のテンプレートです。

Testimonials

「お客様の声」を作成するためのテンプレートです。

Alert

アラートや通知といったブロックを作成するためのテンプレートです。

今回はフロー（ステップ）用のブロックを作成するということで「Basic」テンプレートを使用します。

タイトル入力とアイコン選択

タイトル入力とアイコンの選択を行います。アイコンに関しては、お好きなものを選択してください。タイトルは「lazyblock/〇〇〇」といった形でスラッグになるようなので、ここは英語で「Flow」と入力しています。

タイトル入力とアイコンの選択が完了したら、画面下のContinueをクリックします。

カテゴリー選択

作成したブロックエディタをどのカテゴリーに含めるかを選択します。絶対にこれはこのカテゴリーにしなければいけないという決まりもありませんので、デフォルトで選択されている「テキスト」を選択しました。

今後、カスタムブロックを増やしていく予定があるのであれば、作業しやすいようにカテゴライズした方が楽かもしれませんので、その時は適宜選択してください。

また、このページでは「KEYWORD（キーワード）」と「DESCRIPTION（説明文）」を入力する欄がありますが、ここでは特に何も入力せずに進めていきます。

使用する機能の選択

今回はフロー（ステップ）用のブロックを作成するということなので、繰り返し入力可能なコントロールを使用します。

①Content Controlsをクリック
②すぐ下の「＋」ボタンをクリック
③ここをクリックしてLABELに「フロー」と入力
④ NAMEに「flow-wrap」と入力
⑤TYPEで「繰り返し」を選択
⑥ROW LABELに「step{{#}}」と入力

これで、繰り返し入力するための準備ができました。注意点としては④で入力する内容ですが、ここはphpで表示するという観点から英語で入力しています。また、ここの入力内容は他と同じものにならないように注意してください。

フローで入力する項目の選択と設定

次に各フローで入力する項目を設定していきます。入力する項目は「タイトル」「コンテンツ」「画像」を入れようと思います。

まず、Show Child Controlsをクリックします。

Show Child Controlsをクリックすると、「＋」のボタンが表示されるのでクリックをしてタイトルを入力する項目を設定します。

タイトルの入力欄の設定

追加した項目をクリックしてLABEL NAME TYPEをそれぞれ設定または選択をします。

①LABELに「タイトル」と入力
②NAMEに「flow-title」と入力
③TYPEは「テキスト」を選択

コンテンツ入力欄の設定

次に、説明や解説などのテキスト情報を入力する欄の設定を行ないます。先ほどのタイトル欄の作成と同じように「＋」ボタンをクリックします。

①LABELに「コンテンツ」と入力
②NAMEに「flow-contents」と入力
③TYPEは「クラシックエディター(WYSIWYG)」を選択

ここの部分は、コンテンツを入力するだけの設定にし、この後に画像を挿入する欄を作成する予定でした。ただ、そうすると「画像のあとに説明文などを付け足したい」といったケースに対応がしづらくなると考えました。

そこで、比較的以前からWordpressを利用している人にも馴染みがあるクラシックエディタースタイルを選択しておけば、画像だけ・説明文だけ・画像と説明文の両方といったケースにも対応ができるので、よりフレキシブルなフローの作成ができるかと思います。

フロー用ブロックの表示設定

フロー表示用のブロックで何を入力するかまでの設定ができました。ここからは入力した内容を表示する際の設定になります。Lazy Blocksプラグインでは作成したブロックの内容を表示させる方法は以下の3種類です。

HTML + Handlebars構文

HandlebarsとはJavaScriptの値を参照にしてHTMLを生成するテンプレートエンジンです。Lazy Blocksでは{{control_name}}のような形で表示することができます。

php

phpに関してはおそらく説明の必要はないかと思います。Wordpressをカスタマイズした経験があるのであれば、最初からphpで表示・出力するための内容を書いた方が早いかもしれません。

テーマテンプレート

これはテーマファイル内にblocksというフォルダを作成し、そのフォルダ内にblock.phpファイルを配置し、そこで表示・出力のためのソースを書き込んでいくという方法です。

上記3つの方法があるのですが、今回は管理画面内でphpを直接入力する方法で進めていきます。

①PHPを選択
②エディタ部分にphpを入力

エディタ部分に入力したphpは以下のとおりです。

<php?
if(isset($attributes['flow-wrap']) && is_array($attributes['flow-wrap'])){
  $repeat = '';
  $num = 1;
  foreach($attributes['flow-wrap'] as $item){
    $title = $item['flow-title'];
    $contents = $item['flow-contents'];

    $repeat .= <<<EOF
  <div class="flow-box">
    <div class="step-num"><span>{$num}</span></div>
    <dl class="flow-inner">
      <dt>{$title}</dt>
      <dd>{$contents}</dd>
    </dl>
  </div>
EOF
;
    $num++;
  }

  $html = <<<EOF
<div class="flow">
  {$repeat}
</div>
EOF
;
  echo $html;
}

CSSで見た目を整える

次に、CSSで見た目を整えていきます。Lazy BlocksのPro版であれば、管理画面内にCSSを直接書き込めばいいのですが、無料版ではテンプレートファイルのstyle.cssなどのファイルにCSSを書き込んでやる必要があります。

今回はCSSファイルへ以下のように追記しました。

.flow{
  margin: 25px 0 45px;
  .flow-box{    
    display: flex;
    justify-content: center;
    padding: 0;
    border-bottom: solid 1px #e1e8ed;
    margin-bottom: 20px;
    .step-num{
      color: #f26522;
      font-weight: bold;
      text-align: center;
      width: 70px;
      position: relative;
      margin-top: 0;
      >span{
        font-size: 1.8em;
        line-height: 0.9;
      }
      &::before{
        content: "STEP";
        display: block;
        font-size: 0.75em;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      &::after{
        content: "";
        display: block;
        width: 1px;
        height: calc(100% - 100px);
        background-color: #bfbfbf;
        position: absolute;
        left: 0;
        right: 0;
        top: 75px;
        margin: auto;
      }
    }
    .flow-inner{
      width: calc(100% - 70px);
      margin-top: 0.8em;
      dt{
        font-size: 1.125rem;
        font-weight: bold;
        line-height: 2;
        margin-bottom: 10px;
      }
      dd{
        margin: 0;
      }
    }   
  }
}

ひとまず、これでフロー用のカスタムブロックが出来上がりました。あとは見た目の調整などを行なえば完成です。

画像やテキストは適当に入れたものですが、デザイン的に狙った形になったのでこれで良しとします。

今回は、Lazy Blocksプラグインを使ってフロー用のカスタムブロックを作成するという内容でしたが、これを応用して「リスト（ul li）用」であったり「商品詳細リスト」など色々作成できるかと思います。

カスタムブロックを作成したいけど、わざわざNode.jsをインストールして開発環境を整えてまではちょっと…という方であればLazy Blocksプラグインはおすすめです。無料版でもアイデア次第でいろいろなブロックが作成できるので、ぜひチャレンジしてみてください。