Aby dynamicznie obliczyć liczbę kolumn w obszarze widżetu stopki i zastosować odpowiednie klasy CSS, możesz to osiągnąć w następujący sposób:

1. Rejestrowanie obszaru widżetów w Twoim motywie functions.php.
2. Zliczanie liczby aktywnych widżetów w obszarze widżetów.
3. Dynamiczne stosowanie klas CSS na podstawie liczby widgetów.

Oto podejście krok po kroku, jak to osiągnąć:

Krok 1: Zarejestruj obszar widżetów

Dodaj to do swojego motywu functions.php plik do zarejestrowania obszaru widżetu stopki.

function my_theme_widgets_init() {
    register_sidebar(array(
        'name' => 'Footer Widget Area',
        'id' => 'footer-widget-area',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

Krok 2: Policz liczbę aktywnych widżetów

W Twoim motywie functions.php plik, utwórz funkcję zliczającą aktywne widżety i przypisz klasy kolumn.

function count_active_widgets($sidebar_id) {
    $sidebars_widgets = wp_get_sidebars_widgets();
    return isset($sidebars_widgets[$sidebar_id]) ? count($sidebars_widgets[$sidebar_id]) : 0;
}

function dynamic_footer_columns() {
    $widget_count = count_active_widgets('footer-widget-area');
    $column_class="";

    if ($widget_count == 1) {
        $column_class="one-column";
    } elseif ($widget_count == 2) {
        $column_class="two-columns";
    } elseif ($widget_count == 3) {
        $column_class="three-columns";
    } elseif ($widget_count >= 4) {
        $column_class="four-columns";
    }

    echo $column_class;
}

Krok 3: Zastosuj klasy CSS dynamicznie

W pliku szablonu stopki Twojego motywu (np. footer.php), zastosuj klasę kolumny dynamicznej do kontenera obszaru widżetu stopki.

<footer id="footer">
    <div id="footer-widget-area" class="<?php dynamic_footer_columns(); ?>">
        <?php if (is_active_sidebar('footer-widget-area')) : ?>
            <?php dynamic_sidebar('footer-widget-area'); ?>
        <?php endif; ?>
    </div>
</footer>

Krok 4: Dodaj CSS dla klas kolumn

W pliku CSS Twojego motywu (np. style.css), dodaj style dla klas kolumn.

#footer-widget-area {
    display: flex;
    flex-wrap: wrap;
}

#footer-widget-area.one-column .widget {
    flex: 0 0 100%;
}

#footer-widget-area.two-columns .widget {
    flex: 0 0 50%;
}

#footer-widget-area.three-columns .widget {
    flex: 0 0 33.33%;
}

#footer-widget-area.four-columns .widget {
    flex: 0 0 25%;
}

Streszczenie

To podejście dynamicznie oblicza liczbę aktywnych widżetów w obszarze widżetu stopki i stosuje odpowiednie klasy CSS, aby renderować je w kolumnach. Używając CSS Flexbox, zapewniasz, że widżety dostosują swój układ zgodnie z określoną liczbą kolumn. Dostosuj CSS w razie potrzeby, aby dopasować projekt swojego motywu.