STINGER PLUS2でサムネイル上にカテゴリーを表示する方法

先日、わざわざ記事にまでしてCSS、HTML初心者だけどテーマ自作する!とうそぶきましたが、

なんだかんだSTINGER PLUS 2に落ち着きました。

が、やっぱり自分好みのデザインにするにはテーマをイジる必要でした。

まず、記事一覧のサムネイル上にカテゴリーを表示すること。

初心者なりに色々と調べた結果、

とても簡単にできましたので、僕と同じくWordPress初心者さんのためになればいいなと思います。

※実装前に、バックアップをとっておくことを推奨します。

※子テーマで実施することを推奨します。

使用テーマ

STINGER PLUS2 もしくは STINGER PLUS2 Child

使用ファイル

itiran-thumbnail-on.php

style.css

ステップ1:サムネイル画像上にカテゴリーを表示する。

記事一覧のサムネイルは「itiran-thumbnail-on.php」で実装されています。

下記の<dt>〜</dt>を見つけてください。

	<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
							<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
						<?php }else{ ?>
							<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
						<?php } ?>
					<?php endif; ?>
				</a>
</dt>

最終行の</dt>の前に以下を挿入してください。

				<a class = "cat-name" href = "<?php $cat = get_the_category(); $catId = $cat[0]->cat_ID; echo get_category_link($catId); ?>">
					<?php echo $catName = $cat[0]->name; ?>
				</a>

すると、記事一覧のサムネイル上にカテゴリーが表示されました。

ステップ1:サムネイル画像上にカテゴリーを表示する。

ステップ2:文字を装飾する。

このままでは決してスマートとは言えないので、style.cssでデザインします。

画像の左上に表示させたい場合、下記をコピペしてください。

/*サムネイル上にカテゴリーのスタイル 親*/
.kanren .clearfix {
		position:relative;
}

/*サムネイル上にカテゴリーのスタイル*/
.cat-name {
 position: absolute;/*位置*/
 top:0px;/*位置 上から*/
 left:0px;/*位置 左から*/

/*以下必要に応じて*/
 padding: 2px 10px;/*余白 上下 左右*/
 background: silver;/*背景色*/
 font-size:10px;/*文字サイズ*/
}

プレビューで確認しましょう。

ステップ2:文字を装飾する。

これでサムネイル上にカテゴリーが表示されました!

自分用メモ

実装する際、top、leftを指定するとカテゴリー表示が消えた。

調べると、absoluteは絶対位置で表示されるため、サイト最左上に飛んでいっちゃって、乱れたよう。

これらを「画像上からの位置」にするには、親クラスのpositionをstatic(未設定)以外にする必要がある。

そうすることで、親クラスの範囲からの絶対位置で配置が可能になる。

ステップ3:記事情報のカテゴリー表記を削除する。

サムネイル右、記事情報側のカテゴリー表記をついでに削除します。

カテゴリーを複数設定する、別にあってもいい人はスキップしてください。

「itiran-thumbnail-on.php」から、以下を削除またはコメントアウトしてください。

<span class="pcone">
  <i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
  <?php the_tags( '<i class="fa fa-tags"></i> ', ', ' ); ?>
</span>

まとめ

以上がサムネイル上にカテゴリーを設定する方法でした。

すこしだけオシャレなサイトに近づいたのではないでしょうか?

必要最低限のコードのみ記載したので、CSSを改造して自分好みのデザインにしてみてください。

僕自身、コードファイルをいじってみたらチョットずつHTML、CSS、PHPの仕組みがわかってきました!

この調子でどんどん理想のブログにしていきたいですね。

おまけ

オンカーソルで背景色、文字色を変える。

クラス:hoverに指定する。

/*オンカーソル時*/
.cat-name:hover {
 color:#000;/*文字色*/
 background: yellow;/*背景色*/
}

丸くする。

border-radiusを設定する。

.cat-name {
 border-radius: 14px;/*丸みつけ*/
}

プレビュー

丸くする。

このブログでは下記のように設定しています。

/*サムネイル上にカテゴリー表示するためのスタイル*/
.cat-name {
background-color:#F9B416;
 display: inline-block;
 overflow: hidden;
 position: absolute;
 top: 0px;
 left: 0px;
 height: 22px;
 margin: 0;
 padding: 2px 10px;
 color: #fff;
 font-size: 15px;
 font-weight: 700;
 vertical-align: middle;
 line-height: 22px;
}

/*オンカーソル時*/
.cat-name:hover {
    color:#444;
    text-decoration: none;
    background: silver;
}

プレビュー