「WordPressでログインしたユーザーにしか見えないページを作る方法 その１」ではテンプレートを使って、ログインしたユーザーにだけ見せるページの作り方について書きました。
管理者ではなく購読者がログインするようになるとログイン画面やログイン後のページ遷移などいろいろ気になってくるところがあります。
今回はそれらについてどうやって対応するかについて書きます。
ログイン画面のロゴを変更する方法
ログイン画面は通常、
このようにWordPressのロゴが表示されています。WordPressでつくられたサイトを管理しなれていると特に何とも思わないのですが、サイトのお客さんがログインするときにこの画面だとちょっと面食らってしまわれる可能性があります。
ということでログイン画面のロゴを変えてみたいと思います。
↓こちらのページを参考にさせていただきました
WordPress：ログイン画面のWordPressロゴマークを変更する
ロゴを変更するだけでなくロゴに付いているリンク(知らなかった)やtitle属性の変更のことまで細かく考慮されています。
ロゴ画像を変更する
ロゴで使いたい画像を準備します。
こんな感じで縦100px横320pxの画像を作ってみました。これを使っている子テーマの好きなところ(imageフォルダなどがあったらそこに入れると良いかもしれません)に入れておきます。今回はSimplicityの子テーマ、Simplicity-childを使ったのでその中にあるimagesフォルダに入れました。
* ログイン部分の幅が320pxだったので画像を320pxにするとぴたっとはまります
ロゴ画像を変更するコードを子テーマのfunctions.phpに書く
ロゴ画像を変更するコードを子テーマのfunctions.phpに書きます。
function login_logo_image() {
echo '<style type="text/css">
#login h1 a {
background: url('.get_bloginfo('stylesheet_directory') . '/images/logo_name.jpg) no-repeat !important;width:320px;height:100px;
}
</style>';
}
add_action('login_head', 'login_logo_image');
getbloginfo は子テーマなので stylesheet_directory としました。
ロゴの名前は自分が保存したフォルダとファイル名に変更しました。
ロゴの大きさが元の大きさと違うので width320px;height:100px; を追加しました。
補足：2018年2月26日 本日現在上記のコードでテストしてみたところ動作しなかったので、下記のコードに書き換えました。
widthなどはロゴの大きさに合わせて適宜変更してください。横長のロゴだとだいたいこれでうまくいくかと思われます。
function login_logo_image() {
?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png);
background-size:100%;
width:100%;
}
</style>
<?php
}
add_action( 'login_head', 'login_logo_image' );
これで表示すると、
こんな感じにロゴが変わり、ログインする人に違和感を与えないようになりました(^^)/
リンク先とtitleを変更する
仕上げにリンク先とtitleを変更します。
今は
ロゴ画像にカーソルを載せると Powered by WordPress と表示され、クリックすると、
WordPressの日本語サイトに飛んでしまいます。このままだとやはりサイトを訪れた方に違和感をもたれそうなので変更します。
子テーマのfunctions.phpに
function login_logo_title(){
return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');
このように追加します(参考サイトのそのままです！ありがとうございます)。すると、
ロゴの上にカーソルを載せたときにサイトのタイトルになりました(^^)/
クリックしたときのURLを変更するには、
function login_logo_url() {
return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');
このように追加します(参考サイトのそのままです！ありがとうございます)。すると、
クリックしたときに、自サイトのトップページに遷移するようになりました！
ログイン後のページ移動とログアウト後のページ移動
ログイン後のページはダッシュボードになります。また、ログアウトした後はログイン画面になります。
このままだと見るだけの人にとっては「？？？」な感じになりそうなので、変更したいと思います。
以前書いた「WordPressでFacebookログインができるGianism 好きな場所にボタンを表示する」という記事でログインとログアウト後のページ移動についてはカスタマイズしたことがあるのですが、今回はゲストユーザーさん(権限グループが購読者)の場合だけ、移動するページを変更したいと思います。
WordPress権限グループについて
WordPressの権限グループがどのような値なのかを調べてみました。
このページにある
という文字列で判定できそうです。
ログインした後のページをダッシュボードからトップページに変更する
子テーマのfunctions.phpに以下のコードを追加します。
function my_login_redirect($redirect_to, $request, $user) {
if ($user->roles[0] == 'subscriber'){
return home_url();
} else {
return $redirect_to;
}
};
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
先ほど調べた購読者のrole(subscriber)だったときはログイン後、home_url()でトップページに移動します。それ以外の場合は元々のURL redirect_to に移動します。
ログアウトしたときにログイン画面ではなくトップページに移動する
子テーマのfunctions.phpに以下のコードを追加します。
function my_login_redirect($redirect_to, $request, $user) {
if ($user->roles[0] == 'subscriber'){
return home_url();
} else {
return $redirect_to;
}
};
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
先ほど調べた購読者のrole(subscriber)だったときはログイン後、home_url()でトップページに移動します。それ以外の場合は元々のURL redirect_to に移動します。
functionは一つでできるようでした。。
あれ？ログインとログアウトのfunctionがまったく同じコードでした。ということは、
function my_login_logout_redirect($redirect_to, $request, $user) {
if ($user->roles[0] == 'subscriber'){
return home_url();
} else {
return $redirect_to;
}
};
add_filter( 'logout_redirect', 'my_login_logout_redirect', 10, 3 );
これで良さそうです。このように変更したところ、これでもうまく動作していました(^^)/
説明が長くなってしまいました！つづきはまた書きます
今回残りの懸案事項について一気に書こうと思っていたのですが思わず長くなってしまいました。
ということで残りの、
・購読者がログイン済みのとき、ツールバーを表示するのではなく、サイドバーにログアウトとプロフィール変更のリンクを付けたい
・ユーザーの新規登録ができるようにしたいけど、自動認証ではなく一旦管理者が確認して承認したい
についてはまた別途、書きたいと思います(^^)/
[amazon_searchlink search=” Webマーケティング”]
コメント