smbutton-blue_no_shadow

プロフィール画像をアップロードできるプラグイン Ps User Profile Image

前回の「WordPressのユーザー管理画面カスタマイズまとめ」で分かったことを元に、ユーザー編集画面からプロフィール画像をアップロード出来るプラグインを作ってみました。

ご覧のようにプラグインを有効化すると、ユーザーの編集画面にプロフィール画像の項目が追加され、画像をアップロードすることが出来るようになります。

まだ、設定画面などもありませんし、多言語もしていませんが、是非お試しください。

ダウンロード:Ps User Profile Image

仕様など

  • ユーザーの管理画面からプロフィール画像をアップロードすることができます。
  • デフォルトでは、thumbnail、standard、bigの3種類の画像が生成されます。
  • サイズや種類を変更したい場合は、プラグインファイル ps-user-profile-image.php の14行目から始まる $default_image_size の配列を編集してください。
  • 画像の拡大縮小は、切り抜きになっています。比率が異なると頭がちょん切れたりするので注意して下さい。
  • 表示させる場合のテンプレートタグは、ps_user_profile_image( $user_id, $size ); となります。この他に、パスだけを取得できる ps_get_user_profile_image_src というテンプレートタグもあります。

テンプレートのコード記述例

		<?php if ( function_exists( 'ps_user_profile_image' ) ) {
			ps_user_profile_image( 1, 'thumbnail' );
		} ?>

対応バージョン

3.0以降になります。(多分)

この記事は、jim912によって書かれたものです。
引用を行う場合は、著作権法に定める範囲にて、引用元であるSimple Colorsの出展元表示とhttp://www.warna.info/archives/189/へのリンクを必ず行って下さい。

カテゴリー: WordPressの小技   タグ: , ,   この投稿のパーマリンク

プロフィール画像をアップロードできるプラグイン Ps User Profile Image への32件のコメント

  1. jim0912 より:

    公開してみた。「プロフィール画像をアップロードできるプラグイン Ps User Profile Image」 http://www.warna.info/archives/189/

  2. wokamoto より:

    RT @jim0912: 公開してみた。「プロフィール画像をアップロードできるプラグイン Ps User Profile Image」 http://www.warna.info/archives/189/

  3. ピンバック: Tweets that mention プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors -- Topsy.com

  4. hibiki443 より:

    RT @jim0912: 公開してみた。「プロフィール画像をアップロードできるプラグイン Ps User Profile Image」 http://www.warna.info/archives/189/

  5. marimelody11 より:

    RT @: プロフィール画像をアップロードできるプラグイン Ps User Profile Image – Simple Colors http://tinyurl.com/28tpdlt

  6. marc1947 より:

    WordPressを複数ユーザーで投稿しています。投稿毎に誰の投稿かわかるように投稿者のプロフィール画像が表示出来るようにしたいと思い、こちらにたどり着きました。
    早速ユーザー毎に画像を登録し、テンプレートに記述例の通り
    と追加しました。
    ところが、表示される画像全てが、admin(最初に登録している管理者)の画像となってしまいます。
    ユーザー毎の画像を表示させるには、上記コードではだめなのでしょうか?

  7. jim912 より:

    marc1947さん、こんにちは。

    記述例では、テンプレートタグのはじめの引数(括弧のなかの数字)が1と固定であり、大抵の場合ユーザーのIDが1の場合は、管理者になっています。

    なので、1となっている所を投稿したユーザーのIDになるようにしてあげれば、投稿したユーザーのプロフィール画像が表示されます。

    ユーザーのIDを取得するには、the_author_meta( ‘ID’ ) となりますので、テンプレート上では、

    ps_user_profile_image( the_author_meta( 'ID' ), 'thumbnail' );
    

    と記述いただければ良いかと思います。

  8. marc1947 より:

    早速のご回答ありがとうございました。
    回答いただきましたとおりコードを変更しましたところ、ユーザーIDの取得は出来ているようで、
    ID番号が表示され、対応したサムネイルが表示されません。

    上記でよろしいのでしょうか? 無知で申し訳ございません。

  9. jim912 より:

    marc1947さん

    すみません。the_author_metaは、そのまま出力してしまうのでした。

    ps_user_profile_image( get_the_author_meta( 'ID' ), 'thumbnail' );
    

    としてみてください。

  10. marc1947 より:

    うまく表示されました。
    ありがとうございました。
    これを機会にコードを勉強させていただきます。

  11. mari より:

    会員制サイトをめざしていますので、とてもすばらしいプラグインに出会えたと喜んでいます。

    初歩的な質問でほんとうにすみません。
    プロフィール画像はアップロードできたのですが、
    こちらのサイトのように、コメントのところに表示させるには
    テンプレートコードをどのファイルに書き込めばいいのか教えていただけませんか。
    wordPress 3.1.3 Twentytenを使用しています。

    もしかしたら、ユーザー全員のプロフィール画像が登録されていないと、
    画像のない人のところで処理が止まってしまうとかいうことありますか?
    ほんとに初歩的な質問ですみません。

  12. jim912 より:

    mariさん、こんにちは。

    全然初歩的ではなくて、それなりに難しいものになります。

    コメントに表示されている画像は、gravatarが利用されています。ここにプロフィール画像を表示したい場合は、テンプレートタグを使うのではなく、gravatarを取得している処理にフックして、プロフィール画像に差し替える処理を追加することで実現可能です。

    まず、Twenty Ten利用しているということなので、これと同じ画像サイズの画像が作られるようにプラグインを修正します。Twenty Tenの場合は40px四方になるので、avatarというサイズを追加し、40と指定します。異なるテーマでアバターのサイズが異なる場合は、そのテーマに合わせたサイズ設定としてください。

    	var $default_image_size = array(
    		'avatar'    => array( 40, 40 ),
    		'thumbnail' => array( 48, 48 ),
    		'standard'  => array( 96, 96 ),
    		'big'       => array( 120, 120 ),
    	);
    

    次にavatarにフックし、プロフィール画像があった場合、その画像に差し替える処理を、テーマのfunctions.phpに追加します。

    function profile_image_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    	$user_id = false;
    	if ( is_numeric( $id_or_email ) ) {
    		$user_id = $id_or_email;
    	} elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) ) {
    		$user_id = $id_or_email->user_id;
    	}
    	if ( $user_id ) {
    		$src = ps_get_user_profile_image_src( $user_id, 'avatar' );
    		if ( $src ) {
    			if ( $alt === false ) {
    				$safe_alt = '';
    			} else {
    				$safe_alt = esc_attr( $alt );
    			}
    			$avatar = '<img alt="' . $safe_alt . '" src="'. $src . '" class="avatar avatar-' . $size . ' photo" height="' . $size . '" width="' . $size . '" />';
    		}
    	}
    	return $avatar;
    }
    add_filter( 'get_avatar', 'profile_image_avatar', 10 , 5 );
    

    なお、Twenty Tenをそのまま利用していると、WordPressのアップデートに合わせてテーマ自体が上書きされ、カスタマイズしている部分が消えてしまう可能性あります。
    Twenty Tenをディレクトリごとコピーし、ディレクトリ名とstyle.cssのテーマ名を変更するか、子テーマとしてカスタマイズしていった方が安全ですよ。

  13. mari より:

    できました〜っ、できました!
    ありがとうございます。

    はじめにログイン画面もページも真っ白になっちゃったんですが
    こちらのサイトの「WordPressで画面が真っ白になったら、最初にやるべきこと」で
    エラーの原因をみつけることができて、
    無事にプロフィール画像をコメント欄に表示する事ができました。

    テーマの件は気になっていたので、新しいディレクトリを作りました。

    ご親切に細かに教えていただいて、ほんとに助かりました。
    いろいろできるようになると楽しいですね。
    これから少しずつ勉強していきます。ありがとうございます。

  14. jim912 より:

    mariさん、よかったですね。
    おめでとうございます。

    これからも頑張ってくださいね。

  15. taromisako より:

    進行中のお仕事で使うので。 / プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors http://htn.to/TEzWmy

  16. misaquo より:

    進行中のお仕事で使うので。

  17. mashico より:

    はじめまして。
    色々とさまよってこちらのプラグインを発見し、大変重宝しております。
    私の勘違いかもしれませんが、質問させてください!


    とありましたので、画像が登録されていない場合の処理がelseで続くと思い、上記のコードに続けて、

    <img src="" />


    と書いたのですが、画像を登録していないユーザーもifの処理で通り、何も入っていない空のタグが吐き出されていました。
    このような処理の仕方ではないのでしょうか。。。
    初歩的な質問かもしれませんが、どうぞよろしくお願い致します。

  18. mashico より:

    連投ですいません。
    タグが表示されていないので、再度書き込みます。

    とありましたので、画像が登録されていない場合の処理がelseで続くと思い、上記のコードに続けて、

    <img src="” />

    と書いたのですが、画像を登録していないユーザーもifの処理で通り、何も入っていない空のタグが吐き出されていました。
    このような処理の仕方ではないのでしょうか。。。
    初歩的な質問かもしれませんが、どうぞよろしくお願い致します。

  19. クロ より:

    使用させていただいてます、
    現状1枚しかアップできませんが、違う画像複数枚アップさせる改造は無理ですか?

  20. take_it02 より:

    “プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors” http://t.co/zbem4xSH

  21. take_it02 より:

    プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors http://t.co/ldboLibC

  22. miya0001 より:

    パクっちゃお♡ "プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors" http://t.co/SSepOjMR

  23. jim912 より:

    クロさん、ありがとうございます。

    不可能ではありませんが、管理画面のUI、ファイルの保存方法、プログラムのフロー等設計段階からの全面的な見直しが必要となりますので、難易度はかなり高いですね。

  24. kazsoga より:

    試した。けど変わらなかった。何かが邪魔してるのかな。とりあえず、φ(。。) メモメモ

  25. mokomomo より:

    うまくできなかったけど一応めも/プロフィール画像をアップロードできるプラグイン Ps User Profile Image http://t.co/EuTVoKk8

  26. はらぺこ より:

    私の設定が悪いのか、アップロードしたファイルが403エラーと出ます。
    ファイルがアップされているのはFTPで確認済みで、
    パーミッションを777にしても表示されませんでした。

    そこで当然なのですが、その上の階層のディレクトリ
    「ps_profile_image」、「1」のパーミッションを755にあげてみました。
    これで表示されました。

    ワードプレス、filezillaどちらを使ってアップしたのかは忘れましたが、
    アップした方法によっては私のような設定が必要かもしれません。

    ■同様の問題になった方へ
    403エラーというのはファイルは存在していて、
    見たりする事ができないという意味なので、
    ファイルがアップロードされており、
    プラグインが動いているのでひとまず安心してください。
    私のように画像ファイルまでのパーミッションを変更すれば解決するはずです。

    (webサイトのアドレス間違えていたので、こちらのコメントを採用してください)

  27. inc2734 より:

    “プロフィール画像をアップロードできるプラグイン Ps User Profile Image | Simple Colors” http://t.co/K1Iz4vSe

  28. happycrew より:

    プロフィール画像

  29. LINDO より:

    wordpress 3.3.1を使用しています。
    このプラグインは、素人に設置は難しいですか?
    /wp-content/plugins/にFTPソフトでアップして、管理画面からプラグインを有効化しました。
    プロフィール変更画面で画像をアップ出来るように『プロフィール画像』欄はあるのですが、画像を選択して『プロフィールを更新』ボタンをクリックすると

    Warning: basename() expects parameter 1 to be string, object given in /hogehoge/wp-content/plugins/ps-user-profile-image.php on line 159

    Warning: Cannot modify header information – headers already sent by (output started at /hogehoge/wp-content/plugins/ps-user-profile-image.php:159) in /hogehoge/wp-includes/pluggable.php on line 866

    というエラーメッセージが出てしまいます。
    アドバイスをお願いします。

  30. artemisaqua より:

    【WPプラグイン】プロフィール画像をアップロードできるプラグイン Ps User Profile Image http://t.co/bLiHKXea

  31. マッキー より:

    素敵なプラグインをありがとうございます。
    ちょっとカスタマイズしようと思い、初歩的だと思って自力でやろうと思ったのですができなかったので、質問させてください。

    やろうとしたのは、各Authorについて、このプラグインによる画像の登録があるかを判定し、あればその画像を用い、なければ元のアバター画像を用いようと考えました。
    ifの条件分岐で、画像の登録があるかどうかの判定のところで、
    if ( ps_user_profile_image( get_the_author_meta( ‘ID’ ), ‘thumbnail’ ) )
    このように条件を書き入れましたが、条件分岐がうまく行かずに、そのまま画像が出力されてしまうようです。
    「Authorごとに画像の登録があるかどうかを判定する方法」はありますでしょうか?
    アドバイスいただけると幸いです。

  32. れな より:

    よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>