web-dev-qa-db-ja.com

Visual Composerによるアコーディオンタブへのディープリンク

私は自分のページにアコーディオンを追加するためにVisual Composerを使っています。今、私はアコーディオンの中の任意の要素に深くリンクすることができる必要があります。言い換えれば、アコーディオンの中で任意の要素を開くリンクを人々に提供できるようにする必要があります。そのため、/mypage#tab4のようなURLで4番目のアコーディオンタブを開くことができます。これは可能ですか？

ドキュメントはそれについて言及していません。ソースコードはそれをサポートしていないようです。そして、私はWPBakeryのサポートアカウントを持っていません。なぜなら私は最初の開発者ではないからです。

links
2
Jeff

同じ問題を抱えた後、私は基本的な解決策を思い付きました - うまくいけば、それはあなたにとって遅すぎないということです。

Visual Composerの「アコーディオンプラグイン」は、jQuery UIアコーディオンのラッパーです。だから同じ方法が利用可能です。 URLの末尾にハッシュがあるかどうかを確認し、それをアコーディオンパネルに合わせて（インデックス番号を取得して）開き、それを開く基本的な（改善の余地があることは間違いありません）コードを書きました。 。 CMSの各アコーディオンアイテムにIDを追加するだけです。

jQuery(window).load(function() {
    if(location.hash) {
        var panelRef = (window.location.hash.substring(1));  
            jQuery(".wpb_accordion_section").each(function(index) {
            if(jQuery(this).attr("id") == panelRef) {
                jQuery('.wpb_accordion_wrapper').accordion("option", "active", index);
            }
        });     
    }
});

ハードコードされたIDの代わりに数字を使用するように変更することもできます（ただし、パネルには0のインデックスが付けられます）。

2
gbuckingham89

私はそれが少し遅れているのを知っています、これをするはるかに簡単な方法があります。たとえば「custom1」という名前を付けた場合は、各タブに[要素IDを追加]に移動し、次に（www.yourdomain.com/#custom1）に移動して特定のタブにリダイレクトします。あなたのタブがあなたのホームページにある限り。

これはすべてのページで機能するので、ホームページのタブをリンクしてタブ付きコンテンツを含む別のページにリダイレクトできます。バージョン情報ページについて、URLは次のようになります（www.yourdomain.com/about/#custom1）。先ほど設定したリンクタブ。

あなたのdoominのインスタンスcustom1-more-infoの要素IDを使って、少しクリエイティブにすることができます。（www.yourdomain.com/#custom1#more#info）ダッシュ（ - ）が次のように定義されていることに気づいたらあなたのリンク内の（＃）。

これが誰かに役立つことを願って、上記の解決策より少し簡単に。

0
Jason Smith