風の羅針盤 | Destination of winds.

【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する(Simplicity,マテリアル)

time 2016/06/28  所要時間:約 3

【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する(Simplicity,マテリアル)

こんにちは。WordPressカスタマイズにハマっているちゃぼP(@chabo0429)です。

先日この風の羅針盤、それから部長サイトで、個別記事の一番下の部分にアイキャッチ付きのカテゴリページへのリンクが追加されております。

カテゴリをテキストで表示させるだけなら楽なのですが・・・やっぱりそこはアイキャッチ付きのカッコイイリンクの方が見栄えもいいし、分かりやすいですよね。

今日はその方法をご紹介していきます。

スポンサーリンク

「Advanced Custom Fields」プラグインをインストール

通常、カテゴリにアイキャッチ画像は付与することができません。

アイキャッチをカテゴリに付加させるために、まずは「Advanced Custom Fields」というプラグインをインストールします。

インストールとアイキャッチ画像の追加については、以下のサイトに詳しく解説されていますので、参考にしてみてください。

カテゴリーごとに異なるアイキャッチ画像を表示する | 西沢直木のIT講座
カテゴリーごとの投稿を一覧表示するカテゴリーページには、タイトルと投稿一覧は表示されますが、「カテゴリー画像」は表示されないのが一般的です。 そこで、カテゴリーごとに異なる「カテゴリー画像」(アイキャッチ画像)を追加する方法を紹介します。 通常は表示されないカテゴリーのアイキャッチ画像 いくつかの方法がありますが、カテゴリーに「ア

single.phpにカテゴリリンクを挿入

プラグインのインストールと、カテゴリへのアイキャッチ画像の追加が完了したら、個別記事のカテゴリページへのリンクを挿入したい部分に、以下のコードを挿入します。

ちなみに、このコードだと、カテゴリ名がそのままタイトルに表示されますので、カテゴリの説明を表示させたい場合は、73行目の、

を以下のように変更すると、カテゴリのディスクリプション(説明)を表示させることができます。

Category_link01

どちらを表示させるかは、サイトのデザインに合わせて設定してみてください。

ちなみに部長はカテゴリ名を、ちゃぼPはディスクリプションを表示させています。

最後にstyle.cssでデザインを調整

これでソースコードは完成ですので、あとはスタイルシートでデザインを調整します。

これがPC用です。モバイル表示の時は少し文字を小さくしないとはみ出てしまう場合があるので、

これを追加しています。

完成イメージ

これで完成です。イメージはこちら。

Category_link02

個別記事の最下部に、カテゴリに設定したアイキャッチとディスクリプションが表示されています。

ちなみに、「きょうのちゃぼP」の記事は単一カテゴリにしか属していませんが、

Category_link03

複数カテゴリに属する記事には、その記事が属する複数のカテゴリが縦に並んで表示されます。

 

Category_link04

部長の記事はこんな感じ。ページめくりの前に挿入しています。こちらはカテゴリ名をそのまま表示しています。

一方のモバイル表示はというと、

Category_link05

きちんと文字も小さくなって、綺麗に枠に収まっています。

 

プラグインの導入などもあって、少々手間がかかりますが、カテゴリページへのリンクを目立たせることでサイト内の回遊率アップに実際効果があるようで、カテゴリページへのアクセスが増加していますので、これはいい感じかも!

私の作成したコードは、simplicityとマテリアルで動作していますが、基本的なコードはテーマに左右されないはずなので、試してみてくださいね!

ぜひ試してみてくださいね!

スポンサーリンク

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

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

down

コメントする




*

この記事の関連カテゴリ

関連記事

Twitter でフォロー



スポンサーリンク