記事一覧ページで記事のカテゴリを表示する Twenty Seventeen カスタマイズ

カテゴリが入り交じる雑多ブログを運営していると、記事の内容が分かりやすいように記事一覧ページにカテゴリを表示したくなります。が、Twenty Seventeenではデフォルトの状態で表示されないのでカスタマイズで出してみます。

このカスタマイズを行う意味
参考にしたサイト
phpを編集して表示する
編集結果
まとめ

このカスタマイズを行う意味

ほとんど同じカテゴリの記事しか書かないという特化ブログの方はあまり関係ないかも知れませんが、前述の通り多くのカテゴリを扱うブログだと、トップで記事一覧が表示されたときに読者が興味ある記事を見つけやすいように記事のカテゴリが書いてあると親切です。

有料テーマやSEOを考慮した人気のテーマなどは、大体記事一覧でカテゴリが出るようになっているようで、それらのテーマを使ったブログを眺めているとやはりあったほうが良いと感じます。

参考にしたサイト

カスタマイズを行うにあたって参考にさせていただいたサイトがこちらです。

WordPressのカテゴリー名を取得して表示、カテゴリーへのリンクを作る。 – bbp

まさにやりたいことを解説して下さっており、ほとんどそのまま記述させていただいています。ありがとうございました。

phpを編集して表示する

今回のカスタマイズでは、記事の日付が表示されている部分の横にカテゴリを出します。そのためにはテーマの「content.php」、もしくは抜粋表示をしている場合は「content-excerpt.php」を編集します。子テーマを作っておいて該当のphpをコピペしそちらを編集することと、編集前にバックアップを取っておくことをおすすめします。

Font Awesomeを使う

分かりやすいようにカテゴリ名の前にフォルダアイコンを表示したいので、このカスタマイズではFont Awesomeのアイコンを使います。事前に使えるようにしておいて下さい。アイコンが必要ないという方は該当の部分は記述しないでカスタマイズしてもいいかと思います。

編集部分

まずは上記のphpを開いて、以下の記述を探します。

<header class="entry-header">

この記述の直下に、準備として以下の記述をしておきます。

<?php
$cat = get_the_category();
$catId = $cat[0]->cat_ID;
$catName = $cat[0]->name;
$catSlug = $cat[0]->category_nicename;
$link = get_category_link($catId);
?>

この記述の詳しい解説については、参考にしたサイトさんを見てみてください。簡単に言うとカテゴリを表示するための下準備みたいなもんです。

次に、<div class=”entry-meta”>という記述を探します。このクラスで囲まれた中に日付を表示する記述があり、その横にカテゴリ名を出したいのでこの辺を編集します。追加後の物が以下です。よく分からないという方は以下を該当部分と置き換えてもOKです。

<div class="entry-meta">
<i class="fa fa-calendar"></i>
<?php
echo twentyseventeen_time_link();
twentyseventeen_edit_link();
?>
<span id="<?php echo $catId; ?>">
&nbsp;<i class="fa fa-folder-open"></i>
<a href="<?php echo $link ?>" title="<?php echo $catName; ?>"><?php echo $catName; ?></a>
</span>
</div><!-- .entry-meta -->

僕は抜粋表示でやっているのでこれは「content-excerpt.php」を編集したものです。「content.php」を編集する場合も大体似たようなものですが、若干違うのでご注意ください。