Lazy Blocksの使い方 vol.2

2021.01.04

PHP/WordPress/プラグイン

Lazy Block タイプの解説

今回もLazy Blockの解説をしていきます。
コントロールタイプの羅列&ちょい解説をしていきます。
前回の解説はこちら→Lazy Blocksとは?

コードは公式ドキュメントからの引用になります。
公式ドキュメント
また、コード例はPHPとさせていただきます。

コードに書かれているHTML部分は一例であり、あくまで重要なのはPHPの出力部分なので、どこに出力するかでいくらでも応用が利くと思います。

基本ブロック

テキスト(Text)

テキストを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
テキスト
テキストエリア(Textarea)

テキストエリアでテキストを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
テキストエリア
数値(Number)

数値を入力できます。
最小値、最大値、増減値の振り幅を設定できます。

      
 <p><?php echo $attributes['変数名'];?></p>
      
数値
範囲(Range)

数値を決められた範囲から入力できます。
最小値、最大値、増減値の振り幅を設定できます。

      
 <p><?php echo $attributes['変数名'];?></p>
      
範囲
URL

URLを入力できます。

     
 <a href="<?php echo esc_url( $attributes['変数名'] ); ?>">リンクテキスト</a>
      
URL
メールアドレス(Email)

メールアドレスを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
メールアドレス
パスワード(Password)

パスワードを入力できます。
ちなみにコードの通り出力するとパスワードがそのまま出力されます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
パスワード

コンテンツブロック

画像(Image)

画像を挿入できます。
altについては画像の説明が当てはまります。

     
 <?php if ( isset( $attributes['変数']['url'] ) ) : ?>
   <img src="<?php echo esc_url( $attributes['変数']['url'] ); ?>" alt="<?php echo esc_attr( $attributes['変数']['alt'] ); ?>">
 <?php endif; ?>
      
画像

画像を複数挿入できます。

     
 <?php foreach( $attributes['変数'] as $image ): ?>
   <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
 <?php endforeach; ?>
      
ギャラリー
ファイル(File)

ファイルを挿入できます。
挿入できるファイルの拡張子を制限することもできます。
また、このコード例ではAudioになっていますが、Audioである必要はありません。

     
 <audio
   controls
   src="<?php echo esc_url( $attributes['変数']['url'] ); ?>">
 </audio>
      
ファイル
リッチテキスト(Rich Text)

リッチテキストで入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
リッチテキスト
クラシックエディター(Classic Editor)

クラシックエディターで入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
クラシックエディター
コードエディター(Code Editor)

コードを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
コードエディター
インナーブロック(Inner Blocks)

ブロックの中にブロックを配置できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
インナーブロック

選択系ブロック

セレクト(Select)

セレクトプルダウンを作れます。
Label、Value、または両方ともなど、出力できる部分を指定できます。Allow Nullで未選択部分を作ることができます。

     
 <p><?php echo $attributes['変数名'];?></p>

 複数選択(Multiple)を選択した場合
 <?php foreach( $attributes['変数名'] as $inner ): ?>
   <p><?php echo $inner; ?></p>
 <?php endforeach; ?>

 label、valueの複数出力を選択した場合
 <p><?php echo $attributes['変数名']['label']; ?></p>
 <p><?php echo $attributes['変数名']['value']; ?></p>
      
セレクト
ラジオボタン(Radio)

ラジオボタンを作れます。
Label、Value、または両方ともなど、出力できる部分を指定できます。Allow Nullで未選択部分を作ることができます。

     
 <p><?php echo $attributes['変数名'];?></p>

 label、valueの複数出力を選択した場合
 <p><?php echo $attributes['変数名']['label']; ?></p>
 <p><?php echo $attributes['変数名']['value']; ?></p>
      
ラジオボタン
チェックボックス(Chechbox)

チェックボックスを作れます。

     
 <?php if ( $attributes['変数名'] ) : ?>
   <p>チェックされてるよ!</p>
 <?php else: ?>
   <p>チェックされてないよ!</p>
 <?php endif; ?>
      
チェックボックス
トグルボタン(Toggle)

トグルボタンを作れます。

     
 <?php if ( $attributes['変数名'] ) : ?>
   <p>トグルがオンだよ!</p>
 <?php else: ?>
   <p>トグルがオフだよ!</p>
 <?php endif; ?>
      
トグルボタン

その他ブロック

カラーピッカー(Color Picker)

カラーピッカーから色を選択できます。
ちなみに出力するとカラーコードが表示されます。

     
 <p><?php echo $attributes['変数名'];?></p>
      
カラーピッカー
日付ピッカー(Date Time Picker)

日付ピッカーから日付を選択できます。
デフォルトで時間まで指定できますが、オフにできます。
例のごとく長いコードですが、このまま使う必要はありません。また、フォーマット文字列は使用できます。

     
 Date + Time:
 <div>
   <?php echo date_i18n( 'F j, Y H:i', strtotime( $attributes['変数名'] ) ); ?>
 </div>

 Date:
 <div>
   <?php echo date_i18n( 'F j, Y', strtotime( $attributes['変数名'] ) ); ?>
 </div>

 Time:
 <div>
    <?php echo date_i18n( 'H:i', strtotime( $attributes['変数名'] ) ); ?>
 </div>
      
日付ピッカー
リピートブロック(Rpeater)

繰り返し項目を作ることができます。
項目のLabelを{{#}}と設定すれば、連番になります。

     
 <?php foreach( $attributes['変数名'] as $inner ): ?>
   <p><?php echo $inner['変数名']; ?></p>
 <?php endforeach; ?>
      
リピート

最後に

今回はブロックタイプの羅列をしました。メモ的要素として残しておきます。

次はちょっとした応用編です