みなさん、こんにちは。
WordPressでブログを運営していると、意外と気になるのが「カテゴリ」や「タグ」の表示位置ですよね。実はこれ、使用しているテーマによって表示場所がまちまちなんです。
私が愛用しているAstraのような多機能で汎用性の高いテーマでは、デフォルト設定のままだと、本文にカテゴリやタグが表示されない仕様になっています。
「この記事がどのカテゴリに属しているのか」「どんなキーワード（タグ）に関連しているのか」を読者にパッと伝えたい場合、標準設定だけではかゆいところに手が届かないことも。
そこで今回は、Astraテーマを使用している環境で、個別投稿の本文末尾に「カテゴリ」と「タグ」を自動で追加する方法を解説します。
テーマファイルを直接触らず、「WPCode」プラグインを使って安全かつスマートに実装するのが今回のポイントです！
なぜテーマファイルではなく「WPCode」を使うのか？
カスタマイズの手法として、テーマの single.php や content-single.php を直接書き換える方法もあります。しかし、Astraのようにアップデートが頻繁なテーマの場合、親テーマを直接編集してしまうと、更新のたびにカスタマイズが上書きされて消えてしまうというリスクがあります。
そこで、コードスニペット管理プラグイン「WPCode」の出番です。これを使うことで、以下のようなメリットが得られます。
- テーマ更新の影響を受けない
独立したスニペットとして管理するため、テーマが変わってもコードは保持されます。 - 管理が楽
管理画面からコードのオン/オフが切り替えられます。 - 安全性が高い
万が一コードにミスがあっても、プラグイン側でエラーを検知してサイト全体が真っ白になるのを防いでくれます。
それでは、具体的な手順を見ていきましょう。
手順1 – WPCode をインストール
まずは、コードを管理するための土台を準備します。
- WordPress管理画面の 「プラグイン」 → 「新規追加」 を開きます。
- 検索窓に「WPCode」と入力します。
- 「WPCode – Insert Headers and Footers + Custom Code Snippets」をインストールして有効化します。
手順2 – 新しいスニペットを作成
次に、カテゴリとタグを表示させるための「命令（スニペット）」を作成します。
- 左メニューに表示された 「コードスニペット」 → 「+ スニペットを追加」 をクリックします。
- 「カスタムコード（新規スニペット）」を選択し、「カスタムスニペットを追加」 ボタンを押します。
- コードタイプを「PHP スニペット」に設定してください。
- 「カスタムスニペットの作成」の画面になるので、名前に「本文末尾にカテゴリ・タグ追加」など、分かりやすい名前を付けます。
手順3 – カテゴリ＋タグを本文末尾に追加するコード
以下のコードをコピーして、コード入力欄に貼り付けてください。
// 投稿本文の最後にカテゴリとタグを追加
function add_taxonomies_after_content( $content ) {
// 個別投稿ページ（post）のみを対象にする
if ( is_singular('post') ) {
// カテゴリ一覧を取得（カンマ区切り）
$categories = get_the_category_list(', ');
// タグ一覧を取得（カンマ区切り）
$tags = get_the_tag_list('', ', ');
$html = '<div class="post-taxonomies">';
// カテゴリが存在すれば表示
if ( $categories ) {
$html .= '<div class="post-categories">カテゴリ: ' . $categories . '</div>';
}
// タグが存在すれば表示
if ( $tags ) {
$html .= '<div class="post-tags">タグ: ' . $tags . '</div>';
}
$html .= '</div>';
// 元の本文の後に生成したHTMLを追加
$content .= $html;
}
return $content;
}
// WordPressの本文出力フィルターにフック
add_filter( 'the_content', 'add_taxonomies_after_content' );
このコードのポイント
the_contentフィルターを利用
WordPressのコア機能にフックするため、テーマの構造に左右されず安定して動作します。- 条件分岐
is_singular('post')を使うことで、固定ページなどには影響を与えず、ブログ記事（投稿）のみに適用されます。 - エラー防止
カテゴリやタグが設定されていない場合でも、空の項目が表示されないよう工夫しています。
貼り付けが終わったら、画面下部の [挿入] セクションで、挿入方法が「自動挿入」、場所が「あらゆる場所で実行」になっていることを確認し、右上のトグルを「有効」にして 「スニペットを保存」をクリックします。
手順4 – 見た目を整える（任意）
そのままだと少し文字が詰まって見えるかもしれません。その場合は、CSSで少しデザインを整えてあげましょう。
「外観」 → 「カスタマイズ」 → 「追加 CSS」 に以下のコードを追記してみてください。
.post-taxonomies {
margin-top: 2em; /* 本文との間隔 */
padding-top: 1em; /* 枠線内の余白 */
border-top: 1px solid #ddd; /* 区切り線 */
font-size: 0.9em; /* 少し小さめに */
}
.post-taxonomies div {
margin-bottom: 0.5em; /* 行間の調整 */
}
これで、本文との境界がはっきりして、スッキリとした見た目になります。
動作確認
設定が終わったら、実際の記事ページを開いてみてください。 本文の一番下に、以下のように表示されていれば成功です！
WPCodeを使ったカスタマイズが便利で安心
Astraのような汎用テーマで「ここをもう少しこうしたい」というカスタマイズが必要になったとき、WPCodeを使ったフィルターフックでの実装は非常に強力です。
- テーマ更新を恐れなくていい
- コードが一覧で管理しやすい
- WordPress標準の仕組み（フィルターフック）を使うので壊れにくい
この方法は他のカスタマイズにも応用できるので、ぜひ活用してみてください。
本日も最後までお読みいただきありがとうございました。
それでは、よいブログ運営を！
