Simplicityのアイキャッチ画像にカテゴリー名を重ねるカスタマイズ

アイキャッチ画像にカテゴリー名を重ねる

Simplicityのトップページの最新記事一覧にあるアイキャッチ画像にカテゴリー名を重ねてみた備忘録です。他のWordPressテーマなどで見かけるのでカスタマイズしてみた内容です。

ようやく、Simplicity2でトップページにある記事一覧のアイキャッチ画像上にカテゴリー名を重ねる事が出来ました。

最近よく見掛けるので、いつもの事ですが出来るなら是非ともやってみたいと思いながら数カ月。と言っても、なんか難しそうで中々「よしっ!やろう!」とはいかず、検索だけで時間ばかりが過ぎ去ったって感じです。

有料テーマを購入すれば?って話ですが、それはそれ。

初心者ゆえに何かをやってみようと思ったら、まず検索。ワードプレスもカメラも、まず検索です。ただ、希望する様な記事を直ぐには見つけられない事もあります。

なんせ、基本的にコピペなんで、WordPressテーマなど同じ環境でないと難しんですよね。

Simplicity公式 Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

スポンサーリンク

コピペカスタマイズに希望の光が

検索を続けていると、「おっ?これは?」なんて思う事もありますが、なんか違うし、書いてある事も難しくて理解に苦しむ事が多いです。

そんな中、見つけた記事を見ていると、

外部リンク WordPress アイキャッチ画像の上にカテゴリ名を表示 | Inoma Create

概要

  1. ①アイキャッチ画像を出力するコードの下に②重ねたい文字となるコードを記述。
  2. ①と②を<div>タグで囲む。

なるほど!理屈は分かった気がした。(分ってるのか?)

今回はカテゴリー名をアイキャッチ画像の上に重ねたいので、アイキャッチ画像を出力するコードの下には、

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

とすれば、一先ず、カテゴリー名が取得される様です。それまで使っていた、

<?php the_category(', ') ?>

をそのまま使えるのかな?上のコードは何を書いているのか難し過ぎる。

Simplicity2のファイルにコピペ

参考にして出来上がったのが、下の通りです。

Simplicity2のentry-card.phpに記述

class名を適当に決めて記述した内容です。

<figure class="entry-thumb">
    <?php if ( is_entry_card_style() ): //デフォルトのサムネイルカード表示の場合?>
    <div class="catname">  
     <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
       <p class="catname-label">
        <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
       </p>
    </div>
       <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb210', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>

改行というか、書き出しの位置に意味はあるのだろうか?

Simplicity2のstyle.cssに記述

上のclass名をスタイルシートで分からないなりに調整した今回の最終形です。

p.catname-label {
    position: relative;
    color: #fff;
    font-size: 12px;
    background: #2d87e2;
    padding: 5px;
    text-align: left;
}

.catname {
    position: absolute;
    font-weight: normal;
    text-align: left;
    margin-top: -12px;
    margin-bottom: 0px;
}

CSSはお好みで調整が必要です。relativeとabsoluteって、また勉強しないとアカンね。あと、pxやらemやら。

ここまでの仕上がりを確認

パソコンでトップページを確認してみると、当時はこんな感じ。

わぉー。こんなんでも嬉しい。今はまた変わってるかも知れません。

めっちゃ面白いやん。調子に乗って関連記事もやっちゃいました。