プラグイン出力でよく使うコード

HTMLサイトをWordPressにする本

Advanced Custom Fields（ACF）でよく使うコード

※リピータ―フィールドなどは有料のPROにしないと使用できません

※公式のドキュメントもご覧ください。

Advanced Custom Fields (ACF)

基本の表示方法（テキスト、テキストエリア）

フィールド名は日本語でも、英語でもOK！

<?php the_field('フィールド名'); ?>

【記入例：肩書きというテキストフィールド名を表示】

<p><?php the_field('肩書き'); ?></p>

他の記事のカスタムフィールドを表示

<?php the_field('フィールド名', ID); ?>

【記入例：ページIDが5に登録されたカスタムフィールドを表示】

<?php the_field('会社のコンセプト', 5); ?>

値が入っているか判別する条件分岐

<?php if(get_field('フィールド名')): ?>
  <!--フィールド名が入っていたら表示-->
  <?php the_field('フィールド名'); ?>
<?php else: ?>
  <!--それ以外の処理-->
<?php endif; ?>

繰り返しフィールドの表示

※繰り返しフィールドの中は 「the_field」→「the_sub_filed」 という名前に変わるので注意！

<?php if(have_rows('フィールド名')): ?>
  <?php while(have_rows('フィールド名')): the_row(); ?>
    <?php the_sub_field('サブフィールド名'); ?>
  <?php endwhile; ?>
<?php endif; ?>

繰り返しフィールドの●件目だけ表示

<?php
$counter = 0;
if(have_rows('フィールド名')):
  while(have_rows('フィールド名')): the_row();
    $counter++;  // 繰り返しフィールドの件数をカウント
?>
    <?php if ($counter <= 5):  // 5件までを表示 ?>
      <?php the_sub_field('サブフィールド名'); ?>
    <?php endif; ?>
  <?php endwhile; ?>
<?php endif; ?>

繰り返しフィールドの●件目以降を表示

<?php
$counter = 0;
if(have_rows('フィールド名')):
  while(have_rows('フィールド名')): the_row();
    $counter++;  // 繰り返しフィールドの件数をカウント
?>
    <?php if($counter > 3):  // 3件目より後（＝4件目～）を表示 ?>
      <?php the_sub_field('サブフィールド名'); ?>
    <?php endif; ?>
  <?php endwhile; ?>
<?php endif; ?>

繰り返しフィールドの●件目から●件目まで表示

<?php
$counter = 0;
if(have_rows('フィールド名')):
  while(have_rows('フィールド名')): the_row();
    $counter++;  // 繰り返しフィールドの件数をカウント
?>
    <?php if($counter >= 2 && $counter <= 10):  // 2件目から10件目を表示 ?>
      <?php the_sub_field('サブフィールド名'); ?>
    <?php endif; ?>
  <?php endwhile; ?>
<?php endif; ?>

繰り返しフィールドの値をランダムに出す

〇画像の戻り値の形式：画像 ID

<?php // 表示結果をランダムにする
  $rows = get_field('フィールド名');  // 配列を格納
  $rand_row = $rows[array_rand($rows)];  // 配列から値をランダムに取得
  $rand_row_image = $rand_row['サブフィールド名'];  // フィールド名を指定して値を取得
  $image = wp_get_attachment_image_src($rand_row_image, 'full' );  // フルサイズの画像を取得
  $image_url = $image[0];  // 画像のURLを取得
  $image_alt = get_post_meta(get_post($rand_row_image)->ID, '_wp_attachment_image_alt', true);  // 画像のalt属性を取得
?>
<img src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>">

繰り返しフィールドをカウントして、ページ内リンク

【使用例】項目別のよくあるご質問をリピータ―フィールドで表示

<!-- アンカーリンク -->
<?php if(have_rows('faq') ): $i = 0; ?>
  <ul>
  <?php while(have_rows('faq')): the_row(); $i++;?>
    <li><a href="#faq<?php echo $i?>"><?php the_sub_field('タイトル'); ?></a></li>
  <?php endwhile;?>
  </ul>
<?php endif;?>

<!-- FAQ詳細 -->
<?php if(have_rows('faq') ): $i = 0; ?>
<?php while(have_rows('faq')): the_row(); $i++;?>
  <section id="faq<?php echo $i?>" class="faq-area">
    <h3><?php the_sub_field('タイトル'); ?></h3>
    <?php if(have_rows('質問詳細')): ?>
      <?php while(have_rows('質問詳細')): the_row(); ?>
      <section class="faq-block">
        <h4><?php the_sub_field('q'); ?></h4>
        <div class="faq-a-block">
          <?php the_sub_field('a'); ?>
        </div>
      </section>
    <?php endwhile; endif; ?>
  </section>
<?php endwhile; endif; ?>

画像の表示

〇画像の戻り値の形式：画像配列

<?php 
$image = get_field('フィールド名');
if(!empty($image)):
?>
  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<?php endif; ?>

〇画像の戻り値の形式：画像配列

<?php
$image = get_field('フィールド名');
if(!empty($image)):
  // 画像から情報を取得
  $url = $image['url'];  // URL
  $title = $image['title'];  // タイトル
  $alt = $image['alt'];  // 代替テキスト
  $caption = $image['caption'];  // キャプション
  $description = $image['description'];  // 説明
  // 画像のサイズ
  $size = 'thumbnail';  // 画像サイズ thumbnail（サムネイル）, medium（中サイズ）, large（大サイズ）, full（元画像）
  $thumb = $image['sizes'][ $size ];  // 指定したサイズの画像のURL
  $width = $image['sizes'][ $size . '-width' ];  // 横幅
  $height = $image['sizes'][ $size . '-height' ];  // 高さ
?>
<figure>
  <a href="<?php echo $url; ?>" title="<?php echo $title; ?>">
    <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>">
  </a>
  <figcaption><?php echo $caption; ?></figcaption>
</figure>
<p><?php echo $description; ?></p>
<?php endif; ?>

ギャラリーの表示

〇画像の戻り値の形式：画像配列

<?php 
$images = get_field('フィールド名');
if($images):
?>
  <ul>
  <?php foreach($images as $image): ?>
    <li>  <!--元画像にリンク、サムネイルサイズで表示-->
      <a href="<?php echo $image['url']; ?>">
        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>">
      </a>
      <p><?php echo $image['caption']; ?></p>  <!--キャプションを表示させたい場合-->
    </li>
  <?php endforeach; ?>
  </ul>
<?php endif; ?>

チェックボックスをリストで表示

<?php
$checklists = get_field('フィールド名');
if($checklists):
?>
<ul>
<?php foreach($checklists as $checklist): ?>
  <li><?php echo $checklist; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

チェックボックスを使った条件分岐

<?php 
$checklists = get_field('フィールド名');
if($checklists && in_array('条件1', $checklists)):
?>
  <!-- 条件1が選択されている場合の処理 -->
<?php elseif($checklists && in_array('条件2', $checklists)): ?>
  <!-- 条件2が選択されている場合の処理 -->
<?php else: ?>
  <!-- それ以外の場合の処理 -->
<?php endif; ?>

関連（投稿）オブジェクトの表示

※複数値を選択可能

<?php
$featured_posts = get_field('フィールド名');
if($featured_posts):
?>
  <?php foreach($featured_posts as $post): setup_postdata($post); ?>
    <!--ここに表示させたい内容を記述-->
    <p><?php the_title(); ?></p>
  <?php endforeach; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

Smart Custom Fieldsでよく使うコード

Smart Custom Fields

基本の表示方法

<?php echo SCF::get('カスタムフィールドの名前'); ?>

【使用例：mapという名前を付けたカスタムフィールドを表示】

<?php echo SCF::get('map'); ?>

テキストエリアの表示

<?php echo nl2br(SCF::get('カスタムフィールドの名前')); ?>

【使用例：serviveという名前を付けたカスタムフィールドを表示】

※nl2brを入れて改行を反映。

<?php echo nl2br(SCF::get('service')); ?>

画像の表示

<?php echo wp_get_attachment_image(SCF::get('カスタムフィールドの名前'), '画像のサイズ'); ?>

【使用例：company-imgという名前をつけた画像をlargeサイズで表示】

<?php echo wp_get_attachment_image(SCF::get('company-img'), 'large'); ?>

リピーターフィールドの表示

<?php
$グループ名 = SCF::get('グループ名');
foreach($グループ名 as $fields):
?>
  <?php echo $fields['カスタムフィールドの名前'];?>
<?php endforeach; ?>

【使用例：company-info-groupという名前をつけたグループの info-titleとinfo-descriptionをリピート表示】

<?php
$company_info_group = SCF::get('company-info-group');
foreach($company_info_group as $fields):
?>
  <dl>
    <dt><?php echo $fields['info-title']; ?></dt>
    <dd><?php echo $fields['info-description']; ?></dd>
  </dl>
<?php endforeach; ?>

【使用例：他ページの情報を出力】
※例はcompanyというスラッグがついているページの情報を出力しています。
get_page_by_path(‘company’)->IDが追加されているのがポイント

<?php
$company_info_group = SCF::get('company-info-group', get_page_by_path('company')->ID);
foreach($company_info_group as $fields):
?>
  <dl>
    <dt><?php echo $fields['info-title']; ?></dt>
    <dd><?php echo $fields['info-description']; ?></dd>
  </dl>
<?php endforeach; ?>

Breadcrumb NavXTでよく使うコード

Breadcrumb NavXT

パンくずリストの表示

<ol>
  <?php if(function_exists('bcn_display')) bcn_display_list(); ?>
</ol>

WP-PageNaviでよく使うコード

WP-PageNavi

ページナビゲーションの表示

<?php wp_pagenavi(); ?>

固定ページにナビゲーションを表示する場合：使用例はこちらから

<?php 
if(function_exists('wp_pagenavi')):
  wp_pagenavi(array('query'=>$the_query));
endif;
?>

最低限覚えておきたい
WordPressのコード

コード一覧に戻る