WP show posts 画像にリボン追加

  • foodnet

    (@foodnet)


    4年、 3ヶ月前

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

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

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

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

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

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

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

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

    (@ishitaka)

    4年、 3ヶ月前

    こんにちは

    画像の直前であれば、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)

    4年、 3ヶ月前

    よいアドバイスあったようなので投稿削除します

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

    (@foodnet)

    4年、 3ヶ月前

    @ishitaka さん　@ikaring　さん

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

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

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

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「WP show posts 画像にリボン追加」には新たに返信することはできません。