【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法

add_filter('the_content', function() {
	if (is_singular('workshop')) {
		$html  = $the_content;
		$html  .= '出力するコード';
		return $html ;
	}
});

add_filter('the_content', function($the_content) {
	if (is_singular('workshop')) {
		
		// ACFで設定した画像を取得　※関数内で宣言
		$Landscape = get_field('landscape');
		$ImgIcon = get_field('img_icon');

		$html  = $the_content;
		$html .= '<div class="work-shop-landscape" style="background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('.$Landscape['url'].');"></div>';
		$html .= '<img class="work-shop-img-icon" src="'.$ImgIcon['url'].'">';
		$html .= '<p>'.get_field('location').'</p>';
		return $html;
	}

	// トップページで何も表示されなくなるため
	else {
		return $the_content;
	}
});

add_action('the_content', function($html) {
	if(is_singular('workshop')) {
		// ACFで設定した画像を取得　※関数内で宣言
		$Landscape = get_field('landscape');
		$Icon = get_field('img_icon');
		$Loction = get_field('location');
		?>
		<div class="work-shop-landscape" style="background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(<?php echo esc_attr($Landscape['url']); ?>);"></div>
		<div class="work-shop-headerInfo">
			<div class="work-shop-icon-wrapper"><img class="work-shop-icon" src="<?php echo esc_attr($Icon['url']); ?>"></div>
			<div class="work-shop-icon-desc">
				<div class="work-shop-tag">
					<?php 
						$terms = get_the_terms($post->ID, 'area');
						if ($terms) {
							foreach ($terms as $term) {
								// echo '<a class="tagc-area" tag-id="' . $term->term_id . '" href="' . get_permalink() . '">' . $term->name . '</a>';
								// aタグのリンクを無効
								echo '<a class="tagc-area" tag-id="' . $term->term_id . '" href="">' . $term->name . '</a>';
							}
						}
						$terms = get_the_terms($post->ID, 'tag-workshop');
						if ($terms) {
							foreach ($terms as $term) {
								// echo '<a class="tagc-tag-workshop" tag-id="' . $term->term_id . '" href="' . get_permalink() . '">' . $term->name . '</a>';
								// aタグのリンクを無効
								echo '<a class="tagc-tag-workshop" tag-id="' . $term->term_id . '" href="">' . $term->name . '</a>';
							}
						}
					?>
				</div>
				<!-- /.work-shop-tag -->
				<div class="work-shop-location"><?php echo esc_attr($Loction); ?></div>
				<!-- /.work-shop-location -->
			</div>
			<!-- /.work-shop-icon-desc -->
		</div>
		<!-- /.work-shop-headerInfo -->
		<?php
	}

	// トップページで何も表示されなくなるため
	else {
		return $html;
	}
});

<?php /* 取得する投稿の条件 */ ?>
    <?php
    $args = array(
        'post_type' => 'post', /* 取得したい投稿タイプ */
        'category_name'  => 'job',
        'posts_per_page' => -1, /* 表示したい投稿の数 (すべての取得したい場合は「-1」) */
        'orderby' => 'meta_value', 
        'meta_key' => 'price', //ここにソートの対象となるカスタムフィールドの名前を
        'order' => 'DESC'
    );
    $the_query = new WP_Query($args); /* クエリの作成と発行をし、取得したデータを「$the_query」に格納 */
    ?>