Làm cho hàng Beaver Builder dính chặt vào đầu khi cuộn

Thủ thuật WordPress
1

Bạn muốn đặt nội dung của một hàng cụ thể lên trên cùng khi cuộn xuống bố cục trang được tạo bằng Beaver Builder? Chức năng này có thể được triển khai bằng cách sử dụng mã từ plugin Sticky jQuery. Một trường hợp sử dụng lý tưởng, khi sử dụng mô-đun menu trong bố cục tự động lên trên cùng khi người dùng cuộn để có khả năng hiển thị tốt hơn và trải nghiệm người dùng tốt.

Tải xuống và tải lên Plugin jQuery dính

Sticky là một add-on jQuery thứ 3. Bạn có thể phân nhánh nó trên GitHub.

  1. Tạo thư mục “js” (phân biệt chữ hoa chữ thường) bên trong thư mục chủ đề của bạn
  2. Tạo một tệp mới “jquery.sticky.js” và lưu vào thư mục “js” này
  3. Bấm vào liên kết này
  4. Sao chép mã đầy đủ và dán vào tệp “jquery.sticky.js”
  5. Lưu các tập tin

Enqueue Sticky JS tệp

Bây giờ chúng ta cần xếp hàng đợi tệp “jquery.sticky.js” trên trang web bằng hàm wp_enqueue_scripts . Mở tệp functions.php của chủ đề (con) đang hoạt động của bạn và thêm đoạn mã PHP sau.

add_action( 'wp_enqueue_scripts', 'wpd_enqueue_scripts', 1000 );
function wpd_enqueue_scripts() {
	if( is_page( 99 ) )
		wp_enqueue_script( 'wpd-sticky-script', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array(), '1.0', true );
}

Tập lệnh trên đang tải tệp JS trên một trang cụ thể có ID 99 . Bạn có thể thay thế 99 bằng ID của trang hoặc bài đăng của mình (kiểm tra các thẻ điều kiện khác tại đây). Nếu bạn muốn tải tệp này trên toàn bộ trang web, chỉ cần xóa câu lệnh IF khỏi mã.

Chỉnh sửa trang bằng Beaver Builder

Mở trang cụ thể ở chế độ Beaver Builder, sau đó nhấp vào biểu tượng cờ lê để mở cài đặt của hàng bạn muốn đặt cố định trên cuộn. Nhấp vào tab Nâng cao và chuyển đến phần Phần tử HTML, sau đó nhập hàng wpd-stick-row vào trường nhập lớp và lưu cài đặt.

Bố cục CSS & JavaScript

Cuối cùng, chúng ta cần thêm một vài dòng mã CSS & JavaScript. Nhấp vào Thanh công cụ BB → Mục trình đơn Layout CSS & JavaScript và nhập mã CSS và JS sau.

CSS

.wpd-sticky-row {
    z-index: 465677887!important;
}

JS

jQuery(document).ready(function(){
    if( jQuery('body').hasClass('fl-builder-edit') )
        return;
    jQuery(".wpd-sticky-row").sticky({topSpacing:0});
});

Cuối cùng, xuất bản trang (xóa bộ nhớ cache, nếu có) và bạn sẽ thấy nội dung của một hàng cụ thể ở đầu cuộn trang. Tuyệt, phải không?