[WordPress] CSSを使用してログインユーザーのみ、特定の要素を表示する

Last Updated:2016年11月29日| | 9のコメント

ログインしていない非ログインユーザー(ゲスト)は、特定の要素を見えなくログインしたユーザーにのみ表示する場合、通常 is_user_logged_in() 関数を使用して実装できます。 たとえば、次のコードを使用すると、ログインユーザーには「こんにちは?会員様!」が、ゲストユーザー(非ログインユーザー)には「こんにちは?ゲスト!」が出力されます。

<?php
if ( is_user_logged_in() ) {
echo '안녕하세요? 회원님!';
} else {
echo '안녕하세요? 손님!';
}
?>

もしCSSでログインユーザーのみ、特定の要素を見せたいなら :not 選択子を使用することも一つの方法になるでしょう。 WordPressは、一般的にログインしたユーザーに対して、 ログイン中 クラスが追加されます。

Avada テーマでlogged-inクラス

例えば、 Avadaメインメニューに追加された検索アイコンをログインユーザーにのみ表示してゲストには非表示にする場合は(これがなぜ必要なのか分からないが、実際にこのような問い合わせをする人がいますね)、次のようなCSSコードを使用することができます。

body:not(.logged-in) li.fusion-main-menu-search {
display: none;
}

他の要素の場合にも、同様の方法で応用することができます。

:notセルテクト詳細については、 ここで確認することができます。 :notセレクタは、IE 9からサポートされます。

メモ:


9のコメント

コメント

    • webminiサイトが右キーが動作しないように設定されていますね。(笑)
      私も最初はコピー防止機能を入れたが、最終的には削除されました。 事実文ファーことは気になればできるんですよ。

      disqusは事実プラグインではなく、直接APIをドラッグすることをお勧め。

      コメントの部分を修正するには、テーマのソースを遅れ必要があります。 私 Newspaper テーマがなく、正確にどのファイルを変更するかどうかは、確認してドリルすることができません。

      ソースから#respond部分を#disqus_threadに変更すると、正常に動作しています。
      (もちろん、このような作業をする前に、チャイルドテーマを作成べきでしょう。)

      応答
      • 今は会社なのでできませんが、家に帰って修正してみるべきです…^^
        そして、チャイルドテーマも勉強をしなければならなり。

      • 私も Newspaper テーマ(https://www.thewordcracker.com/go/newspaper )を購入しました^^
        購入したくてしたわけではなく、クライアントが Newspaper テーマにリニューアルすることに関心を持って購入しました。

        コメントが正しく表示されるようにするには、次のようにしてみてください。
        1) https://help.disqus.com/customer/portal/articles/565624-adding-comment-count-links-to-your-home-page 文を参考にして、次のコードをfooter.phpファイルのすぐ上に追加するようにします。

        2)includeswp_boostertd_module_single_base.phpファイルで

        includeswp_boostertd_module_single_base.php


        function get_comments() {
        $buffy = '';
        if (td_util::get_option('tds_p_show_comments') != 'hide') {
        $buffy .= '<div class="td-post-comments">';
        $buffy .= '<a href="' . get_comments_link($this->post->ID) . '"><i class="td-icon-comments"></i>';
        $buffy .= get_comments_number($this->post->ID);
        $buffy .= '</a>';
        $buffy .= '</div>';
        }

        この部分を以下のように変更します。


        function get_comments() {
        $buffy = '';
        if (td_util::get_option('tds_p_show_comments') != 'hide') {
        $buffy .= '<div class="td-post-comments">';
        $buffy .= '<i class="td-icon-comments"></i> <a href="' .get_the_permalink() . '#disqus_thread">';
        $buffy .= 'Comments</a>';
        $buffy .= '</div>';
        }

        子テーマを作っているが、この場合、関数ファイルを修正するため、子テーマを作らずに直接変更します: (あまり良い方法です。)

        きちんとするにはソースをもう少し分析しなければなりませんが… 時間がかかりそうなので略式にしました。 (次回時間になったら一度分析してみるべきだと思います。)

        一度して見てもされている教えいただけますか?

      • footer.phpファイルですぐ上に追加して下さい。 EXAMPLEは適当修正ハシゴヨ。

        上記のファイルを修正してもよく適用がないと、includesmodulestd_module_slide.phpファイルも似たような部分があります。 同様に修正してください。(笑)

割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy