カスタム投稿のアーカイブページ改修

♥ 0

いいねをした人: 居ません

このトピックには2件の返信、2人の参加者があり、最後に九州機電株式会社により2年前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2022年11月16日 11:16 AM #113859
九州機電株式会社
参加者

♥ 37
【お使いの Snow Monkey のバージョン】18.1.0
【お使いの Snow Monkey Blocks のバージョン】17.0.3
【お使いの Snow Monkey Editor のバージョン】9.0.3
【お使いのブラウザ】google chrome
【当該サイトのURL】

### 実現したいこと
カスタム投稿のアーカイブページで表示されるカードの左上に添付画像のように
「販売価格」を表示させたい

### 発生している問題
「Advanced Custom Fields」を利用して設定したカスタムフィールドの値（販売価格）が表示されない。

### 試したこと
表示されている画像の前に販売価格表示用のdivタグを追加しようと思い、過去ログを参考にして以下のコードを追加。
```
add_filter(
	'snow_monkey_template_part_render',
	function( $html, $slug, $name, $vars ) {
		if ( 'inventory' !== get_post_type() ) {
			return $html;
		}

		if ( 'template-parts/loop/entry-summary/title/title' === $slug ) {
			// カスタムフィールドで設定したフィールド名を代入
			$acf_price = get_field('h_price');

			// 追加するdivタグを設定
			$acf_price_info = "<div class='c-entry-summary__figure'><div class='ec-info'><p>" . esc_attr($acf_price) . "</p></div>";

			// テンプレートパーツを変換
			$html = str_replace(
				'<div class="c-entry-summary__figure">',
				$acf_price_info,
				$html
			);
		}

		return $html;
	},
	10,
	4
);
```
よろしくお願いいたします。

♥ 0

いいねをした人: 居ません
2022年11月16日 2:01 PM #113887
GONSY
参加者

♥ 841
サムネイル画像 c-entry-summary__figure あたりに表示するのはいかがでしょうか。

my-snow-monkey.phpに以下を追記
※カスタムフィールドにはカンマなしの数字入力を想定
```
add_filter(
'snow_monkey_template_part_render_template-parts/loop/entry-summary/figure/figure',
	function( $html ) {
		if ( 'event' === get_post_type() ) {

			$acf_price = get_field( 'h_price' );
			return str_replace(
				'<div class="c-entry-summary__figure">',
				'<div class="c-entry-summary__figure"><p class="price">￥'. esc_attr( number_format($acf_price) ) ."（税込）</p>",  
				$html
			);

		}
		return $html;
	}
);
```
CSS
```
p.price {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #389EF2;
	font-weight: bold;
	padding: 0 0.5em;
	z-index: 1;
}
```
これでイメージに近い表現ができると思います。
お試しくださいませ。

♥ 2

いいねをした人:
2022年11月16日 4:40 PM #113898

九州機電株式会社
参加者

♥ 37

GONSY様

ご連絡いただきありがとうございました。
無事実装できました！

コードのはじめの方の「テンプレートの指定」のところがよくわかっていないため、
大変助かりました。

♥ 3

いいねをした人:
投稿者

投稿