【WordPress】本文内へログインユーザーだけにしか見えないコンテンツを作る方法

公開日: 更新日: Wordpress
Knowledge Base Wordpress パソコン カスタマイズ 設定




WordPressで会員制サイトを作ったり、自身だけが見えるコードやファイルのダウンロードリンクなどを作ったりするときに必要な「ログインしているユーザーにだけ見えるコンテンツ」。

実際に作ってみた方ならお分かりになると思いますが、ページごと見えないようにするには「非公開にする」「パスワード保護する」などの方法で簡単に実現できるんですけど、本文内の一部を「ログインユーザーにだけ・・・」とするのは結構大変なんですね。

もちろんこれを実現させるためのプラグインもあります。が、今回は頑張って??投稿や固定ページの本文内の任意の場所でログインしたユーザーだけが見えるコンテンツを作る方法をいくつか紹介します。

CSSで非表示にすることはできるけど問題が・・・

一番簡単な方法はCSSを使って見た目に非表示にする方法。これだとCSSセレクタの範囲内にある文章や画像などはログインユーザー以外には見た目見えなくなります。

実はこの見た目というのがポイントで、この方法だとある方法で見えてしまうんです。

それは・・・ソースコードを表示されてしまったら丸見えということ。

「ソースコードは長いんだから、そう簡単に探せないでしょ!」と思った方。あまーーーーい!!(お笑い芸人ではありません・・)

大抵ログインユーザー、特に管理者だけに見えるものを備忘録として保存しておく場合、記事はパターン化されることが多いです。つまり・・・1つバレてしまえば類推して探し出されてしまう危険性があり、ソース内検索で発見されてしまう場合があるのです。

ページのソースコードは一見長いように見えますが、本文は</head>の下から始まるのはhtmlの決まりですから、本文自体を見るのはさして大変でもありません。むしろ「これだけ?」位のレベルです(笑)。せっかく隠したつもりでもこの方法だと丸見えになってしまいます。

ちなみにそれでもいい場合には以下のCSSをテーマのCSS末尾に追記し、本文内でログインユーザーのみに表示するものを囲めば実現できます。

CSSコード

.logged-in .show-content {
    display: none;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

本文内の文章などを囲むコード

<div class=”show-content”>ここにログインユーザーのみ表示するコンテンツ</div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

たったこれだけなので本当に簡単なんですけど、個人的には全くおすすめしません。

WordPressには【is_user_logged_in() 】という便利な関数があるけど・・・

WordPressにはいろいろな関数があって、【is_user_logged_in() 】もその1つ。何となく見た通りログインしているかどうかを判定する関数です。

関数自体はテーマテンプレートに書いて動作させ、if文と併せて書けば確かにログインユーザーだけに出力されるコンテンツを作成できます。

ログインユーザーだったらhtmlとして出力し、そうでなかったら一切出力しないという切り替え(条件分岐)ができるので便利ですね~~。

・・・でもこれも問題が!!それはWordpressは標準でPHPコードを投稿などの本文に挿入して動作させられないこと。

本文の途中にその投稿ならではのコンテンツを挿入する場合にはこれだと実現できないですねぇ・・・。

中には投稿本文の中でPHPコードを動作させられるプラグインもあり、それを使えば荒業で実現はできますが、これも個人的にはおすすめしません。

お待たせしました!!それではどうしよう・・・の解決方法を紹介します。

前置きが長くてすみません。きちんと理解された上で使っていただきたいのでご容赦ください

【is_user_logged_in() 】関数+ショートコードで解決!

前述した【is_user_logged_in() 】関数を使えば確実に未ログインユーザーから見えないコンテンツを作ることができます。でもこちらも前述した通りそのまま投稿本文では使えません。

たった1つの解決策が投稿本文にショートコードを挿入してそこから実行させる方法です

で、コードを最初から書いて研究でも良かったのですが、何でも載ってるインターネットに誰か掲載してないかなぁと探したところ、ありがたいことに紹介されている方がみえました!!

のページです。本当にありがたいです(喜)。

コードの中身を簡単に解説すると、

  • ログインユーザーに対してはショートコード内のコンテンツを表示しなさい
  • 未ログインユーザーには何も出力しないでください(厳密には空のコンテンツを出力しなさい)

というもの。こんなに簡単なコードで実現できるんですね。

一応このありがたいページが削除されたりすると見えなくなるので備忘録を兼ねコードを記載させていただきます。

テーマのfunctions.phpへ追記するコード

function if_login( $atts, $content = null ) {
if(is_user_logged_in()) {
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('if-login', 'if_login');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

このコードをテーマのfunctions.phpへ追記してください
※テーマのfunctions.phpは非常に重要なファイルですのでバックアップを取るなどしていざというときに備えてから作業してください

投稿や固定ページの本文内へログインユーザー向けコンテンツを挿入するショートコード

ログインユーザーだけに出力されるコンテンツを作るには

[if-login]ここに記述した内容は、ログインユーザーにのみ表示されます。[/if-login]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

という風にショートコードで囲んだ中にログインユーザー用のコンテンツを入れてください。

長々と説明してきましたが実はたったこれだけ・・・でもやっぱりこういうのはきちんと理解してから使わないとね!ということで他の方法も併せて紹介させていただきました。

コードの詳細については前述した

で本当に丁寧に解説されていますので、他のページも含めサイト作りの参考にしてみてください

おまけ ショートコードの中でショートコードが動作するようにするには

上のコードでは[if-login]~[/if-login]で囲まれた部分にショートコードを入れると、ショートコードがそのまま表示されてしまいます。そこでまたまた別のサイトで見つけたコードをちょっと変更して、ショートコードの中に入れたショートコードが動作するようにした上でログインしている場合のみに表示する・・・というものを掲載しておきます。

※すべてのショートコードが動作するかは確認していませんのでテストの上使用ください。

下のコードを使用する場合には本文内に入れるショートコードは

[escp]ここに記述した内容は、ログインユーザーにのみ表示されます。[/escp]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

になります。

function escp_func($atts, $content = null) {
if(is_user_logged_in()) {
	extract(shortcode_atts(array(
'elem' => 'p',
    'class' => '',
  ), $atts));
  if(isset($content)) {
    //classが指定されていれば、エスケープ処理してクラス属性に、指定がなければクラス属性はなし
    $class = ($class)? ' class="' .esc_attr($class). '"' : '';
    $html = "<" . $elem. "${class}>".htmlspecialchars( $content, ENT_QUOTES )."</" . $elem. ">\n";
    return $html;
  }else{
    return '';
  }
	} else {
return '';
}
}
add_shortcode('escp', 'escp_func');
function run_shortcode_before( $content ) {
  global $shortcode_tags;
  $orig_shortcode_tags = $shortcode_tags;  // 現在のショートコードの登録情報をすべてバックアップ
  remove_all_shortcodes();  // 現在のショートコードの登録情報を一時的にすべて削除
  add_shortcode('escp', 'escp_func' );  // フィルターの前に実行するショートコードを登録
  $content = do_shortcode( $content );  // 登録したショートコードの実行
  $shortcode_tags = $orig_shortcode_tags;  // バックアップしておいたショートコードの登録情報を復元
  return $content;
}
add_filter( 'the_content', 'run_shortcode_before', 7 );
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

このコードは

に掲載されていたものにユーザーログイン判定を加えたものです。詳細はリンク先に詳しく書かれていますので参照ください。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】