- このトピックには2件の返信、2人の参加者があり、最後に
KaoruDesignにより1ヶ月、 3週前に更新されました。
-
投稿者投稿
-
2025年4月14日 12:32 PM #5917
【お使いの unitone のバージョン】18.0.0
【お使いのブラウザ】FireFox
【当該サイトのURL】### 実現したいこと
UNITONE タブブロックを設置したページに特定のタブが開いた状態でアクセスしたい
aaa.com/bbb#ccc
などのリンクで#ccc
のタブが開いた状態のページアクセスとしたい### 発生している問題
JSでいくつか記述を試していますがプラグインの制御などがあるようでうまく動かない状態です
### 試したこと
以下のソースなどをタブのある固定ページ等に入れ試してみていますが(すみません、JSに詳しくなくチャットGPTにて試している状態です)そもそもこの方向でかなえようとしているのが難しいという状況でしょうか…
<script> document.addEventListener("DOMContentLoaded", function () { const hash = window.location.hash.replace(‘#', "); if (!hash) return; // 該当タブが確実にDOMにあるかを確認してから実行 const tryActivateTab = () => { const tab = document.querySelector('.unitone-tab[aria-controls="${hash}"]'); if (tab) { tab.click(); // Interactivity APIのアクションを発火 // URLからハッシュを除去(不要ならコメントアウト) history.replaceState(null, null, ‘ ‘); return true; } return false; }; // タブが初期化されるまで繰り返しチェック(最大2秒間) const maxWait = 2000; const interval = 100; let waited = 0; const intervalId = setInterval(() => { if (tryActivateTab() || waited > maxWait) { clearInterval(intervalId); } waited += interval; }, interval); }); </script>
又は以下など
<script> document.addEventListener("DOMContentLoaded", function () { const hash = window.location.hash.replace(‘#', "); if (!hash) return; const trySwitchTab = () => { const tabContainer = document.querySelector(‘[data-wp-interactive="unitone/tabs"]'); if (!tabContainer || !window.wp?.interactivity?.state) return false; const state = wp.interactivity.state.getStore(‘unitone/tabs'); if (state) { state.current = hash; history.replaceState(null, null, ‘ ‘); return true; } return false; }; let waited = 0; const maxWait = 2000; const interval = 100; const timer = setInterval(() => { if (trySwitchTab() || waited >= maxWait) { clearInterval(timer); } waited += interval; }, interval); }); </script>
♥ 0いいねをした人: いません2025年4月15日 12:41 PM #5924一応、Snow Monkey Blocks のタブブロックはその動作に対応しています。のでそっちを使ってみるのも良いかもしれません。
参考:
ただ、Snow Monkey Blocks のタブブロックは開発したのが結構前で、当時の WordPress で動作させるために今となっては実装が複雑になっているので、使いにくかったり、なんか挙動が怪しいということはありえます…。
unitone のタブブロックは最新の WordPress に対応した実装(Intaractivity API)をしているので、それで
KaoruDesign さんの書かれたコードと相性がわるくて動かない、というのはあるかもしれません。2025年4月15日 1:04 PM #5925ありがとうございます!
・Snow Monkey Blocks のタブブロック
→試してみます!
・unitone のタブブロックは最新の WordPress に対応した実装(Intaractivity API)をしている
→情報共有いただきありがとうございます、担当と検証すすめてみます
unitone のタブブロックを活用していきたいというのがあるので
上記と並行して今回のパターンが実装できるようテストしていければと思います
(結構多くあるニーズではあるので…)♥ 0いいねをした人: いません -
投稿者投稿
- このトピックに返信するにはログインが必要です。