ユーザー参加型のサイトを作ってみるよ①
自分はラクして運営できるような夢のようなサイトが作りたいと思って、ポータルサイトを作った際のメモ。
サイトが重くなるのは嫌なので極力プラグインの使用を控えつつも、自分で出来ないことはプラグイン依存です。
ユーザーが自由に投稿できるように
まずはユーザーが自由に記事を投稿できるようにプラグイン「WP User Frontend」をインストール。
このプラグインの優秀なところは「ログインしていないと投稿できない/ログインしていなくても投稿できる」ように細かく設定できます。
ログイン制限しない場合は「管理人の許可なしに公開されない」ように設定しておいた方が良いでしょう。
これでユーザー参加型のサイトっぽくなります。
管理画面が見えると面倒
そもそもWordPressの管理画面は素人には意味不明のものなのでイラネ。
会員がログイン・ログアウト時にダッシュボードに飛ばれても困るので、管理画面そのものをなくそうとしたら・・
上の会員投稿用のプラグインにエラーが起きるので仕方なくログイン・ログアウト時のページを指定。
テーマ下のfunctions.phpに以下を追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
add_action( 'pre_get_posts', 'sort_pre_get_posts' ); // ログアウト時にトップページへ function redirect_logout_page(){ $url = site_url('', 'http'); wp_safe_redirect($url); exit(); } add_action('wp_logout','redirect_logout_page'); //ログイン時のリダイレクト先を/report/へ function redirect_login_front_page() { $home_url = site_url('/report/', 'http'); wp_safe_redirect($home_url); exit(); } add_action('wp_login', 'redirect_login_front_page'); |
上記の場合は、ログイン時に「/report/」へリダイレクトするように設定。
<?php と ?>内に追加します。なければ自分で追加。
管理画面を整理
ログイン時のページを指定してもツールバーから管理画面に入れるので、悪意のあるユーザーからイタズラされる可能性があります。
なのでプラグイン「Adminimize」で不要な項目はすべて非表示に。むしろ管理者以外は全部非表示。
本当はfunctions.phpからも変更できますが、会員が書き込む用のプラグイン「WP User Frontend」にエラーが出る可能性があったのでプラグイン「Adminmize」を使用。
フルスクラッチで作るなら気を使わなくて良いんですが、こういう気遣いが面倒です。
これで管理画面内を変更される恐れはなくなりました。
やっぱSNSがないとね！
今どき検索のみで戦うのもしんどいので、投稿とSNSを連動させるためにプラグイン「JetPack」を導入
「JetPack」は無駄な機能が多くてあまり好きじゃないのが本音ですが、設定が一番ラクです。
たまにSNSと連携できないエラーが発生しますが、恐らくサーバー側かhtaccessが原因。
JetPackは対応が凄い早いので、困った際は直接メールするのが早いです。
ソーシャルログインを導入
ソーシャルログインといえばプラグイン「Gianism」
設定がイロイロとややこしいですが、会員を増やすには必須です。
設定が必要なので、自分の各SNSのアカウントが必須です。
下のアイコン自動取得を組み合わせれば、より便利。
FaceBookやTwitterはクリエーターを踏みにじるようにコロコロと仕様変更しやがるので、恐らく貴方がこの記事を読んでいる頃には・・・仕様は変わっているだろうから紹介しません。
設定方法が変わったりするので、私があれこれ説明するよりもGianismの公式設定を見たほうが早いです。
折角だから利用中のSNSアカウントのアイコンを取得してやろう
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/** * 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 ); |
ソーシャルログインの落とし穴
ジャイアニズムを入れるとプロフィールページにジャンプしやがる。
というわけで、ログイン後に「/eventnews/」へリダイレクトしてもらうことに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * Customize redirect URL * @param string $url if not specified, null will be passed. * @param string $service facebook, twitter, etc. * @param string $context login, connect, etc. * @return string URL string to redirect to. Null is no-redirect. */ function _my_redirect_to($url, $service, $context){ //これでリダイレクトURLが取得できます //指定されていなければ$urlはNULLです。 return home_url('/eventnews/', 'http'); } // Add filter. add_filter('gianism_redirect_to', '_my_redirect_to', 10, 3); |
トップページに飛ばしたい場合は
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * Customize redirect URL * @param string $url if not specified, null will be passed. * @param string $service facebook, twitter, etc. * @param string $context login, connect, etc. * @return string URL string to redirect to. Null is no-redirect. */ function _my_redirect_to($url, $service, $context){ //これでリダイレクトURLが取得できます //指定されていなければ$urlはNULLです。 return home_url(); } // Add filter. add_filter('gianism_redirect_to', '_my_redirect_to', 10, 3); |
home_urlの中身を空っぽにすればOK。
これである程度完成
これでユーザーが投稿出来るいわゆる「ユーザー参加型」のカタチになったと思います。
使ったプラグインは以下です
「Adminimize」
万が一管理画面に入ってきてしまった時のため導入した「管理画面のメニューをコントロールする」プラグイン。
今回は全て非表示にしました。権限によってかなり細く設定できます。
Gianism
ソーシャルログインに必要なプラグイン。設定が面倒だけどメリットが大きい
Jetpack
自身の投稿をSNSに垂れ流しにするプラグイン。SNSからの集客という意味では大きく役立ちます。
Really Simple SSL
SSL化に使ったプラグイン。一発でサイトをSSL化できるので非常に便利
WP Customer Reviews
ユーザーに記事を投稿してもらうためのプラグイン
WP User Frontend
ユーザーに☆5つで評価してもらうためのプラグイン
