Snow Monkey Blocksの「タブ」設置について

0
いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #91776
    九州機電株式会社
    参加者
    37

    【お使いの Snow Monkey のバージョン】15.14.5
    【お使いの Snow Monkey Blocks のバージョン】13.2.1
    【お使いの Snow Monkey Editor のバージョン】6.2.1
    【お使いのブラウザ】google chrome
    【当該サイトのURL】https://www.kyushu-kiden.co.jp/works/works-category

    ### 実現したいこと

    いつもお世話になっております。
    タブ設定についてご質問があります。

    ページ1に、
    タブブロックを利用してタブ「A」「B」「C」を設定してページを作った場合、

    ・ページ2からの内部リンクで開いたとき → タブ「A」を開いた状態でページ表示
    ・ページ3からの内部リンクで開いたとき → タブ「C」を開いた状態でページ表示

    させる方法はありますでしょうか?

    3
    いいねをした人:
    #91801
    アバター画像キタジマ タカシ
    参加者
    2421

    そのような機能は無いので、やるとすれば JavaScript を書いて実行させる感じになります。

    下記サンプルです。

    window.addEventListener(
      'load', // ページを完全に読み込んだ後に実行
      () => {
        // 前のページの URL を取得
        const ref = document.referrer.toLowerCase();
    
        // 対象にしたいページのスラッグを指定
        const targetSlug = encodeURI( '/ブログ/' ).toLowerCase();
    
        if ( -1 !== ref.indexOf( targetSlug ) ) {
          // 対象とするタブブロックを指定
          const tabs = document.querySelector( '[data-tabs-id="0cd7c37d-33db-4b10-b91d-30a091d2f667"]' );
          if ( !! tabs ) {
            // 対象とするタブを指定
            const tab = tabs.querySelector( '[aria-controls="block-ce097728-902c-47fa-9c7b-d25e712c782f"]' );
            if ( !! tab ) {
              // 対象のタブを強制クリックする
              tab.click();
            }
          }
        }
      },
      true
    );
    2
    いいねをした人:
    #91808
    九州機電株式会社
    参加者
    37

    お忙しいところサンプルをご提供ありがとうございました。
    こちらでやってみます。

    0
    いいねをした人: 居ません
    #92071
    九州機電株式会社
    参加者
    37

    すいません実装したいことが間違えていました・・・。
    こちらの場合どのようになりますでしょうか?

    ページ1に、
    タブブロックを利用してタブ「A」「B」「C」を設定してページを作った場合、

    ページ2の、
    ・リンクバナー画像1からの内部リンクで開いたとき → タブ「A」を開いた状態でページ表示
    ・リンクバナー画像2からの内部リンクで開いたとき → タブ「C」を開いた状態でページ表示

    させる方法はありますでしょうか?
    リンクバナー画像に設定するURLにパラメータを付けておいて、
    それで判別するような感じでしょうか?

    0
    いいねをした人: 居ません
    #92100
    アバター画像キタジマ タカシ
    参加者
    2421

    あーなるほどです。そうですね、

    リンクバナー画像に設定するURLにパラメータを付けておいて、
    それで判別するような感じでしょうか?

    が一番やりやすい方法かなと思います。window.location.search で取得できるので、それを使って先のコードを少し書き換えればいけるかなと思います。

    1
    いいねをした人:
    #92153
    九州機電株式会社
    参加者
    37

    コード書き換えで無事実装できました。
    ありがとうございました。

    1
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「Snow Monkey Blocksの「タブ」設置について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。