Elementor隠し要素ガイド：ページ要素の表示と非表示をシンプルにコントロール - Photon Flux｜WordPress修理のプロフェッショナル、ワールドワイド、迅速な対応

Elementor Pro の Hide if Empty メソッドは CSS を使用します。つまり、その要素はソースコードにまだ存在しているにもかかわらず、不可視（表示）に設定されます。

利点は、ACF、JetEngine、Pods、Metaboxなど、すべてのカスタムフィールドプロバイダで動作することです。

ドキュメントからマークアップを完全に削除するElementorの非表示（空の場合）メソッドが必要な場合は、Dynamic.ooo、JetEngine、または別のプラグインを使用する必要があります。

まず、選択したプラグインまたは子テーマの functions.php ファイルに以下のコードスニペットを追加します。これはPHPコードなので、Elementorのカスタムコードに直接追加することはできません。

1、プラグインの使用

Code Snippetsプラグインを使用する場合は、以下の手順に従ってください：

WordPressのダッシュボードに移動し、プラグイン > 新しいプラグインを追加し、検索バーに次のように入力します。コードスニペットプラグインをインストールし、有効化します。

WordPressのダッシュボードを更新し、「スニペット」＞「新規追加」と進みます。

以下のコードをコードボックスに貼り付ける。

add_action( 'elementor/frontend/section/before_render', function( $section, $args ) { )
    $settings = $section->get_settings_for_display()；
    if ( empty( $settings['your_field_key'] ) ) { $section>add_field_key('your_field_key' ) { $settings = $section>get_settings_for_display()
        $section->add_render_attribute( '_wrapper', 'style', 'display:none;' )；
    }
}, 10, 2 );

空の場合、Elementorウィジェットを隠す」のような説明を追加します。
Save Changes and Activate（変更を保存して有効にする）」をクリックします。

保証YOUR_FIELD_KEYをチェックしたいフィールドのキーに置き換える。こうすると、フィールドが空の場合、ウィジェットは非表示になります。

エレメンターの使用

フィールドが空の場合にElementorページの要素を非表示にするには、以下の手順に従います：

ページまたはテンプレートへ移動要素を隠す必要のあるElementorページまたはテンプレートに移動します。
非表示にする要素を選択するフィールドが空のときに非表示になる要素を選択します。
エレメントの設定Elementorエディタで、選択した要素を"エレメント設定「パネルで高いレベル".
CSSクラスの追加詳細設定 "タブで "CSSクラス "の設定を見つけ、入力ボックスに "hide-if-empty "のようにクラス名を入力する。

ページを保存ページまたはテンプレートを保存します。
カスタムCSSの追加WordPressの「外観」＞「カスタマイズ」にある「追加CSS」（正確な場所は異なる場合があります）に、以下のCSSコードを追加してください：

.hide-if-empty {
    display: none；
}

クラス名が必要な場合は？

同じ要素に複数のクラス名を使いたい場合は、以下の手順に従ってください：

Elementorエディタで選択した要素に移動します。
右側の「要素設定」パネルで「詳細設定」タブを選択します。
CSSクラス」の設定で、最初のクラス名を入力し、最後にスペースを入れ、2番目のクラス名を入力する。

Elementorが正しく認識できるように、各クラス名をスペースで区切ってください。
ページまたはテンプレートを保存します。

3.追加ショートコード

現在の投稿にフィーチャー画像があるか、投稿コンテンツがあるかによって要素を非表示にしたい場合は、以下の手順に従います：

非表示にする要素を選択する: Elementorエディタで、条件に基づいて非表示にしたい要素を選択します。
エレメントの設定右側のElement SettingsパネルでAdvancedタブを選択します。
CSSクラスの追加CSS Classes "の設定で、クラス名を入力し、最後にスペースを入れ、2つ目のクラス名を入力します。各クラス名は必ずスペースで区切ってください。
ショートコードの条件を追加するクラス名を追加したら、"Shortcode "フィールドに次のように入力する：

[elementor_if has_post_thumbnail="yes"]。

現在の投稿にフィーチャー画像があるかどうかをチェックする。投稿内容が空かどうかをチェックしたい場合は、以下のショートコードを使うことができる：

[elementor_if has_excerpt="yes"]。

条件を満たしたときに非表示にするクラスの名前をショートコードに追加します。例えば、要素を非表示にしたい場合、完全なショートコードは以下のようになります：

[elementor_if has_post_thumbnail="yes"]あなたのクラス名[/elementor_if]。

ページを保存ページまたはテンプレートを保存します。

概要

Elementorでは、CSSクラスとショートコードの条件を使って、特定の条件に基づいて要素を非表示にすることができます。この方法は使いやすいだけでなく、追加のプラグインを必要とせず、Elementor Proだけで実現できます。フィールドが空かどうか、現在の投稿に特集画像や投稿内容があるかどうかに基づいて条件を設定することで、ページ要素の表示を柔軟に制御できます。この機能は、ページデザインの柔軟性を向上させるだけでなく、ページの読み込み速度とユーザーエクスペリエンスを最適化します。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み