[ACF]繰り返しフィールド/リピート(repeat)使い方、表示方法。カスタムフィールドで投稿の最後に「出典と引用」を表示する。 Advanced Custom Fields

カスタムフィールドで投稿の最後に「出典と引用」を表示する。

無料のカスタムフィールドを使う場合

<?php if(post_custom('sources-and-citations')): ?>
<div>Sources and Citations:<?php echo post_custom('sources-and-citations'); ?></div>
<?php endif; ?>

the_fieldのがシンプルでした。

状況によって試して見てください。

<?php the_field('title');?>

有料/PRO版のカスタムフィールドを使う場合。繰り返しフィールドで表示する。

ACF Advanced Custom Fields(アドバンスドカスタムフィールド)のPROバージョンを持っているのループ、繰り返しできるフィールドで調整しました。
プラグインのlinkを使ってみましたが、表示がおかしくなるので下記のコードに変更しました。

<div style="padding: 20px 0px 15px 20px;background-color: #f8f8f8;font-size: 14px;line-height: 22px;text-align: left;background-position: center center;background-size: cover;">
  <?php if( have_rows("sources-and-citations") ): ?>
    <h2>出典と引用</h2>
    <p>Sources and Citations</p>
    <ol style="list-style-type: decimal-leading-zero">
      <?php while ( have_rows("sources-and-citations") ) : the_row(); ?>
        <li><a href="<?php the_sub_field('link');?>" target="_blank" rel="noopener noreferrer"><?php the_sub_field('link');?></a></li>
      <?php endwhile; ?>
    <?php endif; ?>
  </ol>
</div>

Mac のMagic keyboard US版を使い始めましたが。
enter(return)が小さいので文字の「確定」をしようとすると¥を押してしまうwww
文字タイプ変化は慣れました。

新しいことにチャレンジするなら→日本語キーボードからUSキーボードに変える!

[amazon_link asins=’B06XCRPG33,B016ZF8RDA,B071JTHLBR’ template=’ProductCarousel’ store=’rionon-22′ marketplace=’JP’ link_id=’d0da13e1-c213-11e8-82a3-51f379e54d63′]

詳細を入れられるようにしました

<?php if( have_rows("sources-and-citations") ): ?>
  <div style="padding: 20px 0px 15px 20px;background-color: #f8f8f8;font-size: 14px;line-height: 22px;text-align: left;background-position: center center;background-size: cover;">
    <h2>出典と引用</h2>
    <p>Sources and Citations</p>
    <ol style="list-style-type: decimal-leading-zero">
      <?php while ( have_rows("sources-and-citations") ) : the_row(); ?>
        <li><a href="<?php the_sub_field('link');?>" class="external external_icon" target="_blank" rel="noopener noreferrer"><?php the_sub_field('link');?></a> ※<?php the_sub_field('comment');?></li>
      <?php endwhile; ?>
    </ol>
  </div>
<?php endif; ?>