【Cocoonカスタマイズ】WordPressのパスワード保護ページをカスタマイズする方法

はじめに

投稿や固定ページを「パスワード保護」に設定することで、特定のユーザーにのみコンテンツを公開することができます。

しかし、標準のパスワード入力フォームやタイトル表示にはカスタマイズの余地があり、サイトのデザイに合わせて調整することが望ましい場合もあります（図1参照）。

この記事では、以下の方法について説明します。

パスワード入力フォームのデザイン変更
パスワード保護された投稿タイトルの表記変更
パスワード保存期間の変更

パスワード入力フォームのデザイン変更

パスワード入力フォームのデザイン変更します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_filter('the_password_form', function () {
  $action_url = esc_url(site_url('wp-login.php?action=postpass', 'login_post'));

  ob_start();
  ?>
  <div class="post-password">
    <p class="post-password__description">以下にパスワードを入力すると閲覧できます。</p>
    <form action="<?php echo $action_url; ?>" class="post-password__form post-password-form" method="post">
      <input name="post_password" type="password" class="post-password__input" spellcheck="false" size="20" placeholder="パスワードを入力">
      <input type="submit" name="Submit" class="post-password__submit" value="送信する">
    </form>
  </div>
  <?php
  return ob_get_clean();
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.post-password__form {
  display: flex;

  input[type='submit'] {
    background-color: #333;
    border: 0;
    color: #fff;
    flex: 0;
    margin-left: 10px;
  }
}

パスワード保存期間の変更

パスワードを一度入力すると、クッキー（wp-postpass_ハッシュ）が発行され、認証状態が一定期間保持されます。デフォルトでは、このクッキーは10日間有効です。

実装手順

以下のコードをfunctions.phpに追加します。
例えば、パスワードの有効期限を5日間に設定します。

add_filter('post_password_expires', function ($expires) {
  return time() + 5 * DAY_IN_SECONDS;
});