記事の中に情報を持たせたいときはACF（Advanced Custom Fields）のカスタムフィールドに入力しますが、
ブログカードなどブロック単位をカスタムしたい時は無料のカスタムブロック作成プラグインLazy Blocksをよく使います。
そのサンプルコードです。
ベーシック│Lazy Blocksのサンプルコード解説
基本的にはベーシックの出力方法は全て同じです。
テキスト
テキストの出力結果は、ユーザーが入力した文字列がそのまま表示されます。
<!-- テキスト -->
<h3>テキスト</h3>
<p>
<?php
if ( ! empty( $attributes['my_text'] ) ) {
echo nl2br( esc_html( $attributes['my_text'] ) );
}
?>
</p>
テキストの出力結果
「テキスト」の値を出力
テキストエリア
テキストエリアは、複数行のテキストを入力する場合に使用されます。
コメントや説明文など、長めの文章を扱う際に便利です。
<!-- テキストエリア -->
<h3>テキストエリア</h3>
<p>
<?php
if ( ! empty( $attributes['my_textarea'] ) ) {
echo nl2br( esc_html( $attributes['my_textarea'] ) );
}
?>
</p>
テキストエリアの出力結果
「テキストエリア」の値を出力
「テキストエリア」の値を出力
「テキストエリア」の値を出力
数値
数値フィールドは、数値のみを入力する際に使用します。
ユーザーが数値を入力すると、その数値が直接出力されます。
<!-- 数値 -->
<h3>数値</h3>
<p>
<?php
if ( isset( $attributes['my_number'] ) ) {
echo esc_html( $attributes['my_number'] );
}
?>
</p>
数値の出力結果
777
範囲
範囲フィールドは、スライダーで数値を指定する場合に使用します。
ユーザーが指定した範囲内の数値が出力されます。
<!-- 範囲 -->
<h3>範囲</h3>
<p>
<?php
if ( isset( $attributes['my_range'] ) ) {
echo esc_html( $attributes['my_range'] );
}
?>
</p>
範囲の出力結果
6
URL
URLフィールドは、リンクやWebアドレスを入力するために使用します。
ユーザーが入力したURLは、リンクとして出力されます。
<!-- URL -->
<h3>URL</h3>
<p>
<a href="<?php echo esc_url( $attributes['my_url'] ); ?>">
<?php echo esc_html( $attributes['my_url'] ); ?>
</a>
</p>
URLの出力結果
メールアドレス
メールアドレスフィールドは、ユーザーがメールアドレスを入力するために使用します。
出力時には、「mailto:」リンクとして表示され、クリックするとメールクライアントが開きます。
<!-- メールアドレス -->
<h3>メールアドレス</h3>
<p>
<a href="mailto:<?php echo esc_attr( $attributes['my_email'] ); ?>">MOTOKI合同会社</a>
</p>
メールアドレスの出力結果
パスワード
パスワードフィールドは、ユーザーがパスワードを入力するために使用します。
出力時には、プレーンテキストとして表示されることが多いですが、セキュリティの観点から慎重に扱う必要があります。
<!-- パスワード -->
<h3>パスワード</h3>
<p>
<?php
if ( isset( $attributes['my_password'] ) ) {
echo esc_html( $attributes['my_password'] );
}
?>
</p>
パスワードの出力結果
12345
コンテンツ│Lazy Blocksのサンプルコード解説
テキスト以外のデータは記述方法が異なります。
画像
画像フィールドは、ユーザーがアップロードした画像を表示するために使用します。
画像のURLとaltテキストが出力されます。
<!-- 画像 -->
<h3>画像</h3>
<?php if ( isset( $attributes['my_image']['url'] ) ) : ?>
<img src="<?php echo esc_url( $attributes['my_image']['url'] ); ?>" alt="<?php echo esc_attr( $attributes['my_image']['alt'] ); ?>">
<?php endif; ?>
画像の出力結果
ギャラリー
ギャラリーフィールドは、複数の画像をまとめて表示する場合に使用します。
ユーザーが選択した複数の画像がギャラリーとして表示されます。
<!-- ギャラリー -->
<h3>ギャラリー</h3>
<?php if ( ! empty( $attributes['my_gallery'] ) && is_array( $attributes['my_gallery'] ) ) : ?>
<?php foreach( $attributes['my_gallery'] as $image ): ?>
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
<?php endforeach; ?>
<?php endif; ?>
ギャラリーの出力結果
ファイル
ファイルフィールドは、音声ファイルやドキュメントをアップロードし、そのリンクを表示する場合に使用します。
<!-- ファイル -->
<h3>ファイル</h3>
<?php if ( isset( $attributes['my_file']['url'] ) ) : ?>
<audio src="<?php echo esc_url( $attributes['my_file']['url'] ); ?>" controls>
お使いのブラウザは、オーディオ要素に対応していません。
</audio>
<?php endif; ?>
ファイルの出力結果
リッチテキスト (WYSIWYG)
リッチテキストフィールドは、WYSIWYGエディタ（What You See Is What You Get）を使用して、装飾されたテキストを入力する場合に使用します。
<!-- リッチテキスト (WYSIWYG) -->
<h3>リッチテキスト (WYSIWYG)</h3>
<p>
<?php echo wp_kses_post( $attributes['my_rich_text'] ); ?>
</p>
リッチテキスト (WYSIWYG)の出力結果
「リッチテキスト」の値を出力
クラシックエディター (WYSIWYG)
クラシックエディターフィールドは、従来のWordPressエディタスタイルでリッチテキストを入力するために使用します。
<!-- クラシックエディター (WYSIWYG) -->
<h3>クラシックエディター (WYSIWYG)</h3>
<p>
<?php echo wp_kses_post( $attributes['my_classic_editor'] ); ?>
</p>
クラシックエディター (WYSIWYG)の出力結果
「クラシックエディター」の値を出力
コードエディター
コードエディターフィールドは、コードを入力して、そのまま表示する場合に使用します。
コードはエスケープされて表示されるため、実行されることはありません。
<!-- コードエディター -->
<h3>コードエディター</h3>
<pre>
<?php echo esc_html( $attributes['my_code'] ); ?>
</pre>
何も選択されていません。
選択
選択フィールドは、ユーザーが事前に定義されたオプションから選択する際に使用します。
ラベルと値が設定され、出力されます。
<!-- 選択 -->
<h3>選択</h3>
<?php if ( isset( $attributes['my_select']['label'], $attributes['my_select']['value'] ) ) : ?>
<p>ラベル: <?php echo esc_html( $attributes['my_select']['label'] ); ?></p>
<p>値: <?php echo esc_html( $attributes['my_select']['value'] ); ?></p>
<?php else : ?>
<p>選択の値が正しく設定されていません。</p>
<?php endif; ?>Output FormatはBoth (Array)で設定
選択の出力結果
ラベル: 選択2
値: 2
ラジオボタン
ラジオボタンフィールドは、複数のオプションから1つを選択する際に使用します。
選択されたラベルと値が出力されます。
<!-- ラジオボタン -->
<h3>ラジオボタン</h3>
<?php if ( isset( $attributes['my_radio']['label'], $attributes['my_radio']['value'] ) ) : ?>
<p>ラベル: <?php echo esc_html( $attributes['my_radio']['label'] ); ?></p>
<p>値: <?php echo esc_html( $attributes['my_radio']['value'] ); ?></p>
<?php else : ?>
<p>ラジオボタンの値が正しく設定されていません。</p>
<?php endif; ?>Output FormatはBoth (Array)で設定
ラジオボタンの出力結果
ラベル: 選択肢1
値: 出力結果1
チェックボックス
チェックボックスフィールドは、ユーザーが複数のオプションを選択できる場合に使用します。
選択状態が出力されます。
<!-- チェックボックス -->
<h3>チェックボックス</h3>
<?php if ( ! empty( $attributes['my_checkbox'] ) ) : ?>
<p>値は「True」です</p>
<?php else: ?>
<p>値は「False」です</p>
<?php endif; ?>
チェックボックスの出力結果
値は「True」です
切り替え（トグル）
トグルフィールドは、オン/オフのスイッチを表示する際に使用します。選択状態が出力されます。
<!-- 切り替え -->
<h3>切り替え</h3>
<?php if ( ! empty( $attributes['my_toggle'] ) ) : ?>
<p>値は「True」です</p>
<?php else: ?>
<p>値は「False」です</p>
<?php endif; ?>
切り替えの出力結果
値は「True」です
上級者向け│Lazy Blocksのサンプルコード解説
上級者向けのコードです。
非常に便利な情報を入力できます。
カラーピッカー
カラーピッカーフィールドは、ユーザーが色を選択する際に使用します。
選択された色がテキストや背景色として出力されます。
<!-- カラーピッカー -->
<h3>カラーピッカー</h3>
<p style="color: <?php echo esc_attr( $attributes['my_color'] ); ?>">
ここにテキスト
</p>
カラーピッカーの出力結果
ここにテキスト
日時ピッカー
日時ピッカーフィールドは、ユーザーが日付と時刻を選択する際に使用します。
選択された日時がフォーマットされた形で出力されます。
<!-- 日時ピッカー -->
<h3>日時ピッカー</h3>
<p>
日付と時刻:
<?php echo date_i18n( 'Y年n月j日 H:i', strtotime( $attributes['my_datetime'] ) ); ?>
</p>
<p>
日付:
<?php echo date_i18n( 'Y年n月j日', strtotime( $attributes['my_datetime'] ) ); ?>
</p>
<p>
時刻:
<?php echo date_i18n( 'H:i', strtotime( $attributes['my_datetime'] ) ); ?>
</p>
日時ピッカーの出力結果
日付と時刻: 2024年8月1日 14:58
日付: 2024年8月1日
時刻: 14:58
レイアウト│Lazy Blocksのサンプルコード解説
リピーターのブロックです。
情報の数が決まってない時はリピーターで付け足していきます
繰り返し
繰り返しフィールドは、複数のデータセットを入力し、それを繰り返し表示する場合に使用します。
各セットのデータが順番に出力されます。
<!-- 繰り返し -->
<h3>繰り返し</h3>
<?php if ( ! empty( $attributes['my_repeater'] ) && is_array( $attributes['my_repeater'] ) ) : ?>
<?php foreach( $attributes['my_repeater'] as $inner ): ?>
<p>
<?php echo esc_html( $inner['my_repeater_text'] ); ?>
</p>
<?php endforeach; ?>
<?php endif; ?>
繰り返しの出力結果
「繰り返し1」のテキスト
「繰り返し2」のテキスト
Deprecated（複製）│Lazy Blocksのサンプルコード解説
このDeprecated（複製）だけ、特別な項目になります。
インナーブロック
インナーブロックフィールドは、他のブロックをネストして表示する際に使用します。
<div class="my-custom-block">
<InnerBlocks />
</div>
従来のInner Blocksコントロールを使用するコードは以下のように書かれていましたが、今後は<InnerBlocks />に移行することが推奨されます。
<p>
<?php echo $attributes['control_name']; ?>
</p>