Tab là một tính năng khá phổ biến trên nhiều trang web, đặc biệt là trong các cửa hàng thương mại điện tử. Chủ cửa hàng thương mại điện tử thường sử dụng các tab trong khu vực mô tả sản phẩm, nơi họ phân chia đánh giá, mô tả, thông số kỹ thuật, v.v. trong nhiều tab.
Tuy nhiên, các tab đã được sử dụng trên nhiều loại trang web khác nhau, không chỉ các trang web thương mại điện tử. Ngay cả trang web WordPress.org chính thức cũng sử dụng các tab trên các trang mô tả plugin. Xem hình ảnh bên dưới để xem các tab được tô sáng trên WP.org.
Nhiều chủ sở hữu trang web khác sử dụng các tab trên các loại trang web khác nhau. Tuy nhiên, các tab không nên bị nhầm lẫn với accordion, mở rộng để tiết lộ thông tin. Tiếp theo, hãy chú ý cách tôi đã sử dụng accordion trên trang web của mình.
Nhưng ngoài các hiệp ước, chúng tôi ở đây để nói về lông mivì vậy chúng ta đừng mất tập trung; Tôi chỉ cần làm rõ sự khác biệt giữa các tab và accordion. Bây giờ, tôi hy vọng chúng ta ở cùng một trang
Về cơ bản, chủ sở hữu trang web sử dụng các tab để phân chia thông tin có thể chiếm toàn bộ trang hoặc bài đăng. Điều đó có nghĩa là các tab làm cho thông tin dễ tiêu hóa hơn nhiều, mà không nhất thiết buộc người dùng phải nhấn trackball một triệu lần.
Nói cách khác, các tab cải thiện khả năng sử dụng trang web của bạn, đặc biệt là trong một thế giới của các khoảng chú ý ngắn hơn. Vì vậy, nếu bạn muốn giữ người dùng trên trang web của mình lâu hơn mà không gây nhàm chán cho họ bằng các trang dài, bạn nên xem xét sử dụng các tab.
Trong bài đăng hôm nay, chúng tôi chỉ cho bạn chính xác cách thêm tab vào bài đăng và trang WordPress của bạn. Trước khi kết thúc bài viết này, bạn sẽ có tất cả các hướng dẫn bạn cần để sử dụng các tab để lợi thế của bạn. Chúng tôi hy vọng bạn thích cho đến cuối cùng và không rời đi mà không chia sẻ suy nghĩ của bạn trong phần bình luận. Tránh đường, hãy bắt đầu.
Sử dụng trình tạo trang
Nếu bạn đã cài đặt trình tạo trang, bạn sẽ gặp may – rất có thể bạn đã có một mô-đun tab trong tầm tay. Hầu hết các nhà xây dựng trang chính cung cấp các tab như một phần của tập hợp các yếu tố xây dựng trang cốt lõi của họ. Dưới đây là một cái nhìn nhanh về hai trong số yêu thích của chúng tôi.
Trình tạo trang miễn phí Elementor
Trình tạo trang Elementor phổ biến bao gồm các tab như một phần của phiên bản miễn phí của plugin. Tất cả những gì bạn cần làm là chèn một yếu tố tab trên trang của bạn, sau đó chỉnh sửa tiêu đề, nội dung, kiểu, v.v. Thế thôi!
Trình tạo trang cao cấp WPBakery
Bạn có sử dụng một chủ đề cao cấp bao gồm Trình tạo trang WPBakery (như chủ đề Tổng riêng của chúng tôi) không? Tuyệt vời! Các tab được tích hợp và dễ sử dụng.
Mô-đun tab WPBakery hơi khác so với ví dụ trước đó ở chỗ các tab ban đầu trống khi bạn thêm chúng. Bạn sẽ cần chèn các thành phần trang bổ sung (vùng văn bản, hình ảnh, biểu tượng, v.v.) bên trong các tab để thêm nội dung của bạn. Nhưng điều này mang lại cho bạn nhiều sự tự do để tạo các tab theo ý muốn (ngoài các tùy chọn kiểu dáng tích hợp). Chúng tôi đã trình bày trình xây dựng trang blog này, vì vậy nếu bạn muốn có hướng dẫn chi tiết hơn, hãy xem hướng dẫn WPBakery của chúng tôi (lưu ý: plugin này trước đây được gọi là Visual Composer, xin lỗi trước vì có sự nhầm lẫn nào).
Cài đặt plugin WordPress Tab
Nếu bạn không sử dụng trình tạo trang, không cần sử dụng một trình tạo cho các tab. Có rất nhiều lựa chọn thay thế tuyệt vời, như plugin WordPress miễn phí được gọi đơn giản là Tab của WP Shop Mart. Tab là một plugin WordPress khéo léo giúp bạn tạo ra vô số tab đẹp mà không bị đổ mồ hôi.
Hãy bắt đầu bằng cách cài đặt plugin WordPress WordPress. Vì nó có sẵn trong kho lưu trữ plugin WordPress chính thức, bạn có thể cài đặt plugin trực tiếp từ bảng quản trị WordPress.
Chúng tôi đang sử dụng phiên bản miễn phí, nhưng phiên bản cao cấp có sẵn nếu bạn muốn nâng cấp cho các tính năng bổ sung sau này.
Cài đặt plugin WordPress Tab
Đăng nhập vào bảng quản trị WordPress của bạn và điều hướng đến Plugin> Thêm mới và nhập "tab wpshopmart" vào hộp tìm kiếm từ khóa. Khi bạn tìm thấy plugin chính xác, hãy nhấn nút Cài đặt ngay nút như hình dưới đây.
Sau đó bấm vào Kích hoạt nút. Và đó là, plugin WordPress Responsive của bạn đã sẵn sàng để sử dụng. Bây giờ, hãy tạo một vài tab để tìm hiểu xem plugin này cung cấp những gì.
Định cấu hình plugin WordPress Responsive
Kích hoạt plugin sẽ thêm một mục mới vào menu quản trị viên WordPress của bạn. Để tạo các tab mới, điều hướng đến Tab Responsive> Thêm tab mới như chi tiết trong ảnh chụp màn hình dưới đây.
Làm như vậy sẽ đưa bạn đến Trình tạo Phản hồi Tab có chứa tất cả các tính năng bạn cần để tạo các tab đẹp như ông chủ. Xem hình ảnh dưới đây để có được một ý tưởng về những gì mong đợi.
Tất cả một giấy da, phải không? Chà, bạn có thể tìm thấy hầu hết các tính năng trong thanh bên phải. Cũng lưu ý rằng các tab riêng lẻ có cài đặt của chúng. Bạn thậm chí có thể sử dụng các trình soạn thảo WYSIWYG trên các tab, điều đó có nghĩa là bạn có nhiều quyền kiểm soát các tab của mình.
Bây giờ, hãy tạo một vài tab mẫu và hiển thị chúng trên một trang hoặc bài đăng.
Thêm tiêu đề
Bắt đầu bằng cách cung cấp cho các tab của bạn một tiêu đề mô tả (giống như với các menu điều hướng) như trong hình trên. Bằng cách này, bạn có thể dễ dàng xác định các tab của mình trong bảng quản trị WordPress sau này trong trường hợp bạn cần chỉnh sửa một cái gì đó. Với mục đích của hướng dẫn này, tôi đặt tên cho các tab của mình là "Kiểm tra các tab khởi động".
Chọn mẫu thiết kế tab
Như đã thấy trong ảnh chụp màn hình ở trên, bước tiếp theo của bạn là chọn một mẫu thiết kế mà bạn muốn sử dụng cho các tab của mình. Phiên bản miễn phí của plugin WordPress WordPress chỉ cung cấp cho bạn một mẫu thiết kế, nhưng bạn luôn có thể nâng cấp lên phiên bản cao cấp cho 19 nữa. Nói về tự do thiết kế.
Thêm tab
Sau đó thêm bao nhiêu tab tùy thích như bên dưới.
Chúng tôi đã tạo một danh sách đánh số chi tiết những gì bạn có thể làm trong Thêm tab phần hiển thị ở trên. Các con số tương ứng với từng khu vực.
- Tiêu đề tab – Thêm tiêu đề của tab của bạn trong lĩnh vực này, p. Mô tả, thông số kỹ thuật, chi tiết, vv
- Mô tả tab – Thêm mô tả tab của bạn ở đây. Trường này cho phép bạn thêm nội dung của tab. Phần tốt nhất là bạn có thể sử dụng trình soạn thảo WYSIWYG (hiển thị bằng số 3 bên dưới) để thêm nội dung phong phú vào các tab của bạn, bao gồm hình ảnh, âm nhạc và video
- Sử dụng WYSIWYG – Nếu bạn muốn sử dụng quen thuộc Wmũ-YUNED-See-tôis-Wmũ-YUNED-mặt trờiTrong trình chỉnh sửa để tạo nội dung của tab của bạn, vui lòng nhấn nút này để mở cửa sổ bật lên
- Biểu tượng tab – Trường này giúp bạn chọn một biểu tượng để sử dụng trong tab của mình. Tab WordPress plugin cung cấp cho bạn quyền truy cập vào hàng tấn biểu tượng Font Awesome để tạo hiệu ứng cho các tab của bạn như một người chuyên nghiệp
- Hiển thị biểu tượng ở trên – Nếu bạn muốn hiển thị tiêu đề tab bên cạnh biểu tượng, bạn sẽ thích tính năng này. Ngoài ra, nó cho phép bạn tắt biểu tượng mà không cần chạm vào tiêu đề tab
- Xóa – Nhấn nút này để xóa một tab cụ thể
- Thêm các tab mới – Nhấp vào nút này để thêm các tab
- Xóa tất cả – Mệt mỏi vì tất cả các tab? Chỉ cần nhấn Xóa tất cả nút để thiết lập lại tất cả
Một vài lời khuyên bổ sung để giúp bạn. Đầu tiên, bạn có thể kéo và thả các tab để sắp xếp lại và sắp xếp chúng theo ý muốn.
Thứ hai: đừng quên nhấn Lưu dự thảo nút một hoặc hai lần trong khi tạo các tab của bạn để đảm bảo bạn không bỏ lỡ bất kỳ thay đổi nào trong trường hợp bạn vô tình rời khỏi trình tạo tab.
Cuối cùng, nếu bạn cần giúp đỡ, có một màu xanh lớn Nhận hỗ trợ nút ngay bên dưới nút Thêm tab phần (và trên hầu hết các trang của plugin) sẽ đưa bạn đến diễn đàn hỗ trợ tab chính thức tại WordPress.org. Vui lòng nhấn nút trợ giúp nếu bạn cần giúp đỡ bất cứ lúc nào.
Tab Shortcode
Dưới đây bạn sẽ tìm thấy mã ngắn tab bạn sử dụng để thêm và hiển thị các tab của mình trên bất kỳ trang hoặc bài đăng nào bạn muốn. Ví dụ: shortcode của chúng tôi là (TABS_R id = 443). Để hiển thị các tab trên một trang, chỉ cần sao chép và dán mã ngắn ở trên vào trang cụ thể đó.
Tiện ích tab
Bạn có muốn thêm các tab của mình trong một khu vực widget trên trang web của bạn? Nếu đó là một tiếng vang có, bạn sẽ thích hỗ trợ tiện ích đi kèm với plugin WordPress WordPress.
Lượt Nhấn vào đây liên kết trong hình trên sẽ đưa bạn đến màn hình widget WordPress, nơi bạn có thể thêm các tab ở bất cứ đâu bạn có khu vực widget trong chủ đề của mình.
CSS tùy chỉnh
Mặc dù plugin WordPress WordPress đi kèm với rất nhiều tùy chọn tùy chỉnh tab (chỉ cần nhìn vào thanh bên phải – nó có đầy đủ các tùy chọn kiểu dáng!), Bạn có thể thêm các kiểu CSS tùy chỉnh của riêng mình như hiển thị bên dưới.
Ngoài ra, bạn có thể đặt cài đặt tùy chỉnh của mình làm cài đặt mặc định cho tất cả các tab mới chỉ bằng cách nhấp vào Cập nhật cài đặt mặc định nút như trong hình trên.
Thanh bên phải
Thanh bên phải mà chúng tôi làm nổi bật trong hình ảnh trên mang lại ngày cho những người thực sự của nó. Nó được đóng gói với tất cả các tùy chọn bạn cần để thiết kế các tab theo nội dung trái tim của bạn. Các tùy chọn đáng chú ý bao gồm:
- Màu nền tab
- Phông chữ màu
- Phông chữ gia đình và phong cách
- Tùy chọn hiển thị cho tiêu đề và biểu tượng tab
- Căn chỉnh vị trí của biểu tượng tab, tức là trước hoặc sau tiêu đề tab
- Các cạnh của tab
- Nhiều hình động mô tả tab
- Và nhiều hơn nữa
Thêm các tab của bạn vào một trang WordPress hoặc bài đăng
Khi bạn thêm các tùy chọn nội dung và kiểu tab, hãy cuộn lên và nhấp Xuất bản nút như hình dưới đây.
Tại thời điểm này, các tab của bạn đã sẵn sàng. Bạn chỉ cần thêm các tab vào trang WordPress hoặc bài đăng. Chỉ cần sao chép mã shortcode mà chúng ta đã thấy trước đó. Của chúng tôi là (TABS_R id = 443).
Khởi chạy trình chỉnh sửa bài đăng của bạn (ngay cả khi bạn đang sử dụng Gutenberg) và dán mã ngắn vào bài đăng / trang của bạn. Sau đó, nhấn Xuất bản nút như hình dưới đây.
Sau một vài 5 phút thiết lập mọi thứ; Tôi đang sử dụng chủ đề Twenty Seventeen và một loạt Lorem Ipsum, tôi đã đưa ra kết quả như sau.
Xin lưu ý rằng tôi đã không tùy chỉnh màu sắc hoặc bất cứ điều gì. Nói cho tôi biết bạn nghĩ gì; Nó không dễ vậy sao?
Thêm các tab vào các trang và bài đăng WordPress của bạn là điều thứ tư. Tôi không hy vọng bạn có bất kỳ vấn đề nào, đặc biệt nếu bạn đang sử dụng plugin như WP Shop Mart Tab.
Làm thế nào để bạn thêm các tab vào các trang và bài đăng WordPress của bạn? Plugin WordPress yêu thích của bạn cho các tab là gì? Hãy chia sẻ suy nghĩ của bạn trong các ý kiến. Chúc mừng sáng tạo!
