『User Photo』でアップロードしたアイコンを『Author Avatars List』で使えるようにする。

やぁみんな!
今回は、『User Photo』でアップロードしたアイコンを『Author Avatars List』で使えるようにするために、スクリプトをほんのりカスタムするぞ。

『User Photo』は、ユーザー編集画面から好きなアイコンをアップロードできるWordPressプラグイン。『Author Avatars List』は、アバター付きの投稿者リストを表示させるプラグインだ。

プラグインのスクリプトは、ダッシュボードの「プラグイン」→「編集」で編集画面に移行して、右上のプルダウンメニューからプラグインを選択して編集を始める。

ダッシュボード左側の「プラグイン」から。。。「編集」を選択。プルダウンメニューから「Author Avatars List」を選択。

編集するファイルは、『Author Avatars List』のUserList.class.php。

UserList.class.phpを編集するぞ。

258行目から(Author Avatars Listのバージョンによって誤差あり)の↓の部分に手を加えるんだ。

$html = '';
if ($link) $html .= '<a href="'. $link .'">';
$html .= '<span class="avatar">'. $avatar .'</span>';
if ($this->show_name) $html .= '<span class="name">'. $name . '</span>';
if ($link) $html .= '</a>';
if ($biography) $html .= '<div class="biography">'. $biography .'</div>';

不具合が発生したときのために、必ずバックアップを取ってから作業すること!
それから、すべてのカスタムは自己責任でおこなうこと!
約束だ!

■アイコンのファイル名を変数に代入する

『User Photo』でアップロードしたアイコンのファイル名は、各ユーザーのユーザー名になっている。
そこで、その値を取得して、任意の変数に代入するぞ。

$iconname = get_the_author_meta('user_nicename', $user->user_id);

変数名($iconname)は、他の場所で使ってる変数名じゃなければ、基本なんでもいい。
自分で使いやすい変数名を設定すればいいと思うぞ!

■ユーザーのニックネームを変数に代入する

アイコン画像のaltにニックネームを入れようと思ったので、これをやっておいた。
その必要がない人は、やらなくていいぞ!

$iconalt = get_the_author_meta('nickname', $user->user_id);

■ブログのURLを変数に代入する

直接書いてやってもいいんだけれども、万が一URLを変更する場合安心なのでやっておいた。
その必要がない人は、やらなくていいぞ!

$blogurl = get_bloginfo('url');

■画像の呼び出しを、avatarから『User Photo』のアイコンに変更する

画像を呼び出しているのは、この行だ。

$html .= '<span class="avatar">'. $avatar .'</span>';

画像情報が代入されている部分($avatar)を、上の3つの変数を使って書き換えるぞ。
『User Photo』でアップロードされた画像は、

ドメイン名/ディレクトリ名/wp-content/uploads/userphoto/

に格納されているはずだ。
WordPressの設定で、「ドメイン名/ディレクトリ名/」=「ブログのアドレス($blogurl)」に設定しているので、こんなふうに書いてやればいい!

$html .= '<span><img src="'. $blogurl .'/wp-content/uploads/userphoto/'. $iconname .'.jpg" width="32" height="32" alt="'. $iconalt .'"></span>';

htmlのソースは「’」で囲んで、htmlと変数を連結するときは「.」でつなぐんだ。
ファイル形式はjpgに固定したぞ。自動判別する仕組みとかが欲しい人は、各自頑張って欲しい!

■外観を整える

外観部分はwidget.cssで制御されているぞ。

widget.cssで外観を整えよう!

必要に応じて、足すなり引くなり書き換えて、自分好みの外観に整えてくれよな!
ちなみに僕は、スクリプト側にも外観的な都合で若干書き足したんだ。
こんな感じ↓になっているぞ。

$iconname = get_the_author_meta('user_nicename', $user->user_id);
$iconalt = get_the_author_meta('nickname', $user->user_id);
$blogurl = get_bloginfo('url');
$html = '';
$html .= '<div class="clearfix"><div class="left">';
if ($link) $html .= '<a href="'. $link .'">';
$html .= '<span class="photo"><img src="'. $blogurl .'/wp-content/uploads/userphoto/'. $iconname .'.jpg" width="32″ height="32″ alt="'. $iconalt .'"></span>';
if ($link) $html .= '</a>';
$html .= '</div><!-- left end -->';
$html .= '<div class="right">';
if ($link) $html .= '<a href="'. $link .'">';
if ($this->show_name) $html .= '<span class="name">'. $name . '</span>';
if ($link) $html .= '</a>';
if ($biography) $html .= '<div class="summary">'. $biography .'</div>';
$html .= '</div><!-- right end --></div>';

みんな、良かったら試してみてくれよな!

この記事は

Interest Speaker > How to / Tips > 『User Photo』でアップロードしたアイコンを『Author Avatars List』で使えるようにする。

この記事と類似または関連した記事

wordpress-logo
あると便利なWordPressプラグイン 20。
『wp-tmkm-amazon』の商品検索・リスト表示エリアを拡大する。
『wp-tmkm-amazon』の商品検索・リスト表示エリアを拡大する。
Amazonのアフィリエイト(アソシエイト)を簡単にしてくれるWordPressプラグイン「AmazonJS」
Amazonのアフィリエイト(アソシエイト)を簡単にしてくれるWordPressプラグイン「AmazonJS」