Динамічне змінення кольору елементів у WordPress з використанням Elementor та розширених налаштувань користувацьких полів

8 Березня 2024 в 20:15 110

У світі веб-розробки, особливо у роботі з популярною платформою WordPress, знайти спосіб динамічно змінювати кольори елементів є важливою задачею для створення привабливого та функціонального веб-сайту. Одним із засобів досягнення цієї мети є використання плагінів та розширень, таких як Elementor та Advanced Custom Fields (ACF).

При створенні веб-сайту, можливість динамічно змінювати кольори елементів в залежності від певних умов або даних, що надходять з користувацької бази даних, може бути критично важливою. Однак, ця задача може виявитися не такою простою, як здається на перший погляд. У цій статті ми розглянемо, як саме реалізувати динамічне змінення кольорів елементів у WordPress за допомогою Elementor та розширених налаштувань користувацьких полів (ACF).

function custom_elementor_dynamic_tag_render( $dynamic_value, $dynamic_settings ) {
    // Get the value of ACF field
    $acf_value = get_field('your_acf_field');
    // Check the value and apply appropriate CSS class
    if ( $acf_value === 'Exclusive access' ) {
        $dynamic_value = '<span class="exclusive-color">' . $dynamic_value . '</span>';
    } elseif ( $acf_value === 'All access' ) {
        $dynamic_value = '<span class="all-access-color">' . $dynamic_value . '</span>';
    }
    return $dynamic_value;
}
add_filter( 'elementor/dynamic_tags/render', 'custom_elementor_dynamic_tag_render', 10, 2 );