お問い合わせ

SWELLカスタマイズ|カテゴリーの代わりにカスタムタクソノミーのラベルを表示するには?

SWELLはカスタム投稿タイプに対しては関連するカスタムタクソノミーのタームをヘッダ部分に表示してくれます。

ただし、カスタムタクソノミーが複数割り当てられている場合は、1つのカスタムタクソノミーしか表示してくれません。

正直、カスタムタクソノミーを自前で導入しているようなケースでは、複数のカスタムタクソノミーを使っていることが多いため、あまり役に立たない機能と言えます。

SWELLは細かくテンプレートファイルが分かれていますので、テンプレートファイルを子テーマで書き換えることでカスタマイズできます。

正直、SWELLで少し気が利いたことをすると、子テーマによるカスタマイズが必要になる構造になっていますので、子テーマは必須だと思います。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富で、テーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。

目次

フォーラムにあった事例

タクソノミーをカテゴリーのように表示したいという質問?がありました。

回答が付いていまして、自前でタームリストを用意して、actionフックで出力すればよいよね?という回答です。

insertBeforeメソッドというキーワードがいきなり出てきますがおそらくjavascriptのinsertBeforeメソッドのことだと思います。

僕ならswell_before_post_thumbフックを使います。

投稿日・公開日を表示する仕様かつ投稿日・公開日の左側にタームを表示したい場合は、insertBeforeメソッドで.p-articleMetas__times要素の前にターム情報(.c-categoryList)を指定すれば投稿ページと同じデザインに仕上がります。

https://users.swell-theme.com/forum/postid/229/

SWELLはその後、タームを表示できるようになったのですが、対応しているタクソノミーは1つだけとなっており、複数のタクソノミーに対応できないか?という要望もありました。

これは無理スジな要望だとおもいます。カスタムタクソノミーやそのタームはいくらでも設定できてしまうのでテーマ側で対応するのは難しいでしょう。

カスタマイズのインターフェースを用意するぐらいしかテーマでは対応できないと思います。

カスタム投稿の投稿ページに、自動で1つまでタクソノミーのタームリンクが表示されますが、
複数のタクソノミーを設定した時に、設定したタクソノミーすべてのタームリンクが表示されると嬉しいです。
ご検討をよろしくお願いいたします。

https://users.swell-theme.com/forum/swell-request/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E6%8A%95%E7%A8%BF%E3%81%AE%E6%8A%95%E7%A8%BF%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%A4%87%E6%95%B0%E3%82%BF%E3%82%AF%E3%82%BD%E3%83%8E%E3%83%9F%E3%83%BC%E3%81%AE/

SWELLでカスタムタクソノミーを表示するテンプレートパーツ

SWELLには、投稿のヘッダー部分でカテゴリやタグなどを表示する個所にカスタムタクソノミーのタームを表示するテンプレートパーツがあります。

parts/single/item/term_list.phpがテンプレートパーツになります。

このファイルを子テーマにコピーして書き換えれば、カスタマイズができます。

カスタマイズの内容

SWELLはカスタム投稿のみカスタムタクソノミーのタームを表示するようになっています。

投稿の場合はカスタムタクソノミーが使われていても表示されません。

// カスタム投稿用
$has_tax = false;
//if ( 'post' !== $the_type ) {
	$show_tax = isset( $variable['show_tax'] ) ? $variable['show_tax'] : true;
//	$tax_slug = $show_tax ? SWELL_Theme::get_tax_of_post_type( $the_type ) : '';
	$tax_slug = 'taxonomy_slug'; // 表示したいタクソノミーのslugを指定
	$tax_data = $tax_slug ? SWELL_Theme::get_the_terms_data( $the_id, $tax_slug ) : null;
//}

?>

投稿タイプの判定部分をコメントアウトすれば、タクソノミーを表示できるようになります。

ただし、SWELL_Theme::get_tax_of_post_type( $the_type )の部分が投稿の場合はcategoryが返ってきてしまうので、タクソノミーが表示されません。

$tax_slugを表示したいカスタムタクソノミーのslugに変更すれば、表示されるようになります。

複数のタクソノミーに対応するには?

タクソノミーを自動的に取得するというのは聞いたことがありません。

タクソノミーは自分で設定しているので、出力したいタクソノミーの数だけ、SWELLの処理内容を繰り返せばいいだけですね。

フックを仕込んでおけば、いろんなケースで使いまわしがききます。

parts/single/item/term_list.phpを見ると、$tax_slugが一つだけになっていますから、そこをタクソノミーslugの配列にして外部からfilterフックで書き換えられるようにします。

ターム出力部分をタクソノミーslugの配列の要素に対して、foreachで回すように変更しておきます。

そうすれば、functions.phpとかでタクソノミーslugの配列を上書きすれば、かなり汎用的なテーマになりそうな気がします。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

$the_id   = get_the_ID();
$the_type = get_post_type();
$show_cat = $variable['show_cat'] ?? true;
$show_tag = $variable['show_tag'] ?? true;
$cat_data = $show_cat ? SWELL_Theme::get_the_terms_data( $the_id, 'category' ) : null;
$tag_data = $show_tag ? SWELL_Theme::get_the_terms_data( $the_id, 'post_tag' ) : null;

// カスタム投稿用
$has_tax = false;
$tax_slugs = array();
//if ( 'post' !== $the_type ) {
	$show_tax = isset( $variable['show_tax'] ) ? $variable['show_tax'] : true;
	$tax_slug = $show_tax ? SWELL_Theme::get_tax_of_post_type( $the_type ) : '';
    $tax_sulgs[] = $tax_slug;
    $tax_slugs = apply_filters('swell__taxonomy_list',$tax_slugs);
	//$tax_data = $tax_slug ? SWELL_Theme::get_the_terms_data( $the_id, $tax_slug ) : null;
//}

?>
<?php if ( ! empty( $cat_data ) ) : ?>
	<div class="p-articleMetas__termList c-categoryList">
		<?php foreach ( $cat_data as $data ) : ?>
			<a class="c-categoryList__link hov-flash-up" href="<?=esc_url( $data['url'] )?>" data-cat-id="<?=esc_attr( $data['id'] )?>">
				<?=esc_html( $data['name'] )?>
			</a>
		<?php endforeach; ?>
	</div>
<?php endif; ?>
<?php if ( ! empty( $tag_data ) ) : ?>
	<div class="p-articleMetas__termList c-tagList">
		<?php foreach ( $tag_data as $data ) : ?>
			<a class="c-tagList__link hov-flash-up" href="<?=esc_url( $data['url'] )?>" data-tag-id="<?=esc_attr( $data['id'] )?>">
				<?=esc_html( $data['name'] )?>
			</a>
		<?php endforeach; ?>
	</div>
<?php endif; ?>

<?php foreach ( $tax_slugs as $tax_slug ) : 
$tax_data = $tax_slug ? SWELL_Theme::get_the_terms_data( $the_id, $tax_slug ) : null;
?>
<?php if ( ! empty( $tax_data ) ) : ?>
	<div class="p-articleMetas__termList c-taxList">
		<?php foreach ( $tax_data as $data ) : ?>
			<a class="c-taxList__link hov-flash-up" href="<?php echo esc_url( $data['url'] ); ?>" data-term-id="<?php echo esc_attr( $data['id'] ); ?>">
				<?php echo esc_html( $data['name'] ); ?>
			</a>
		<?php endforeach; ?>
	</div>
<?php endif; ?>
<?php endforeach; ?>
<?php
add_filter('swell__taxonomy_list',function(){
	return array('circle');
});

SWELLで複数タクソノミーに対応してもらえる可能性は?

おそらく対応はされないと思います。

SWELLはブログテーマという位置づけで、Wordpressの標準的な機能しかサポートしない方針のようです。

同一作者のArkheは、Woocommerceにも対応しているので、タクソノミー周りは強化されていると思います。

まとめ

カスタム投稿やカスタムタクソノミーを導入する場合は、SWELLはカスタマイズ無しではどうにもなりません。

テーマを編集するとテーマのアップデートの時に差分確認が必要になりますので、なるべくカスタマイズするファイルの種類を減らして、ファイルの編集個所をわかりやすくしておく方が良いでしょう。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次