if(条件分岐)ブロックの使い方

if(条件分岐)ブロックの表示例

if は、PHP の if / else if / else のように、条件によって表示する内容を切り替えるブロックです。分岐(枝)を上から順に評価し、最初に条件を満たした枝だけを表示します。判定はサーバー側で行うので、表示されない枝の HTML はページに出力されません。テンプレートに置けば「ログインしている人にだけ案内を出す」「トップページだけ別のバナーを出す」といった出し分けをノーコードで作れます。

実際の表示

このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。

今あなたはPCで見てくれてますね?
これはスマホでは見れない文字列です

↑ 端末(ユーザーエージェント)によって表示が切り替わる if ブロックの実例です。スマホと PC で見比べてみてください。

基本的な使い方

  1. 「shitate tag blocks」から if を追加します。最初は枝が 1 つ(IF)入っています。
  2. 枝を選択し、サイドバーで条件を設定します。設定した条件は枝のラベル横にチップで表示されます(条件なしなら「常に表示されます」)。
  3. 枝の中に表示したいブロックを入れます。
  4. 「+」で枝を追加すると ELSE IF になります。どの条件にも当てはまらないときの受け皿が欲しければ、最後の枝で「Else 分岐(常に一致)」をオンにします。

エディターでは条件を判定しないので、すべての枝が並んで表示されます。実際の出し分けはフロントで確認してください。

エディターでの設定画面

if ブロックを選択した状態。各枝のラベル横に条件のチップが表示されます。
if ブロックを選択した状態。各枝のラベル横に条件のチップが表示されます。
枝(if 分岐)を選択した状態。サイドバーで場所・ユーザー・カスタムフィールド・期間とデバイス・反転を設定します。
枝(if 分岐)を選択した状態。サイドバーで場所・ユーザー・カスタムフィールド・期間とデバイス・反転を設定します。

条件に使えるもの(各枝のサイドバー)

  • 場所 — ページタイプ(すべて/フロントページ/ブログトップ/個別投稿/固定ページ/個別ページ全般/アーカイブ/検索/404)、投稿タイプ、タクソノミー+ターム(スラッグをカンマ区切り。両方を入れたときだけ判定)、投稿 ID(カンマ区切り)
  • ユーザー — ログイン状態(ログイン中/ログアウト中)、権限グループ(管理者/編集者/投稿者/寄稿者/購読者。完全一致で判定するため、管理者は「編集者」の条件には一致しません)
  • カスタムフィールド — メタキーと演算子(存在する/一致する/一致しない)。表示中の投稿のフィールドを見ます。_ で始まる保護されたキーは使えません
  • 期間とデバイス — 開始日時・終了日時(サイトのタイムゾーン、境界を含む)、デバイス(モバイルのみ/デスクトップのみ。サーバー側のユーザーエージェント判定)
  • 反転(NOT) — 条件を満たさないときに一致させます

複数の条件の扱い(AND と OR)

  • 1 つの枝に複数の条件を設定すると、すべてを満たしたときに一致します(AND)。
  • 「A または B」(OR)にしたいときは、同じ中身の枝を ELSE IF で 2 つ並べるか、if ブロックを入れ子にします。
  • 「反転」は枝の条件全体を反転します(NOT (A かつ B))。
  • Else の枝は必ず最後に置いてください。途中に置くと、それより後ろの枝は評価されません。

よくある使い方

  • ログアウト中の人にだけ「会員登録はこちら」を出す(ログイン状態: ログアウト中)
  • キャンペーン期間だけバナーを出す(開始日時と終了日時)
  • 特定カテゴリーの記事の末尾に関連サービスへの導線を出す(タクソノミー: category、ターム: service)
  • スマホだけ電話ボタンを出す(デバイス: モバイルのみ)

出力とクラス

if ブロックも枝も、フロントにはラッパー要素を出力しません。選ばれた枝の中身の HTML だけがそのまま出ます。そのため if ブロック自体に付けた追加 CSS クラスやアンカーは前面に出ず、装飾は中身のブロック側で行います。目次ブロックは、表示される枝の見出しだけを拾います。

注意点(キャッシュとの相性)

  • ログイン状態・権限・デバイス・期間の条件は、リクエストごとにサーバーで判定します。ページキャッシュを使っている場合、キャッシュされた HTML は条件どおりになりません。デバイス条件はモバイル用キャッシュを分ける設定が、期間条件は切り替わる時刻でのキャッシュ削除が必要です。ログイン状態はキャッシュプラグインがログインユーザーを除外していれば問題ありません。
  • デバイスの判定はユーザーエージェントによるもので、画面幅ではありません。画面幅で切り替えたい場合は CSS(メディアクエリ)や scope ブロックのフロント CSS を使ってください。
  • 表示されない枝の中のブロックも、WordPress の仕組み上いったんレンダリングされます。アクションフックのように副作用のあるブロックを枝の中に置く場合は、その点を考慮してください。
  • 独自に追加した権限グループは選択肢に出ません。

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –