【WordPress】カテゴリにアイキャッチを付けるプラグインCategories Images

こんにちは、web集客サポーターのざんぷです！WordPressサイトを運営していると、「カテゴリ一覧にもアイキャッチ画像を設定したい」ってことありませんか？居酒屋さんのホームページを作成している時にふと思いまして、希望通りに実装できましたので情報共有致します。

「Categories Images」というプラグインを使用した方法となります。今回も簡単に設定できますので、是非試してみて下さい！

 

WordPressプラグイン「Categories Images」

まずはいつも通り、

「プラグイン＞新規追加」より

「Categories Images」を検索。

 

 

こちらもいつも通り、

「インストール＞有効化」して下さい。

 

 

カテゴリのアイキャッチ設定

「投稿＞カテゴリー」と進むと、

この様な感じで、これまではなかった

アイコンが出現しています。

アイキャッチ画像をつけたいカテゴリを選び、

「編集」をクリックして下さい。

「更新」をクリックすると

カテゴリー内の記事一覧で、

アイキャッチが表示されるようになります。

 

カテゴリを新規作成する場合

当然ながら、新たにカテゴリを作る場合にも

アイキャッチ画像の設定が可能です。

必要に応じて設定してみて下さい。

 

あれ、画像が表示されない？

実は、これだけでは画像は表示されません。

テーマ内の表示させたい場所に、

 

 

こちらのコードを一行追加する必要があります。

追加後、改めてカテゴリーの

一覧ページを開いてみて下さい。

上手く表示されているはずです^^

 

Stinger Plusで上手く表示されない

人気テーマのStinger Plusで試した所、

構造上の問題でアイキャッチ画像の上下左右に

少しだけ余白が出来てしまいます。

Stingerだけでは無いかと思いますが、

同様の構造のテーマに共通する現象かと思います。

 

この場合の解決策は、余白分の幅に対して、

marginを設定することです。

ここでポイントなのが、「マイナス」の値で

設定することです。

 

具体的にどの様にするかというと、

 

こんな感じで、

カテゴリ一覧アイキャッチ用に

idを設定して使用します。

 

 

すると、こんな感じで

余白がなくなります。

 

marginで埋めるべき幅は、

テーマによって異なりますので、

適宜修正して見て下さいね。

 

まとめ

• WordPressサイトのカテゴリ一覧にアイキャッチ画像をつけたい
• プラグイン「Categories Images」がシンプルで使いやすい
• 必要に応じ、CSSで調整してね！