関係（関連記事）の出力

プラグインのAdvanced Custom Fields (略してAFC)を使用して、投稿ページから任意の記事を指定して出力します。

フィールドで指定した記事一覧の出力
chart.jsで指定した記事を棒グラフで出力

フィールドで指定した記事一覧の出力

カスタムフィールドのフィールドタイプ「関係」で戻り値は「投稿ID」を指定。そして、各投稿内で指定した任意の記事を一覧で表示させます。

並び順は、指定した順番に準じます。

PHP

<?php $acf_fieldlink = get_field('hikaku_other');
    $args = array(
        'post_type'      => '投稿タイプ名（英数字）', // 投稿タイプ
        'post__in' => $acf_fieldlink,
        'order' => 'ASC', // 並び順
        'posts_per_page' => -1, // 表示件数（-1）は全件
        'orderby' => 'post__in', // フィールドに登録した順番通りに並べたい場合はpost_in
    );
    $top_news = new WP_Query( $args );
    if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
?>

<!-- ループ出力 -->

<?php endwhile; endif; wp_reset_postdata(); ?>

chart.jsで指定した記事を棒グラフで出力

chart.js本体の読み込みも行い、指定した記事をループで出力しchart.jsの「棒グラフ」で表示させます。

HTML

<canvas id="koukaiKyuujin" width="400" height="<?php if ( wp_is_mobile() ) : ?>600<?php else: ?>280<?php endif; ?>"></canvas>

PHP

<script>
var ctx = document.getElementById("koukaiKyuujin").getContext('2d');
var koukaiKyuujin = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["<?php the_title(); ?>",<?php $acf_fieldlink = get_field('hikaku_other');
					$args = array(
						'post_type'      => '投稿タイプ（英数字）',
						'post__in' => $acf_fieldlink,
						'order' => 'ASC',
						'posts_per_page' => -1,
						'orderby' => 'post__in',
					);
					$top_news = new WP_Query( $args );
					if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
					//表のループここから ?> "<?php the_title(); ?>",<?php endwhile; endif; wp_reset_postdata(); ?>],
        datasets: [{
            label: '公開求人数',
            data: [<?php if(get_field('table_jobopenings')): ?><?php the_field('table_jobopenings'); ?><?php endif; ?>,<?php $acf_fieldlink = get_field('hikaku_other');
					$args = array(
						'post_type'      => '投稿タイプ（英数字）',
						'post__in' => $acf_fieldlink,
						'order' => 'ASC',
						'posts_per_page' => -1,
						'orderby' => 'post__in',
					);
					$top_news = new WP_Query( $args );
					if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
					//表のループここから ?><?php the_field('table_jobopenings'); ?>,<?php endwhile; endif; wp_reset_postdata(); ?>],
            backgroundColor: [
                'rgba(102, 182, 255, 0.2)',
                'rgba(112, 112, 112, 0.2)',
            ],
            borderWidth: 0,
        },
		{
            label: '非公開求人数',
            data: [<?php if(get_field('table_undisclosedjob')): ?><?php the_field('table_undisclosedjob'); ?><?php endif; ?>,<?php $acf_fieldlink = get_field('hikaku_other');
					$args = array(
						'post_type'      => '投稿タイプ（英数字）',
						'post__in' => $acf_fieldlink,
						'order' => 'ASC',
						'posts_per_page' => -1,
						'orderby' => 'post__in',
					);
					$top_news = new WP_Query( $args );
					if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
					//表のループここから ?><?php the_field('table_undisclosedjob'); ?>,<?php endwhile; endif; wp_reset_postdata(); ?>],
            backgroundColor: [
                'rgba(102, 182, 255, 1)',
                'rgba(112, 112, 112, 0.2)',
            ],
            borderWidth: 0,
        }
		]
    },
    options: {
	title: {   // タイトル
		display: true, // 表示設定
		fontSize: 12,
	},
		legend: {                          // 凡例
                display: true                     // 表示の有無
            },
	scales: {
		xAxes: [
                    {
                        display: true, 
						},
			],
            yAxes: [{
				scaleLabel: {                  // 軸ラベル
                            display: true,                 // 表示の有無
                            fontSize: 12                   // フォントサイズ
                        },
                ticks: {
                    beginAtZero:true,
							stepSize: 5000,
                }
            }]
        }
    }
});
</script>

chart.jsの利用方法や、詳細については以下の記事も参考にしましょう。