GOUTEN.NET

デザイナー・GOUTENの生態を観察するブログ

WordCamp Osaka 2012参加登録サイトの裏側見せます

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。

どうも、GOUTEN(@gouten5010)です。

今回は、2012年11月21日に投稿した「振り返ればWordCamp Osaka 2012で実行委員をしたり登壇していた」という記事で紹介し忘れたWordCamp Osaka 2012で僕がデザインと構築をしたWordCamp Osaka 2012の参加登録サイトの中身がどうなっているのか、そしてどのように作っていったのかを補足みたいな解説と反省を含めて紹介しようと思います。

なお、今回の記事は「WordPress Advent Callender 2012」という企画にも載っかっていて、その11日目担当として書かせていただいています。

Webourgeon(@Webourgeon_com)さんの記事「WordPress 3.5 リリース目前!WordPressのアップグレードについておさらいしておこう #wacja2012 | Webourgeon」からバトンを引き継ぎました。
hirotaka696(@hi_takaki)さんも前日担当のはずですけど、この記事を投稿した時点でまだ記事があがってなかったですorz

同日で瀬口理恵(@rie05)さんも「WordCamp Osaka 2012実行委員長から見た振り返りレポート前編」という記事を書かれていますので、この記事を読んだ後にこちらもどうぞ。

とは言うものの、今日はガチな内容書きます。あと、超絶長いです!
というわけでひとつよろしく。

もくじ

完成サイト

WordCamp Osaka 2012 参加登録サイト
http://wcosaka.com/
※URLはhttp://wcosaka.com/になっていますが、実際はhttp://wcosaka.com/user_list/にリダイレクトされます。
※現在は参加登録は受け付けておりません。登録された方はログインすることができます。

デモサイト

一応登録することも可能なデモサイトも作ってはいます。

VIEW DEMO

登録するのはちょっと…という人のためにゲスト用のIDとPASSも用意しました。
GUEST ID : demo
GUEST PASSWORD : demouser

クラスのみんなには、ナイショだよっ☆

2013.06追記
諸事情により公開停止しています。後にデータを全削除して再構築する予定です。

参加登録サイトでやっていること

WordCamp Osaka 2012の参加登録サイトでやりたかったことは以下の通りです。

  • 登録・ログインを固定ページで行う
  • デフォルトの登録・ログイン画面を固定ページにリダイレクトさせる
  • 参加者一覧の表示

    • アバターの選択
    • プロフィール情報・コメントの出力
    • Twitterへの自動リンク
  • 参加者数の表示

次の項目からは、サイト構成とそれぞれどのように実装していったかを書き殴っていこうと思います。
これらを実装したあと(というかWordCamp Osaka 2012が終わったあと)に気づいた反省点は「個人的振り返り – 反省点と謝辞」にまとめてあります。

[ もくじへ戻る ]

サイト構成を晒してみる

WordPressの使用バージョンに関して

今回の登録サイトはWordPress 3.4.2をインストールして作成。
これより前のバージョンや後のバージョンに関して動作を保証するものではありません。
参考程度に見ていただければと思います。

なんで狙ったようにこの日(11日)で3.5がリリースなんだよ!
(ノ ゚Д゚)ノ ==== ┻━━┻

コーディングとターゲットブラウザ

WordCamp Osaka 2012の参加登録サイトはHTML5+CSS3でコーディングしました。
HTML5で組んだのに特に意味はありません。
強いて言うなら、なんとなくそのほうがすごいと思ってもらえそ(ry

ターゲットブラウザは確かWebkitエンジン・Geckoエンジン搭載ブラウザとInternetExplorer8とそれと同等以上のTridentエンジン搭載ブラウザだったと思います。
IE8に関してはCSS3が適用されないので、CSS3を使う際にはデザインに影響を与えない角丸とかドロップシャドウくらいしか使っていなかったかと。
IE8未満のバージョンに関しては、クソブラウザなのでセキュリティの面で推奨しないので除外しました。
※対応がめんどくさいとかそういうのではないです。決して。

サイトマップ

ページの構成としては、以下の通り。

  • トップページ
    • コンテンツページ
      • 色々なコンテンツ
      • 色々なコンテンツ
      • 色々なコンテンツ
      • お問い合わせページとか
    • 登録ページ
      • 参加者一覧ページ http://ドメイン/user_list/
      • 登録ページ http://ドメイン/login/?aciton=register
      • ログインページ http://ドメイン/login/
      • パスワードリマインダーページ http://ドメイン/login/?aciton=lostpassword

打ち消し線がかかっている部分がありますが、この理由については「やりたかったけど、やらなかったこと」の項目で書くのでここでは割愛します。
実際に動く部分は残っているページです。

打ち消し線でけしているコンテンツはアクセスしてもリダイレクトするように処理を施します。
もとよりコンテンツページのところに関してはページ自体を生成しないので特に問題にもしていませんが。

リダイレクトに関しては「色々なページをリダイレクトさせて導線確保」の項目を参照してください。

テーマのディレクトリ構成

テーマのディレクトリ構成は、以下の通り。

  • wco2012-register ディレクトリ
    • index.php これがないと動作しない
    • functions.php ここにいろいろたくさん書く
    • userList.php 登録者一覧ページテンプレート
    • login.php ログイン周りの固定ページの基本テンプレート
    • login-form.php ログインフォーム
    • lostpassword-form.php パスワードリマインダー
    • register-form.php 登録フォーム
    • user-panel.php ダッシュボードへの入り口
    • style.css これがないとテーマが選べないよ
    • theme-my-login プラグイン専用のCSS
    • css ディレクトリ
      • admin.css 管理画面専用のCSS
      • mormalize.css ブラウザ間の差異を少なくするCSS
    • images ディレクトリ
      • avatar ディレクトリ
      • 他・使用画像ども 省略します
    • lib ディレクトリ
      • common.js Javascriptを記述してる

上記構成の中で太字になっているのはディレクトリです。
また、淡い緑色がついている部分はTheme My Loginでカスタマイズする際に使用するPHPとCSSです。

libフォルダの中に入っているのはJavascriptを書いてまとめて外部ファイルにしたものですが、jQueryを使用したものも書かれています。
WordPressにはあらかじめjQueryが「wp-includes/js」にセットされていますので、下記コードをヘッダー等に書いて呼び出してます。

<?php wp_enqueue_script( 'jquery' ); ?>

もちろん自前のjQueryのパスを呼び出してもいいですし、他のライブラリを使うのでも構いません。

cssフォルダにはmormalize.cssとadmin.cssが格納されています。
admin.cssは管理画面用のCSSですが、主にアバター選択項目の整形のために使用しています。
テーマの適用のためにstyle.cssはフォルダの外に出しています。

画像に関してはアバターだけ別ディレクトリで分けました。

[ もくじへ戻る ]

ユーザー登録のための超初期設定

まずは登録できるようにしたり、必要なものを入れたりしないと、というわけでざくっと設定した初期項目や使用したプラグインを列挙します。
だいたいは管理画面→設定から/プラグインを入れるという作業だけです。
こんなことをしようとか思う人は既にWordPressを触ったことがあるでしょうし、その他の初期設定は割愛させていただきます。

ユーザー登録をできるようにする

※WordPress 3.4.2の場合です。3.5以降で項目が移動している可能性があります。
設定から一般設定を選択。
一般設定の中に「メンバーシップ」と「新規ユーザーのデフォルト権限グループ」という項目があります。

「メンバーシップ」のチェックボックスにチェックを入れて、参加登録を可能にします。
そして今回はユーザーにプロフィール項目くらいしか触らせないので、権限グループは「購読者」にします

これでユーザーが新規登録したあとで、そのユーザーがサイトにログインすることができ、プロフィール項目を編集することができるようになります。
ユーザーに投稿をさせたいだとかもっといろんな部分を触らせたい場合は、権限を変更するか、プラグインを導入して解決しましょう。
ただし、デフォルト権限を管理者にするのはダメ、ゼッタイ!

パーマリンクを変更する

ここだけの話、これ飛ばしてもいいよ→スキップする

デフォルトのパーマリンクは「http://サイトURL/?p=投稿ID」となっていますので、これを分かりやすいように変更。

カスタム構造を選択した上で、テキストフィールドにパーマリンク用のタグを入れます。
タグはCodexに載っていますので、そちらを参考にしましょう。

パーマリンクの使い方 – WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Using_Permalinks

今回の登録サイトは「http://サイトURL/カテゴリー名/投稿スラッグ/」というふうにしたかったので、テキストフィールドには「/%category%/%postname%/」と入力しました。

ただ、このパーマリンク設定だと「http://サイトURL/category/カテゴリー名/投稿スラッグ/」という表示になってしまうので、後述するプラグインで解決します。

プラグインを入れる

やりたいことを実現するために下記のプラグインを入れました。

  • Redirection
  • Theme My Login
  • WP No Category Base

デフォルトで入っているものを除き、新規で入れたプラグインは上記のとおりです。
各プラグインの設定等は別項目で説明しますが、説明しないプラグインはこの項で説明します。

WP No Category Base

カテゴリーページで生成されるパーマリンクの「category」という文字列を取り除くプラグインです。

前まで「Top Level Categories」とそのバグを解決する「Top Level Categories Fix Plugin」を入れていたのですが、「Top Level Categories」は2年以上更新されていないようですので、今回は代替プラグインを使用します。

WP No Category Base
http://wordpress.org/extend/plugins/wp-no-category-base/

ま、結局のところカテゴリ使わなかったんだけどね!

固定ページを作成

ユーザー一覧のページとログインの基幹となる固定ページを作成します。

今回はユーザー一覧を「user_list」というパーマリンクで保存しました。
テンプレートは表示テンプレートを作った後に適用します。

ログインの基幹となる固定ページはTheme My Loginを有効化した際に自動生成されるので、最初は作らなくてもいいです。
あとでテンプレートの変更をするということだけ覚えておきましょう。

[ もくじへ戻る ]

Theme my loginで固定ページに登録・ログイン画面を表示

WordCamp Osaka 2012僕のセッションでもご紹介しました、Theme My Loginというプラグインを使用して、ログインページや登録ページを固定ページに表示しました。
このプラグインは固定ページ以外にもサイドバーに表示したり、ショートコードでいろんな場所に配置できます。

Theme My Login
http://wordpress.org/extend/plugins/theme-my-login/

デフォルトのログイン画面や登録画面でも良かったんですけど、せっかく登録できるサイトをWordCamp公式と別途で作ろうぜ!という流れになっていたので、今回の方法を選択しました。

Theme My Loginをインストール

Theme My Loginをインストールして有効化して、もろもろ設定します。
ここで全部説明しようかと思ったんですが、長くなりすぎることが判明。
これだけで2〜3記事できちゃう勢いなので、僕詳しく解説してるっぽいところ探してきました!

WordPressで登録制サイトを作成するのに役立つプラグイン「Theme My Login」 | ワードプレステーマTCD
http://design-plus1.com/tcd-w/2012/11/theme_my_login.html

ユーザー管理に関するあれやこれや(Theme My Login編) | Step x Step
http://stepxstep.net/?p=468

これらのサイトで基本の使い方を学んでいただければと思います。
次項からは僕がWordCamp Osaka 2012の登録サイトで設定した項目を挙げていきます。

最初に補足:生成されたページのIDを確認

固定ページ一覧に「Login」という固定ページが自動生成されますので、そのIDを。
下記の画像のように、固定ページの編集ページURLの中に「?post=●●●」と表示されていると思います。

この「●●●」というのがページのIDですので、これを覚えておきます。

Theme My Loginの設定・入力したところ

設定→Theme My Loginと移動して、Theme My Loginの設定をします。

一般

まず「基本」のタブの下記3項目にチェック。

  • ページID
  • スタイルシート
  • メールログイン

ページリストは、今回はつけていません。

次に「モジュール」のタブの下記2項目にチェック。

  • Custom Passwords を有効にする
  • Custom Redirection を有効にする

最後に「パーマリンク」のタブの3項目に任意のURLを記入します。
無理に入力しなくてもいいです。

パーマリンクのタブは最初出ていないのですが、設定→パーマリンクでパーマリンクをカスタム指定した場合に出現します。

リダイレクト

Custom Redirection を有効にするにチェックを入れて保存することで「リダイレクト」というタブが出現します。
その中の「購読者」タブにてテキストフィールドの入力の項目を選択。

ログインした後のURL指定は「/wp-admin/profile.php」

ログアウトした後は「/user_list/」を指定。

固定ページにショートコードを入れる

ページの編集画面の投稿エリアで以下のショートコードを入れればその固定ページでログイン画面が表示されるようになります。

[theme-my-login]

[ もくじへ戻る ]

Theme My Loginで出力されるログインページ・登録ページの改造・整形

CSSで整形する

登録ページやログインページはTheme My Loginを設定した時点で、Thema My Loginのプラグインディレクトリにあるテンプレートを自動で呼んでくるので、その機能のみで十分な人は、それをCSSで整形するだけでいいです。

Theme My Loginの一般→基本の設定で「”theme-my-login.css” を有効にします」にチェックを入れておき、テーマフォルダ内にtheme-my-login.cssを入れることでTheme My Loginで固定ページやサイドバーに表示したログインのスタイルを変更することができます。

ループタグ内でプラグインのテンプレートを呼んできます。

固定ページをオリジナルのテンプレートにする場合も、ループ内でログイン周りのテンプレートを呼んでくるので、ループタグは確実に入れておきましょう。
今回は「lohin.php」という名前でループタグが入ったテンプレートPHPを用意しました。

<?php
/*
Template Name: ログイン
*/
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>デモサイトに登録</title>

<?php wp_head(); ?>
<?php wp_enqueue_script( 'jquery' ); ?>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/normalize.css?ver=<?php echo time(); ?>" type="text/css"
media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css?ver=<?php echo time(); ?>" type="text/css" media="screen" charset="utf-8" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="wrap" id="reg">
<div class="wrapInner">

<header>
	<h1 class="title"><?php the_title(); ?></h1>
</header>

<section>
	<article>
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php the_content(); ?>
	<?php endwhile; ?>
	<?php endif; ?>
	</article>
</section>

</div>
</div>

<footer>
	&copy;&nbsp;コピーライトとか
</footer>

<?php wp_footer(); ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/lib/common.js?ver=<?php echo time(); ?>"></script>
</body>
</html>

テンプレートを作成したらテーマフォルダに突っ込んで、固定ページからテンプレートを選択します。

また、Theme My Loginで出力される部分のテンプレートを弄りたいなら「ルートディレクトリ/wp-content/plugins/theme-my-login/themplates/」内にあるPHPをコピーして自分のテーマフォルダ内に入れることで、そちらを優先的に読みに行くようになります。

WordCamp Osaka 2012の登録サイトでもこの方法を使って少しだけ中身をいじっています。
今はやっていませんが、登録を受け付けていたときは登録ページにダイレクトにリンクを貼っていたため、参加者一覧の表示もしていました。

[ もくじへ戻る ]

色々なページをリダイレクトさせて導線確保

前項目の固定ページでログイン出来るように設定したとはいえ、デフォルトのログイン画面や登録画面はURLを直に叩けばアクセスできるので、その場合に自動に固定ページのほうにリダイレクトするように設定。
また、諸事情により本来のトップページを使わなくなったりだとかもしたので、それも適切な場所へリダイレクトさせます。

今回の登録サイトでリダイレクトさせたいページ

  • 「http://サイトURL/」を「http://サイトURL/user_list/」へ
  • 「http://サイトURL/wp-login.php」を「http://サイトURL/login/」へ
  • 「http://サイトURL/wp-login.php?acrion=login」を「http://サイトURL/login/」へ
  • 「http://サイトURL/wp-login.php?acrion=register」を「http://サイトURL/register/?acion=register」へ
  • 「http://サイトURL/wp-login.php?registration=complete」を「http://サイトURL/login/」へ
  • 「http://サイトURL/wp-login.php?acrion=lostpassword」を「http://サイトURL/lostpassword/?acrion=lostpassword」へ
  • 「http://サイトURL/wp-login.php?loggedout=true」を「http://サイトURL/login/?loggedout=true」へ

まだあった気がするんですけど、だいたい上記のような感じでリダイレクト条件をつけたかったんだと思います。

WordPressプラグイン「Redirection」

リダイレクトに関しては、いろいろな方法があるかと思います。
HTMLのmeta要素にリダイレクト処理を書くとかphpを使うとかJavascriptを使うとか…
最近では.htaccessに書くんですかね?

僕も本当は.htaccessに書こうかと思ってたんですけど、これも諸事情により.htaccessが扱えなかったので、「Rediraction」というリダイレクト専用プラグインを使うことにしました。

Redirection
http://wordpress.org/extend/plugins/redirection/

Redirectionで転送ルールを設定

インストールして有効化すると「ツール」メニューに「リディレクション」という項目が追加されます。

移動して「新しい転送ルールを追加」から各種入力・選択するだけです。

ソースURL

リダイレクト前のURLを入力。
パスはサイトURLがなくてもOK。

一致条件

基本的には「URLのみ」でいいかと思います。
リファラーやユーザーエージェントを条件に指定することもできます。
ユーザーエージェントを指定することでモバイルだとかスマホとかで振り分けも可能ですね。
ログインしているかしていないかでそのページを見るために登録ページに強制転送させることも可能です。

操作

今回は特定URLにリダイレクトさせるだけなので、「URLに転送」を設定します。
そのページにアクセスしたらランダムでどこかのページに飛ばしたり、404エラーを返したりということも可能なようです。
使い方によっては悪質なこともできそうです。やらないけどさ。

正規表現

今回は引数をつけた場合の転送をしているので使用しませんでしたが、正規表現を活用してリダイレクト設定の数を減らす事ができます。
Redirectionにおける正規表現の活用に関してはこちらが詳しいです。

WordPressプラグイン「Redirection」の正規表現を活用する | モンキーレンチ
http://2inc.org/blog/blog/1776/

ターゲットURL

ここに入力するのは転送先のURLですね。本当にありが(ry
このURLのパスもサイトURLがなくてもOK。

Redirectionのその他の設定

Redirectionの転送ルールの設定のページの上の方に小さくメニューがあるのにお気づきでしょうか。
基本的には設定する必要はないですが、こんなメニューがあるよ、という紹介だけしておきます。
今回は説明しません。

[ もくじへ戻る ]

プロフィールカスタマイズ基本編

登録・ログインまわりを設定し終えたので、次はユーザープロフィールの設定です。
ユーザー一覧を表示するページで出力したい項目を精査し、プロフィールで入力欄がいる項目・要らない項目を設定します。

ユーザー一覧に出す項目

以下がWordCamp Osaka 2012の参加登録サイトのユーザー一覧の表示ページで出力させる項目は以下の通りでした。

  • ユーザーの名前
  • 設定できるアバター
  • ユーザーのTwitterアカウント(あれば)
  • ユーザーのプロフィールやコメント(あれば)

アバターとTwitterを除けばデフォルトでプロフィールページにある項目ですので、それ以外の「これはいらんやろ」的なやつを削除して、必要な項目を追加していきます。

プロフィール項目の追加・削除

functions.phpに以下のPHPコードを記述します。

remove_filter( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

function my_user_meta($prof) {
	unset($prof['aim']);
	unset($prof['jabber']);
	unset($prof['yim']);

	$x['twitter'] = 'Twitterアカウント';

	return $prof;
}
add_filter('user_contactmethods', 'my_user_meta', 10, 1);

1行目

プロフィールの「管理画面の配色」を削除します。
選択なんてさせてもがっつり見る人そんなにいないので…。

3〜12行目

プロフィール項目の連絡先情報にある項目を削除・追加します。
「$prof」と書いてある部分はユニークなものであればなんでもいいです。

項目を削除する場合は「unset($prof[‘フィールド名’]);」と書き、フィールド名にはプロフィールで設定されているフィールドのキーを入れます。
フィールドのキーに関しては以下の記事が分かりやすいのでそれを参考にどうぞ。

WordPressのユーザーページ(author.php)テンプレートをカスタマイズする | webOpixel
http://www.webopixel.net/wordpress/136.html

追加したい項目に関しては8行目にあるように「$x[‘フィールド名’] = ‘表示される文字列’;」と書き、「フィールド名」にはユニークなフィールドのキーを任意で、「表示される文字列」には任意の文字列を当てはめます。

入力フィールドはテキストフィールドしか設定できませんが、Twitterアカウント程度であれば問題ありませんね。

連絡先の削除に関して

連絡先の削除はぶっちゃけ「WP Total Hacks」プラグインを使ったほうが楽ですね。

WP Total Hacks
http://wordpress.org/extend/plugins/wp-total-hacks/

他にも色々設定できますしみんなこのプラグイン使いましょう!(←ステマ)

[ もくじへ戻る ]

アバターを選択できるようにする

正 直 こ こ が 一 番 苦 労 し ま し た
…色んな意味で。

WordPressはユーザー登録の際に登録されたメールアドレスがGravatarにも登録されていた場合、Gravatarで設定しているアバターを表示します。
でも、ユーザープロフィール上でそれがわかるわけではないし、確認できたとしても何もしなければサイトの右上にあるAdminバーに小さく表示されるだけ。

そこで、アバターの出力パターンとそれを促すアバターの登録するフローを考え、アバター専用の項目を設置しようと思いました。
でも追加方法がわからない…と思って調べていたら、われらがまがりん(@jim0912)さんの記事がドンピシャでありました!

WordPressのユーザー管理画面カスタマイズまとめ | Simple Colors
http://www.warna.info/archives/169/

早速書いてあるコードを拝借して、アバターを選択できるエリアを作りました。

プロフィールにアバターの選択項目を表示・データ送信までのコード

<?php
function add_user_avatar_form( $avatar_data ) {
    global $profileuser;

    if ( preg_match( '/^(profile.php|user-edit.php)/', basename( $_SERVER['REQUEST_URI'] ) ) ) {
?>
    <tr>
        <th scope="row">アバター選択</th>
        <td>
        	<div class="avatarBlock">
	        	<h4 class="avatarTitle">Gravatarを使う</h4>
	        	<div class="gravatar_left">
		        	<label for="gravatar"><input type="radio" name="user_avatar" id="gravatar" value="gravatar" <?php checked( $profileuser->user_avatar, gravatar ) ?> /><br><?php echo get_avatar( $profileuser->user_email, 30); ?></label>
	        	</div>
	        	<div class="gravatar_right">
	        		Gravotarで登録したオリジナルのアイコンを表示することができます。<br>
	        		設定しているメールアドレスがGravatarに登録されてる場合は自動で表示されます。<br>
		        	<a href="https://ja.gravatar.com/" target="_blank">Gravatarでアイコンを登録する</a>
	        	</div>
	        </div>
	        <div class="avatarBlock">
	        	<h4 class="avatarTitle">オリジナルアバターを使う</h4>
		        <ul id="avatar">
			        <li><label for="avatar01"><input type="radio" name="user_avatar" id="avatar01" value="avatar01" <?php checked( $profileuser->user_avatar, avatar01 ) ?> /><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/avatar01.png" width="30" height="30"></label></li>
		        	<li><label for="avatar02"><input type="radio" name="user_avatar" id="avatar02" value="avatar02" <?php checked( $profileuser->user_avatar, avatar02 ) ?> /><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/avatar02.png" width="30" height="30"></label></li>
		        	<li><label for="avatar03"><input type="radio" name="user_avatar" id="avatar03" value="avatar03" <?php checked( $profileuser->user_avatar, avatar03 ) ?> /><br><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/avatar03.png" width="30" height="30"></label></li>
		        </ul>
		        <div class="avatarDesc">※ここで選んだアイコンが登録者一覧で掲載されます。</div>
		     </div>
        </td>
        </tr>
<?php
    }
    return $avatar_data;
}
add_action( 'show_password_fields', 'add_user_avatar_form' );

function update_user_avatar( $user_id, $old_user_data ) {
    if ( isset( $_POST['user_avatar'] ) && $old_user_data->user_avatar != $_POST['user_avatar'] ) {
        $user_avatar = sanitize_text_field( $_POST['user_avatar'] );
        $user_avatar = wp_filter_kses( $user_avatar );
        $user_avatar = _wp_specialchars( $user_avatar );
        update_user_meta( $user_id, 'user_avatar', $user_avatar );
    }
}
add_action( 'profile_update', 'update_user_avatar', 10, 2 );
?>

これでプロフィール画面にGravatarかこちらが用意したアバターかを選択できるようになりました。
基本的にはラジオボタンで「name=”user_avatar”」を指定し、83行目以降の記述で「name=”user_avatar”」で選択されたデータを送信しています。

Gravatar画像の取得とデフォルト画像の設定

プロフィールにアバターの選択項目を表示・送信までのコードの13行目にあたるのですが、Gravatarの画像を呼び出すためにユーザーのメールアドレスを取得して、Gravatarに登録されているかどうかをリクエストしています。

<?php echo get_avatar( $profileuser->user_email, 30); ?>

取得したメールアドレスがGravatarで登録したものと一致していれば、Gravatarで設定しているアバターが表示されるようになります。
また、リクエストした際にメールアドレスがGravatarで登録されていなければWordPressのデフォルトアバターが表示されます。

function admin_css() {
    echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/css/admin.css">';
}
add_action('admin_head', 'admin_css');

デフォルトアバターの変更

WordPressのデフォルトのアバターはミステリーマンだったり、Gravatarロゴだったり、自動生成されたよくわかんないものだったり…
なんとなく味気がないので、オリジナルのアバターを追加してデフォルトに設定します。

function newgravatar ($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/avatar/guest.png';
    $avatar_defaults[$myavatar] = "Guest";
    return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'newgravatar' );

これで指定ディレクトリ、今回の場合は登録サイトのテーマディレクトリのアバターを格納している場所から参照された、指定された画像が呼び出されます。
あとは設定→ディスカッションからデフォルトアバターをラジオボタンで選択すればOK。

[ もくじへ戻る ]

参加者一覧の表示

参加者一覧を固定ページで出力します。
どんなリストにしたいかをまずHTMLで組んで、プロフィールでカスタマイズしたものをもとにテンプレートタグを入れていきます。
長いので折りたたんでいます。「ソースを見る」をクリックして展開してください。

<?php
/*
Template Name: 登録者一覧
*/
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>デモサイト 登録者一覧</title>

<?php wp_head(); ?>
<?php wp_enqueue_script( 'jquery' ); ?>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/normalize.css?ver=<?php echo time(); ?>" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css?ver=<?php echo time(); ?>" type="text/css" media="screen" charset="utf-8" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body id="user_list">
<div class="wrap">
<div class="wrapInner">

<header>
	<h1><a href="http://2012.osaka.wordcamp.org/" target="_blank">登録者一覧</a></h1>
</header>

<aside>
	<div class="linkArea">
		<a class="button" href="/login/">ログイン</a>
		<?php if ( is_user_logged_in() == false ) : ?>
		<a class="button join" href="/login/?action=register">登録する</a>
		<?php endif; ?>
	</div>
</aside>

<section>
	<aside>
		<div class="count">
		現在の参加者 <span><?php $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users; ?></span> 人
		</div>
	</aside>
	<article>
		<ul class="clr">
			<!--Loop Start-->
			<?php
				$userlist=get_users_of_blog();
				foreach ( $userlist as $user):
			?>
			<li>
				<div class="inner descHover">
					<h2><span><?php the_author_meta('display_name', $user->ID);?></span></h2>
					<p class="avater">
					<?php
						$avaterPat = get_the_author_meta('user_avatar', $user->ID);
						if( $avaterPat == '' || $avaterPat == 'gravatar' ) :
					?>
					<?php echo get_avatar( $user->user_email, 60);	?>
					<?php else : ?>
					<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/<?php the_author_meta('user_avatar', $user->ID); ?>.png" width="60" height="60">
					<?php endif; ?>
					</p>
					<?php if(get_the_author_meta('twitter', $user->ID)): ?>
					<p class="twitId">
						@<a href="https://twitter.com/<?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?>" target="_blank"><?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?></a>
					</p>
					<?php endif; ?>
					<?php if(get_the_author_meta('description', $user->ID)): ?>
					<div class="description">
						<div class="desInner">
							<?php echo wpautop(get_the_author_meta('description', $user->ID)); ?>
						</div>
					</div>
					<?php endif; ?>
				</div>
			</li>
			<?php endforeach; ?>
			<!--Loop End-->

		<ul>
	</article>
</section>

<aside>
	<div class="linkArea">
		<a class="button" href="/login/">ログイン</a>
		<?php if ( is_user_logged_in() == false ) : ?>
		<a class="button join" href="/login/?action=register">登録する</a>
		<?php endif; ?>
	</div>
</aside>

</div>
</div>

<footer>
	&copy;&nbsp;コピーライトとか
</footer>

<?php wp_footer(); ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/lib/common.js?ver=<?php echo time(); ?>"></script>
</body>
</html>

これを作成したらユニークな名前でファイル名を指定して保存して、テーマフォルダに放り込んでください。
もちろん拡張子は.phpです。

このとき、phpの頭に「Template Name」を書いておくと、固定ページでテンプレートとして指定することができます。
早速パーマリンク「user_list」を指定した固定ページでテンプレートの変更を行います。

jQueryとCSSでプロフィールコメントをポップアップ表示させたりしていますが、そこは割愛します。

プロフィール情報・コメントを出力する

プロフィール編集画面で入力した情報を出力します。
foreachでループ処理を実行しています。

<?php
	$userlist=get_users_of_blog();
	foreach ( $userlist as $user):
?>
<li>
	<div class="inner descHover">
		<h2><span><?php the_author_meta('display_name', $user->ID);?></span></h2>
		<p class="avater">
			アバター画像出力
		</p>
		<?php if(get_the_author_meta('twitter', $user->ID)): ?>
		<p class="twitId">
			@<a href="https://twitter.com/<?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?>" target="_blank"><?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?></a>
		</p>
		<?php endif; ?>
		<?php if(get_the_author_meta('description', $user->ID)): ?>
		<div class="description">
			<div class="desInner">
				<?php echo wpautop(get_the_author_meta('description', $user->ID)); ?>
			</div>
		</div>
		<?php endif; ?>
	</div>
</li>
<?php endforeach ?>

表示名

the_author_metaのフィールド、display_nameを指定して出力。

<?php the_author_meta('display_name', $user->ID);?>

プロフィールコメント

the_author_metaのフィールド名display_nameを指定して出力しています。

<?php if(get_the_author_meta('description', $user->ID)): ?>
<div class="description">
	<div class="desInner">
		<?php echo wpautop(get_the_author_meta('description', $user->ID)); ?>
	</div>
</div>
<?php endif; ?>

dispcriptionフィールドに記入されていれば出力し、していなければで出力しない条件分岐で囲んでいます。
テキストフィールドに改行して保存した場合に改行が有効になるように、wpautopを使用しています。

Twitterへのリンクと整形

functions.phpで作成したフィールドのキー「Twitter」を指定して出力。

<?php if(get_the_author_meta('twitter', $user->ID)): ?>
<p class="twitId">
	@<a href="https://twitter.com/<?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?>" target="_blank"><?php echo str_replace('@', '', get_the_author_meta('twitter', $user->ID) ); ?></a>
</p>
<?php endif; ?>
<?php if(get_the_author_meta('description', $user->ID)): ?>

これも上記descriptionの分岐と同じように、テキストフィールドに入力されていれば出力し、入力されていなければ出力しないような分岐で囲んでいます。

加えて、Twitterのアカウントに@が入っている場合、除去することでリンクを正式なものにします。
現在は@ついていてもアクセスできますね。

http://から書いているものも含め複数置換したい場合は、置換前の単語の配列を生成すると幸せになれます。

<?php
	$twiAccount = array( '@' , 'https://twitter.com/' );
	echo str_replace($twiAccount, '', get_the_author_meta('twitter', $user->ID) );
?>

アバターの出力

プロフィール編集で設定したアバターを出力します。

パターン1

「get_the_author_meta」でプロフィール編集画面で送信した「user_avater」に入っている値を取得します。
値が入っていない、またはGravatarの設定がされている場合は、そのアイコンのを、そうでない場合はこちらの用意したアイコンのいずれかを選択している状態なので、入っている値に対応したイメージを出力します。

<?php
	$avaterPat = get_the_author_meta('user_avatar', $user->ID);
	if( $avaterPat == '' || $avaterPat == 'gravatar' ) :
?>
<?php echo get_avatar( $user->user_email, 60);	?>
<?php else : ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/<?php the_author_meta('user_avatar', $user->ID); ?>.png" width="60" height="60">
<?php endif; ?>

パターン2

デフォルトアバターの画像を直接指定したい場合とか、条件を細かに分けたい場合とか。

<?php if(get_the_author_meta('user_avatar', $user->ID) == '' ) : ?>
<?php echo get_avatar( $user->user_email, 60);	?>
<?php elseif(get_the_author_meta('user_avatar', $user->ID) == 'gravatar' ) : ?>
<?php echo get_avatar( $user->user_email, 60);	?>
<?php else : ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/avatar/<?php the_author_meta('user_avatar', $user->ID); ?>.png" width="60" height="60">
<?php endif; ?>

ログイン状態で判別する条件分岐

参加登録サイトでは「is_user_logged_in()」でログインしているかどうかを判別していました。

ログインしていない場合に参加登録ボタンを出したかったので、以下のような分岐タグで囲んでいます。

使ったコード

「is_user_logged_in()」はログインしていればtrue、していなければfalseで値を返します。

<?php if ( is_user_logged_in() == false ) : ?>
<a class="button join" href="/login/register/">参加登録する</a>
<?php endif; ?>

ログイン判別でそれぞれ別のものを表示

実際に使ったのは上の項目の分岐ですが、ログインしているかしていないかで別のものを出力するなら以下のような分岐を書くこともできます。

<?php if ( is_user_logged_in() ) : ?>
<a href="http://wcosaka.com/login/?action=logout">ログアウト</a>
<?php else : ?>
<a class="button" href="/login/">ログイン</a>
<a class="button join" href="/login/register/">参加登録する</a>
<?php endif; ?>

参加者数の表示

増加する楽しみと、煽り効果を期待して現在何人登録しているか、ユーザー数を表示しています。

<?php $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users; ?>

上記コードは数字のみの出力です。

これでWordCamp Osaka 2012の登録サイトで出力していたものの解説はほぼ終わりです。

[ もくじへ戻る ]

個人的振り返り – 反省点と謝辞

記事に書いてある内容全般に関して

この記事に書いてある感じで構築して運用しましたが、この方法が絶対というわけではなく、直さなければならない箇所等たくさんあると思います。
正しいコードを正しい書き方で使いたいですので、「こうしたほうがいい」という部分がありましたら追のでその際は連絡いただければ追記いたします。

オリジナルで何かやっていない

大体のコードはぐーぐる先生やWordPressのフォーラムで関連する投稿を漁ったり、TwitterやFacebookで協力を仰いだりしたので、ほぼオリジナル要素がないのが痛いです。
組み合わせで試行錯誤して書いていくのもいいんですけど、今後作るときはちゃんとフックとか理解してやりたいなあと。
ふわっと理解してるくらいだと先輩方に全然太刀打ち出来ないです(・ω・)

記事中のコードに関して

エスケープ関数とか書いていないので、たぶん結構危ういコードになっていると思います。
このへんが僕も含めコピペして作る人にとっては気づきにくいことなんだろうなあと思いますので。

エスケープ関数に関してはみんな大好きまがりん(@jim0912)さんが同じWordpress Advent Calendar 2012の3日目の記事として上げてくださっています。

WordPress を扱う上で憶えておいて欲しい3つのesc #wacja2012 | Simple Colors
http://www.warna.info/archives/2476/

さすがわれらのまが(ry
WordCamp Osaka 2012のスライドを修正して公開する際にもいろいろ指摘をいただきまして、ありがとうございました。

アバター選択のコードに関して

WordCamp Kobe 2011やWordVolcanoでやっていたような感じで作りたかったので、参考にさせていただきました。
中身見てみたいなあと思っていたら取り次いでくれた@luchino__さん、WordVolcanoのソースコードを快く見せてくださった@marushuさん、ありがとうございました。

体調管理に関して

実はアバター関連の部分を作成しているとき体調を崩してしまうという体たらく。
グッズグズの状態で作業していたため、頭が働いておらず、当時助けを頂いた方には大変なご迷惑をかけてしまいました。
@yuka2pyさん、コード見てくださってありがとうございました。

[ もくじへ戻る ]

個人的振り返り – やりたかったけど、できなかったこと

登録サイトで本当はやりたかったけど諸事情でできなかったことがあります。

やりたかったけど、できなかったこと

  • .htaccessの書き換え
  • 管理画面のCSSを直接触る
  • wp-config.phpに追記してのデバックモードでの検証・セキュア接続

諸事情って?

今回はPHP Ninjaを使わせていただいていたんですが、渡されたWebDAV情報でアクセスすると、wp-content以下しか扱えなかったんです。

なんでSFTPじゃなかったんだろう…というのは置いておいて、その時考えていたことができない状況になって(と思い込んで)しまいました。
実際はプラグインでできることもあるんですけど、コアファイルを触ってやろうと思っていただけに結構精神的に打撃くらいました。

もっと柔軟な頭持てばよかったと思うのと同時に、サーバーでできることとできないことを把握するのが大事だなと思いました。

今回使わさせていただいたクラウドサーバー

PHPNinja
http://php-ninja.com/
WordPress専用クラウドサーバーです。

[ もくじへ戻る ]

個人的振り返り – やりたかったけど、やらなかったこと

諸事情によりできなかったことは仕方ないことなのですが、できるのにやらなかったこともあります。

TwitterやFacebookのアカウント連結

TwitterやFacebookでログインしたほうが敷居が低いかなと思って提案はしたんですけど、自分で取り下げました。
理由は、できるだけアカウントを作ることでWordPress自体にに登録できる機能があるというのを知って欲しかったと言っておけばコミュニティ的に貢献度が上がったように感じて僕の印象が良くなるからです。

facebookのアカウント入力

個人的にはアカウント連結させないなら、せめて入力欄があってもいいんじゃないかしていいかなと思っていました。
でもなぜかフィールド自体を設置しませんでした。
入力しなかったら出ないようにすることもできたんですけどね…。
もしかしたら「Facebookの連携機能はいらない」を「アカウント入力欄すらいらない」に勘違いしてただけかもしれません。

TwitterやFacebookアカウントを入力した際のアバター選択

アカウントを入力したらAPI引っ張ってきてアバター選択させるようにしたかったんですけど、それだけに時間がとれないという理由と、できるだけGravatarをもっと普及させたほうがWordPressに貢献できるというきたない理由で止む無くやめた気がします。

外側のサイト制作

本来はWordCamp Tokyo 2012の時にやられていた「おもてなしブログ」のようなものにしようと目論んでおりました。
ついでに参加登録できたらなあと思ってディレクトリ構成とかを考えていたのですが…これも「時間的に無理でした」。

自分のセッションのこともありましたし、本家サイトをおざなりにするのもアレですしおすし。
なにより10月中旬には結婚式も控えていたんで、マジ死にそうだったんです本当にかんべ(ry

登録の解除(キャンセル)機能

たぶんWordPressの登録機能を使い始めの頃ってデフォルトで「登録解除できない」というのを知らなくて登録解除ボタンを探す人が多いかと思ったんですよ。
特にWordCampとか、大規模なイベントの場合は。

で、WordPressのユーザー登録を解除するプラグインというものがありまして、けっこう前から使いたかったんですけど大人の事情により「それはつけなくていい」と言われましたので、泣く泣く機能をつけませんでした。

でもせっかくなので紹介しておきますね。

Never Let Me Go
http://wordpress.org/extend/plugins/never-let-me-go/

[ もくじへ戻る ]

個人的振り返り – それでもやってよかった

いろいろありましたけど、まわりの人の助けがもらえたり、ながら制作したことで、コミュニティの強さや人のつながりの大事さを通関しました。

みなさんの協力あってこそ実装できたことがたくさんあります。
新たな発見があったり、ぶっ倒れそうになりながらも、この登録サイトを作ることで、人のつながりやコミュニティって大事だと思いました。

ユーザー登録ができるサイトを作るのは2回目なんですけど、今後のサイト制作に活かせるいい経験ができたと思います。

死の淵から這い上がることでパワーアップするサイヤ人みたいですね。カッコ( ・∀・)イイ!!

[ もくじへ戻る ]

おまけダウンロード

というわけで、せっかくなのでWordCamp Osaka 2012の登録サイトで使ったテーマファイルをそれとなく修正してデモサイト用に作りなおしたものを公開します。
zip圧縮していますので、展開して確認した上でお使いください。

テーマはWordPress本体と同じくGPLライセンスに基づいて配布しています。

なお、このテーマは非公式テーマです。
確認」「参考用」として使用するのをオススメします。

デモサイト/テーマダウンロード

GUEST ID : demo
GUEST PASSWORD : demouser
新規ユーザー登録をすることも可能です。

2013.06追記
諸事情により公開停止しています。後にデータを全削除して再構築する予定です。

バージョン履歴

  • 2012.12.11 – [ ver 0.0.1 ] 初期バージョン公開

今後バージョンが上がるときにはここに追記+TwitterやFacebookでアナウンスしていきます。

テーマに関する質問・ご意見等はGOUTEN(@gouten5010)か、この記事のコメントにてお願いします。
このテーマはWordCamp Osaka 2012と関連するものですが、WordCamp Osaka 2012実行委員会にお問い合せはご遠慮下さい。

[ もくじへ戻る ]

最後に

僕のことはいいから、早くバトンを受け取るんだ!

そして明日11日の人にバトンを渡すのがこの記事の使命。
明日はレオ社長(@tecking)さん、@megane9988さんです。

僕は2次元の世界に引きこもるので、あとは頼みました!

関連リンク

とりあえず関連リンク、改めてここに置いておきますね。

WordPress Advent Calendar 2012 前日(2012/12/10)の記事

WordPress 3.5 リリース目前!WordPressのアップグレードについておさらいしておこう #wacja2012 | Webourgeon
http://webourgeon.com/2012/12/10/wordpress-3-5-upgrade/
Author: Webourgeon(@Webourgeon_com)さん

hirotaka696(@hi_takaki)さんも前日担当のはずですけど、この記事を投稿した時点でまだ記事があがってなかったですorz

WordPress Advent Calendar 2012 同日(2012/12/11)の記事

僕と同じ11日担当の瀬口理恵(@rie05)さんも記事を書かれています。

WordCamp Osaka 2012実行委員長から見た振り返りレポート前編 #wacja2012 « 5DG_Blog
http://blog.5dg.biz/event-report/wordpress-advent-calendar-2012/

僕も理恵さんもみんな頑張ったよ、(*´・ω・)(・ω・`*)ネー

2012年公式

WordPress Advent Calendar 2012
http://2012.wpac.info/

最後の最後に

コードも含めて20,000文字超の圧倒的大ボリューム!! \\└(‘ω’)」////
駄文に最後までお付き合いいただきありがとうございました。

今年も来年も、素敵なWordPressライフを!!

[ もくじへ戻る ]

TO PAGE TOP