WordPressでタグを本文の下に表示させる方法

Question

前提・実現したいこと

WordPressを使用してWebサイトを作っています。
タグがカテゴリーの次の行に、表示されるため、読者には両者が同じに見えて紛らわしいです。
そこで、タグを本文の下に一列に並べて表示したいと思うのですが、実現方法を教えていただけないでしょうか。

コードの編集、もしくはプラグインを利用する方法、いずれでも構いませんので、よろしくお願いします。

補足情報

使用テーマ： TwentySixteen

Answer 1

子テーマでカスタマイズしていることを前提に書きます。

親テーマから子テーマへ同じ構成で以下のファイルをコピーしてください。

template-parts/content.php
template-parts/content-single.php

親テーマの inc/template-tags.php から以下のコードを子テーマの functions.php にコピーしてください。
ただし一部のコードは削除し別の関数にします。

function twentysixteen_entry_taxonomies() {
	$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
	if ( $categories_list && twentysixteen_categorized_blog() ) {
		printf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
			_x( 'Categories', 'Used before category names.', 'twentysixteen' ),
			$categories_list
		);
	}
/*ここから*/
	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
	if ( $tags_list && ! is_wp_error( $tags_list ) ) {
		printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
			_x( 'Tags', 'Used before tag names.', 'twentysixteen' ),
			$tags_list
		);
	}
/*ここまでは削除して別関数にします*/
}

削除したコードを加工して子テーマの functions.php にコピーしてください。

function twentysixteen_entry_tags() { //新たに関数を作る

	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'twentysixteen' ) );
	if ( $tags_list && ! is_wp_error( $tags_list ) ) {
		printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
			_x( 'Tags', 'Used before tag names.', 'twentysixteen' ),
			$tags_list
		);
	}
}

content.php の次のコードの後と

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
				get_the_title()
			) );

content-single.php の次のコードの後に

		<?php
			the_content();

先ほど作った関数を入れてください。

twentysixteen_entry_tags();

これで希望の形になると思います。
あとは、CSSで好きなようにデザインしてください。

参考まで。

追記

とりあえず、「カスタマイズ」->「追加CSS」へ以下のコードでどうでしょう。

.tags-links a {
	color: #686868;
	box-shadow: none;
}
.tags-links a:hover, .tags-links a:focus {
	color: #007acc;
}

参考まで。

Comments

[Zan]

まだ作業途中ですが、うまくできそうです。ありがとうございました。助かりました。

[Zan]

。