こんにちは。
ゆうや(@yuyaphotograph)です!
本記事では、WordPressのパスワード保護ページで記事の途中までパスワードなしでも読めるようにするカスタマイズ方法をご紹介します。
以下の方におすすめです。
カスタムフィールドは使わずにできるだけWordPressデフォルトの機能をカスタマイズして記事の途中までパスワードなしでも閲覧可能にしたい…!!!
僕自身、案件でそのように実装したい場面があった時に、「wp パスワード保護 カスタマイズ」とか「wp パスワード保護 一部表示」などと検索してくまなく探したけれどなかなか求めている解決策を書いている記事を見つけることができませんでした(泣)
最終的には、知り合いに相談して「まさにこれや…!!!」という神記事をシェアしてもらい対処できたので同様に頭を抱えて悩んでいる方の助けになれれば幸いです(^o^)
それでは見て参りましょう!!
目次
【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズしよう!
デフォルトだとどうなるのか
まず、パスワード保護の設定をするとデフォルトでは、全文読めなくなってしまいます。
読めなくなる代わりに、WordPressが用意している「このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。」という文言とパスワード入力フォームが表示されるんですよね。
会員制サイトでは「この続きを読むには会員登録を…!!」のような感じで会員登録ページへの導線を敷くことが多く、記事途中まで閲覧可能にさせたい場合がほとんどですね笑
moreタグを駆使する
そこで今回、使用するのはデフォルトで備わっている「more」機能です。
記事編集画面からワンクリックで追加できる便利屋さんですね。
moreタグの手前とmoreタグ以降の内容を取得する方法
get_extended関数を駆使することで、「moreタグより前の本文」と「moreタグより後の本文」を取得することができます!
// 基本
<?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さんのコード参考にしました!
// 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' );
パスワード保護フォームカスタマイズはよしなに(^o^)
参考記事
最高に感謝しています…!!! 命の恩人レベルに助けられました(泣)
参考 【WordPress】パスワード保護中ページにmoreより手前の情報を表示する方法akatsuki 参考 関数リファレンス/get extendedWordPress Codexまとめ
以上、WordPressのパスワード保護ページで記事の途中までパスワードなしでも読めるようにするカスタマイズ方法をご紹介しました。
実際の案件でもコピペで使用できると思いますので試してみてくださいまし!
最後までご高覧いただきありがとうございました!
パスワード保護ページのカスタマイズ記事
【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズする方法