プロフィール画像を自前で設定できるようにするWordPressカスタマイズ方法

通常、Wordpressでプロフィール画像を設定しようと思ったら、Gravatarで設定するのが一般的かと思います。

以下は、プロフィール管理画面の設定項目。

Gravatarでプロフィール画像を設定する場合

ただこれだと、Gravatarに登録を行ってから、プロフィール画像を設定する必要があるので少々手間がかかります。

そのWordPressサイトでしかプロフィール画像を使わない場合、Wordpress側の機能だけで、プロフィール画像を設定できた方が、楽は楽だと思います。

なので、Wordpressカスタマイズをすることにより、「Wordpress側の設定だけでプロフィール画像を設定」できるようにコードを書いたので紹介です。

Gravatarは様々なサービスで共通画像利用できる利点はあります。
スポンサーリンク
レクタングル(大)広告

プロフィール画像設定用のカスタマイズ

今回のカスタマイズは、テーマ、プラグインどちらでも使える方法だと思います。けれど以下では、テーマをカスタマイズするということを前提で説明します。

独自プロフィール画像設定機能をプロフィール管理画面につけるには、以下のコードをテーマのfunctions.php等にコピペします。

コードの内容さえ気にしなければ、コピペだけでカスタマイズすることが出来るようにしています。

このカスタマイズを行えば、ユーザーごとにそれぞれプロフイール画像設定できるようになります。

コードが長いため、説明は省きます。
上記のコードは、Wordpress公式テーマのTwenty Sixteenで動作を確認しました。

動作確認

動作を見るにはWordpress管理画面の「ユーザー → あなたのプロフィール」メニューを開きます。

Wordpress管理画面のユーザーからあなたのプロフィールを開く

すると、プロフィール情報の保存ボタン手前あたりに「プロフィール画像URL」という項目が表示されます。

プロフィール設定画面に画像URL設定項目

あとは、メディアライブラリ等に画像をアップロードしてURLを取得してください。

メディアライブラリに画像をアップロード

あとは先程の「プロフィール画像URL」に画像URLを入力して、プロフィールを保存します。

画像URLを入力後、プロフィールの保存をする

これで、Wordpressで使われているアバター画像等が「プロフィール画像URL」で設定したものに入れ替わります(※全てではないかもしれません)。

例えば、コメント欄のアバター画像もデフォルトだと以下のようなものです。

コメント欄のデフォルトアバター画像

これが、画像URLを設定すると以下のように置き換わります。

設定したプロフィール画像が適用されたコメント欄のアバター画像

さらに使いやすくするには

さらに使いやすい機能にするには、画像のアップロード機能を併用したものも良いかと思います。

プロフィール画像のアップロード機能を追加

このような「メディアアップローダー機能を併用したプロフィール画像設定項目」を作成するには、以下のカスタマイズとあわせることで実現できます。

先日、Wordpress開発をしているとき、カスタム設定画面にアップロード機能を実装する必要が出てきました。 なのでいろいろと...
アップローダー機能と併用する方法は、少し複雑になるため、コメントで質問いただいてもやり方などはお答え出来ない(簡単には説明出来ない)のでご了承ください。

まとめ

このようにカスタマイズすることで、Wordpressにも、独自のプロフィール画像設定項目を設けることが可能です。

コード量は少々多いかもしれませんが、コピペで出来るので、やろうと思えば数分で出来るかと思います。