【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

wordpress-plugins-taxonomy-thumbnailWordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。

今回紹介するプラグイン「Taxonomy Thumbnail」は、「カテゴリー」や「タグ」に対してサムネイル(画像)を設定できるようにするプラグインです。

Taxonomy Thumbnail

「WP-Members」は正式には「WP-Members: Membership Framework」として、「wordpress.org」のプラグインページやWordPressの管理画面の検索からプラグインからダウンロードすることができます。

インストールと設定

プラグインファイルをインストールして有効化するだけで「Taxonomy Thumbnail」は機能します。設定などは無く、「カテゴリー」や「タグ」の設定画面が変化します。

カテゴリー画面

プラグイン有効後のカテゴリー画面です。通常では無い「サムネイル」の登録ができるようになっています。登録した画像はメディアにアップロードされます。

wordpress-plugins-taxonomy-thumbnail-01

使用方法

新しく以下の関数が使用できるようになります。タクソノミーIDを渡すことで画像情報を取得する事ができます。

  • get_term_thumbnail_id( $term_id )
  • has_term_thumbnail( $term_id )
  • the_term_thumbnail( $term_id, $size = ‘post-thumbnail’, $attr = ” )
  • get_term_thumbnail( $term_id, $size = ‘post-thumbnail’, $attr = ” )
  • set_term_thumbnail( $term_id, $thumbnail_id )
  • delete_term_thumbnail( $term_id )

カテゴリーの画像付き一覧を表示する例として以下のようなコードになります。


$terms = get_the_category();
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
    echo '<ul>';
        foreach ( $terms as $term ) {
            echo '<li><a href="/' . $taxonomy . '/' . $term->slug . '">' . $term->name . get_term_thumbnail( $term->term_taxonomy_id, $size = 'category-thumb', $attr = '' ) . '</a></li>';
    }
    echo '</ul>';
}

関連記事

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08HTMLコーディング

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー

【WP】管理画面で操作をしていたらForbiddenが表示された

さくらインターネットのレンタルサーバで、WordPressを用いてWEBサイト(ホームページ)やブログを開設し、WordPressの管理画面を操作中に「Forbidden」が表示されたことありませんか? Forbidden The server refuse to...続きを読む

2018.08.02WordPressさくらインターネットレンタルサーバ

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室