WordPressのパスワード保護の使い方やカスタマイズ方法を徹底解説(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回は、WordPressのパスワード保護の使い方やカスタマイズ方法を徹底解説していきたいと思います。

パスワード保護とは、ページの本文を隠しておき、パスワード入力フォームを表示させて、パスワードを入力したユーザーのみページを閲覧できる、WordPressで標準で提供されている機能のことを言います。

この機能を使用することによって、例えばキャンペーンやイベントなどのLP（ランディングページ）などで、会員ユーザーへパスワードを配布して閲覧できるようにしたり、会員限定コンテンツの公開、有料記事を公開する際など様々な場面で役に立つかと思います。

当記事では、パスワード保護の使い方から高度なカスタマイズ方法まで解説しておりますので、よろしければお仕事などでご活用ください。

パスワード保護とは

WordPressのパスワード保護とは、WordPressが標準で提供している、投稿や固定ページを閲覧するためにパスワードの入力を必要とさせることができる機能のことを言います。

これにより、パスワードを知っている特定のユーザーのみにコンテンツを公開したり、機密情報を制限付きで共有したりすることが可能になります。

WordPressでは、投稿や固定ページごとにパスワードを設定することができ、例えば配布したパスワードを知っているユーザーだけがアクセスできるようになります。

特別なプラグインを使用しなくても、WordPressの標準機能として簡単に利用できるため、手軽にコンテンツを保護したい場合に非常に便利です。

パスワード保護の使い方

パスワード保護の使い方は非常に簡単です。

まずはパスワード保護させたい投稿もしくは固定ページのページ編集画面を開きます。

開いたら、画面右にある設定パネルの「ステータス」をクリックします。

「ステータスと公開範囲」のポップアップが表示されるので、「パスワード保護」にチェックを入れます。

すると、「パスワード」入力欄が表示されるので、ご自身の任意のパスワードを入力します。

パスワードの入力とタイトル、本文の入力など必要な入力が完了したら、公開ます。

公開後、ページをご確認いただくとタイトルの頭に「保護中：」が追加されて、本文の箇所には本文が隠れた状態でパスワード保護のパスワード入力フォームが表示されているのが確認できるかと思います。

試しに先ほど設定いただいたパスワードを入力して送信ボタンをクリックしてみましょう。

すると、本文が閲覧できる状態になるのが確認できたかと思います。

これでパスワード保護の設定は完了です。お疲れ様でした！

パスワード保護の仕様・注意点

パスワード保護機能の仕様・注意点をここで解説しておきたいと思います。

内容としては以下になります。

• 投稿・固定ページ共通で、ページごとに同一のパスワードを設定できない（厳密には同一のパスワードを設定自体はできるが、設定したページはパスワード保護されず表示されてしまう）
• パスワードはブラウザにCookieが保存されて閲覧後10日間有効になる

それぞれ解説いたします。

ページごとに同一のパスワードを設定できない

WordPressのパスワード保護機能では、投稿・固定ページ共通でページごとに異なるパスワードを設定する必要があります。

つまり、投稿ページAと投稿ページBでパスワードを重複することも、投稿ページAと固定ページAでパスワードを重複することもできません！と言うことです。

厳密には同じパスワードを設定してページを保存できてしまうのですが、設定したページはパスワード保護が適用されず、そのまま表示されてしまうため注意が必要です。

パスワードの有効期限

パスワードを入力すると、その情報はブラウザのCookieに保存され、閲覧後10日間有効になります。

そのため、一度パスワードを入力したユーザーは、同じデバイス・ブラウザを使用している限り、10日間は再入力不要でページを閲覧できます。

パスワード保護のカスタマイズ方法

それでは、パスワード保護のカスタマイズ方法について解説いたします。

それぞれお仕事などで実用できそうなサンプルコードを掲載しておりますので、よろしければご活用ください。

ここでの解説では、無料のWordPressテーマ「Cocoon」を前提にしておりますが、他のテーマやご自身で開発されているテーマなど、どのようなテーマでも問題ないのでご安心ください。

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

パスワード入力フォームのデザイン変更する場合は、以下のコードをfunctions.phpにコピー＆ペースしてください。

<?php
/**
 * カスタムパスワード保護フォーム
 * WordPressのデフォルトのパスワード保護ページのフォームをカスタマイズします。
 */
function custom_protected_post_password_form( $output, $post ) {
    
    // フォームの説明文
    $description = '以下にパスワードを入力すると続きをご覧いただけます。';

    // パスワード入力欄のプレースホルダー
    $placeholder = 'パスワードを入力';

    // 送信ボタンのラベル
    $button_label = '送信する';

    // フォームのHTMLを返す
    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>';
}

// WordPressのフィルターフックに関数を適用
add_filter( 'the_password_form', 'custom_protected_post_password_form', 10, 2 );

ペーストが完了したら、パスワード保護をしているページをご確認ください。

元々下図のようにパスワード保護フォームが表示されておりましたが…

カスタマイズ後は下図のように表示されていることと思います。

説明文やフォームのプレースフォルダ、ボタンの文字などカスタマイズできているのがわかるかと思います。

フォームやテキストをカスタマイズできたら、次はフォームをデザインしてみましょう。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
/**
 * インライン CSS を適用
 */
function add_custom_inline_css() {
    // 追加する CSS
    $custom_css = "
        .post-password-form {
            display: flex;
        }
        input[name='post_password'] {
            flex: 1; /* 自動で広がる */
        }
        input[type='submit'] {
            flex: 0;
            flex-shrink: 0; /* ボタンが縮小されないように */
            background-color: #0073aa!important;
            color: #fff!important;
        }
    ";

    // WordPressのデフォルトスタイル（style.css）が読み込まれた後に追加
    wp_add_inline_style('wp-block-library', $custom_css);
}

// wp_enqueue_scripts フックでスタイルを追加
add_action('wp_enqueue_scripts', 'add_custom_inline_css');

ペーストが完了したら、再度ページをご確認ください。

下図のようにレイアウトが調整された形で見た目がカスタマイズできていることと思います。

特定の箇所をパスワード保護の対象にする

特定の箇所をパスワード保護の対象にする場合は、以下のコードをPHPファイルのパスワード保護したいコンテンツがある箇所にコピー＆ペーストしてください。

<?php if ( !post_password_required( $post ) ) : ?>
    // 正しいパスワードが入力された後、この部分の内容が表示されます。
<?php endif; ?>

ペーストできたら、if文の中のコメントアウトの部分に、パスワード保護時に隠しておきたい内容を書いていただければ利用することができます。

記事タイトルにある「保護中：」を削除

記事タイトルにある「保護中：」を削除する場合は、以下のコードをfunctions.phpにコピー＆ペースしてください。

<?php
/**
 * パスワード保護された投稿のタイトル表示をカスタマイズ
 * デフォルトでは「保護中: 記事タイトル」と表示されるが、「保護中:」部分を変更
 */
function custom_protected_title_format( $prepend, $post ) {
    return '%s'; // プレフィックスを削除し、元のタイトルのみ表示する
}
add_filter( 'protected_title_format', 'custom_protected_title_format', 10, 2 );

ペーストが完了したら、パスワード保護を設定したページをご確認ください。

元々下図のようにタイトルの手前で「保護中：」が表示されておりましたが…

下図のように、「保護中：」が非表示になっていることと思います。

下図のように、記事一覧などでも「保護中：」が非表示にすることができております。

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

パスワード保護の有効期限の変更する場合は、以下のコードをfunctions.phpにコピー＆ペースしてください。

<?php
/**
 * パスワード保護の有効期限を変更
 * デフォルトではパスワードの保存期間は10日間だが、これを5日間に変更
 */
function custom_post_password_expiration( $expires ) {
    return time() + 5 * DAY_IN_SECONDS; // 現在の時刻から5日後まで有効
}
add_filter( 'post_password_expires', 'custom_post_password_expiration' );

上記をペースト後、パスワードの有効期限は現在の時刻から5日後までで有効になります。

WordPressの通常のデフォルトでは、パスワードの有効期限（保存期間）は10日間ですが、ここでのカスタマイズを行うことによって5日間に変更することができると言うわけです。

ちなみにコード中にDAY_IN_SECONDS定数があったかと思いますが、以下の表示にあるいずれかの定数に変更していただくと、有効期限をカスタマイズできます。

例えば、コードのDAY_IN_SECONDS定数をHOUR_IN_SECONDS定数に変更していただくと、5日間から5時間に変更することが可能です。

パスワード保護した記事のみ一覧で表示

パスワード保護した記事のみ一覧で表示にする場合は、以下のコードを表示したPHPファイルの箇所にコピー＆ペースしてください。

<?php
// パスワード保護された記事のみを取得するサブループ
$args = array(
    'post_type'      => 'post',       // 投稿タイプ（カスタム投稿タイプなら変更）
    'posts_per_page' => 10,           // 表示する記事数
    'post_status'    => 'publish',    // 公開済み記事のみ取得
    'has_password'   => true,         // パスワード保護された記事のみ取得
);

$protected_query = new WP_Query($args);

if ($protected_query->have_posts()) : ?>
    <ul>
        <?php while ($protected_query->have_posts()) : $protected_query->the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; ?>
    </ul>
    <?php wp_reset_postdata(); // サブループ後にリセット ?>
<?php else : ?>
    <p>パスワード保護された記事はありません。</p>
<?php endif; ?>

ペーストしていただき、ページ上でご確認いただくと下図のように表示されているかと思います。

もしサムネイル画像や抜粋文、カテゴリーなどを表示したい場合は通常通り実装していただく形で問題ありません。

と言うのも、コード自体まったく複雑な部分は無く、単にクエリパタメーターに「’has_password’ => true,」を追加しているだけなので、通常のWordPressのサブループになるからです。

WordPressループについては以下の記事で詳しく解説しておりますので、よろしければご確認ください。

パスワード保護したページを記事一覧から非表示

パスワード保護したページを記事一覧から非表示にする場合は、以下のコードをfunctions.phpにコピー＆ペースしてください。

<?php
/**
 * パスワード保護された投稿を除外する WHERE 句を追加
 */
function exclude_protected_posts_where($where) {
	global $wpdb;
	return $where .= " AND {$wpdb->posts}.post_password = '' ";
}
/**
 * メインクエリでパスワード保護された投稿を除外
 */
function exclude_protected_posts($query) {
	if ( !is_single() && !is_page() && !is_admin() ) {
		add_filter('posts_where', 'exclude_protected_posts_where');
	}
}
// クエリが実行される前に適用
add_action('pre_get_posts', 'exclude_protected_posts');

ペーストが完了したら、記事一覧ページをご確認ください。

元々下図のようにパスワード保護された記事が一覧に表示されておりましたが…

下図のように、パスワード保護された記事のみ一覧から表示されなくなったのが確認できたかと思います。

まとめ

今回は、WordPressのパスワード保護機能の使い方やカスタマイズ方法について解説しました。

パスワード保護を活用すれば、特定のユーザーのみにコンテンツを公開したり、会員限定ページや有料記事の管理を簡単に行うことができます。キャンペーンページやイベントLPなどでも役立つため、シーンに応じて柔軟に活用してみてください。

本記事が、パスワード保護機能の導入やカスタマイズの参考になれば幸いです。ぜひお仕事やサイト運営にお役立てください！