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

公開日:2019年7月1日 使い方など
【WordPress】本文内へログインユーザーだけにしか見えないコンテンツを作る方法

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

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

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

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

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

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

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

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

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

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

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

CSSコード

.logged-in .show-content {
display: none;
}

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

<div class="show-content">ここにログインユーザーのみ表示するコンテンツ</div>

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

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つの解決策が投稿本文にショートコードを挿入してそこから実行させる方法です

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

【WordPress】条件分岐でログインしているユーザーのみにコンテンツを表示させる方法

本当にありがたいです(喜)。

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

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

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

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

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

function if_login( $atts, $content = null ) {
if(is_user_logged_in()) {
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('if-login', 'if_login');

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

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

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

[if-login]ここに記述した内容は、ログインユーザーにのみ表示されます。[/if-login]

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

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

コードの詳細については前述した参考サイト様で本当に丁寧に解説されていますので、他のページも含めサイト作りの参考にしてみてください

応用 ログインしていないユーザーにのみ表示する方法

少しでもこうしたコードに興味を持ってらっしゃる方ならピンと来たと思います。WordPressを動作させるためのプログラム言語であるPHPでは先頭に「!」を付けると逆の意味で動作するようになっています。

従って

function if_non_login( $atts, $content = null ) {
if(!is_user_logged_in()) {
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('if-non-login', 'if_non_login');[

とすれば「ログインしていないときだけ」という条件になるんです。

どこが違うかって?それは2行目の

if(!is_user_logged_in()) {

の部分。is_user_logged_inという「ログインしているかどうか」の頭に「!」をつけて「ログインしていないかどうか」という判断をさせているのです。

細かいところを言うと、「同じ関数名(functionという記述の後ろ)」は同じfunctions.phpの中では使えないこと、ショートコードも重複して使えないので、先頭と末尾の記述も変える必要があります。

ログインしていないユーザー?(=訪問者)にだけ表示するには

[if-non-login]ここに記述した内容は、ログインユーザーにのみ表示されます。[/if-non-login]

で囲めばOKです。

この2つを使用すべきシーンとしては、ログインしているユーザーには内容を表示し、ログインしていないユーザーにはログインを促す表示をするという場合に便利だと思います。

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

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

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

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

[escp]ここに記述した内容は、ログインユーザーにのみ表示されます。[/escp]

になります。

function escp_func($atts, $content = null) {
if(is_user_logged_in()) {
extract(shortcode_atts(array(
'elem' =&gt; 'p',
'class' =&gt; '',
), $atts));
if(isset($content)) {
//classが指定されていれば、エスケープ処理してクラス属性に、指定がなければクラス属性はなし
$class = ($class)? ' class="' .esc_attr($class). '"' : '';
$html = "&lt;" . $elem. "${class}&gt;".htmlspecialchars( $content, ENT_QUOTES )."&lt;/" . $elem. "&gt;\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 );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 );function escp_func($atts, $content = null) {
if(is_user_logged_in()) {
extract(shortcode_atts(array(
'elem' =&gt; 'p',
'class' =&gt; '',
), $atts));
if(isset($content)) {
//classが指定されていれば、エスケープ処理してクラス属性に、指定がなければクラス属性はなし
$class = ($class)? ' class="' .esc_attr($class). '"' : '';
$html = "&lt;" . $elem. "${class}&gt;".htmlspecialchars( $content, ENT_QUOTES )."&lt;/" . $elem. "&gt;\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 );

このコードは囲み型ショートコードの作成に掲載されていたものにユーザーログイン判定を加えたものです。詳細はリンク先に詳しく書かれていますので参照ください。

このケースでも逆の条件にする方法はif-loginの場合と同じですので、ぜひ試してみてください。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

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