【SANGO】カテゴリーを英語から日本語に変更しアイコン表示するカスタマイズ方法

ステマ規制への対応と記事内広告について

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

WordPressのテーマ「SANGO」はデフォルトの状態でも非常に見やすく素晴らしいテーマですが、個別でより使いやすくカスタマイズするにはそれなりにCSSやPHPなどを編集していく必要があります。

今回はデフォルトのカテゴリーで英語の表示になっている「カテゴリー」と「タグ」の部分を日本語に変更し、その前にアイコンを表示させるという非常に分かりにくく細かい部分ですが、オシャレに見せるカスタマイズ方法を紹介。

目次表示

カスタマイズの見た目の変化
1. カスタマイズ前
2. カスタマイズ後
entry-footer.phpを編集
カスタマイズの反映確認

この記事を書いた人

NORI( ブロガー/ドローンオペレーター )

Apple製品の他、カメラやドローンが好きです。趣味で2021年から登山やキャンプもはじめました。国交省全国包括許可承認取得済三陸特/アマ無線4級/DJI CAMPスペシャリストを取得。運営者の詳しい情報はこちら

カスタマイズの見た目の変化

このカスタマイズを行うと以下のように変化します。カテゴリーの部分もアイコンが付いて視覚的にタグってわかるやすくなるよ✨

カスタマイズ前

修正前のデザイン（デフォルト）

カスタマイズ後

修正後のデザイン

このカスタマイズ方法について

手軽さ

(5.0)

難しさ

(2.0)

デザインの美しさ

(5.0)

総合評価

(5.0)

ここで紹介しているソースコードをコピペで利用するとこのブログと同じようになるよ！

NORI

注意

カスタマイズは自己責任でお願いいたします。カスタマイズにチャレンジしたけどテーマが壊れた場合にはサポートができません。

entry-footer.phpを編集

親テーマ内の parts single 内にあるentry-footer.phpを子テーマと同じ位置にコピーします。

子テーマにコピーが完了したらentry-footer.phpを開き、以下のソースコードをコピペして保存するだけでOK！

	<footer class="article-footer">
	<aside>
	<div class="footer-contents">
	<?php insert_social_buttons(); // シェアボタン ?>
	<?php insert_like_box(); // フォローボックス ?>
	<div class="footer-meta dfont">
	<?php if(get_the_category_list()) : // カテゴリー一覧を出力 ?>
	<p class="footer-meta_title"><i class="fas fa-list-ul"></i> カテゴリー :</p>
	<?php echo get_the_category_list(); ?>
	<?php endif; ?>
	<?php if(get_the_tags()) : // タグ一覧を出力 ?>
	<div class="meta-tag">
	<p class="footer-meta_title"><i class="fas fa-tags"></i> タグ :</p>
	<?php the_tags('<ul><li>','</li><li>','</li></ul>');?>
	</div>
	<?php endif; ?>
	</div>
	<?php insert_cta(); // CTA ?>
	<?php sng_recommended_posts(); // おすすめ記事 ?>
	<?php
	if( !get_post_meta( $post->ID, 'disable_ads', true ) && is_active_sidebar('ads_footer') ) {
	dynamic_sidebar( 'ads_footer' ); // 関連記事広告
	}
	?>
	<?php
	if(!get_option('no_related_posts')) {
	output_sng_related_posts(); // 関連記事
	}
	?>
	</div>
	<?php insert_author_info(); // この記事を書いた人 ?>
	</aside>
	</footer>
	<?php
	// アクセス数をカウント：人気記事ウィジェットのため
	if( !is_bot() && !is_user_logged_in() ) {
	sng_set_post_views(get_the_ID());
	}
	?>