【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズする方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPressのパスワード保護ページで記事の途中までパスワードなしでも読めるようにするカスタマイズ方法をご紹介します。

以下の方におすすめです。

カスタムフィールドは使わずにできるだけWordPressデフォルトの機能をカスタマイズして記事の途中までパスワードなしでも閲覧可能にしたい…!!!

僕自身、案件でそのように実装したい場面があった時に、「wp パスワード保護カスタマイズ」とか「wp パスワード保護一部表示」などと検索してくまなく探したけれどなかなか求めている解決策を書いている記事を見つけることができませんでした（泣）

最終的には、知り合いに相談して「まさにこれや…!!!」という神記事をシェアしてもらい対処できたので同様に頭を抱えて悩んでいる方の助けになれれば幸いです(^o^)

それでは見て参りましょう!!

目次 [非表示]

【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズしよう！
まとめ

【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズしよう！

デフォルトだとどうなるのか

まず、パスワード保護の設定をするとデフォルトでは、全文読めなくなってしまいます。

読めなくなる代わりに、WordPressが用意している「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」という文言とパスワード入力フォームが表示されるんですよね。

会員制サイトでは「この続きを読むには会員登録を…!!」のような感じで会員登録ページへの導線を敷くことが多く、記事途中まで閲覧可能にさせたい場合がほとんどですね笑

moreタグを駆使する

そこで今回、使用するのはデフォルトで備わっている「more」機能です。

記事編集画面からワンクリックで追加できる便利屋さんですね。

「MORE」以降をパスワード保護内容にしていきます

moreタグの手前とmoreタグ以降の内容を取得する方法

get_extended関数を駆使することで、「moreタグより前の本文」と「moreタグより後の本文」を取得することができます！

functions.php

// 基本
<?php get_extended( $post_content ) ?>

// 投稿の本文を変数に代入
<?php $content_arr = get_extended( $post_content ) ?>

// moreタグの前の本文を表示
<?php echo $content_arr['main']; ?>

// moreタグの後の本文を表示
<?php echo $content_arr['extend']; ?>

functions.phpにmoreより手前の内容を表示させるスクリプトを追記

上記の基本的な使用方法を踏まえて、実際に実装で使用したコードは以下になります。

※akatsukiさんのコード参考にしました！

functions.php

// moreタグの位置で「会員登録へのリンク」と「パスワード保護フォーム」を表示
function my_password_form( $output ) {
    $post = get_post( $post );
    $label = 'pwbox-' . ( empty($post->ID) ? rand() : $post->ID );
    /**
     * more部分
     */
    $more = '';
    /**
     * 「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」
     * に変換される部分を退避
     */
    $message = '<p>' . __( 'This content is password protected. To view it please enter your password below:' ) . '</p>';
    /**
     * moreタグ手前の本文を取得
     */
    $content_arr = get_extended($post->post_content);
    if ( ! empty( $content_arr['extended'] ) ) {
        $more    = apply_filters( 'the_content', $content_arr['main'] ) ;
        $message = '';
    }
    /**
     * パスワード保護フォームをカスタマイズ
     */
    $output = '<div class="PassArea">
                <p class="PassArea-Head">この記事の続きを読むには会員登録をお願いいたします。</p>
                <a href="#">会員登録はこちら</a>
                <form class="post_password PassArea-Form" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
                  <p class="PassArea-Form-Head">パスワードを入力してください。</p>
                  <input name="post_password" type="password" size="24" class="PassArea-Form-Input" /><input type="submit" name="Submit" class="PassArea-Form-Btn" value="' . esc_attr__("送信する") . '" />
                </form>
              </div>';

    return $more . $output;
}
add_filter( 'the_password_form', 'my_password_form' );