2015/5/25WordPress

【WordPress】ユーザー一覧ページの作り方takahiro

  • このエントリーをはてなブックマークに追加
userlist_eye1

このコラムはWordPressで作成してます。コラムを更新しているユーザーの一覧ページを作成したいと思ってやってみました。

今回は備忘録も兼ねてやり方を書いていきます。

 

ちなみに今回はカスタム投稿タイプでユーザーを作って・・・。みたいなことはやっていません。

シンプルにWordPressのユーザー一覧を表示するページを作成しています。

参考までにアドリブのユーザー一覧はこちら。全然書いてる人がいない・・・。笑

 

さて、気を取り直してさっそくユーザー一覧ページの作り方を見て行きましょう。

 

1.テンプレートページの作成

まずはテンプレートページを作成しましょう。

今使用しているWordPressテンプレートの「page.php」あたりをコピーして「page-users.php」にリネームしてください。

で、最初の部分にテンプレート名を入れます。

 

 

Template Name で設定した名前が固定ページでテンプレートを選択する際に表示されます。

 

ヘッダー、サイドバー、フッター以外のメインコンテンツのソースコードは削除してください。

最低限下のようなコードになれば問題ないです。(クラスなどは一部削除してます)

 

 

ここまでできたら一度ファイルをサーバにアップロードして、ダッシュボードから固定ページを作成しましょう。

 

新規固定ページを作成して、ページ属性のテンプレートで先ほど作成した「User list Template」を選択してください。

ページのタイトルやパーマリンクはお任せします。

 

できたら、下書きを確認してみましょう。

メインコンテンツ部分に何もないページが表示されましたか?

 

最低限ってかきましたが、設定されているCSSによっては正しく表示されないかもしれません。

必要な部分のdivタグなどは削除しないように気を付けてください。

 

ここまでできたら、次はページにユーザー情報を表示していきます。

 

2.ユーザー情報の取得

次にユーザー情報の一覧をデーターベースから取ってきましょう!

WordPressにはいくつもの関数があるのですが、なぜかユーザー情報を一括で取ってこれる関数がない。。。

記事のユーザーを取得するとかなら楽なのに…。

 

なので、SQL文を用いて取得する必要があります。

 

こんな感じ。

usernamesという変数にSQL文のSELECT文でユーザーを取得してきてます。

ちなみにID順に取得していて、IDは1は取得しません。ID1にはWordPressをインストールするときに作成する最初のユーザーが入っています。主にWordPressを管理するのに使っていると思うので、ここで除外しています。

 

3.ユーザー情報の表示

ユーザー一覧を取得して変数に格納するところまではできたので、次はユーザー情報の表示です。

とりあえず名前を表示してみましょう。

 

 

名前は表示されましたか?

ここまでできたらユーザー情報の表示は簡単ですね。

変数user_infoに取ってきたユーザーの情報が入っているので、あとは取り出して表示するだけです。

 

パラメータ(項目) 説明
ID(ユーザID) ユーザ毎に設定される一意の数字
user_login(ログイン名) 管理画面にログインする際のユーザ名
user_pass(パスワード) 管理画面にログインする際のパスワード
nickname(ニックネーム) 登録後にユーザー設定より追加できるニックネーム
user_email(メールアドレス) 登録したメールアドレス
user_url(URL) ユーザーが管理するサイトのURL
user_registered(登録日時) ユーザーが登録された日付
display_name(表示名) ブログ上で使用する表示名
first_name(名前) 管理画面で設定する名前
last_name(苗字) 管理画面で設定する苗字
description(プロフィール情報) 管理画面で設定するプロフィール情報

 

上記パラメータ一覧の表示させたいパラメータを、echoで表示している箇所に書けばokです。

 

4.写真の追加

WordPressのデフォルトではユーザーの写真を設定することが出来ません。

なので、アドリブでは Simple Local Avatarsを使っています。インストールすることで、ユーザーの設定画面からアバター写真を設定できるようになります。

今回はSimple Local Avatarsで設定した写真を一覧に表示します。

 

上記のコードでアバター写真を挿入することが出来ます。

画像を取ってきているのは

の部分です。200は画像のサイズなので小さい画像を表示する場合は80とかにすれば変更できます。

 

ちなみに<a>タグも一緒にいれてみました。こっちはそのユーザーの記事一覧のアーカイブページへのリンクです。

ユーザーの記事一覧に飛ばしたい時はこのコードを入れればokです。

 

ここまでで、ユーザの写真やデフォルトでの情報は表示できるようになったと思います。

 

5.ユーザー情報の追加

最後にデフォルトでは入力できないユーザー情報をカスタマイズして入れれるようにしましょう!

プロフィール上に表示させたいけど、WordPressのデフォルトの項目にはないものって多いですよね?

 

まず、ユーザーの情報登録画面に登録したい項目を追記して更新できるようにしないといけません。

functions.phpに下記のコードを追加しましょう。

 

 

今回は肩書(post_name)と自己紹介(ex_profile)を追加指定ます。自己紹介はテキストエリアの入力形式としています。

上部のコードでユーザー情報画面に表示されるようにし、ユーザー情報に更新があった場合はそれぞれの項目を更新するよう下部のコードで実行しています。

プロフィール画面で設定した項目が表示されるようになりましたか?表示されて入力できれば後は、プロフィールをそのまま更新することが出来ます。

 

実際にユーザー一覧などで呼び出す場合は、ユーザー情報の表示で説明したコードの部分をそれぞれ宣言した「post_name、ex_profile」などに変更すれば使用出来ます。

 

 

6.まとめ

今回はプラグインを使わずにユーザー一覧ページを作ってみました。(写真の部分は置いておいて。。。)

 

「ユーザー一覧をデータベースから取ってくるときに、テンプレートタグが用意されていないのでSQL文を使用しないといけない。」

ここさえ分かっていれば、あとは普通のテンプレートタグでのユーザー配列の使い方と一緒ですね。

WordPressを管理・編集などを行っているユーザーの一覧を表示したいときは参考にしてみてください。

 

  • このエントリーをはてなブックマークに追加

この記事の著者

takahiro

takahiroWebデザイナー/ディレクター

Skill:HTML,CSS,PHP,WordPress,Photoshop

WEBサイト制作/運用/コンサルティング
たまにカメラとかもやってます。

この著者の最新の記事