Làm cách nào để thêm dữ liệu vào bảng trong WordPress?

Các bảng chưa bao giờ là thứ mà WordPress đặc biệt giỏi. Về cơ bản, nếu bạn muốn hiển thị các bảng dữ liệu trong WordPress, rất có thể bạn sẽ phải tự tạo toàn bộ bản trình bày – sử dụng HTML và CSS thô để làm cho mọi thứ trông đẹp mắt

Và không, tôi vẫn chưa quên trình chỉnh sửa khối mới. Mặc dù nó chắc chắn làm cho việc tạo và hiển thị các bảng dễ dàng hơn về tổng thể, nhưng nó vẫn không phải là một giải pháp hoàn hảo, đặc biệt đối với các tập dữ liệu lớn

Dù sao đi nữa, vì bảng là thứ mà chúng tôi đã sử dụng rất nhiều trong các bài đăng của mình tại CodeinWP, nên hôm nay tôi muốn chia sẻ một số chiến lược hàng đầu của chúng tôi với bạn

Trong hướng dẫn này, tôi sẽ trình bày một số ý tưởng sáng tạo về cách bạn có thể sử dụng bảng HTML / bảng dữ liệu trong WordPress, làm cho chúng trông nguyên bản ✨ và cũng đảm bảo rằng chúng được tối ưu hóa cho thiết bị di động và đồng thời thân thiện với SEO

Cách sử dụng #data #tables trong #WordPress - những cách sáng tạo, dễ làm và đẹp mắt ✨

Nhấp để Tweet

Cách tiếp cận ba hướng của chúng tôi đối với các bảng dữ liệu trong WordPress

Để tóm tắt cách tiếp cận của chúng tôi một cách nhanh chóng, chúng tôi đã làm việc với các bảng dữ liệu trong WordPress theo ba cách khác nhau

[a] Sử dụng các bảng đẹp mắt và đáp ứng đơn giản để trình bày dữ liệu cơ bản và làm cho các phần trong bài đăng của chúng tôi dễ hiểu hơn

Ví dụ

[b] Sử dụng thứ mà chúng tôi có thể gọi là “bảng trung cấp” để cho phép một số tính năng bổ sung như sắp xếp người dùng và đánh dấu hàng khi di chuột

Ví dụ trực tiếp

Công ty lưu trữXếp hạng / 5Khảo sát Mức độ phổ biếnThị trường phổ biến [Alexa]GoDaddy3. 50. 41223Bluehost3. 30. 261780HostGator3. 70. 301872WPEngine4. 40. 374065SiteGround4. 61. 005708DreamHost4. 10. 2210030A2 Lưu trữ3. 80. 1612709Cloudways4. 50. 3918544Kinsta4. 80. 2523350Bánh đà4. 60. 1834689Từ khảo sát lưu trữ của chúng tôi

[c] Sử dụng các bảng tự động làm mới cho phép các hoạt động bên trong nâng cao hơn nhiều mà người dùng không nhìn thấy được ở giao diện người dùng. Ví dụ: bảng ở đây được tạo dựa trên Google Trang tính và nó tự động cập nhật [nghĩa là bất cứ khi nào chúng tôi cập nhật trang tính, bảng cũng cập nhật theo]

Ví dụ

Đây là cách bạn có thể bắt chước cách tiếp cận của chúng tôi và xây dựng cho mình một số bảng dữ liệu thú vị trong WordPress

lên đầu trang

Chiến lược số 1. Sử dụng Visualizer để làm cho các bảng của bạn trở nên sống động

Hãy bắt đầu lớn với cách tiếp cận có lẽ là tiên tiến nhất của nhóm. Sau đó, chúng tôi sẽ làm cho mọi thứ trở nên đơn giản hơn khi chúng tôi đi sâu hơn vào bài đăng này

Visualizer là một trong những plugin của riêng chúng tôi và là công cụ chính để thực hiện chiến lược xử lý bảng dữ liệu đầu tiên này trong WordPress.

• 🗒️ Visualizer là gì? . Nó rất đơn giản để sử dụng nếu bạn chỉ cần bộ tính năng cơ bản, nhưng cũng rất mạnh mẽ nếu bạn muốn mày mò thêm một chút

Một trong những điều thú vị về Visualizer là bạn có thể tải dữ liệu của mình – đối với bảng cũng như biểu đồ – từ nhiều nguồn. Ví dụ: khi tạo một bảng mới, bạn có thể nhập từ

• một tệp CSV,
• một URL [bao gồm cả Google Trang tính],
• một biểu đồ khác,
• WordPress [bằng cách tạo các bộ lọc/quy trình công việc, sau đó duyệt qua cơ sở dữ liệu WordPress và hiển thị dữ liệu bạn muốn],
• cơ sở dữ liệu trực tiếp [sử dụng các truy vấn SQL thô],
• ngoài ra, bạn cũng có thể nhập dữ liệu theo cách thủ công

Trình hiển thị. Trình quản lý bảng và biểu đồ cho WordPress

[các] tác giả. chủ đề

90%Xếp hạng 40.000+Cài đặt WP 3. 5+Yêu cầu

Thêm thông tin

trình hiển thị. khóa kéo

Phiên bản hiện tại. 3. 9. 1

Cập nhật lần cuối. Ngày 17 tháng 11 năm 2022

90%Xếp hạng 40.000+Cài đặt WP 3. 5+Yêu cầu

Được rồi, vậy việc đưa bàn của bạn vào cuộc sống sẽ phát huy tác dụng ở đây ở đâu?

Nói chung, điều khó khăn về các bảng là việc tạo chúng bằng tay về cơ bản mất cùng một lượng thời gian như cập nhật chúng sau này. Tất cả chúng ta muốn biến các bảng thành nhiệm vụ một lần và tự động cập nhật mọi thứ

Với Visualizer, bạn có thể chọn tìm nạp dữ liệu cho bảng của mình từ một URL, sau đó đặt quá trình nhập lặp lại mỗi giờ/12 giờ/ngày/ba ngày

Điều này có nghĩa là bạn có một bảng tự động làm mới dựa trên những thay đổi của nguồn. Đọc. không cần phải quay lại và cập nhật thủ công

Dưới đây là bốn cách sáng tạo mà bạn có thể tận dụng điều đó

Luôn cập nhật các nghiên cứu điển hình hoặc bài đăng phân tích của bạn [tự động]

Chúng tôi đã tham gia sâu vào thị trường lưu trữ WordPress. Chúng tôi có một số bài đăng về chủ đề này và hầu hết chúng đều yêu cầu cập nhật liên tục

Một trong những phiên bản so sánh dịch vụ lưu trữ chính của chúng tôi có bảng trực tiếp làm nổi bật thời gian tải của các máy chủ nổi bật. Nó trông như thế này [bảng trực tiếp]

[Bạn có thể không thấy nó hoạt động nếu bạn truy cập bài đăng đó ngay bây giờ; chúng tôi thay đổi bài đăng đó khá thường xuyên, thử nghiệm rất nhiều thứ. ]

Toàn bộ bảng này được tìm nạp tự động từ Google Trang tính. Ngay cả các biểu trưng và liên kết cũng được lưu trữ bên trong Google Trang tính [dưới dạng HTML thô]. Ví dụ, bất cứ khi nào chúng tôi cập nhật thời gian tải, chúng cũng sẽ được cập nhật trong bảng. Chưa kể, người dùng có thể sắp xếp bảng

Thiết lập cái này không khó chút nào

1. Chuẩn bị Google Trang tính của bạn

công cụ tiêu chuẩn. Đây là một ví dụ

Sau đó, “xuất bản nó lên web” theo hướng dẫn này

2. Tạo bảng trong Visualizer

Đầu tiên, cài đặt plugin Visualizer, duh

Chuyển đến Phương tiện → Thư viện Visualizer và nhấp vào Thêm mới. Chọn bàn

Từ cửa sổ thiết lập, chọn Nhập dữ liệu từ URL, vào Lịch nhập rồi nhập URL của mục nhập và lịch. như vậy

Lưu bảng

3. Thêm bảng vào bài đăng/trang

Bao gồm bảng thông qua mã ngắn hoặc sử dụng trình chỉnh sửa khối. Vậy là xong, bạn đã có bảng dữ liệu của mình trong WordPress

Một lần nữa, với thiết lập này, bạn có thể tự động tìm nạp dữ liệu cho các bảng và sau đó các bảng đó cũng tự động cập nhật

Luôn cập nhật nhiều bảng trên nhiều bài đăng [tự động]

Điều này có liên quan đến kịch bản trước đó, nhưng góc hơi khác một chút

Về cơ bản, không có gì ngăn cản bạn sử dụng cùng một Google Trang tính làm nguồn dữ liệu cho nhiều bảng

Điều này có nghĩa là bạn có thể bao gồm các bảng tương tự trên nhiều bài đăng/trang và không phải lo lắng rằng chúng sẽ không đồng bộ theo thời gian [giả sử, bạn sẽ cập nhật một bảng nhưng quên cập nhật bảng kia, v.v. ]

Khi thiết lập bảng của bạn trong Visualizer, bạn có thể vào cài đặt nâng cao và điều chỉnh nhiều thứ khác nhau như phân trang, số hàng, tắt/bật sắp xếp người dùng, bật tìm kiếm, v.v. Điều này có nghĩa là các bảng của bạn vẫn có thể trông khác nhau mặc dù chúng sử dụng cùng một nguồn dữ liệu

Luôn cập nhật lưu lượng truy cập/người dùng/số lượng bán hàng của bạn [tự động]

Có một xu hướng giữa các doanh nghiệp web chia sẻ các số/chỉ số khác nhau như lưu lượng truy cập, doanh số bán hàng, số lượng người dùng được phục vụ, v.v. trên trang web của họ

Tuy nhiên, không phải ai cũng muốn nhúng các dịch vụ bên ngoài và do đó không thể kiểm duyệt chúng theo bất kỳ cách nào

Lý tưởng nhất là ngay cả khi bạn rất minh bạch, bạn vẫn không muốn thức dậy và phát hiện ra rằng lượt nhúng từ giỏ hàng hoặc công cụ lưu lượng truy cập của bạn đang cho thấy sự sụt giảm nghiêm trọng – trong khi dòng tiêu đề của bạn vẫn có thể nói “hãy xem chúng tôi tốt như thế nào' . ”

Nếu bạn thêm một lớp khác và nhập dữ liệu vào Google Trang tính trước, thì bạn có thể kiểm duyệt tất cả các thay đổi trước khi chúng được tìm nạp vào bảng lưu lượng truy cập/doanh số và xuất hiện trực tuyến trên trang web

Thiết lập giống như trong các kịch bản trước. Chỉ cần tạo một Trang tính Google mới, nhập hoặc nhập các số của bạn, sau đó kết nối nó với bảng hoặc biểu đồ Visualizer

Truy vấn cơ sở dữ liệu của bạn [tự động]

Visualizer có thêm một tính năng thú vị nữa;

Công cụ khá tiên tiến, vâng, nhưng cũng mang đến cho bạn rất nhiều khả năng nếu bạn sẵn sàng thử nghiệm

Một số ý tưởng nhanh

Đầu tiên, bạn có thể dễ dàng hiển thị các bài đăng được bình luận nhiều nhất của mình. Bạn có thể sử dụng danh sách như vậy không chỉ trong các báo cáo minh bạch mà còn trên trang lưu trữ của bạn. Ví dụ

Để tạo một bảng như vậy, chỉ cần vào Visualizer, tạo một bảng mới và chọn Nhập từ cơ sở dữ liệu

Trong cửa sổ truy vấn, bạn có thể đặt một cái gì đó như thế này

SELECT post_title AS Post, COUNT[DISTINCT c.comment_ID] AS Comments FROM wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10

Điều này sẽ hiển thị một bảng gồm 10 bài đăng được bình luận nhiều nhất của bạn

Bạn có thể phức tạp hóa truy vấn để lấy URL, để bạn có thể đặt các tiêu đề bài đăng đó trực tiếp. Đây chỉ là một ví dụ. Sau đây là một số việc khác bạn có thể làm

• liệt kê tất cả các bài đăng của bạn từ một danh mục nhất định hoặc được viết bởi một tác giả
• xem xét các bảng mà các plugin khác sử dụng để lưu trữ dữ liệu của họ, tìm nạp dữ liệu liên quan từ chúng
• hiển thị các sản phẩm bán chạy nhất của bạn từ WooC Commerce, cùng với số lượng bán hàng, liên kết, giá cả, bất cứ điều gì khác mà bạn muốn
• làm tương tự với Tải xuống kỹ thuật số dễ dàng;

Đó là về Visualizer và cách chúng tôi đang sử dụng nó. Nhưng cũng có những giải pháp khác nếu bạn không cần loại tự động hóa nâng cao này

lên đầu trang

Sử dụng TablePress để sắp xếp và chỉnh sửa bảng đáng tin cậy

Chúng tôi cũng rất hâm mộ TablePress và đã sử dụng nó trong một số bài đăng của mình

Ví dụ: có một bảng lớn ở đây – liệt kê 100 người chơi hàng đầu trong thị trường chủ đề WordPress. Xem trước

Điều chúng tôi thích ở TablePress là chúng tôi có thể dễ dàng sắp xếp lại các hàng, ẩn hàng, sao chép hàng và cũng cung cấp cho người dùng một số điều khiển để sắp xếp bảng

Ví dụ: đối với bảng cụ thể đó, chúng tôi có thêm một số cột trong phần phụ trợ mà chúng tôi không hiển thị [những cột màu đỏ]. TablePress không buộc chúng tôi phải xóa chúng – chúng tôi chỉ có thể ẩn chúng khỏi màn hình

lên đầu trang

Sử dụng Shortcodes Ultimate để điều chỉnh các bảng HTML của bạn

Cá nhân tôi, Shortcodes Ultimate [SU] là một trong những plugin yêu thích nhất mọi thời đại của tôi

Trong số nhiều mã ngắn của nó, cũng có một mã bạn có thể sử dụng để làm cho các bảng HTML tiêu chuẩn của mình trông đẹp hơn rất nhiều

Đây là một bảng trong bài đăng của chúng tôi so sánh các dịch vụ VPN hàng đầu

Nó được xây dựng thông qua HTML thô, và sau đó chỉ cần thêm một mã ngắn SU xung quanh nó. Cái này

[ su_table][ /su_table]

Tất cả các kiểu hàng và đường viền bạn thấy là của SU

Nói cách khác, nếu chủ đề của bạn không có CSS ​​đặc biệt tốt để xử lý bảng, hãy sử dụng SU

📱 Lưu ý;

lên đầu trang

Phần kết luận

Tôi khuyến khích bạn thử nghiệm với ba plugin này. Chúng tôi yêu thích Visualizer vì đó là sáng tạo của riêng chúng tôi, nhưng chúng tôi phải thừa nhận rằng hai cái còn lại cũng khá gọn gàng cho các tác vụ cụ thể

Trình hiển thị. Trình quản lý bảng và biểu đồ cho WordPress

[các] tác giả. chủ đề

90%Xếp hạng 40.000+Cài đặt WP 3. 5+Yêu cầu

Thêm thông tin

trình hiển thị. khóa kéo

Phiên bản hiện tại. 3. 9. 1

Cập nhật lần cuối. Ngày 17 tháng 11 năm 2022

90%Xếp hạng 40.000+Cài đặt WP 3. 5+Yêu cầu

Máy ép bàn

[các] tác giả. Tobias Bäthge

100%Xếp hạng 800.000+Lượt cài đặt WP 5. 6+Yêu cầu

Thêm thông tin

ép bàn. 1. 14. khóa kéo

Phiên bản hiện tại. 1. 14

Cập nhật lần cuối. Ngày 25 tháng 10 năm 2022

100%Xếp hạng 800.000+Lượt cài đặt WP 5. 6+Yêu cầu

WordPress Shortcodes Plugin — Shortcodes Ultimate

[các] tác giả. Vladimir Anokhin

98%Xếp hạng 700.000+Cài đặt WP 5. 0+Yêu cầu

Thêm thông tin

shortcodes-ultimate. 5. 12. 5. khóa kéo

Phiên bản hiện tại. 5. 12. 5

Cập nhật lần cuối. Ngày 2 tháng 11 năm 2022

98%Xếp hạng 700.000+Cài đặt WP 5. 0+Yêu cầu

Bạn có sử dụng bảng dữ liệu trong WordPress không?

Bạn nghĩ gì về các bảng và vị trí của chúng trong giao diện người dùng hiện đại của WordPress?

Trình chỉnh sửa khối Gutenberg đã làm cho việc tạo bảng trở nên thân thiện với người dùng hơn rất nhiều, vì vậy người dùng thông thường có thể sẽ sẵn sàng thử nghiệm với chúng ngay bây giờ. Xét cho cùng, bảng là một trong những thứ cổ điển mà tất cả những ai đã từng sử dụng MS Word đều khá quen thuộc. Vậy tại sao bạn không thể “chỉ cần thêm chúng” vào WordPress, phải không?

Bạn có sử dụng bảng dữ liệu trong WordPress nhiều không?

👉 Bạn vẫn chưa tin?

Cách sử dụng #data #tables trong #WordPress - những cách sáng tạo, dễ làm và đẹp mắt ✨

Nhấp để Tweet

…

Đừng quên tham gia khóa học cấp tốc của chúng tôi về cách tăng tốc trang web WordPress của bạn. Với một số cách khắc phục đơn giản, bạn có thể giảm thời gian tải xuống thậm chí 50-80%