Hướng dẫn WordPress: Cách tạo trang web WP cuộn vô hạn

Bài viết được viết bởi:
  • WordPress
  • Cập nhật: Tháng bảy 29, 2014

Bạn chắc chắn làm việc chăm chỉ để cải thiện khả năng sử dụng của trang web của bạn để người dùng của bạn sẽ hạnh phúc hơn và có nhiều khả năng quay trở lại thường xuyên hơn, đúng không? Vâng, một trong những cải tiến bạn có thể thực hiện là kỹ thuật cuộn vô hạn. Về cơ bản nó giống như những gì chúng tôi có trên Twitter hoặc Facebook, nơi nội dung cơ bản chỉ được hiển thị lúc đầu và nội dung được thêm vào khi bạn cuộn xuống. Điều này là khá tốt để cải thiện hiệu suất trang web của bạn (giảm thời gian tải) và cải thiện trải nghiệm người dùng (vì không cần thực hiện hành động nào để tải thêm các mục, như nhấp vào một nút).

Ở đây chúng ta sẽ thấy lý do tại sao và làm thế nào để sử dụng nó trong trang web của riêng bạn

Ví dụ os Trang web cuộn vô hạn

Luôn luôn tốt để kiểm tra những gì các ông lớn đang làm ngoài đó và loại hiệu ứng này (khó khăn nhiều lần không được chú ý) được sử dụng bởi rất nhiều trang web và ứng dụng lớn, như Facebook (nguồn cấp dữ liệu trực tiếp), Twitter, Pinterest, Feedly.

feedly

twitter

Cuộn vô hạn - Do và Don'ts

Kỹ thuật này sẽ xóa liên kết phân trang thường xuyên của trang web của bạn (“bài đăng cũ hơn” hoặc các trang được đánh số mà bạn có sau bài đăng của mình). "Chuyên nghiệp" lớn của kỹ thuật này là thời gian tải, vì ít mục được tải lúc đầu bạn có thể có trang web nhanh hơn nhiều và vì nhiều mục được thêm mà không cần người dùng tải lại trang có thể cuộn xuống cho "trang" bài viết mà không cần nhận thấy, ở lại lâu hơn trong trang web của bạn.

Nó có thể được áp dụng trong hầu hết các trang web, nhưng nó phù hợp hơn cho các blog hoặc các trang giống như danh mục đầu tư, nơi bạn có rất nhiều nội dung và hình ảnh, và bạn không muốn áp đảo người dùng với nhiều nội dung.

Hướng dẫn này không yêu cầu trình độ mã hóa và thành thật mà nói, chắc chắn bạn sẽ học được một chút về cách điều chỉnh chủ đề WordPress của mình một chút.

Các tài sản

Chúng tôi sẽ sử dụng Plugin JS của Irish Irish. Tải xuống và cài đặt nó trong thư mục js của chủ đề của bạn. Chúng tôi sẽ sử dụng Twenty Twelve cho các mục đích học tập nhưng vui lòng sử dụng nó trong bất kỳ chủ đề nào (và đăng câu hỏi nếu nó không hoạt động cho bạn).

Ngoài ra, bạn sẽ cần một hình ảnh gif đẹp cho tin nhắn tải Tải của bạn. Bạn có thể tìm thấy rất nhiều trong số họ ngoài đó, nhưng AjaxLoad trang web có một công cụ khá tuyệt vời để giúp bạn với nhiều kiểu đặt sẵn và bạn có thể chọn màu phù hợp hơn với bảng màu của bạn.

Một khi bạn có kịch bản và hình ảnh gif đẹp của bạn theo Wp-content / themes / twentytwelve / js, chúng ta có thể bắt đầu!

Mã PHP

Ok, đừng sợ, chúng tôi sẽ cung cấp cho bạn một bản sao và dán đoạn trích, nhưng đây là những gì chúng ta cần làm để làm cho nó hoạt động:

  • Tạo một hàm sẽ tải và đăng ký plugin cuộn vô hạn trong nội bộ - Điều này sẽ ngăn WordPress tải hai lần và phá vỡ chức năng của chủ đề
  • Chỉ tải tập lệnh khi bạn có một trang không phải là một bài đăng duy nhất - chỉ các trang mà bạn có nhiều hơn bài đăng trên 1 mới hiển thị sẽ cần tải thêm các mục.

Tệp functions.php là trái tim của chủ đề của bạn. Tất cả các chức năng thường có ở đó hoặc nó được gọi là có từ các tập tin khác. Vì vậy, chúng tôi có thể thêm mã này vào tệp chức năng của bạn để thêm hỗ trợ cuộn vô hạn (thêm nó vào cuối tệp):

<? Php / ****** / TÌM KIẾM ******** / / * Chức năng sẽ đăng ký và liệt kê kịch bản của scolling vô hạn sẽ được sử dụng trong chủ đề. * / function fiftwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // tên của tập lệnh get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // tập lệnh này yêu cầu tập lệnh jquery null, // không có số phiên bản tập lệnh đúng // tập lệnh sẽ được đặt trên chân trang); if (! is_singular ()) {// chỉ khi chúng tôi có nhiều hơn bài 1 // chúng tôi sẽ tải tập lệnh này wp_enqueue_script ('infinite_scrolling'); }} // Đăng ký tập lệnh tùy chỉnh của chúng tôi! add_action ('wp_enqueue_scripts', 'fiftwelve_script_infinite_scrolling'); / * Chức năng sẽ thiết lập cuộn vô hạn sẽ được hiển thị trong trang. * / function set_infinite_scrolling () {if (! is_singular ()) {// một lần nữa, chỉ khi chúng ta có nhiều hơn 1 post // thêm tập lệnh js bên dưới?> <script type = "text / javascript"> / * Đây là Cài đặt cuộn không xác định, bạn có thể sửa đổi tùy ý này * / var inf_scrolling = {/ * img: là đường dẫn tải hình ảnh, thêm một biểu tượng tải gif đẹp ở đó có thông báo: tin nhắn đang tải xong img: "<? echo get_template_directory_uri ();?> / hình ảnh / ajax-load.gif", Trình tin: "Đang tải bài viết tiếp theo ....", xongMsg: "Bài viết được tải !!",}, / * Mục tiếp theo là đặt nextSelector. NextSelector là lớp css của điều hướng trang. Trong trường hợp của chúng tôi là # nav-dưới .nav-trước a * / "nextSelector": "# nav-under .nav-trước a", // navSelector là một css id của điều hướng trang "navSelector": "# nav-bên dưới ", // itemSelector là div nơi bài đăng được hiển thị" itemSelector ":" article ", // contentSelector là div nơi nội dung trang (bài viết) được hiển thị" contentSelector ":" # content "}; / * Điều cuối cùng cần làm là cấu hình contentSelector thành cuộn vô hạn, với hàm jquery từ infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / * chúng ta cần thêm hành động này vào chân trang của trang. 100 là một số ưu tiên xác nhận việc thực hiện sau này. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

Phương pháp thay thế - tải trang và các loại bài đăng tùy chỉnh

Mã trước đó sẽ tải tất cả các bài đăng của bạn, nhưng nếu bạn muốn hiển thị các trang hoặc các loại bài đăng tùy chỉnh (như các mục danh mục đầu tư, nếu chủ đề của bạn hỗ trợ nó)? Vâng, chúng ta có thể sửa đổi mã một chút và làm cho nó hoạt động tốt.

Điều chỉnh duy nhất cần thiết là trong chỉ mục, danh mục của bạn hoặc bất kỳ tệp nào khác sẽ tải các mục, bạn sẽ thay thế vòng lặp hiện tại bằng một mã khác. Bạn có thể xác định vòng lặp của bạn bằng mã này:

trong khi (have_posts ()):

Vì vậy, một khi bạn đã tìm thấy nó, bạn có thể sử dụng ma thuật này:

<div id = "content" role = "main"> <? php / * Chỉ hiển thị các trang trên cuộn vô hạn! Đây là bí mật: Bạn có thể đặt post_type cho những gì bạn cần, thật đơn giản! Một số post_types có thể là: danh mục đầu tư, dự án, sản phẩm Chúng ta có thể thêm bao nhiêu loại bài như chúng ta muốn, tách chúng bằng dấu phẩy, như 'post', 'page', 'product' * / $ args = array (// set up arguments 'post_type' => 'trang', // Chỉ trang); query_posts ($ args); // load posts if (have_posts ()):?> <? php / * Bắt đầu Loop * /?> <? php while (have_posts ()): the_post (); // mã vòng lặp "thông thường" để hiển thị các mục đó?>

Kết luận

Đây chỉ là bài viết “khởi động”. Có rất nhiều thứ bạn có thể làm với cách tiếp cận này. Ví dụ, bạn có thể tải các sản phẩm trong cửa hàng của bạn (sử dụng WooCommerce, có thể) khi người dùng cuộn, hoặc thậm chí thêm nhiều mã JS và CSS ở đó để tạo và bộ nạp tương tự như hình sai cho hình ảnh bài đăng.

Bạn nghĩ gì về kỹ thuật này? Bạn có thích nó không? Bạn sẽ sử dụng nó? Chia sẻ suy nghĩ của bạn bằng phần bình luận!

Giới thiệu về Olive Oliveira

Tôi là một nhà thiết kế web và doanh nhân từ Itajubá (MG), Brasil. Tôi thích viết về những chủ đề tối nghĩa và làm một số thứ hay ho.

Kết nối: