WordPressサイトの修正確認に。ユーザーのログイン状態でコンテンツ表示を分岐する。

検証・開発環境が無い時Wordpressサイト修正の小ワザの備忘録。
単発の小さな修正案件とかで、わざわざテスト環境を準備するほどでもないケースなどに。

ページ単位なら、パスワード制御とかURL公開しないとかである程度簡単にコントロールが可能ですが、ページの中の一部コンテンツの表示切替はちょっと複雑。

WordPressではユーザーのログイン状態で分岐が可能なので、サイト管理者には開発中のコンテンツを表示して、一般ユーザーには従来のコンテンツを表示といったことが可能。

phpでコントロールする

WordPressログインユーザーのみ表示する

<?php if( is_user_logged_in() ) : ?>
ログインユーザーのみに表示する内容
<?php endif; ?>

WordPressログインユーザーとそれ以外で表示を切り替える

<?php if( is_user_logged_in() ) : ?>
ログインユーザーに表示する内容
<?php else : ?>
ログインユーザー以外に表示する内容
<?php endif; ?>

ショートコード化して投稿／固定ページで条件分岐させる

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

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

CSSクラスでコントロールする

CSSクラスlogged-inを使用して切替

テーマによりますが、Wordpressのログイン時には、一般的にbodyにlogged-inクラスが付与されます。

これを利用して、ログインしていないユーザーには、当該部分を非表示にすることが可能です。
（あくまで非表示なので、ソースコード上は記述される事に注意）

例：ログインしていないユーザーに、CSSクラス「temporary」を非表示

body:not(.logged-in) .temporary {
  display: none;
}