ヘッダーの虫眼鏡アイコン（検索ボタン）のクリックでポップアップして開く検索窓の下にタブ一覧を追加表示（WordPress + SWELL）

function swell_perfect_tag_search() {
    $tags = get_tags(array('orderby' => 'name', 'order' => 'ASC', 'number' => 60));
    if (!$tags) return;

    $tag_html = '<div class="custom-tag-section"><p class="custom-tag-title">タグ一覧（記事で使った主なパーツ）</p><div class="custom-tag-list">';
    foreach ($tags as $tag) {
        $tag_html .= sprintf(
            '<a href="%s" class="custom-tag-item">%s<span class="custom-tag-count">%d</span></a>',
            esc_url(get_tag_link($tag->term_id)),
            esc_html($tag->name),
            $tag->count
        );
    }
    $tag_html .= '</div></div>';

    ?>
    <script>
    (function() {
        const tagHtml = '<?php echo addslashes($tag_html); ?>';
        
        const injectTags = function() {
            const inner = document.querySelector('.p-searchModal__inner');
 
            if (inner && !document.querySelector('.custom-tag-section')) {
                inner.insertAdjacentHTML('beforeend', tagHtml);
            }
        };

        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(m) {
                if (m.attributeName === 'class' && m.target.classList.contains('is-active')) {
                    injectTags();
                }
            });
        });

        const timer = setInterval(function() {
            const modal = document.querySelector('.p-searchModal');
            if (modal) {
                observer.observe(modal, { attributes: true, attributeFilter: ['class'] });
                clearInterval(timer);
            }
        }, 1000);

        setInterval(injectTags, 2000);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'swell_perfect_tag_search');

.p-searchModal {
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 999999 !important;
}

body .p-searchModal__inner {
    background-color: #fff !important;
    color: #333 !important;
    padding: 40px 20px !important;
    border-radius: 12px !important;
    max-width: 550px !important;
    width: 90% !important;
    margin: auto !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
}

body .p-searchModal__inner .c-searchForm__input {
    background: #f4f4f4 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

.custom-tag-section { 
    margin-top: 25px; 
    border-top: 1px solid #eee; 
    padding-top: 20px; 
    width: 100%; 
}
.custom-tag-title { 
    font-weight: bold; 
    margin-bottom: 15px; 
    color: #333; 
    text-align: center; 
    font-size: 15px; 
    display: block; 
}

.custom-tag-list { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 8px !important; 
    justify-content: center !important; 
}

.custom-tag-item { 
    background: #f8f8f8 !important; 
    padding: 6px 14px !important; 
    border-radius: 50px !important; 
    font-size: 13px !important; 
    color: #555 !important; 
    border: 1px solid #eee !important; 
    text-decoration: none !important;
    white-space: nowrap;
}
.custom-tag-item:hover { 
    background: var(--color_main, #0073aa) !important; 
    color: #fff !important; 
}

.custom-tag-count { 
    margin-left: 5px; 
    font-size: 0.8em; 
    opacity: 0.6; 
}

.p-searchModal__close { 
    color: #fff !important; 
    z-index: 100 !important; 
}