なんと一年ぶりのWordPress関連記事です。
今回はタイトルの通り、functions.phpだけで記事の一部にパスワード制限をかけて見られないようにする方法、についてまとめます。
カスタムパスワード制限機能 概要
今回、追加したいと考えた機能の大まかな内容は↓こんな感じです。
●カスタムフィールドを使って記事毎に任意のパスワードを設定
●ショートコードで囲った範囲だけを非表示にして、代わりにパスワード入力フォームを設置
●入力フォームに正しいパスワードが入力されると、隠されていた内容が表示される
●画面切り替え時にページのトップへ戻らないように自動スクロールさせる
以前、WordPress標準機能のパスワード制限を使って記事全体に閲覧制限をかけた場合、パスワード入力フォームの前に記事毎に任意のテキストを表示させる方法についてまとめました。
↑この場合、パスワードについてのヒントや隠されている内容について短い文章で簡単に説明することはできますが、記事の殆どはパスワードを入力しないと読むことが出来ません。
そうではなく、長い記事の中で本当に隠したい一部分にだけ閲覧制限をかけたい！というのが今回の目的です。
少し調べてみたところ【Passster】というプラグインを使えばそれが可能になるようなのですが、試してみるとどうやら記事毎に個別のパスワードを設定する等の一部の機能が有料版にしか含まれていない…？ようで。
パスワードで記事の一部だけに閲覧制限をかけるという機能自体は求めていたそれに違いないのですが、個別にパスワード設定ができないのはちょっと困る。
でも専用のショートコードで囲った部分を非表示にするだけなら、わざわざプラグインに頼らなくても自分でできるのでは……？🤔
というわけで、ChatGPTさんに相談しつつ試してみたところ、思ったより簡単に実装できてしまったので以下からその具体的な方法をまとめます。
実装手順・解説
カスタムフィールドで任意のパスワードを設定
まずは閲覧制限をかけたい記事にカスタムフィールドを作成し、パスワードを設定します。
カスタムフィールドが見当たらない場合は、記事画面右上の「…」から「設定」を開き、【高度な設定】の中にある「カスタムフィールド」をONにしてください。
- フィールド名：
custom_password - フィールド値：任意のパスワード
フィールド名はわかりやすいように好きな文字列に変えてもらってもOKですが、後程 functions.php に記述するコードの該当部分を全てその任意の文字列に書き換えてください。
functions.php にコードを追加
// ショートコードの登録と処理
function protected_content_shortcode($atts, $content = null) {
if (!is_single()) return '';
global $post;
$post_id = $post->ID;
$form_id = 'protected_' . $post_id;
$field_name = 'custom_password_input_' . $post_id;
$correct_password = get_post_meta($post_id, 'custom_password', true);
// POSTデータの確認
$input_password = isset($_POST[$field_name]) ? sanitize_text_field($_POST[$field_name]) : '';
$is_submitted = ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST[$field_name]));
// 判定フラグ
$is_correct = ($input_password === $correct_password);
$show_error = ($is_submitted && !$is_correct);
// パスワード正解なら内容表示
if ($is_submitted && $is_correct) {
return '<a id="' . $form_id . '"></a>' . do_shortcode($content);
}
// パスワード未入力 or 間違い → フォーム＋エラー表示
ob_start();
?>
<a id="<?php echo esc_attr($form_id); ?>"></a>
<?php if ($show_error): ?>
<p style="padding-top: 100px; color: red; font-weight: bold;">パスワードが違います！The password is incorrect.</p>
<?php endif; ?>
<form method="post" action="#<?php echo esc_attr($form_id); ?>">
<input type="password" name="<?php echo esc_attr($field_name); ?>" placeholder="パスワードを入力">
<input type="submit" value="表示">
</form>
<?php
return ob_get_clean();
}
add_shortcode('protected', 'protected_content_shortcode');↑上記のコードをコピペでOKですが、念のためいくつか注意点。
- 先程のカスタムフィールド作成でフィールド名を【
custom_password】以外に設定された場合は、コード内の【custom_password】の文字列を全て書き換えてください。 - 最後の【protected】はショートコードとして使用しますので覚えておきましょう。もしショートコードの文字列を別のものに変更したい場合はここを書き換えてください。
- パスワードを間違えた時に表示されるメッセージを変更したい場合は、↑上記の「パスワードが違います！～」の部分を変更。文字装飾などのスタイルもここで指定しています。
隠したい部分をショートコードで囲う
先程コードに追加したショートコード(上記コードをそのままコピペしている場合は【protected】)を使い、記事内の隠したい部分を以下のように囲います。
[ショートコード]
この部分はパスワード制限で見えなくなります！
[/ショートコード]
確認
できました～～～～！！✨✨✨
これ以降は別の記事でも同じようにカスタムフィールドでパスワードを設定し、隠したい部分をショートコードで囲うだけで簡単に閲覧制限がかけられます。是非ご活用ください👍
おわり
いかがでしたか？ 思ったより簡単にできてしまったので勢いのままにまとめ記事まで書いてしまいました。
今回の方法では秘匿性などの観点からあえてAJAXは使わず、画面のリロードによって指定箇所の表示・非表示を切り替えています。
また、エラーメッセージの内容や装飾などカスタマイズできる部分は色々ありますので、知識のある方は自分好みに調整してみてください。
それでは、ここまでお読みいただきありがとうございました。この記事が少しでも皆さんのお役に立っていたら幸いです😊
コメント