ソーシャルログインプラグインGianismのカスタマイズいろいろ

GianismはWordPressにFacebookやTwiterなどのSNSのアカウントでログインできるようにする和製プラグインです。インストールすると管理画面に設定方法が記載されているので簡単に使用することができます。案件の都合でいろいろなカスタマイズを行って使用したので、それらをまとめてみました。

ログインIDを変更する

Gianismで初めてOAuth接続するとOAuth認証したサービスのユーザー名等でWordPressアカウントが作成されます。Gianismで作成したユーザーは既存のWordPressユーザーとは区別し易くしたかったのでユーザーIDを変更するようにしてみました。WordPressの既存ユーザーがOAuth認証したときはユーザーIDを変更したくなかったので、その判定もいれています。

function additional_info( $user_id, $data, $service, $on_creation ){
	global $wpdb;

	// 既存ユーザーの場合は処理をしない(プロフィール編集画面からのOAuth接続)
	if ( is_user_logged_in() )
		return;

	switch ( $service ) {
		case 'facebook' :
		case 'twitter' :
			// ユーザー名を変更(例:facebook_12)
			$new_user_login = $service . '_' . $user_id;
			while ( username_exists( $new_user_login ) !== null ) {
				$new_user_login = $new_user_login . '_';
			}
			$wpdb->update( $wpdb->users,
				array(
					'user_login' => $new_user_login,
					'user_nicename' => $new_user_login,
				),
				array( 'ID' => $user_id ),
				array( '%s', '%s' ),
				array( '%d' )
			);
		break;
	}
}
add_action('wpg_connect', 'additional_info', 10, 4);

アバターにSNSで使用しているプロフィール画像を使用する

WordPressのアバター画像は基本的にgravatarのものが使用されますが、せっかくSNSでログインさせるのであれば、SNSで使用しているプロフィール画像が反映されたほうが良いと思ったのでそのように変更してみました(FacebookとTwitterでのログインを実装したので、画像反映もこの2つのみの検証です)。TwitterはAPIの使用制限があったので、一定時間キャッシュすることでAPIへのアクセス数を減らすようにしています。

/**
 * get_social_avatar
 * ソーシャルログインユーザー用アバター画像
 * @param string $img イメージタグ
 * @param string $id_or_email ユーザーIDもしくはEメールアドレス
 * @param numeric $size 画像サイズ
 * @param string $default デフォルト画像URL
 * @param string $atl alt
 * @return string イメージタグ
 */
function get_social_avatar( $img, $id_or_email, $size, $default, $alt ) {
	$_wpg_facebook_id = get_the_author_meta( '_wpg_facebook_id', $id_or_email );
	$_wpg_twitter_screen_name = get_the_author_meta( '_wpg_twitter_screen_name', $id_or_email );
	// Facebookのとき
	if ( $_wpg_facebook_id ) {
		$img = '<img src="https://graph.facebook.com/' . esc_attr( $_wpg_facebook_id ) . '/picture?type=square" alt="<?php echo esc_attr( $alt ); ?>" width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" class="avatar photo" />';
	}
	// Twitterのとき
	elseif ( $_wpg_twitter_screen_name ) {
		if ( false === ( $profile_image_url = get_transient( 'twitter_avatar_' . $_wpg_twitter_screen_name ) ) ) {
			if ( class_exists( 'Twitter_Controller' ) ) {
				$wp_gianism_option = get_option( 'wp_gianism_option' );
				$Twitter_Controller = new Twitter_Controller( array(
					"tw_screen_name" => $id_or_email,
					"tw_consumer_key" => $wp_gianism_option['tw_consumer_key'],
					"tw_consumer_secret" => $wp_gianism_option['tw_consumer_secret'],
					"tw_access_token" => $wp_gianism_option['tw_access_token'],
					"tw_access_token_secret" => $wp_gianism_option['tw_access_token_secret'],
				) );
				$t = $Twitter_Controller->request( 'users/show', array(
					'screen_name' => $_wpg_twitter_screen_name
				) );
			} else {
				$twitter = \Gianism\Service\Twitter::get_instance();
				$t = $twitter->call_api( 'users/show', array(
					'screen_name' => $_wpg_twitter_screen_name
				) );
			}
			$profile_image_url = $t->profile_image_url;
			set_transient( 'twitter_avatar_' . $_wpg_twitter_screen_name, $profile_image_url, 60 * 60 * 1 );
		}
		if ( $profile_image_url ) {
			$img = '<img src="' . esc_url( $profile_image_url ) . '" alt="' . esc_attr( $alt ) .'" width="' . esc_attr( $size ) .'" height="' . esc_attr( $size ) . '" class="avatar photo" />';
		}
	}
	return $img;
}
add_filter( 'get_avatar', 'get_social_avatar', 10, 5 );

プロフィール編集ページにOAuth接続のボタンを表示しない

Gianismをインストールすると、管理画面のプロフィール編集画面にOAuth接続ボタンが表示されるようになります。既存のWordPressユーザーの場合とOAuth接続のユーザーは別物として扱いたかったので、既存のWordPressユーザーがOAuth接続できないようにプロフィール編集画面にOAuth接続ボタンが表示されないようにしてみました。

function gianism_user_profile() {
	remove_all_actions( 'gianism_user_profile', 1 );
}
add_action( 'gianism_user_profile', 'gianism_user_profile', 1 );

ソーシャルログインユーザーにはWordPressの管理画面を見せないようにする

SNSでログインしたユーザーには独自の管理画面だけを見せるようにしたかったので、WordPressの管理画面を見れないようにしました。SNSでログインしたユーザーかどうか判別するために、OAuth接続時にオリジナルのユーザーロールを適用するようにしました。オリジナルのユーザーロールは事前にUser Roll Editorなどで作成します(ここでは「social」というユーザーロールを作成した場合の例をあげています)。

// 注意::ログインIDを変更する のコードに追記してください。
function additional_info( $user_id, $data, $service, $on_creation ){
	//
	// 〜省略〜
	//
	switch ( $service ) {
		case 'facebook' :
		case 'twitter' :
			//
			// 〜省略〜
			//

			// 権限グループを「social」に
			$user = get_userdata( $user_id );
			$user->set_role( 'social' );
			break;
		break;
	}
}
add_action('wpg_connect', 'additional_info', 10, 4);

// ソーシャルログインユーザーの場合は管理画面を見せない
function social_no_dasheboad() {
	if ( is_admin() && is_login_social() ) {
		wp_redirect( home_url() );
		exit;
	}
}
add_action( 'admin_menu', 'social_no_dasheboad' );

// ソーシャルログインユーザーは管理バーを表示しない
function social_admin_bar( $return ) {
	if ( is_login_social() ) {
		return false;
	}
	return $return;
}
add_action( 'show_admin_bar', 'social_admin_bar' );

// ソーシャルログインユーザーログイン後のリダイレクト
function gianism_redirect_to( $url ) {
	return home_url();
}
add_filter( 'gianism_redirect_to', 'gianism_redirect_to' );

// ログアウト後のリダイレクト
function my_wp_logout() {
	wp_redirect( home_url() );
	exit;
}
add_action( 'wp_logout', 'my_wp_logout' );

/**
 * is_login_social
 * ソーシャルユーザーでログイン中か
 * @return bool
 */
function is_login_social() {
	$user = wp_get_current_user();
	if ( is_user_logged_in() && in_array( 'social', $user->roles ) ) {
		return true;
	}
	return false;
}

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく