WordPressブロックコンテンツの表示/非表示を制御する方法

条件に基づいたコンテンツの表示方法の制御は、WordPress開発者やデザイナーにとって重要です。

この記事では、WordPressにはあらゆる用途に応える多数のプラグインの中から、以下のような操作を可能にする便利なプラグインを4種類取り上げます。

• 本番の固定ページで下書きコンテンツを非表示にする
• グループ、ヘッダー、フッターに表示条件を適用する
• 日付と時間に基づいてコンテンツを表示する
• デバイスの種類に応じて異なるデザインを表示する

プラグインによってこれらの操作を実行する難易度が異なります。

ブロック内のコンテンツの表示または非表示にすることに焦点を当てるため、ページへのアクセスを制限する会員制プラグインのような広範なソリューションや、ブロック自体をロック、ロック解除、非表示にする方法については今回は触れません。Gutenbergでブロックを無効またはロックする方法はこちらでご紹介しています。

ご紹介する4つのプラグインは、ブロックテーマ、ハイブリッドテーマ、クラシックテーマ全てで動作します。またパターン、部分的に同期されたパターン、ブロックで作成された同期パターンにも対応しています。

また、これが最善の策とは限りませんが、コードスニペットでブロックの表示・非表示を制御する例もご紹介します。

プラグインでWordPressのブロックコンテンツを表示・非表示にする方法

多くのプラグインは、WordPress管理画面の「設定」ページでプラグインの設定を行うことができますが、以下でご紹介する「その他のプラグイン」セクションで取り上げる2つのプラグインは例外となります。

また、固定ページ、投稿、カスタム投稿タイプ、サイトエディターのいずれを操作する場合でも、エディターの右サイドバーからブロックの可視性を制御できます。

Block Visibility

Block Visibilityはこの分野で特に有名なプラグインで、ブロックエディターのリリース当初から存在し、日本語にも対応しています。直感的なユーザーインターフェイス（UI）で包括的な機能を完全無料で利用可能です。

以下のような様々な条件に基づき、個別または組み合わせて、ブロックの可視性を制御することができるようになります。

• ブラウザーと端末：訪問者のブラウザ（Chrome、Firefox、Safariなど）やデバイスの種類（PC、タブレット、モバイル）に応じてブロックを表示または非表示
• Cookie：ブラウザに特定のCookieが存在するかどうかに基づいて可視性を制御
• 日付と時間：お店の営業時間中のみメッセージを表示するなど、特定の時間帯または特定の日付にコンテンツを表示するように設定
• ブロックを非表示にする：特定のブロックを無条件に非表示
• ロケーション：訪問者の地理的な場所（国、地域、都市）に基づいてコンテンツを表示または非表示
• メタデータ：カスタムのメタデータ値を使用して可視性を制御（カスタム投稿タイプの動的コンテンツに便利）
• クエリー文字列：URLパラメータに基づいてブロックを表示または非表示に（?promo=trueがURL内にある場合にのみブロックを表示するなど）
• 参照元：訪問者がどこからアクセスしたかによって可視性を制御（Googleから来た場合には特別割引情報を非表示にするなど）
• 画面サイズ：画面の幅に応じて可視性を調整し、モバイル、タブレット、PCで異なるコンテンツを表示
• URLパス：ページのURLに基づいてブロックを表示または非表示（サイトの特定のページまたはセクションにのみコンテンツを表示する場合に便利）
• ユーザー権限：管理者やメンバーに限定したコンテンツを表示するなど、ログインユーザーの役割に基づいて可視性を制限

このプラグインには、ブロックの可視性を管理するための以下のような機能も組み込まれています。

• 表示プリセット：事前に定義された表示赤英を保存し、複数のブロックに適用可能
• 設定のコピーとインポート：異なるブロック間の可視性設定を複製

また、各ブロックの「可視性」パネルにあるトグルスイッチ（文言はブロックによって異なる）を有効にすれば、簡単にブロックを隠すことができます。以下、Block Visibilityプラグインの一般的な使用例を2つご紹介します。

日付と時刻

Block Visibilityは、日付と時間の条件に基づいてコンテンツの表示を制御することができ、特定の時間範囲、日付、またはその両方を設定できます。

例えば、お店の営業時間午前8時〜午後5時に「現在営業中です」という見出しを表示し、それ以外の時間には「現在は営業時間外です」という見出しを表示したいとします。

初めてこのプラグインを利用する場合は、営業中と営業時間外用のブロックをそれぞれ作成し、右サイドバーから「可視性」をクリックして設定オプションを開きます。この例では、「日付と時刻」を選択します。

まずは、午前8時～午後5時の条件を「現在営業中です」の見出しに適用します。

「現在は営業時間外」の見出しは、午前0時の日付け変更を考慮し2つのデータセットが必要になります。

以上の設定を行うことで、お店の営業時間に応じて適切な見出しを表示することができます。

参照元

参照元が特定のURLの一部を含む場合、ボタンを非表示にする例も見てみます。別の方法として、参照元が規定のURLの一部を含んでいる場合にボタンを表示するということも可能です。

また、「設定」＞「Block Visibility」では、以下の設定タブがあります。

• 一般設定
• 可視コントロール
• ブロックマネージャー

基本的には、「一般設定」で「フルコントロールモード」をオンにすることをおすすめします。これにより、すべてのブロックで可視性の制御を行えるようになります。ボタンブロックなどの一部のブロックでは、可視性の制御にこの設定が必要になります。

Content Control

Restrict Contentプラグインと混同されることがありますが、Content Controlプラグインは、以下2つの条件でコンテンツの表示・非表示を制御できます。

• Device Rules（デバイスルール）：PC、タブレット、モバイルなど、デバイスの種類に基づいてブロックの可視性を制御
• User Rules（ユーザールール）：ログインユーザー、ログアウトユーザー、すべての権限、特定の権限、または除外する権限を設定

このルールは個別に適用することも、組み合わせて表示条件を柔軟に作成することも可能です。前者の「Device Rules」を使用して、異なる画面サイズに適した画像を表示する例を見てみましょう。大きい方の画像はPCでのみ表示されるようにします。

以下は、エディターでMobile（モバイル）、Tablet（タブレット）の表示をオフにし、フロントエンドではPC用に画像が適切にサイズ設定される例です。

続いて、以下はエディターでDesktop（PC）をオフにして、タブレットとモバイルでより小さな画像を表示するように設定する例です。

これにより、訪問者が利用するデバイスに応じた適切な画像が表示され、パフォーマンスとユーザー体験が向上します。さらに、「Device Rules」または「User Rules」を選択し、横にある3つの点をクリックすると、各ブロックで以下4つの設定を行うことができます。

• Copy（コピー）：ブロックの設定をコピー
• Paste（貼り付け）：コピーした設定をブロックに適用
• Restore Default（デフォルト設定をリセット）： ブロックのすべての表示条件をリセット
• Disable Rules（ルールを無効化）： 可視化条件を削除せずに一時的に無効化

なお、プラグインをテストしている間は、「Disable Device Rules」または「Disable User Rules」を使用することを強くおすすめします。必要に応じて可視性の設定をリセットしたり調整したりしやすくなります。

WordPress管理画面の「設定」＞「Content Control」では、ブレークポイント（画面サイズに応じてレイアウトを切り替える）設定などの全体設定を行うことができます。PC、モバイル、タブレットの画面サイズの定義はデフォルトで以下のようになっています。

また、任意のブロックの制御をオフにすることもできます。Content Controlの有料版には以下のような機能も付帯します。

• Block scheduling（時間に応じたブロックの表示設定）：時間ベースの表示条件を設定します。
• WooCommerce rules：WooCommerceの設定に基づいてブロックの可視性を制御
• Easy Digital Downloads rules：デジタル製品の購入者向けのコンテンツを制御
• Boolean rules（ブール値ルール）：ブロックの可視性に論理条件を適用
• Rule engine for blocks（ブロックのルールエンジン）：柔軟性の高いカスタム可視性条件を作成

その他のプラグイン

以上の2つのプラグインに加えて、あまり知られていないプラグインもご紹介します。

Conditional Blocks – Advanced Content Visibility

Conditional Blocks – Advanced Content Visibilityでは、高度なロジックを使用し、シンプルなモーダルインターフェースでWordPressのブロックの表示と非表示を制御することができます。ブロックを表示するタイミングや場所を決定する条件を設定します。

無料版には以下のような基本的な設定が含まれています。

• Lockdown（全てのユーザーにブロックを非表示）：ブロックを完全に非表示
• Responsive（レスポンシブ）：デバイスの種類（モバイル、タブレット、PC）に応じてブロックを表示または非表示
• User（ユーザー権限）：ログインしているユーザーまたはログインしていないユーザーのみにブロックを表示または非表示
• AND/OR（AND/OR条件）：複数のルールを組み合わせて、複雑な表示条件を作成

有料版では、以下の機能も利用できます。

• Preset Manager（プリセットマネージャー）：ルールグループを保存し、サイト全体の複数のブロックに適用して効率的に管理
• Advanced Breakpoint（高度なブレイクポイント設定）：異なるデバイス用に独自の画面サイズを定義
• Geolocation（ジオロケーション制御）：訪問者の位置情報に基づいてブロックを表示または非表示にします（要APIキー）
• Toolbar Settings（ツールバー設定）：ブロックツールバーから直接表示条件を管理
• User Roles（ユーザー権限）：ユーザー権限（管理者、購読者、顧客など）に基づいてブロックを制限
• Data Schedule（日時による設定）：特定の日付範囲または時間帯にのみブロックを表示するように設定
• WooCommerce & Membership Integrations：買い物カゴの内容や会員などに基づいて可視性を制御

より高い柔軟性と高度な条件ロジックが必要な場合には、コンテンツの可視性をきめ細かく管理できる有料版をおすすめします。

Wicked Blocks Condition

Wicked Blocks Conditionは、以下のような条件に基づいてブロックを表示・非表示にすることができる無料プラグインです。

• User login status（ユーザーのログイン状態）： ユーザーのログイン状態に応じてブロックを表示または非表示
• User role（ユーザー権限）： ユーザー役割に基づいて可視性を制限
• Date and time（日付と時間）： 特定の時間にコンテンツを表示または非表示
• Post categories or tags（投稿カテゴリまたはタグ）： 割り当てられたカテゴリまたはタグに基づいてコンテンツを表示
• Post status（投稿ステータス）：公開、下書き、QAなどの投稿の状態に基づいて可視性を制御
• Query string parameter（クエリー文字列パラメータ）： URLの値に基づいて可視性を制御
• Custom PHP function（カスタムPHP関数）：高度な表示制御のためのカスタムロジックを実行

カスタムPHP関数を使用できるため、UI内に直接独自のロジックを追加したい開発者にとっては特に便利なプラグインです。

カスタムコードでWordPressのブロックコンテンツを表示・非表示にする方法

シンプルな方法で必要なものだけを読み込みたい場合は、プラグインの代わりにカスタムコードを使用することができます。独自のプラグインをコーディングするか、関数を直接functions.phpファイルに直接関数を追加します。

以下は、PHPベースの例ですが、パフォーマンスを優先したい場合にはJavaScriptの方が良いでしょう。

ユーザーのログイン状態に基づいたコンテンツの非表示

以下はユーザーがログインしている場合、すべての段落（<p>）要素を非表示にする例です。

add_action( 'wp_head', 'kinsta_toggle_paragraphs_visibility' );

function kinsta_toggle_paragraphs_visibility() {
   if (is_user_logged_in() ) {
       echo 'p { display: none !important; }';
   }
}

この関数は、is_user_logged_in()を使ってユーザーがログインしているかどうかをチェックします。この条件がtrueの場合、<head>セクションにCSSを注入し、display: none;を使ってすべての<p>要素を非表示にします。マークアップはページソースに残りますが、訪問者には表示されません。

この動作を変更するには、is_user_logged_in()を以下のいずれかに置き換えてください。

• !is_user_logged_in()：ユーザーがログインしていない場合にコンテンツを非表示
• is_user_logged_out()：ログインしていないユーザーを検出するための代替関数
• !is_user_logged_out()：ユーザーがログインしているかどうかを確認する代替関数

位置情報に基づいたコンテンツの非表示

ある場所からアクセスしたユーザーに対してコンテンツを非表示にしたいとします。以下は米国を拠点とするユーザーに対してすべての画像を非表示にする例です。

add_action('wp_head', 'kinsta_hide_images_for_us_visitors');

function kinsta_hide_images_for_us_visitors() {
   // 訪問者のIPアドレスを取得
   $user_ip = $_SERVER['REMOTE_ADDR'];
   $geo_api_url = "https://ipapi.co/{$user_ip}/json/";

   // 位置情報の取得
   $response = wp_remote_get($geo_api_url);

   if ( is_wp_error($response) ) {
       return; // Exit if API request fails
   }

   $data = json_decode( wp_remote_retrieve_body($response) );

   // ユーザーが米国からアクセスしているかを確認
   if ( isset($data->country_code) && $data->country_code === 'US' ) {
       echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
   }
}

注意点

• $_SERVER['REMOTE_ADDR']は不正なIPアドレスを返すことがあります。
• ページが読み込まれるたびにAPIを呼び出すと、パフォーマンスに影響を与える可能性があります。WordPressのTransientを使って一時的にデータを保存し、レスポンスをキャッシュすることをおすすめします。

カテゴリーに応じたアイキャッチ画像の非表示

ページタイトルやアイキャッチ画像を表示・非表示にすることができるプラグインはほぼなく、これを実現するには以下のコードを使用してください。以下はカテゴリーが「書籍」であるすべての投稿のアイキャッチ画像を非表示にする例です。

add_filter('post_thumbnail_html', 'kinsta_hide_featured_image_for_books_category', 10, 2);

function kinsta_hide_featured_image_for_books_category($html, $post_id) {
   // 投稿が"書籍"カテゴリーに属しているかを確認
   if (has_category('books', $post_id)) {
       return ''; // 空の文字列を返すことでアイキャッチ画像を非表示
   }
   return $html; // カテゴリーが"書籍"以外の場合はアイキャッチ画像を表示
}

このフィルターは、has_category()を使って投稿が「書籍」カテゴリーに属しているかどうかをチェックし、trueの場合は空の文字列を返すことでアイキャッチ画像を非表示にします。その他のカテゴリーでは通常通りにアイキャッチ画像が表示されます。

実装のテスト

選択したプラグインやカスタムコードをデプロイする際には、意図しない問題を防ぐために事前に以下のようなテストを徹底することをおすすめします。

• 互換性の確認：プラグインまたはカスタムコードが特にサードパーティのブロックプラグインとシームレスに動作することを確認する
• ソースコードの出力を確認：CSSを使ってコンテンツを非表示にする方法もあれば、マークアップから完全にコンテンツを削除する方法もあるため、SEOに与える影響を考慮した上でアプローチを決定する
• ステージング環境の使用：KinstaではWordPressサイトごとにステージング環境が付属するため、変更を本番サイトに適用する前に安全にテスト可能

まとめ

コンテンツの可視性を制御することは、WordPressサイト管理にとって重要です。プラグインを使用する方法とカスタムコードを使用する方法があるため、要件と技術的な経験値に応じたアプローチを採用してみてください。

開発、プラグインのテスト、サイトの安全性の維持が簡単なサーバーをお探しでしたら、Kinstaをお試しください。

セキュリティを重視した3分ごとの稼働状況監視、無料のマルウェア除去、エンタープライズレベルの堅牢なファイアウォールなどのセキュリティ機能、そしてスピードと信頼性に最適化されたプラットフォームをご用意しています。WordPress専用マネージドクラウドサーバーの詳細はこちらでご覧いただけます。