advanced custom fields proでカスタムフィールドを利用し、タイトル部分を目次として表示させる…
コードを書くにあたってこちらのブログを参考にさせていただきました。
この記事ではタイトルがh2だけでなくて、h3まである場合のコードを記載しています。
※リピーターフィールドを利用した本文部分
<?php if(have_rows('post_article')): ?>
<?php $n = 1; while(have_rows('post_article')): the_row(); ?>
<div class="content_area">
<h2 id="sec<?php echo $n; ?>" class="tit_02 fade_in fade_in_up"><?php the_sub_field('post_article_h2'); ?></h2>
<?php if ( get_field('post_article_img') ) { ?>
<div class="image fade_in fade_in_up">
<img src="<?php the_sub_field('post_article_img'); ?>" alt="">
</div>
<?php } ?>
<?php if(have_rows('post_article_content')): ?>
<?php $s = 1; while(have_rows('post_article_content')): the_row(); ?>
<h3 id="sec<?php echo $n."-".$s;?>" class="tit_mark fade_in fade_in_up"><?php the_sub_field('post_article_h3'); ?></h3>
<?php if(have_rows('post_article_detail')): ?>
<?php while(have_rows('post_article_detail')): the_row(); ?>
<?php if(have_rows('post_article_texts')): ?>
<?php while(have_rows('post_article_texts')): the_row(); ?>
<p class="fade_in fade_in_up"><?php the_sub_field('post_article_text'); ?></p>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php $s++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div><!--/.content-area-->
<?php $n++; ?>
<?php endwhile; ?>
<?php endif; ?>※目次の出力部分
<div class="table-of-contents">
<p class="tab">この記事の目次</p>
<div class="box">
<?php if(have_rows('post_article')): ?>
<?php $n=1; while(have_rows('post_article')): the_row(); ?>
<ul class="toc-list">
<li>
<a class="h2tit" href="#sec<?php echo $n;?>"><?php the_sub_field('post_article_h2'); ?></a>
<?php if(have_rows('post_article_content')): ?>
<ul>
<?php $s=1; while(have_rows('post_article_content')): the_row(); ?>
<li>
<a class="h3tit" href="#sec<?php echo $n."-".$s;?>"><?php the_sub_field('post_article_h3'); ?></a>
</li>
<?php $s++; ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</li>
</ul>
<?php $n++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div><!--/.table-of-contents-->ご参考までに！
