Simple WordPress Membership は、会員制サイトを簡単に構築できるプラグインとして非常に便利です。ですが、デフォルトの「ログインしてください」のメッセージ表示は少しシンプルすぎるかもしれません。

この記事では、この「お願いログイン」メッセージをスタイリッシュで分かりやすいデザインにカスタマイズする方法を紹介します。

カスタマイズの方法

カスタマイズはとても簡単で、WordPress テーマの functions.php に以下のコードを追加するだけです。

コード例

php wp-content/themes/example/functions.php

function customize_swpm_more_tag_error_msg($error_msg) {
    $error_msg = '
    <div class="swpm-more-tag-not-logged-in swpm-margin-top-10">
        <div style="padding:10px; text-align: center;">
            <p><strong>【こちらは有料記事です】</strong></p>
            <strong>続きを読むには<a href="/">「ログイン」</a>して下さい。</strong>
            <p>ご購読いただくと続きをご覧いただけます。</p>
            <a class="btn" style="border:1px solid #f70075; background-color: #f70075; color: #fff; padding: 10px 20px; text-decoration: none; display: inline-block;">今すぐ会員登録して続きを読む</a>
        </div>
    </div>';
    return $error_msg;
}

// フィルタを追加
add_filter('swpm_not_logged_in_more_tag_msg', 'customize_swpm_more_tag_error_msg');

コードの解説

1. フィルターフックの利用

add_filter を使って、Simple WordPress Membership が提供する swpm_not_logged_in_more_tag_msg フィルターをカスタマイズします。このフィルターは、ログインしていないユーザー向けのメッセージを上書きするためのものです。

2. メッセージのカスタマイズ

HTML を用いて、見やすくスタイリッシュなデザインを作成しています。以下の要素を含めています：

強調された見出し：【こちらは有料記事です】
ログインリンク：「ログイン」
説明文：購読を促すメッセージ
会員登録ボタン：目立つ色と適切な余白を設定したボタン

3. ボタンデザイン

ボタンは CSS で簡単なデザインを施し、視認性を向上させています。スタイルはインライン CSS で記述していますが、外部スタイルシートにまとめることも可能です。

表示例

上記のコードを追加した後、ログインしていない状態で有料記事のエリアにアクセスすると、次のような表示になります：

変更後

注意点

ボタンのリンク先（href 属性）を実際の会員登録ページに変更してください。
サイトデザインに合わせてスタイルを調整することをおすすめします。
functions.php を編集する際は、バックアップを取るようにしましょう。
まとめ

この方法を使うと、Simple WordPress Membership の「お願いログイン」メッセージを簡単にカスタマイズできます。ユーザーにとって分かりやすく、行動を促しやすいデザインに仕上げることができるので、ぜひ試してみてください。

いいねもらえると励みになります🙇‍♂️🙇‍♂️🙇‍♂️