今回は、WordPressのユーザープロフィールページにプロフィール画像を登録する方法について記事にしました。
最初はプラグインで実装しようと思ったのですが、無料枠ではパッとしたのがなかったので、
カスタムフィールドを利用して、プロフィール画像を簡単にアップロード・表示できる機能を追加しました。
コードはすべてfunctions.phpに記述しています。
完成後は、以下のような動作が可能になります。
ユーザー一覧ページにも画像を表示。
ユーザープロフィール編集ページで画像を登録できる。
登録した画像がプロフィール写真として表示される。
それでは早速手順を見ていきましょう。
プロフィール画像登録フィールドの作成
まずは、ユーザープロフィール編集ページにプロフィール画像を登録するためのフィールドを追加します。
今回は下記のコードをfunctions.phpに記述しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
function add_custom_user_profile_fields($user) { //画像IDとURL取得 $image_id = get_user_meta($user->ID, 'custom_user_image_id', true); $image_url = $image_id ? wp_get_attachment_url($image_id) : ''; wp_enqueue_media(); ?> <h3>プロフィール画像</h3> <div class="user-profile-image-wrap" style="display: flex; align-items: center; gap: 10px; margin-top: 10px;"> <button type="button" class="button" id="upload-profile-image-button">画像をアップロード></button> <button type="button" class="button" id="remove-profile-image-button" style="<?php echo $image_url ? '' : 'display: none;'; ?>">画像を削除></button> <input type="hidden" id="profile_image_id" name="custom_user_image_id" value="<?php echo esc_attr($image_id); ?>"> <div id="profile_image_preview" style="margin-left: 10px;"> <?php if ($image_url): ?> <img src="<?php echo esc_url($image_url); ?>" alt="プロフィール画像" style="max-width: 150px; max-height: auto;"> <?php endif; ?> </div> </div> <script> jQuery(document).ready(function($) { let imageInput = $('#profile_image_id'); let imagePreview = $('#profile_image_preview img'); let uploadButton = $('#upload-profile-image-button'); let removeButton = $('#remove-profile-image-button'); uploadButton.on('click', function() { e.preventDefault(); let file_frame = wp.media({ title: '画像を選択', button: { text: '画像を設定' }, multiple: false }); file_frame.on('select', function() { let attachment = file_frame.state().get('selection').first().toJSON(); imageInput.val(attachment.id); imagePreview.attr('src', attachment.url).show(); removeButton.show(); }); file_frame.open(); }); removeButton.on('click', function() { imageInput.val(''); imagePreview.attr('src', '').hide(); $(this).hide(); }); }); </script> <?php } add_action('show_user_profile', 'add_custom_user_profile_fields'); add_action('edit_user_profile', 'add_custom_user_profile_fields'); |
このコードにより、ユーザープロフィール編集ページに画像をアップロードするためのフィールドを追加してます。
画像を保存する処理の追加
次に、アップロードした画像を保存する処理を追加します。
以下のコードをfunctions.phpに追加しました。
|
1 2 3 4 5 6 7 8 9 10 11 |
function save_custom_user_profile_fields($user_id) { if (isset($_POST['custom_user_image_id']) && !empty($_POST['custom_user_image_id'])) { update_user_meta($user_id, 'custom_user_image_id', adsint($_POST['custom_user_image_id'])); } else { delete_user_meta($user_id, 'custom_user_image_id'); } } add_action('personal_options_update', 'save_custom_user_profile_fields'); add_action('edit_user_profile_update', 'save_custom_user_profile_fields'); |
これで、画像アップロードフィールドで選択した画像が保存されるようになります。
ユーザー一覧にカスタムアバターを表示
次に、登録した画像をユーザー一覧に表示するためのコードを記述。
以下のコードをfunctions.phpに記述しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function custom_user_avatar($avatar, $id_or_email, $size, $default, $alt) { $user_id = 0; if (is_numeric($id_or_email)) { $user_id = (int) $id_or_email; } elseif (is_string($id_or_email) && !empty($id_or_email->user_id)) { $user_id = (int) $id_or_email->user_id; } else { $user = get_user_by('email', $id_or_email); if ($user) { $user_id = $user->ID; } } $custom_user_image_id = get_user_meta($user_id, 'custom_user_image_id', true); if ($custom_image_id) { $custom_image_url = wp_get_attachment_url($custom_image_id); if ($custom_image_url) { $avatar = '<img src="' . esc_url($custom_image_url) . '" alt="' . esc_attr($alt) . '" width="' .(int) $size . '" heigth="' .(int) $size . '" style="border-radius: 50%;">'; } } return $avatar; } add_filter('get_avatar', 'custom_user_avatar', 10, 5); |
これで、ユーザー一覧ページでも画像が表示されるようになります。
登録画像を表示するコード
最後に、登録したプロフィール画像を表示するコードを追加します。
これにより、プロフィール写真として画像を表示できます。
プロフィール写真の表示
投稿者情報のページに画像を表示する場合は以下のコードをテーマファイルに追加。
今回はsingle.phpに下記のコードを記述しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="profile-image"> <?php $author_id = get_post_field('post_author', get_the_ID()); $custom_image_id = get_user_meta($author_id, 'custom_user_image_id', true); $custom_image_url = $custom_image_id ? wp_get_attachment_url($custom_image_id) : ''; if ($custom_image_url) { echo '<img src="' . esc_url($custom_image_url) . '" alt="プロフィール画像" style="width: 100%; height: 100%; border-radius: 50%;">'; } else { // デフォルトのアバター画像を表示 echo get_avatar(get_post_field('post_author', get_the_ID()), 130); } ?> </div> |
まとめ
以上の手順で、WordPressのユーザープロフィールページにプロフィール画像を登録する機能を追加できます。
プロフィール画像があることで、ユーザー同士の視覚的な認識が容易になり、サイト全体のデザインも向上します。
投稿者情報の詳細表示方法については、こちらの記事でも詳しく解説しています。ぜひチェックしてみてください！
エックスサーバーでWordPressを始めてみませんか？
この記事で紹介したように、WordPressではユーザーごとのプロフィール画像を簡単に登録し、表示することができます。
こうした便利な機能を活用するためには、まずWordPressサイトを運営する環境が必要です。
もしまだWordPressを始めていない方は、エックスサーバーの利用をおすすめします！
エックスサーバーは以下のような特徴があり、初心者から上級者まで幅広いユーザーに支持されています。
高速・安定したサーバー環境
表示速度が速く、アクセスが集中しても安定して動作します。
簡単なWordPressインストール
WordPress簡単インストール機能で、わずか数分でサイトを立ち上げられます。
手厚いサポート体制
電話やメールでのサポートが充実しているので、初めての方でも安心です。
エックスサーバーの新規登録はこちら
エックスサーバーの新規登録は、期間限定でお得なキャンペーンを実施中です！今ならドメインが無料で取得できる特典も付いています。
WordPressでのサイト運営を考えている方は、この機会にぜひエックスサーバーでサイトをスタートしてみてください。
おすすめレンタルサーバー Xserver
高速・多機能・高安定レンタルサーバー『エックスサーバー』
私も使ってるレンタルサーバーになります
独自ドメインが永久無料 ・マルチドメイン、メールアドレス無制限！
コメント