最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

ワードプレス

2022-05-29

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成!

今回はログインフォーム、限定コンテンツについて調べました!
やりたいことは下記になります。

  • ・コンテンツの最初の数行を少し表示させて、ログインすると閲覧できる会員限定コンテンツページを作りたい
  • タグ以降を限定コンテンツにする
  • ・WordPressのユーザー追加で、購読者を登録。このログイン情報を使用
  • ・ログインフォームのソースコードを見てもWordPressのログインURLが分からないようにしたい
  • ・ログアウトしてもWordPressのログイン画面に遷移させない
  • ・プラグインは無し
  • ・ダッシュボードへのアクセスはできないように。ツールバーは表示させない

※こちらでご紹介するフォーム部分は簡易版です。サイトに合わせて改善・検証が必要です※

①WordPressのダッシュボード「ユーザー」で、購読者を登録

「購読者」を追加し、会員にログインしてもらうユーザー名とパスワードを作ります。

②ページのテンプレートを作成

限定コンテンツページの属性に設定するためのテンプレートを作ります。

single.phpを複製し、ファイル名をsingle-exclusive.phpで作成。(こちらは一例になります。)
テンプレート用のコードをこんな感じで入れました。

<?php
/**
 * Template Name: 限定コンテンツ
 * Template Post Type: post,page
 */
get_header(); ?>

 

③ログインフォームの設置

引き続き、先ほど作成したテンプレートを編集していきます。
ログインしているかどうかで表示を変える条件分岐、moreタグの前の最初の数行の表示、ログインフォームの設置を行います。
まずは、「the_content();」の部分を編集します。

<?php the_content(); ?>

↓ 下記のコードと差し替えます。

<?php if ( is_user_logged_in() ) : ?>//ログインユーザーの場合
    <?php the_content(); ?>//コンテンツすべて表示
<?php else : ?>//ログインユーザー以外の場合下記のフォームを出す

//moreタグより前の本文表示
<?php 
global $more;    // グローバル変数 $more
$more = 0;       // moreタグより前の本文表示
the_content("");//リンクボタン出さない
?>
   
<p>コンテンツの閲覧にはログインが必要です。ユーザー名とパスワードを入力してください。</p>
<form method="post" action="">
<label for="username">ユーザー名:</label>
<input type="text" name="log" id="username" value="" required>
<label for="login_password">パスワード:</label>
<input type="password" name="pwd" id="login_password" value="" required>
<p><?php $login = $_GET['login']; if ( $login == 'failed' ) { ?>ユーザー名またはパスワードが間違っています。<?php } ?></p>

<input type="submit" value="ログイン" >
<?php wp_nonce_field(); ?>
</form>

<?php endif; ?>

こちらを参考にさせていただきました。

 参考(moreタグより前の本文表示)

テンプレートタグ/the content|Codex 日本語版

限定ページにログインフォームがある今回のような場合、actionを空にしたため、フォームを動作させるためにこちらの設定が必要です。下記コードを先ほど編集していたテンプレートに追加します。

下記を入れることでフォーム入力後に送信ボタンをクリックすると入力値を持ちながらログインURLでログイン、ログインした状態で元のページに戻ります。

<?php
if(isset($_POST["log"], $_POST["pwd"])) {
  header('Location: ' . wp_login_url(). '?redirect_to='.esc_attr($_SERVER['REQUEST_URI']), true, 307);
}
?>

 

④入力ミスで遷移させない

入力を間違えると、ログインURLに遷移してしまうので、下記コードをfunction.phpに追加します。

//入力ミスでlogin.php にリダイレクトさせたくない場合
add_action( 'wp_login_failed', 'frontend_login_fail' );
function frontend_login_fail( $username ) {
   $referrer = $_SERVER['HTTP_REFERER'];
   if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
      wp_redirect( $referrer . '?login=failed' );
      exit;
   }
}

こちらを参考にさせていただきました。本当にありがとうございます。

⑤購読者のツールバーの非表示、ダッシュボードへのアクセス禁止

このままではWPダッシュボードにアクセスされてしまうので、function.phpに追記が必要です。
こちらを参考に、ツールバー非表示、ダッシュボードへアクセスできないように設定しました。

⑥投稿ページの編集

限定ページにしたい投稿ページの編集画面を開き、属性を作成したテンプレートに設定します。
また、限定にするコンテンツの前にmoreタグを入れます。

テキストテキストテキスト(はじめから表示させる本文)
<!--more-->
テキストテキストテキスト(ログインしてから表示させる本文)

 

⑦ログアウトボタン作成

ツールバーのログアウトリンクが使えなくなったので、ログアウトボタンを設置します。

例えばこちらを設置すると、ログインURLが知られてしまいセキュリティ的によくないと思います。

ログインURLが知られてしまうログインボタン
<a href="<?php echo wp_logout_url(); ?>">ログアウト</a>

 

そこで、まず固定ページで「logout」ページに遷移するボタンを作ります。
そこからWordPressログアウトURLへのリダイレクトでログアウトさせたいと思います。

ログアウトボタンはログインユーザーにのみ表示させます。

<?php if ( is_user_logged_in() ) : ?>
<div class="link-btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>logout">ログアウトする</a></div>
<?php else : ?>
<?php endif; ?>

 

続いて「ログアウトしました」と表示させる固定ページ「page-logout」(例)を作り、ログアウト後にそちらにリダイレクトさせます。

固定ページ「page-logout」にはリダイレクトさせるための下記phpコードを設置します。

<?php
header('Location: ' . wp_logout_url(get_permalink()), true, 301);
?>

 

「本当にログアウトしますか?」の表示を無くすため、function.phpに下記コードを追記します。

//「本当にログアウトしますか?」を挟まずログアウト
add_action('check_admin_referer', 'logout_without_confirm', 10, 2);
function logout_without_confirm($action, $result)
{
    /**
     * Allow logout without confirmation
     */
    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : './page-logout';
        $location = str_replace('&amp;', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}

「./page-logout’」この部分にリダイレクトさせたいページのURLを入れます。

こちらを参考にさせていただきました。本当にありがとうございます。

セキュリティおすすめのプラグイン

プラグイン「SiteGuard WP Plugin」を入れてログインURLを変更するなど、セキュリティ対策が大切です。

※こちらでご紹介したフォーム部分は簡易版です。サイトに合わせて改善・検証が必要です※

改善する部分はあると思いますが、おおまかな流れは押さえられたのではないかと思います。ログアウトボタン等もっと効率的な方法があるかも?また調べて分かったことがあったら更新します!
セキュリティが脆弱と言われるWordPress。特にログインフォームや限定サイトなどの構築にはいつも以上に注意したいですね。セキュリティを考えるといろいろ工程が増えていきますが、何かあったら怖いのでできることはやって少しでもリスクを減らしたいです。

-ワードプレス

関連記事

特定のページだけに表示させたい! よく使う条件分岐

phpで使える便利な条件分岐 「トップページだけに表示させたい」「一覧ページだけ変更したい」 そんな時便利なのが条件分岐です。 トップページとその他 <?php if ( is_home() | …

WordPressテーマ「lightning」カスタム投稿

「lightning」のカスタム投稿 WordPress無料テーマで人気の「lightning」。 サポートの終了しているテーマ「BizVektor」から後継の「lightning」に移行したという方 …

カテゴリーなどの一覧ページに並び順を変更できるボタンをつけたい

投稿記事一覧をソートするボタンを作りたい! よくネットショップで見かける、値段の安い順、高い順、人気順など見たい順番を選べるボタン。 WordPressのカテゴリー一覧ページなどに設置できれば、ユーザ …

固定ページでphpを使いたい

例えばトップページを固定ページで作成したとき、お知らせの新着一覧を固定ページ上で好きな位置に配置したいな、と考えたことはありませんか?

MW WP Formセレクトボックスに特定カテゴリーの記事タイトルを自動で表示させたい!

フォームセレクトボックスの選択肢をカテゴリーと連動 フォームの質問事項が頻繁に変わるとき、例えば商品が変わる度、注文フォームをいちいち修正するのは慣れていないと大変です。 新しい記事をアップしたら自動 …