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>
メールアドレス(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; ?>
ギャラリー(Gallery)
画像を複数挿入できます。
<?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; ?>
最後に
今回はブロックタイプの羅列をしました。メモ的要素として残しておきます。
次はちょっとした応用編です