【WordPress】記事にパスワードをかける方法（「保護中」文字列を消す方法も紹介）

2024年7月10日

WordPress の標準機能で、特定の記事を保護すること（パスワードを入力した場合だけ閲覧可能）ができます。購入者向けの特典ページや、会員、サークルなどでの内部連絡記事などで使えますね。

ポイント

本記事では、

記事にパスワードをつける方法を解説します。

WordPress 標準機能で実現します。

「アフィリエイトの始め方とブログの作り方を完全解説！」はこちら

1 記事にパスワードをつけたサンプル
2 記事をパスワード保護する方法
3 まとめ

記事にパスワードをつけたサンプル

Point.

記事にパスワード
サンプル

記事にパスワードを設定すると、記事のURLにアクセスした場合に、閲覧前にパスワードの入力が必要になります。パスワードを正しく入力した場合のみ閲覧可能です。

記事にアクセスするとパスワードを入力する画面を表示します。

また、パスワード保護された記事には、一覧表示した場合に「保護中」の文字が自動で付与されます。抜粋分も表示されません。

パスワード保護された記事を一覧で表示した場合の例です。

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

Point.

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

■ パスワード保護する方法

記事を保護

記事編集画面で設定します。

「公開」をクリックする

「パスワード保護」を選択する
パスワードを入力する

設定完了です。

■ 「保護中」文字列を消す方法

保護中文字消す

パスワード保護されている記事は、記事タイトルの前に「保護中：」の文字が自動で突きます。「保護中：」文字を消す方法です。

funcstions.php にコードを追記します。

WordPress の管理画面から、「外観」→「テーマファイルエディター」を選択します。

「functions.php」を選択する
コードを追記する

追記するコードは以下です。

function my_function_remove_protected_title( $title ) {
    return '%s';
}
add_filter( 'protected_title_format', 'my_function_remove_protected_title' );

■ パスワード入力ページをデザインする

デザインする

パスワード入力ページをデザインすることができます。

パスワード入力ページをデザインしたサンプル

上記のデザインのように変えるコードです。funcstions.php にコードを追記します。

WordPress の管理画面から、「外観」→「テーマファイルエディター」を選択します。

「functions.php」を選択する
コードを追記する

追記するコードは以下です。

function my_function_custom_password_form() {
    global $post;
 
    $message_string = '〇〇専用ページです。パスワードを入力してください。';
    $pwbox_string = 'pwbox-999999';

    if ( !empty( $post->ID ) ) {
        $pwbox_string = 'pwbox-' . $post->ID;
    }

    $return_string = '<div style="text-align:center">
<form class="post-password-form" action="' . home_url() . '/wp-login.php?action=postpass" method="post"><p class="my-password-message">' .
    $message_string .
'</p><p><label for="' . $pwbox_string . '">' . 
    $password_string .
'<input name="post_password" class="my-password-box" id=' . $pwbox_string . ' type="password" spellcheck="false" placeholder="パスワードを入力"/></label>
<input class="my-password-button" type="submit" name="Submit" value="閲覧する" /></p>
</form>
</div>
		
<style>
.my-password-message{
    margin-bottom : 20px !important;
}
.my-password-box{
    width : 60% !important;
    border : 1px solid #808080 !important;
    border-radius : 20px !important;
    font-size : 18px !important;
    padding-right : 20px !important;
    padding-left : 20px !important;
    margin-right : 10px !important;
    margin-bottom : 20px !important;
}
.my-password-button{
    color : #ffffff !important;
    width : 120px !important;
    background-color : #5b9bd5 !important;
    border : 1px solid !important;
    border-radius : 20px !important;
    font-size : 18px !important;
    margin-bottom : 20px !important;
}
</style>';

    return $return_string;
}
add_filter( 'the_password_form', 'my_function_custom_password_form' );