SWELLでカスタム投稿一覧にタームを表示したい時は〇〇ブロックで夢叶うというお話

当サイトには広告が含まれています。

こんにちは、WEB担当の菅井です。今回はSWELLテーマでカスタム投稿一覧にターム名を呼び出す方法をご紹介します。

sugai

この記事はブロックエディターでやってしまおうという人向けに書いています。フック書ける人はそちらの方が早いような気もします。

目次

ターム名表示をやろうとした経緯

WordPressのSWELLテーマでカスタム投稿タイプを使う場合、プラグインなどにもよりますが、デフォルトではアーカイブページがカスタム投稿の一覧ページになります。

そうするとアイキャッチサムネイルの上にタクソノミーのターム名(いわゆるカテゴリー名ですな)が出ていなかったり、ページヘッダー下の見出しの横にarchiveって文字が出ている、これも変更できませんよね。

現在当サイトにおいて実績紹介をカスタム投稿で投稿しているんですが、サイドバーも消したいし、ヘッダータイトルも変えたいと思いました。

検索するとフックを使ったりfunctionsに書いたりするといった内容だったり、有料noteで販売されている方もいます。なるほどね。

クエリループブロックでやればええのではないか?と思いきや…

有料の記事を購入する前に、とりあえず新規固定ページにクエリループブロックで作ればええのでは?と思ったんですよね。

ほんでさっそくやろうとしたら、クエリループブロックが見当たらない。

どうやらSWELLではWordPress本体についている一部のブロックを非表示にしているとのこと。

確かに一般の方はクエリループはいらないですよね。きれいな記事リストブロックがSWELLから用意されてますから普通の人は問題ありません。

ただ、私はちょっと試してみたかったので、フォーラムを参考にしながらテーマブロックを戻させてもらいました。

方法は以下に書かれていますので参考にしてみて下さい。

SWELLにテーマブロックを復活させる方法

当然ですが子テーマでいじってくださいね。以下参照

公式さんが方法を書いてくださってますのでそれを引用します。以下のコードをfunctions.phpに貼り付けてください。

functions.php
add_filter( 'swell_hide_fse_blocks', '__return_false' );

実際に固定ページにクエリループを設置する

これでSWELL使いながらでも、クエリループのブロックが使えるようになりました。

あとは普通にループの内容を自分でカスタマイズしながら固定ページに設定していきます。

SWELL:クエリループさせる内容をブロックで組む様子

取得するポストタイプはカスタム投稿にし、アイキャッチ、投稿日、抜粋、そして待望のタクソノミーターム名

カスタム投稿名でブロック検索したら〇〇カテゴリー名っていうブロックが出てくるので、それをループさせる内容に組み込んであげます。お好みでクラス名を振ってあげたりなんかしたりして。

これで簡単にカスタムタクソノミーのターム名が連なって呼び出されているはずです。

記事の件数の変更方法

クエリループブロックごとに表示する記事の件数を変更できます。

ブロックを選択時、ブロックの上に出てくるスライダーみたいなアイコンをクリックすると投稿数を変更できます。

表示成功!あとはCSSで整える

タームの表示は出来ましたが、CSSが全くかかってまへん。当然です。SWELLテーマでは対応してないブロックを無理くり出現させているわけですからね。

ページャーのところでさえもおかしいです。ここはSWELLテーマでカバーして欲しかったけど、まぁ構造が違うんでしょうね。

ページャーにflexがかかっていないようだ

でもコーダーならここまで表示されてたらあとはなんとでもなりますよね。自分で好きな感じにCSSを書いてくださいませ(雑ですみません)

完成イメージです。ターム名がちゃんと表示されています。

まとめ: クエリループがナイスってことを再認識

あんなに苦労してたターム名の取得もあっという間に、しかもきちんと複数のターム名が呼び出されています。画面上に表示されてさえいれば、CSSで整えることで、あなた好みの一覧ページが完成致します。

これを読まれている方でこの内容で「なるほど〜」ってなってくださる方が1人でもいてくださると嬉しいです。ぜひ一度お試しください。

デザイン作るの難しい〜!と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください!
実績多数の女性クリエイターチームが、

どんなお悩みも解決します。

\ 南大阪・泉州でデザインのご依頼はこちら /

シェアお願いします!
  • URLをコピーしました!
目次