【ACF】ユーザープロフィール写真とは別の画像を登録する方法

MARKLEAPS

2021.09.02

Advanced Custom Fieldsでユーザープロフィール写真とは別の画像を登録し、
サイトに表示する方法をご紹介します。

Advanced Custom Fieldsでフィールドを追加する

・フィールドラベル　　：ユーザーアイコン　とします（任意）
・フィールド名　　　　：user-icon　とします（任意）
・フィールドタイプ　　：「画像」を選択
・返り値のフォーマット：「画像 URL」にチェックを入れます
・位置のルール　　　　：ユーザーフォームと等しい　とします

プロフィール編集ページにフィールドが追加されていることを確認

デフォルトの「プロフィール写真」とは別に、
画像を登録できる「ユーザーアイコン」という項目が追加されました。

画像を登録します。

フッターに画像付きユーザー一覧リストを表示する

ユーザーアイコン画像の下にユーザー名が表示されるユーザー一覧を実装します。

サンプルコード

<?php $users = get_users( array(
    'orderby'=>ID,
    'order'=>ASC
) ); ?>

<ul class="author_list">
<?php foreach($users as $user) {
$uid = $user->ID;
?>
    <li>
        <div class="author_thumb01">
            <a href="<?php echo get_bloginfo("url") . '/?author=' . $uid ?>">
            <img src="<?php the_field('user-icon', 'user_'. $uid ); ?>" />
            </a>
        </div>
        <p class="author_name01"><?php echo $user->display_name ; ?></p>
    </li>
<?php } ?>
</ul>

<?php $users = get_users( array(

'orderby'=>ID,

'order'=>ASC

) ); ?>

<?php foreach($users as $user) {

$uid = $user->ID;

<li>

</a>

</div>

<p class="author_name01"><?php echo $user->display_name ; ?></p>

</li>

<?php } ?>

</ul>

ユーザー別記事詳細ページ（author.php）にユーザーアイコンを表示する

サンプルコード

<?php 
$uid = get_the_author_meta(ID, $author);
?>
<dl class="author_title_dl">
     <dt><img src="<?php the_field('user-icon', 'user_'. $uid ); ?>" /></dt>
     <dd><span><?php the_author_nickname(); ?></span> の記事一覧</dd>
</dl>
<div class="author_description"><?php echo wpautop(get_the_author_meta('user_description')); ?></div>

<?php

$uid = get_the_author_meta(ID, $author);

<dd><span><?php the_author_nickname(); ?></span> の記事一覧</dd>

</dl>

記事詳細ページ（single.php）にユーザーアイコンを表示する

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php 
$uid = get_the_author_meta(ID, $userID);
?>
            <div class="clearfix">
                <h2 class="post_title"><?php the_title(); ?></h2>
                <div class="author_bl">
                <img src="<?php the_field('user-icon', 'user_'. $uid ); ?>" />
                <span><?php the_author_meta( 'nickname' ); ?></span>
                </div>
            </div>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php

$uid = get_the_author_meta(ID, $userID);

</div>

<?php 
$uid = get_the_author_meta(ID, $userID);
?>

<?php

$uid = get_the_author_meta(ID, $userID);

はループ内に書かないと画像が表示されないので注意

WordPress

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

【ACF】ユーザープロフィール写真とは別の画像を登録する方法

Advanced Custom Fieldsでフィールドを追加する

プロフィール編集ページにフィールドが追加されていることを確認

フッターに画像付きユーザー一覧リストを表示する

ユーザー別記事詳細ページ（author.php）にユーザーアイコンを表示する

記事詳細ページ（single.php）にユーザーアイコンを表示する

よく読まれている関連記事

[WordPress] Contact Form 7のフォーム送信履歴を管理画面にデータ保存&CSV保存プラグイン比較

関連最新記事

[WordPress] プラグイン「WP ALL Import」で既存記事を一括更新（CSV上書き）する方法

[WordPress] CSVで記事を一括インポート-プラグイン「WP ALL Import」の使い方

[WordPress] 記事への画像挿入方法

[WordPress] カテゴリーとタグの違いと設定方法

社内風景2

社内風景