「最新の記事」を取得するブロックがありますが、サムネイルを取得したり、好みのHTMLを書き換えたりするような自由度はありません。
そこで、今回はAdvanced Posts Blocksという、投稿を取得するブロックプラグインをご紹介します。
作者はとろゆに（@Toro_Unit）さんです！本人ではなくこのプラグインをめちゃめちゃ推している私が書きます。
このプラグインでできること
- 単一の特定の記事の取得ができる
- 最新の記事一覧が取得できる
- 並び順の変更可
- 表示数の変更可
- 開始位置（最新から何件目からスタートするか）を選択可
- 投稿タイプでの絞り込み可
- カテゴリーやタグなどのタクソノミーでの絞り込み可
- 特定の親ページ配下のページが取得できる
- 並び順の変更可
- 表示数の変更可（All Itemsのチェックを外すと件数選択が可能）
- 投稿タイプ選択可（デフォルトは固定ページのみ。
register_post_type()のhierarchicalをtrueにした投稿タイプが該当します）
細かい設定もできて大変ありがたいプラグインです。
真骨頂は自分でスタイルを変えられること
プラグインを有効化しただけだと、article -> h4 という構成のHTMLが吐き出されます。
そうです、このプラグインはカスタマイズが前提になっています。デフォルトでCSSは用意されていないので、CSSのオーバーライドだったり、クラス名を調べたりする必要もありません。
テンプレート上書きの方法
特定のフォルダにテンプレートファイルを置く形になります。基本的に、テーマフォルダ内のtemplate-parts/blocks/advanced-posts-blocks/ フォルダ直下です。
- 複数投稿ブロック： posts.php（テンプレート元： https://github.com/torounit/advanced-posts-blocks/blob/master/src/blocks/posts/template.php）
- 個別投稿ブロック： post.php（テンプレート元： https://github.com/torounit/advanced-posts-blocks/blob/master/src/blocks/post/template.php）
- 子投稿ブロック: children.php（テンプレート元： https://github.com/torounit/advanced-posts-blocks/blob/master/src/blocks/children/template.php）
その他にも、以下のテンプレート階層が使えるようになっています。
1. template-parts/blocks/advanced-posts-blocks/{Block_Type}/{Post_Type}-{Style}.php
2. template-parts/blocks/advanced-posts-blocks/{Block_Type}/{Post_Type}.php
3. template-parts/blocks/advanced-posts-blocks/{Block_Type}-{Style}.php
4. template-parts/blocks/advanced-posts-blocks/{Block_Type}.php{Block_Type} は、posts, post もしくは children です。
https://ja.wordpress.org/plugins/advanced-posts-blocks/
フォルダ内にファイルを作ったら、一旦テンプレート元の中のPHPをごっそりコピーしてきて、自分の好きなように書き換えるのが楽じゃないかなと思います。
get_template_part() も使えるので、別途ループ用に使っているファイルがあれば読み込みさせるのが手っ取り早そうですね。このサイトで作ったposts.php はこんな感じにしています。
<?php
/**
* View template.
*
* @package Advanced_Posts_Blocks
*
* @var string $class_name
* @var WP_Query $query
*/
?>
<div class="wp-block-advanced-posts-block-children wp-card-blocks <?php echo esc_attr( $class_name ); ?>">
<?php
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post();
get_template_part( 'template-parts/content', 'archive' );
endwhile;
wp_reset_postdata();
endif;
?>
</div><!-- /.wp-block-advanced-posts-block-children -->
ちなみに、content-archive.phpの中身はこちら
<article class="wp-card-block">
<a href="<?php the_permalink(); ?>">
<div class="wp-card-block__thumb">
<?php hamdocs_the_post_thumbnail(); ?>
</div>
<?php if ( is_front_page() ) : ?>
<h2 class="wp-card-block__title"><?php the_title(); ?></h2>
<?php else : ?>
<h3 class="wp-card-block__title"><?php the_title(); ?></h3>
<?php endif; ?>
<div class="wp-card-block__excerpt">
<?php the_excerpt(); ?>
</div><!-- /.wp-card-block__excerpt -->
<p class="wp-card-block__date">Updated: <?php the_modified_date(); ?></p>
</a>
</article>
このプラグイン用の記述はなく、WordPressのタグで作成できます。
スタイルの追加作成も容易
各ブロック、スタイルに対応しています。
まずは、スタイルを読み込ませるためにenqueue_block_editor_assets()でファイルを指定します。
function hamdocs_block_editor_scripts() {
wp_enqueue_script(
'hamdocs-editor-script',
get_template_directory_uri() . '/build/js/add-advanced-style.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'hamdocs_block_editor_scripts' );
読み込ませたadd-advanced-style.js の中身は以下のように、registerBlockStyle() を書いています。
// add-advanced-style.js
wp.blocks.registerBlockStyle( 'advanced-posts-blocks/posts', {
name: 'thumbnail',
label: 'サムネイルつき'
} );
これでスタイルが選択できるようになったので、次はPHPファイルを用意します。今回はposts用のスタイルを増やしたので、template-parts/blocks/advanced-posts-blocks/の中に、posts-thumbnail.php を用意します。
posts（使いたいブロック名）-thumbnail（registerBlockStyle のnameで指定した値）.php というファイル名が基本です。
あとはテンプレートの上書き同様、WordPressのタグを駆使して中身を整えるだけです。
どうでしょう？めちゃめちゃ使い勝手がいいですよね！
ぜひ案件に投入して使ってみてください！