WordPress│ACF無料版で繰り返しフィールドを使う方法

/**
 * 料金表ショートコード
 *
 * 使用例
 * [price_table]
 *
 * 別ページの料金表を表示する場合
 * [price_table post_id="123"]
 */
function motoki_price_table_shortcode( $atts ) {

	$atts = shortcode_atts(
		array(
			'post_id' => get_the_ID(),
		),
		$atts,
		'price_table'
	);

	$post_id = absint( $atts['post_id'] );

	if ( ! function_exists( 'get_field' ) ) {
		return '';
	}

	$rows = get_field( 'price_list', $post_id );

	if ( empty( $rows ) || ! is_array( $rows ) ) {
		return '';
	}

	ob_start();
	?>
	<div class="motoki-price-table">

		<?php foreach ( $rows as $row ) : ?>

			<?php
			$plan_name  = isset( $row['plan_name'] )
				? $row['plan_name']
				: '';

			$price = isset( $row['price'] )
				? $row['price']
				: '';

			$description = isset( $row['description'] )
				? $row['description']
				: '';
			?>

			<div class="motoki-price-item">

				<?php if ( $plan_name !== '' ) : ?>
					<h3 class="motoki-price-title">
						<?php echo esc_html( $plan_name ); ?>
					</h3>
				<?php endif; ?>

				<?php if ( $price !== '' ) : ?>
					<div class="motoki-price-value">
						<?php echo esc_html( $price ); ?>
					</div>
				<?php endif; ?>

				<?php if ( $description !== '' ) : ?>
					<div class="motoki-price-description">
						<?php
						echo wp_kses_post(
							wpautop( $description )
						);
						?>
					</div>
				<?php endif; ?>

			</div>

		<?php endforeach; ?>

	</div>
	<?php

	return ob_get_clean();
}

add_shortcode(
	'price_table',
	'motoki_price_table_shortcode'
);

[price_table]

/* 料金表全体 */
.post_content .motoki-price-table {
	width: 100%;
	margin: 2rem 0;
	overflow: hidden;
	border: 1px solid #d8dde5;
	border-radius: 8px;
	background: #fff;
}

/* 見出し行 */
.post_content .motoki-price-header {
	display: grid;
	grid-template-columns: 1.2fr 1fr 2fr;
	background: #26384a;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.post_content .motoki-price-header > div {
	padding: 13px 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.post_content .motoki-price-header > div:last-child {
	border-right: 0;
}

/* 料金表の1行 */
.post_content .motoki-price-item {
	display: grid;
	grid-template-columns: 1.2fr 1fr 2fr;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #d8dde5;
	background: #fff;
}

.post_content .motoki-price-item:last-child {
	border-bottom: 0;
}

/* セル共通 */
.post_content .motoki-price-title,
.post_content .motoki-price-value,
.post_content .motoki-price-description {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 18px 20px;
	border-right: 1px solid #d8dde5;
	line-height: 1.7;
}

/* プラン名 */
.post_content .motoki-price-title {
	font-weight: 700;
	color: #222;
	background: #f5f7fa;
}

/* 料金 */
.post_content .motoki-price-value {
	justify-content: center;
	color: #1268b3;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/* 説明 */
.post_content .motoki-price-description {
	display: block;
	border-right: 0;
	color: #333;
	font-size: 15px;
}

/* 説明文の余白調整 */
.post_content .motoki-price-description p {
	margin: 0;
	padding: 0;
}

/* スマートフォン */
@media screen and (max-width: 767px) {

	.post_content .motoki-price-table {
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.post_content .motoki-price-header {
		display: none;
	}

	.post_content .motoki-price-item {
		display: block;
		overflow: hidden;
		margin-bottom: 20px;
		border: 1px solid #d8dde5;
		border-radius: 8px;
	}

	.post_content .motoki-price-item:last-child {
		border-bottom: 1px solid #d8dde5;
	}

	.post_content .motoki-price-title,
	.post_content .motoki-price-value,
	.post_content .motoki-price-description {
		display: block;
		width: 100%;
		padding: 14px 16px;
		border-right: 0;
		border-bottom: 1px solid #d8dde5;
		text-align: left;
	}

	.post_content .motoki-price-value {
		font-size: 18px;
	}

	.post_content .motoki-price-description {
		border-bottom: 0;
	}
}

[price_table post_id="123"]