前回、「WordPressにFacebookやTwitterログインを追加するGianism」という記事でWordPressにFacebookやTwitterでのログインができるGianismというプラグインをインストールして、基本的に動かせるまでについて書きました。
今回はGianismログインのボタンを好きな場所に表示したり、ログイン後に遷移するページをカスタマイズする方法について書きます。
Gianism基本設定の動作
「WordPressにFacebookやTwitterログインを追加するGianism」で設置した、基本的な設定をした結果、このような動作が出来るようになりました。
・ ログイン画面にFacebookとTwitterログインボタンが表示される
このようにログイン画面にFacebookとTwitterログインボタンが表示されています。
・ Facebook,Twitterログインボタンをクリックするとログインできる
どちらかのボタンをクリックすると、ログインできて
個人設定の画面に移動します。
SNSログインボタンを好きなところに表示したい
今回考えているサイトはコンテンツを順次追加していき、多くの人に見てもらうことを目的としています。そのためにユーザー登録してくれたユーザーに更新情報などをお知らせしたいです。
そのためにはSNSログインボタンはログイン画面ではなく、表画面に表示したいです。
ログインボタンの表示方法については
ダッシュボード 設定＞Gianism設定 をクリック
カスタマイズ タブをクリック
好きな場所にログインボタンを追加する という項目に書いてあります。
このソースを
コピーします。例えばサイドバーに常に表示したければ、使っている子テーマのsidebar.php(なければ親テーマからコピーします)の任意の場所にこのコードを貼り付けます。
この状態で表示するとサイドバーにSNSログインボタンが表示されました。
しかし、できればもっと自由度を高くして任意の場所にログインボタンを表示したいのでウィジェットで表示したいと思います。基本的にウィジェットではPHPを記述できないので、子テーマのfunctions.phpにGianismログインボタンを表示するショートコードを追加したいと思います。
functions.php に
// ウィジェットでショートコードが使えるようにする記述
add_filter('widget_text', 'do_shortcode');
/* ログインしていなければgianism_loginを返す */
function ryus_gianism_login() {
if (is_user_logged_in()){
return '';
}
if( function_exists('gianism_login') ){
gianism_login();
}
}
/* ショートコードを追加する */
add_shortcode('ryus_gianism_login', 'ryus_gianism_login');
を追加します。
add_filter('widget_text', 'do_shortcode');
これを記述しないとウィジェットでショートコードが使えませんので記述しておきます。
ryus_gianism_login という関数では、
if (is_user_logged_in()){
return '';
}
という記述によってもしログイン済みだったら何もしないで終了させます。
そのあとに、
if( function_exists('gianism_login') ){
gianism_login();
}
でGianismログインボタンを表示します。
ウィジェットにショートコードを書きます。
ダッシュボード 外観＞ウィジェット をクリック
利用できるウィジェット の テキスト を表示したい場所に移動します。
このように記述して、保存 をクリックします。
これで設定が終わりました。
表画面を見てみます
ログインしていないとき、
Facebookでログイン と Twitterでログイン ボタンが表示されています。
ログインしているときは、
このように何も表示されません。
ログインしたときの画面遷移を変更する
このように表画面にログインボタンを付けてログインできるようにするのですが、ログインすると個人設定画面に行ってしまいます。
これをログインした後はトップページに移動するようにしてみます。
ダッシュボード 設定＞Gianism設定 の カスタマイズ タブをクリックした画面の
リダイレクト先を変更する にあるコードをコピーして、使っている子テーマのfunctions.phpにペーストします。
この状態でログインすると、ログインしたあとトップページに遷移します。
ログアウトしたときの画面をトップページに変更する
カスタマイズする前はログアウトすると、
ログイン画面に移動してしまいます。Webサイトの表画面からはなるべく離れて欲しくないのでログアウトしたときもトップ画面に移動するようにカスタマイズします。
使っている子テーマのfunctions.phpに
add_filter( 'logout_redirect', 'my_logout_redirect', 10, 3 );
function my_logout_redirect( $redirect_to, $requested_redirect_to, $user ) {
return home_url();
}
を追加します。これでログアウトしたときにトップページに移動するようになります。
まとめ:Twitterログインの設定で困ってしまったこと
前回書いたGinanismの基本設定をしたときに困ってしまったことがありました。
Twitterの設定で困ってしまったのですが、
このようなエラーが出て先に進めなくなりました。これはTwitterのapplicationを作るには携帯電話番号を登録しなければいけないということらしいのです。以前も何かの必要があって携帯電話を登録しようとしたのですが、なぜか確認用のメールが来なくて設定できないままになっていました。
ググって調べたところ、iPhone から行う方法があったのでiPhone
からなら上手く行くのではと思ってサイトで検索した方法でやってみました。携帯電話番号を入れて、送信を押すと
テキストメッセージの送信にエラーが発生しました
というエラーが出てしまいます。SMSで確認コードは届いているのですが、エラーが出ているため確認コードを入力する画面が出て来ません。
何度も繰り返しても同じエラーになってしまいます。
仕方がないのでPCのTwitterの設定画面から同じように携帯電話番号を登録しようとしたのですが、メッセージが送れないというエラーが出ます。
結果的に思い当たったのは以前途中まで手続きを進めていたので携帯電話番号はPC画面の方から登録ずみになっていて、確認コードだけが入れられていない状態だったようです。なのではないかな？と気づいたのでPCの設定画面から携帯電話番号を削除して、iPhoneから再度携帯電話番号の登録をしたら、エラーメッセージが出ないようになり無事に確認番号を入れられて、applicationを作れるようになりました。
結構時間がとられてしまったのでもしも同じような事があるようでしたら、PCの設定画面から携帯電話番号を削除してみてください(^_^;。
[amazon_searchlink search=”WordPress プラグイン”]
コメント