MWComponents

Produkte und Leistungen als Unternehmenstyp:

<style>

  /* Standardmäßig 3 Spalten */
.pro-leistungen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* Bei Bildschirmbreiten unter 500px, nur 2 Spalten */
@media (max-width: 500px) {
    .pro-leistungen-grid {
        grid-template-columns: 1fr 1fr;
    }
}

  
</style>

<?php
$post_id = get_the_ID();
$all_taxonomies = get_object_taxonomies(get_post_type($post_id));

// Entfernen Sie die Standard-Kategorien-Taxonomie aus der Liste
if (($key = array_search('category', $all_taxonomies)) !== false) {
    unset($all_taxonomies[$key]);
}

// Durchlaufen Sie jede Taxonomie und zeigen Sie deren Begriffe an
foreach ($all_taxonomies as $taxonomy) {
    $terms = get_the_terms($post_id, $taxonomy);
    if ($terms && !is_wp_error($terms)) {
        echo '<strong>' . get_taxonomy($taxonomy)->labels->singular_name . ':</strong><br>';
        echo '<div class="pro-leistungen-grid">'; // Verwendung der CSS-Klasse
        foreach ($terms as $term) {
            echo '<div class="pro-leistungen-listitem">' . $term->name . '</div>';
        }
        echo '</div>'; // Ende des Grids
        echo '<br>'; // Neue Zeile nach jedem Grid
    }
}
?>

<style>
    .tabs {
        display: flex;
        flex-wrap: wrap;
    }

    .tab-button {
        padding: 10px 20px;
        cursor: pointer;
        background-color: #e0e0e0;
        border: 1px solid #ccc;
        margin-right: 5px;
        border-radius: 4px;
    }

    .tab-button.active {
        background-color: #03a9f4;
        color: white;
    }

    .tab-content {
        display: none;
        padding: 20px;
        border: 1px solid #ccc;
        margin-top: 10px;
        border-radius: 4px;
    }

    .tab-content.active {
        display: block;
    }

    .pro-leistungen-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }

    @media (max-width: 500px) {
        .pro-leistungen-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
/*
    .pro-leistungen-listitem {
        padding: 10px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
    }*/
</style>

<div class="tabs">
    <?php
    $post_id = get_the_ID();
    $all_taxonomies = get_object_taxonomies(get_post_type($post_id));

    // Entfernen Sie die Standard-Kategorien-Taxonomie aus der Liste
    if (($key = array_search('category', $all_taxonomies)) !== false) {
        unset($all_taxonomies[$key]);
    }

    $tab_index = 0;

    // Durchlaufen Sie jede Taxonomie und erstellen Sie Tabs und Inhalte
    foreach ($all_taxonomies as $taxonomy) {
        $terms = get_the_terms($post_id, $taxonomy);
        if ($terms && !is_wp_error($terms)) {
            echo '<div class="tab-button' . ($tab_index == 0 ? ' active' : '') . '" onclick="openTab(event, \'tab-' . $taxonomy . '\')">' . get_taxonomy($taxonomy)->labels->singular_name . '</div>';
            $tab_index++;
        }
    }
    ?>
</div>

<?php
$tab_index = 0;

// Durchlaufen Sie jede Taxonomie und zeigen Sie deren Begriffe in den Tabs an
foreach ($all_taxonomies as $taxonomy) {
    $terms = get_the_terms($post_id, $taxonomy);
    if ($terms && !is_wp_error($terms)) {
        echo '<div id="tab-' . $taxonomy . '" class="tab-content' . ($tab_index == 0 ? ' active' : '') . '">';
        echo '<div class="pro-leistungen-grid">';
        foreach ($terms as $term) {
            echo '<div class="pro-leistungen-listitem">' . $term->name . '</div>';
        }
        echo '</div>';
        echo '</div>';
        $tab_index++;
    }
}
?>

<script>
    function openTab(event, tabId) {
        var i, tabcontent, tabbuttons;

        // Alle Tab-Inhalte ausblenden
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            tabcontent[i].classList.remove("active");
        }

        // Alle Tab-Buttons als inaktiv markieren
        tabbuttons = document.getElementsByClassName("tab-button");
        for (i = 0; i < tabbuttons.length; i++) {
            tabbuttons[i].classList.remove("active");
        }

        // Aktiven Tab-Inhalt und -Button anzeigen
        document.getElementById(tabId).style.display = "block";
        document.getElementById(tabId).classList.add("active");
        event.currentTarget.classList.add("active");
    }

    // Standardmäßig den ersten Tab öffnen
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementsByClassName('tab-button')[0].click();
    });
</script>