WP show posts 画像にリボン追加

foodnet
(@foodnet)

3年、 11ヶ月前

初めまして、wordpress初心者です。

今ページのトップにWP show postsにて新着のレシピを掲載してるのですが、
「new」という斜め掛けのリボンを画像に追加したいと考えてます。

ネットで調べると、htmlを追加しないといけないようなのですが、
WP show postsをショートコードで記載してます。

リボンをつけるためのHTMLを追加記載できるのでしょうか？

何かいい方法があれば教えていただきたいです。
初心者のため、伝わりずらければ申し訳ございません。

よろしくお願いいたします。

ヘルプの必要なページ: [リンクを見るにはログイン]

3件の返信を表示中 - 1 - 3件目 (全3件中)

ishitaka
(@ishitaka)

3年、 11ヶ月前
こんにちは

画像の直前であれば、wpsp_inside_image_container フックで追加することはできそうです。
https://wpshowposts.com/support/topic/different-featured-image-for-list-and-page/

ただ、HTML を追加しなくても、CSS だけでも before 疑似要素などを使用するとできると思います。

例:
```
.wp-show-posts-image {
	position: relative;
	overflow: hidden;
}
.wp-show-posts-image::before {
	content: "NEW!";
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 30px;
	line-height: 30px;
	background-color: red;
	color: white;
	font-size: 16px;
	text-align: center;

	-webkit-transform: rotate(-45deg) translate(-60px,-50px);
	   -moz-transform: rotate(-45deg) translate(-60px,-50px);
	    -ms-transform: rotate(-45deg) translate(-60px,-50px);
	     -o-transform: rotate(-45deg) translate(-60px,-50px);
	        transform: rotate(-45deg) translate(-60px,-50px);
}
```
ikaring
(@ikaring)

3年、 11ヶ月前
よいアドバイスあったようなので投稿削除します
- この返信は3年、 11ヶ月前にikaringが編集しました。理由: よいアドバイスあったようなので
トピック投稿者 foodnet
(@foodnet)

3年、 11ヶ月前

@ishitaka さん　@ikaring　さん

アドバイス本当にありがとうございます。
まさかできるとは思ってもいなかったので、すごいびっくりしてます。

いつもここのフォーラムの皆様にはお世話にってばかりです。

ありがとうございました。