[ 解決済 ] グローバルメニューにあるサブメニューをボタンで開きたい

[永子]

■ WordPress のバージョン
6.6

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.26.1

■ Pro Unit のバージョン
バージョン 0.26.8

■ スキンの種類
Evergreen

■ スキンのバージョン
バージョン 0.2.5

■ 期待する動作
サンプル歯科医院のデモにあるサイトを作りたいと思っています。1点つまづいているところがあり、グローバルメニューです。EVERGREENのグローバルメニューは、メニューにサブメニューが存在する場合はカーソルを合わせるだけで、サブメニューが一覧で表示されます。
そうではなく、サブメニューのあるメニュータイトルの右側にボタンを設置し、clickでサブメニューが表示され、×ボタンで非表示にする仕様に変更したいのです。
どのようにすればよいのでしょうか？カスタムCSSが必要な場合は、教えて頂けると助かります。よろしくお願いします。

■ 自分で試した事
外観→カスタマイズで変更できるかと思い試しましたが出来ませんでした。

■ 症状が発生するブラウザ
すべて

■ 実際の症状
ボタンが表示されない

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

トリッキーですが以下のコードを子テーマの functions.php などに貼れば可能です。

function add_custom_script() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // MutationObserver を使用して body クラスの変更を監視する
            var targetNode = document.body;
            var observerConfig = { attributes: true, attributeFilter: ['class'] };
            
            var observerCallback = function(mutationsList) {
                for (var mutation of mutationsList) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                        var bodyClass = targetNode.className;
                        if (bodyClass.includes('device-pc')) {
                            targetNode.className = bodyClass.replace('device-pc', 'device-mobile');
                        }
                    }
                }
            };
            
            var observer = new MutationObserver(observerCallback);
            observer.observe(targetNode, observerConfig);
            
            // 初期状態でも置換する
            var initialClass = targetNode.className;
            if (initialClass.includes('device-pc')) {
                targetNode.className = initialClass.replace('device-pc', 'device-mobile');
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_custom_script');

※仕様変更などで動作しなくなる可能性が0ではありませんのであらかじめご了承願います。

[永子]

ありがとうございます！早速やってみます。

[投稿者]

投稿