WordPressでは記事を公開する際に、公開状態をパスワード保護に設定すると、パスワードを知っている人のみが閲覧できる「保護ページ」という機能があります。保護ページを使うことで、コンテンツを限定した人だけに公開することができます。

保護ページはよく使うかと言うと、あまり使われない機能だと思います。ただ、会員限定でコンテンツを配信したい時、手軽に作成できるという点ではとても便利な機能でしょう。LPの登録ユーザーに対して、限定のページを用意するときにも利用できます。

ただ、WordPressデフォルトの保護ページは、タイトルに「保護中」と表示されたりテキストの変更ができないなど不便な点が多々あります、そこで、WordPressの保護ページをカスタマイズし、自由にテキストなどを変更する方法を紹介いたします。

TCDユーザー様へ:
後述しますが、TCDテーマでは保護ページのカスタマイズ機能が最初から実装されています。ですので、TCDユーザーはfunction.phpのカスタマイズは不要です。

保護ページとは?

保護ページ

デフォルトテーマで作成した保護ページ例

保護ページとは、特定の投稿ページに対してパスワードを設定することで、コンテンツの閲覧を制限する機能で、WordPressに最初から搭載されているものです。

ただ、上のスクショの通り、初期状態では大変不格好で、実用性は低いです。そのため、実際に利用する際には後述する工夫が必要でしょう。

保護ページの活用シーン

保護ページは、投稿にパスワードをかけるだけで作成できるので、便利な機能です。会員向けの限定情報を届けるには最適な機能と言えます。

  1. 会員限定向けのコンテンツ
  2. デジタルデータの配布ページ
  3. LPで登録したユーザー限定で表示するページ
  4. イベント参加者向けの案内ページ

投稿記事をパスワード保護する方法

「投稿ページ」⇒「新規投稿」より記事を作成します。
通常であればすぐに「公開」ボタンを押す所ですが、パスワード保護をかけるには、「公開状態」の編集を選択ください。すると下記の画像のようなパスワード入力画面が表示されますので、設定し、公開します。これでパスワードがかかった記事ができます。

パスワード保護の設定

以上で保護ページの作成が完了します。

保護ページをカスタマイズする方法

パスワード保護した記事は以下のフォーマットで表示されますが、functions.phpを編集することでカスタマイズ可能です。

  • タイトルの前に「保護中:」の文言が追加
  • 定型文「このコンテンツは〜〜パスワードを入力してください。」が表示
  • パスワード入力欄が表示
  • デフォルト
  • カスタマイズ
保護ページ

今回は上記のカスタマイズ例のような見た目に変更する方法をご紹介します。順番に解説していきます。

  1. タイトル「保護中:」の文言を削除
  2. 定型文(フォーム)の変更
  3. フォームスタイルの調整
  4. パスワードの有効期限の変更
functions.phpは記述を間違ってエラーを起こすと画面が真っ白になることがありますので、カスタマイズする時はバックアップをとることを強くおすすめします。

タイトル「保護中:」の文言を削除

パスワード保護ページのタイトルは、フィルターフック「protected_title_format」を利用して変更できます。以下をfunctions.phpに記入してください。(%sは記事タイトルとして反映されます。)

// パスワード保護中の記事タイトルを変更
add_filter( 'protected_title_format', function( $prepend, $post ){
  return '%s';
}, 10, 2 );

これで「保護中:」の文言が消えるはずです。

定型文(フォーム)の変更

次に「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」のテキストを編集していきます。

残念ながら、この文章だけを直接書き換えるフックが用意されていないため、パスワードフォームをそのまま書き換える必要があるんですね。

そこで今回利用するフィルターフックは、「the_password_form」です。以下をfunctions.phpに記入してください。

// 保護ページの説明文を変更
add_filter( 'the_password_form', function( $output, $post ){

  $description = '以下にパスワードを入力すると続きをご覧いただけます。';
  $placeholder = 'パスワードを入力';
  $button_label = '送信する';

  return
    '<p>' . esc_html( $description ) . '</p>'.
    '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">' .
      '<input name="post_password" type="password" spellcheck="false" size="20" placeholder="' . esc_attr( $placeholder ) . '" />' .
      '<input type="submit" name="Submit" value="' . esc_attr( $button_label ) . '" />' .
    '</form>';

}, 10, 2 );

今回は、元のパスワードフォームから最低限必要な要素だけを残したシンプルな構造に変更しました。この内容がパスワード保護中の本文にそのまま反映されますので、こだわりたい方はこちらを工夫してみてください。

なお、formタグの中身を不用意に書き換えると正常に動作しなくなる可能性があるのでご注意ください。

フォームスタイルの調整

パスワード入力フォームには、特にスタイルが適用されておりません。独自テーマの場合は、自分でフォームのスタイルを定義する必要があります。

以下は、カスタマイズ例に利用したサンプルスタイルですので、ぜひ参考にしてください。

.post-password-form {
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: 50px;
}
.post-password-form input[type="password"] {
  border:1px solid #ddd;
  padding: 0 1em;
}
.post-password-form input[type="submit"] {
  border:none;
  color:#ffffff;
  background:#000000;
}

パスワードの有効期限の変更

最後におまけとして、パスワードの有効期限を変更する方法についてご紹介します。

WordPressでは、パスワードを入力すると10日間ブラウザにCookieが保存されます。一度パスワードを入力すれば、10日間はパスワードを入力せずとも閲覧し放題なわけです。(10日経過すると再度入力が必要)

この保存期間もフィルターフック「post_password_expires」を利用することで簡単に変更可能です。functions.phpに以下を追加してください。

// 保存期間を5日間に変更
add_filter('post_password_expires', function( $expires ){
  return time() + 5 * DAY_IN_SECONDS;
});

上記で使われている「DAY_IN_SECONDS」は、WordPressの定数です。1日分の秒数(86400秒)が定義されているため、「5 * DAY_IN_SECONDS」で5日間を表すことができるんですね。

その他の定数も以下に記載しますので、ぜひ参考にしてください。

MINUTE_IN_SECONDS 1分
HOUR_IN_SECONDS 1時間
DAY_IN_SECONDS 1日
WEEK_IN_SECONDS 1週間
MONTH_IN_SECONDS 1ヶ月
YEAR_IN_SECONDS 1年

TCDテーマの保護ページの使い方

パスワード保護例

すべてのTCDテーマには、保護ページのカスタマイズ機能がございます。以下はその表示例です。

保護ページ例

タイトルに「保護中:」という文言は表示されません。
「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」という文言もTCDテーマオプションから変更が可能です。

使い方は簡単で、次の2ステップです。

  1. 誘導コンテンツの作成
  2. エディタの設定

1. 誘導コンテンツの作成

まずは、誘導コンテンツ=パスワード入力前に表示する内容を設定します。

TCDテーマ > 保護ページの設定で、誘導コンテンツを作成します。

TCDテーマオプション - パスワード保護

詳しい設定項目は以下で解説しています。

  • 設定画面
  • 実際の見え方
保護ページの設定1
保護ページの設定1(フロント)

コンテンツの名前

コンテンツの名前は、管理用の名前です。サイト上には表示されません。サイト管理者がわかるように何のための誘導文か書いておくといいです(例:メルマガ会員登録用)。

会員登録への誘導文

誘導文を入力します。WordPressのエディタで作成できるため、ボタンなどのクイックタグもご利用いただけます。会員登録することで、ユーザーにどんなメリットがあるのか明確に書いておくといいでしょう。

パスワード入力欄

パスワード入力フォーム内に表示される文言と、パスワード送信ボタンのラベルを設定します。

2. エディタの設定

次に、パスワード入力後に表示する内容を設定します。

パスワード保護したいページの編集画面を開き、記事本文に限定コンテンツを設置します。

  • 設定画面
  • 実際の見え方
パスワード入力後に表示する画面の設定UI
パスワード入力後に表示する画面のサンプル

記事タイトル

記事のタイトルを入力します。これらはパスワード入力前の画面でも表示されます。

記事本文

記事本文には、パスワードを入力したユーザーだけが閲覧できる限定コンテンツを設置します。

スワード保護を有効化する

ページの公開状態を「パスワード保護」に設定して、閲覧制限を行います。ここで任意のパスワードを入力して、「公開(更新)」を押します。

会員登録への誘導コンテンツを選択する

先ほど設定した誘導コンテンツの「コンテンツの名前」がエディタ内に表示されますので、表示するコンテンツを選択します。

YouTube動画解説はこちら

保護ページのカスタマイズ機能、及び会員向けページ作成機能については動画でも解説しておりますのでよろしければどうぞ。

また、以下の記事ではWordPress保護ページの実用的な使い方に触れていますので、ご興味ある方はどうぞ。

まとめ

WordPressの投稿をパスワード保護する方法とカスタマイズ方法を紹介しました。

  1. パスワード保護は特定のページのアクセス制限がかけられる。
  2. パスワードを知っている人にだけコンテンツを閲覧させられる。
  3. しかし、デフォルトの状態では不格好。
  4. TCDユーザー以外はカスタマイズが必要。
  5. TCDユーザーはカスタマイズ不要で使える。

ページは特定の人にみてもらいたい記事などには便利な機能ですが、少し不格好なのがネックでしたが、前述したカスタマイズを施したり、TCDであればそのままの状態で実用的な保護ページが作成可能です。

ちなみにパスワードで保護する場合というのは特定の人に見てもらいたいという場合と、記事を確認してもらいたいという場合があるかと思います。記事を確認してもらいたい場合等でしたら、プレビュー状態の記事をみることができるようになるプラグインなどがございますので、こちらも参考ください。

おすすめWordPressテーマ
REHUB

WordPress Theme REHUB

口コミレビューサイト用WordPressテーマ。日本地図、高度検索、レビュー機能搭載。

REHUB
デモ

Muum

WordPress Theme Muum

あなたのブログをアップデートするWordPressテーマ。

Muum
デモ