ログインした人だけが見ることのできるWEBサイトをプラグイン無しで作る方法

2019年6月28日2019年11月19日

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

会員制サイトなどログインした人だけが見ることのできるWEBサイトを作る、しかも簡単に！という内容でホームページを作ることになりました。以前はプラグインで簡単に実現できていたのですが、現在そのプラグインが公開されていないようでしたので、自分でカスタマイズして同じようなことを実現してみました。

記事をざっと見る

会員制サイトに関するプラグイン

以前ご紹介した

プラグイン無しで会員制サイトにする方法：仕様編

ということで、今回はカスタマイズだけで会員用のプラグイン無しで会員制サイトにする方法を考えてみました。

仕様はこのようなものです

・トップページの他、すべてのページはログインした人だけに見える
・ログインしていない人がトップページの他、すべてのページのurlから見ようとしたとき、ログインページが表示される
・管理者ユーザーはログイン後ダッシュボードに遷移する
・管理者ユーザー以外はログイン後、トップページに遷移する
・管理者がその他のユーザーをダッシュボードから追加する

ということが実現できるものを実現するには？ということをWEB検索をして見つけたコードで実現してみました。

プラグイン無しで会員制サイトにする方法：表示制御部分

カスタマイズですがPHPコードを追加します。追加する場所はお好みで「子テーマのfunctions.php」もしくは「Code Snippetsによる追加」のどちらかで行えます。

自分としては最近はもうCode Snippetsばかりで追加をしているのでこちらをお勧めしたいと思います。Code Snippetsについては、

ログインしていない場合はログイン画面に遷移する

ログインしていない場合はログイン画面に遷移する、を実現するためのコードはこちらを参考にさせていただきました。

WordPressログインしていないとログインページにリダイレクトさせる方法：やっこの小技

コードは

// headにタグを追加
add_action( 'wp_head', 'add_login_to_head',1);
function add_login_to_head() {
    // ログインしてなければログインページにリダイレクト
    if (is_user_logged_in()){
    } else {
        wp_redirect('/wp-login.php');
    }
}

このようにしてみました。ほぼ参考にさせていただいたページと同じですが、add_actionでコードが追加できるようにしてあります。

Code Snippetsインポート用のファイル（ログインを強制する）

コードでは　is_user_logged_in　で　else(ログインしていない）　状態の時に、ログインページにリダイレクトしています。

管理者以外はダッシュボードに入れないようにする、アドミンバー非表示

管理者以外はダッシュボードには入れないようにする　というカスタマイズ部分はどの記事を参考にしたのかが判然としなくなってしまったのですが、functions名で検索した内容とだいぶ変えてしまってるので元記事のリンクは張ることができませんでした。

とりあえず、

add_action( 'auth_redirect', 'subscriber_go_to_home' );
function subscriber_go_to_home( $user_id ) {
    $user = get_userdata( $user_id );
    
    $dashboard = false;
    if (in_array('administrator', $user->roles)) {
        $dashboard = true;
    }
    if ($dashboard == false) {
        wp_redirect( get_home_url() );
        exit();
    }
}

このようなコードを書いてみました。

if (in_array('administrator', $user->roles)) {

ユーザーが管理者であるかどうかを判定して、管理者でないときにトップページにリダイレクトしています。

WordPressではログインした状態の人にはアドミンバー（画面一番上に表示される黒い帯状のバー）が表示されますが、これを管理者以外は非表示にするコードは

管理者以外のアドミンバーを非表示にする方法：リモードメモ

こちらをそのまま使わせていただきました。

function my_function_admin_bar($content) {
  return ( current_user_can("administrator") ) ? $content : false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

show_admin_barというフィルターで判定用のfunction　my_function_admin_barを呼び出して、管理者でなければfalseを返すことにより、アドミンバーの非表示を実現しています。

これら2箇所のCode Snippetsインポート用のファイル（管理者以外はダッシュボードに入れないようにするアドミンバー非表示）

ログアウトの実装とログイン画面のカスタマイズ

今までのコードを追加すると、仕様的にはこの内容が実現できます。ただもうちょっと凝ったものを作りたいという場合にはログアウトをメニューなどに実装したり、ログイン画面のカスタマイズをすることもできます。

ログアウトの実装

ログアウトの実装は意外とややこしいです。ログインページには単にurlを書けばいけるのですが、ログアウトはノンスというランダムなキーが必要になります。ということでちょっと工夫が必要になります。ショートコードを使ってボタンなどでログアウトを実現するだけでしたら、

/* ログアウトリンクを返す */
function usort_show_logout($atts) {
    extract( shortcode_atts( array(
      'linkname' => '',
    ), $atts ) );
    if (!$linkname){
        $linkname = 'ログアウト';
    }
    $string = '<a href="'.wp_logout_url().'">%s</a>';
    return sprintf($string, $linkname);
}
/* ショートコードを追加する */
add_shortcode('usort_show_logout', 'usort_show_logout');

このようにすればショートコードで表示することができるのですが、メニューに入れたい、という時にはショートコードは使えません。色々工夫してみたのですが、今時点で解決できていません。

ということでプラグインで実現できることがわかりました。

詳しく書くと長くなるので今回は省略しますが、このプラグインをインストールして有効化すると、

ダッシュボード 外観＞メニュー

に

Login / Logout / Register linksというものが追加されます。クリックすると、

Log In, Log Out, Log In | Log Out, Register, Profileが選べるようになります。ここから簡単にログイン、ログアウト、ログインもしくはログアウト（ログイン状態によって違う）、登録、プロフィール編集へのリンクが追加できるようです。

ログアウトの実装は

Log Outにチェックをして、Add to Menuをクリック

このようなメニューが追加されるので、

ナビゲーションラベルをログアウトと書き換えて

メニューを保存をクリックすれば、

メニューにログアウトを付けることができます。

ログイン画面をカスタマイズする

ログイン画面なのですが通常は、

こんな感じの表示です。

マークをクリックするとWordPress日本公式サイトに遷移します。

せっかくメンバー専用のWEBサイトを作ったのでロゴなどを変更したいと思います。

ロゴは320×100ピクセルで作ったものをメディアにアップロードします。

アップロードしたら、リンクをコピー欄のurlをコピーします。このurlを使って、

function usort_login_logo_image() {
    echo '<style type="text/css">
            #login h1 a {
                background: url(http://lmembersonly/wp-content/uploads/2019/06/membersonly_logo.png) no-repeat !important;width:320px;height:100px;
            }
    </style>';
}
add_action('login_head', 'usort_login_logo_image');

function usort_login_logo_url() {
    return get_bloginfo('url');
}
add_filter('login_headerurl', 'usort_login_logo_url');

このようなコードを書きました。usort_login_logo_image　というfunctionで、ロゴ画像を先ほどコピーしたログイン用画像のurlを指定しています。usort_login_logo_url　というfunction でロゴをクリックしたときのurlを自分のWEBサイトのurlに変更しました。

このコードは画像のurlがそれぞれ異なるため、インポート用のファイルは作りませんがこの内容をコピペして画像部分を自分のアップロードした画像にすれば、オリジナルのログイン画面を作ることができます。

まとめ：プラグインを使わなくてもできる！？

と、このように途中途中でプラグインを使いつつご説明しました。コードを入れるにはCode Snippetsを使うと簡単なのでそのような説明も入れましたが、使わなくてもコードを入れることはできます。また、ログアウトについてもボタンであれば例えばウィジェットにメタ情報ウィジェットを表示するようにすればログアウトすることができます。

ということでプラグインを使わなくてもできるし、プラグインを使ってもできるという方法についてご説明しました。

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @u_sort

あなたのシェアが励みになります！

URLをコピーしました！

URLをコピーしました！