ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

Advanced Custom fieldsのユーザーにフィールドを追加して情報を表示する方法

Advanced Custom fieldsを使うとユーザー情報にカスタムフィールドを追加することが出来ます。追加したカスタムフィールドの情報をユーザー情報として表示、フールドタイプ「ユーザー」の使い方をご紹介します。

オウンドメディアを運営していると、複数の著者(ユーザー)、画像や肩書などの情報を追加したい場合があります。

Advanced Custom fields(ACF)を使って、下記のように複数の著者情報を表示します。

ACFを使ったユーザー情報のカスタムフィールドの追加と呼び出し

ユーザー情報にカスタムフィールドを追加

ACFを利用して、ユーザー情報に「画像」と「肩書」のカスタムフィールドを追加します。

フィールドタイプ「画像」と「テキスト」のカスタムフィールドを追加しました。

ACF画像のカスタムフィールド


カスタムフィールドを表示する画面として「ユーザーフォーム」を設定します。

ACFのフィールドタイプにユーザーフォームを選択

以上でユーザー画面に「画像」と「肩書」を入力するカスタムフィールドが表示されます。

ユーザー画面にACFのカスタムフィールド

ユーザーのカスタムフィールドを表示

まずは記事の投稿者のカスタムフィールドを表示してみます。

single.phpに下記のコードを記入します。
カスタムフィールドのフィールド名は適宜ご変更ください。

single.php
//ACFの画像
<img src="<?php $userID = get_the_author_meta('ID'); the_field('cf_user_photo', 'user_' . $userID); ?>" />
//ACFのテキスト
<?php $userID = get_the_author_meta('ID'); the_field('cf_user_title', 'user_' . $userID); ?>

記事にユーザーの画像、肩書が表示されます。

ちなみにユーザーの名前やプロフィールは下記のコードで表示できます。

ユーザー情報
//名前
<?php echo get_the_author(); ?>
//プロフィール文
<?php the_author_meta('user_description'); ?>

フィールドタイプ「ユーザー」を利用して著者を追加表示

記事の著者を共著や、複数名表示したい場合があります。

ACFには記事の著者を指定できるフィルードタイプ「ユーザー」が用意されています。WordPressに登録しているユーザーを複数選択することもできます。

ACFに新しいフィールドグループを作り、フィールドタイプ「ユーザー」のカスタムフィールドを追加します。

ACFのフィールドタイプ ユーザーの設定

複数値を選択可能はONにしておきます。


記事の投稿画面に、ユーザーを選択できるカスタムフィールドが表示されていますので、ユーザーを設定します。複数のユーザーを設定することもできます。

ACFのユーザーフィールドにユーザーを設定する

フィールドタイプのユーザーの値を表示

記事の著者としてフィールドタイプ「ユーザー」の情報を表示します。

single.phpに下記のコードを記入します。

single.php
<?php
$users = get_field("cf_post_user");
if( $users ): ?>
  <?php foreach( $users as $user ): ?>
    //画像のカスタムフィールド
    <img src="<?php the_field('cf_user_photo', 'user_'.$user->ID);?>" />
    //テキストのカスタムフィールド
    <?php the_field('cf_user_title', 'user_'.$user->ID);?>
    //ユーザーの名前
    <?php echo $user->display_name; ?>
    //ユーザーのプロフィール文
    <?php echo $user->description; ?>
  <?php endforeach; ?>
<?php endif; ?>

以上で下図のように、記事の著者として複数のユーザーを記事に表示されるようになりました。

ACFのユーザーフィールドを利用した共著の表示

WordPressの基本的なユーザー情報で良い場合は、ブロックエディターの投稿者ブロックを使って表示させる方法もあります。

ウェブサイトの運営方針に最適な方法をお選びください。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ