ページロード時にElementor Gallery Proのフィルタを自動的に適用する方法

11月11日 19:36更新

011010

このガイドでは、ページロード時にElementor Gallery Proのフィルタを自動的に適用する方法について詳しく説明します。以下のステップに従うことで、ページロード時に特定のギャラリーを自動的にフィルタリングする効果を得ることができます。

ページロード時にElementor Gallery Proの要素を特定のギャラリーにフィルタリングする方法

を設定する。エレメンタル・ギャラリー・プロ要素にURLを追加することで、特定のギャラリーにフィルタリングすることができます。 ?data-gallery-index=1.こうすることで、特定のギャラリーフィルターがページロード時に自動的に開きます。

Elementor Gallery Proのページロードコードのフィルター

動く1: Elementor Gallery Proと同じページにHTML要素を追加する必要があります。以下の手順に従ってください：

Elementorエディタを開き、フィルタを追加したいページを選択します。
ページ上のGallery Pro要素を見つけます。
左側のパネルで、HTML要素をページ上にドラッグし、Gallery Pro要素と同じ位置に配置します。

ステップ2：JavaScriptコードの挿入

次のJavaScriptコードをHTML要素に挿入して、ページが読み込まれたときに特定のフィルターを適用する。

document.addEventListener("DOMContentLoaded", function() {)
    // URL
    const urlParams = new URLSearchParams(window.location.search); // URLはギャラリーを検索するために使用することができます。
    const galleryIndex = urlParams.get('data-gallery-index')；

    if (galleryIndex) {
        // ギャラリープロ要素
        const galleryProElement = document.querySelector('.your-gallery-pro-class'); //ギャラリープロ要素の実際のクラス名に置き換えます。
        if (galleryProElement) {
            // フィルタを適用するためにクリックまたは選択をシミュレートします。
            const filterButtons = galleryProElement.querySelectorAll('.gallery-filter-button'); // 実際のフィルタボタンのクラス名に置き換えます。
            if (filterButtons[galleryIndex]) { フィルタボタン[galleryIndex])
                filterButtons[galleryIndex].click()；
            }
        }
    }
});
</script

コードを .your-gallery-pro-class 歌で応える .gallery-filter-button これを実際に使用するクラスの名前に置き換える。

ステップ3：ページのURLを更新する

フィルタリングするページのURLに ?data-gallery-index=1(または他のインデックス値）など：

https://yourwebsite.com/your-page?data-gallery-index=1

特定のギャラリーフィルターは、ページがロードされると自動的に開きます。

概要

各Elementor Gallery ProフィルターのURLを取得します。これはElementor Gallery Proフィルターのタイトルの属性を以下のロジックで再利用することで動作します：

All "オプションがある場合、値は "All "となる。

それ以外の場合は、0から始まるインデックス値に従う。

第一不正確「すべて」フィルターデータギャラリー・インデックス=0. 次のフィルターはdata-gallery-index=1などなど。

を追加するだけです。?data-gallery-index=0これにより、ページロード時にこのギャラリーフィルターを開くことができます。

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