update member

Lưu ý: file sẽ bị mất khi cập nhật theme, có thể chỉnh trực tiếp như sau.

1. Thêm thư viện Swiper

Mở file:

.../themes/onep.../functions.php

Thêm cuối file:

function onepress_add_team_slider(){

    wp_enqueue_style(
        'swiper-css',
        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'
    );

    wp_enqueue_script(
        'swiper-js',
        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js',
        array(),
        null,
        true
    );

    wp_add_inline_script(
        'swiper-js',
        '
        document.addEventListener("DOMContentLoaded",function(){

            new Swiper(".team-slider",{

                loop:true,

                autoplay:{
                    delay:2500,
                    disableOnInteraction:false
                },

                speed:800,

                slidesPerView:4,

                spaceBetween:30,


                breakpoints:{

                    1200:{
                        slidesPerView:4
                    },

                    992:{
                        slidesPerView:3
                    },

                    768:{
                        slidesPerView:2
                    },

                    480:{
                        slidesPerView:1
                    }

                }

            });

        });
        '
    );

}

add_action(
    'wp_enqueue_scripts',
    'onepress_add_team_slider'
);

2. Sửa file Teams

File thường nằm ở:

wp-content/themes/onepress/section-parts/section-team.php

Tìm:

<div class="team-members row team-layout-<?php echo intval( 12 / $layout ); ?>">

Thay bằng:

<div class="team-slider swiper">

<div class="swiper-wrapper">

Tìm:

<div class="team-member wow slideInUp">

Thay bằng:

<div class="team-member swiper-slide wow slideInUp">

Tìm cuối phần:

</div>

ngay sau vòng:

foreach ( $user_ids as $member )

Thêm:

</div><!-- swiper-wrapper -->

</div><!-- team-slider -->

Kết quả cấu trúc sẽ thành:

<div class="team-slider swiper">

    <div class="swiper-wrapper">

        <div class="team-member swiper-slide">
            Thành viên 1
        </div>

        <div class="team-member swiper-slide">
            Thành viên 2
        </div>

    </div>

</div>

3. Thêm CSS hiệu ứng slide

Vào:

Appearance → Customize → Additional CSS

Thêm:

.team-slider{
    overflow:hidden;
}

.team-member{
    transition:.4s ease;
}


.team-member:hover{
    transform:translateY(-15px);
}


.member-thumb img{
    transition:.5s;
}


.team-member:hover .member-thumb img{
    transform:scale(1.1);
}

4. Tăng số lượng thành viên

Trong code của bạn hiện tại:

$user_ids = onepress_get_section_team_data();

Nó lấy dữ liệu từ Customizer.

Vào:

Appearance
→ Customize
→ Team Section

bấm Add Item thêm thành viên.

Nếu muốn bỏ giới hạn số lượng, sửa file:

inc/customizer-con/section-team.php

tìm:

 'max_item'      => 4, // Maximum item can add

và tăng số item mặc định.

5. Thêm hiệu ứng xuất hiện khi kéo trang

Bạn đang có:

wow slideInUp

OnePress đã tích hợp WOW.js. trong ../section-parts/section-team.php

Có thể đổi thành:

<div class="team-member swiper-slide wow fadeInUp">

hoặc:

<div class="team-member swiper-slide wow zoomIn">

Các hiệu ứng có sẵn:

fadeIn
fadeInUp
fadeInDown
slideInLeft
slideInRight
zoomIn
bounceIn

Cách này chạy trực tiếp trên theme OnePress hiện tại, không cần child theme. Điểm duy nhất là sau khi cập nhật OnePress bạn cần copy lại các chỉnh sửa này.