ブログ

トップページ > ブログ記事一覧 > [WordPress] Advanced Posts Blocksで好きな場所にフィードを埋め込み

[WordPress] Advanced Posts Blocksで好きな場所にフィードを埋め込み

  • 投稿日:2020/02/20
  • 最終更新:2020/02/20

下記のスライドで紹介されていた「Advanced Posts Blocks」、昨年読んですぐ試したときにプラグインページの説明をよく読まなかったせいで「カスタムどうやんのかな〜う〜〜ん」で検証終了するという愚行をしていたんですが、指定の作法に従えば見た目はどうにでもなるしめっちゃ便利ですね…!やばいぞ。

とても神スライド。

でもなんか実装方法がわからんかったので覚書

これまた検索不足だとは思うんですがひとまずくっつけるのにプラグインページにはテンプレートの書き方的なもんが無かった+ちらっと調べても意外と出てこなかったので覚書きです。ここで触れるBlock TypeはPostsの場合のみです。フィード埋めるんだったらこれだけあればひとまずはOKじゃないかな…

わからんと言っても非常にシンプルな話で、プラグインの動作の中でWP_Query関数の動作はやってくれているっぽいので、よくあるループの設定の配列は決めずにいきなり if( $query->have_posts() ) から書き始めて大丈夫です。逆に改めてWP_Query関数呼び出して設定したらサイドバーでオプションいじっても反映されません。

そうして作ったテンプレートを指定のディレクトリに保存しておくだけ。(具体的なディレクトリは場合によって違うと思うので省略します)

このサイトで投稿タイプ「LINEスタンプ」のフィードを埋めたブロックをカスタマイズするとしたら下記のようなソースになり、パスは

テーマディレクトリ/template-parts/blocks/advanced-posts-blocks/posts/sticker.php

引用じゃないけど引用の見た目にしました(クソマークアップ)

になります。

<?php
   if($query->have_posts()):
?>
<ul class="p-archive-list--sticker">
  <?php while($query->have_posts()): $query->the_post(); ?>
  <li class="p-archive-list--sticker__item">
    <div class="p-archive-list--sticker__item__thumb">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'sticker', array('alt' => get_the_title().'のサムネイル') ); ?>
      </a>
    </div>
    <div class="p-archive-list--sticker__item__detail">
      <em class="p-archive-list--sticker__item__detail__title"><?php the_title(); ?></em>
      <ul class="p-archive-list--sticker__item__detail__btns">
        <li class="p-archive-list--sticker__item__detail__btn">
          <a href="<?php the_permalink(); ?>" class="c-btn-general">詳細を見る</a>
        </li>
        <li class="p-archive-list--sticker__item__detail__btn">
          <a href="<?php the_field('sticker_prod_page'); ?>" class="c-btn-general" target="_blank">LINEで買う</a>
        </li>
      </ul>
    </div>
  </li>
  <?php endwhile; ?>
</ul>
<?php
  endif;
  wp_reset_query();
?>