【新】SWELLのカスタム投稿タイプのアーカイブで、サムネイル上にターム(カテゴリ)を表示させる方法

目次

はじめに

以前にも同じタイトルで記事を投稿しましたが、こちらではよりスマートにタームを表示させる方法をご紹介します。

それでもマジでやり方わからないってときの荒業としては使えるので、前回の記事は一応残しておきます。

あわせて読みたい
SWELLのカスタム投稿の個別詳細で、通常カテゴリーも表示されてしまう問題を解決する方法 【通常使用での問題点と、どのようにしたいか】 Custom Post Type UI(以下、CPT UI)でカスタム投稿とタクソノミーを1対1の関係で複数作って運用しようとしたのですが...
荒業

準備

まずはいつも通りSWELLの子テーマを用意してください。

そうしたら親テーマであるSWELLをVSCodeで開いて、まずはarchive.phpを開いてください。

SWELLではクラスを使って処理を分けて実装しているので、呼び出し先を辿りながら通常のアーカイブでタグが表示される箇所の処理を探します。

もしくはタグのclass属性であるicon-folderやdata属性のdata-cat-id=で検索するのもありです。

一番確実なのはクラスを辿ることですが、難しればHTMLの属性を使って検索してみましょう。

さて、クラスを辿るとswl_parts__post_list_category()という関数に行き着きます。

クラスを辿った場合のファイルと関数の流れは以下のとおりです。
※パスは無視してファイル名だけ記載します。(面倒)

archive.php > loop_main.php > style_normal.php > Parts.php > pluggable_parts() > list_parts.php > swl_parts__post_list_category()

ここで一旦補足ですが、3つ目のstyle_normal.phpはカード型やテキスト型など表示形式を管理画面上で設定していましたが、そこで設定された内容に応じてbig、normal、simpleのいずれかになりますが、基本はnormalを選んでおけば良いです。
どうせ後で他も同じように書き換えるので。。。

さて、それではswl_parts__post_list_category()を全てコピーして子テーマ側でswl_parts__post_list_category__custom.phpを作ってそこにまるっとペーストしてください。

そして、ペーストした関数名をswl_parts__post_list_categoryからswl_parts__post_list_category__customに書き換えてください。(ここ大事!)

続けて親テーマであるSWELLから、swl_parts__post_list_category()を呼び出している箇所の処理を使って検索し、ヒットした以下のファイルを、フォルダ階層を揃えて子テーマにコピーします。

このときの検索のキーワードはSWELL_Theme::pluggable_parts( ‘post_list_category’,です。

  • /lib/pluggable_parts/list_parts.php
  • /parts/post_list/loop_by_slider.php
  • /parts/post_list/loop_by_widget.php
  • /parts/post_list/style_big.php
  • /parts/post_list/style_normal.php
  • /parts/post_list/style_simple.php
  • /parts/post_list/item/thumb.php

まずは一旦の準備が完了しました。

書き換え

まずは先程子テーマに作ったswl_parts__post_list_category__custom.phpを開き、どういう処理の流れになっているか見てましょう。

ソースコードを貼るのはやめておきますが、大まかに流れを説明すると引数で受け取った$argsからそれぞれ必要な値を変数に分けて取得し、その情報をもとに通常のカテゴリーを取得します。

取得したカテゴリー情報が空であればif文でretrunして処理を終了します。

カテゴリー情報があった場合、その情報を元に出力用のHTMLに加工していきます。

加工が終わればそのままHTMLとして出力して完成、という流れです。

今回はタームにも対応させるため、retrunの箇所を主に修正します。

修正した処理の流れは$argsから取得した情報を元にタームを取得し、ターム情報が取得できていなければそのままreturnして、取得できていれば出力用のHTMLのフォーマットに沿って情報を整理します。

また、上記if文でカテゴリー情報があればelseを使って元の処理をそのまま使います。

完成形は以下のとおりです。

<?php
if( !function_exists('swl_parts__post_list_category__custom')) :
  function swl_parts__post_list_category__custom( $args )
  {
    // 初期値の設定
    // define('TAXONOMIES', ['works','news']);

    // 引数の$argsから値を受け取る
    $the_id   = $args['post_id'] ?? get_the_ID();
		$class    = $args['class'] ?? 'p-postList__cat u-thin';
		$cat_data = get_the_category( $the_id );
		// var_dump($cat_data);

		if ( empty( $cat_data ) ) {
			// カスタムタクソノミーの場合の処理
			$cat_data = get_the_terms($the_id, 'cat-works');

            // タームが取得できたか確認
			if(!empty($cat_data[0])) {
              // タームを表示するための情報を取得
              $the_cat = [
                'id' => $cat_data[0]->term_id,
                'name' => $cat_data[0]->name,
              ];
            } else {
                // タームが設定されていない場合は表示せずに処理を終了
                return;
            }

		} else {
			// 通常カテゴリーを表示するための情報を取得
			$display_cat = swl_get__a_catgory( $cat_data );

			$the_cat = apply_filters( 'swell_post_list_cat_data', [
				'id'   => $display_cat->term_id,
				'name' => $display_cat->name,
			], $the_id );
		}
		
	?>
		<span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $the_cat['id'] )?>"><?=esc_html( $the_cat['name'] )?></span>
	<?php
  }
endif;

あとは必要に応じてfunctions.phpでrequire_once()でも使って処理を読み込んでください。

これで主な編集作業は完了しましたが、最後にもう1つだけ残っています。

そう、先程階層ごとコピーしたファイル群です。

これらのファイルには共通してSWELL_Theme::pluggable_parts( ‘post_list_category’,という文字列が含まれています。

この文字列をSWELL_Theme::pluggable_parts( ‘post_list_category__custom’,へと全ファイル書き換えてください。

先ほど書き換えたswl_parts__post_list_category__customです。

この処理は先ほど辿ったpluggable_parts()内で、’swl_parts__’ . ‘post_list_category’という名前の関数を呼び出す処理です。

なので引数に__customを加えることで、pluggable_parts()内では’swl_parts__’ . ‘post_list_category__custom’という関数を呼び出す処理として実行されるのです。

これで本当に全ての編集作業が終わりました。

それではカスタム投稿タイプとカスタムカテゴリーを用意して確認してみてください。

お疲れ様でした!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次