EBISUCOM エビスコム
  1. 著者NOTE

Block Labでダイナミックブロック(最新記事一覧)を作成する

Gutenbergで最新記事を表示するようなブロックは「ダイナミックブロック」と呼ばれます。標準でも「最新の記事」ブロックとして用意されていますが、現時点ではアイキャッチ画像の表示に対応していません。

そのため、『グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)』では、ランディングページに最新記事の一覧を表示するのにサードパーティ製のブロック(StackableのPostsブロック)を使用していますが、オリジナルのブロック(カスタムブロック)を作るという考え方もあります。

Reactでカスタムブロックを作成するのは大変ですが、「Block Lab」というプラグインを利用すると、ダイナミックブロックもPHPで手軽に作成することができます。たとえば、「Latest Posts」というブロックを作成し、エディタに挿入すると次のように表示されます。ここでは記事の数を指定するフィールドを用意し、「6」と指定しています。

Block Labのブロックを選択したところ

ブロックの選択を解除すると、6件の最新記事がリストアップされます。

Block Labのブロックの選択を解除したときの表示

ブロックの作成やフィールドの設定は[Block Lab > All Blocks]で行ないます。ここでは以下のように設定しています。

Block Labの設定

ブロックのテンプレートファイルは赤枠で囲んだURLで用意します。通常のテンプレートと同じようにPHPで記述することができますので、ここでは『グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)』の最新記事一覧のコード(P.135)を使用しています。ブロックのフィールドに入力した値は、Block Lab の block_field() で取得します。

<div class="block-latest-posts">

<?php $myposts = get_posts( array(
'post_type' => 'post',
'posts_per_page' => block_field( 'posts_per_page', false )
) ); ?>
<?php if( $myposts ):
foreach($myposts as $post):
setup_postdata($post); ?>

<article <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">

<?php if( has_post_thumbnail() ): ?>
<figure>
<?php the_post_thumbnail(); ?>
</figure>
<?php endif; ?>

<h3><?php the_title(); ?></h3>

</a>
</article>

<?php endforeach;
wp_reset_postdata();
endif; ?>

</div>

書籍のデータサイズの都合で収録できなかった部分なのですが、これまでのPHPでのテンプレートの知識も活かすことができるBlock Labは、オリジナルのブロックを作成するのに便利なプラグインです。もちろん、これもサードパーティ製のブロックの1つではあるのですが…。

グーテンベルク時代のWordPressノート テーマの作り方

入門編 + ランディングページ&ワンカラムサイト編