Hướng dẫn công dụng của buttom load more of wedsite
Bài viết hướng dẫn thêm button "Load More" trong WordPress và tự động tải bài viết khi scroll xuống - Cuộn vô hạn (Infinite Scroll) bằng những đoạn code nhỏ. Show Thêm bottom "Load More" - "Xem Thêm"Bỏ qua bước này nếu bạn muốn tự động trai bài viết khi scroll (cuộn trang) Chèn đoạn code hiển thị button ngay dưới phân trang của theme TwentySeventeen - index.php (dòng 55), có thể xóa nếu bạn ko cần. Dùng Note: bài viết sử dụng theme TwentySeventeen.
Thêm style cho button để trông đẹp hơn `.misha_loadmore{ background-color: ddd;border-radius: 2px; display: block; text-align: center; font-size: 14px; font-size: 0.875rem; font-weight: 800; letter-spacing:1px; cursor:pointer; text-transform: uppercase; padding: 10px 0; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; } .misha_loadmore:hover{ background-color: 767676;color: fff;} ` Khai báo file Javascript và tham số AJAXThêm đoạn code dưới vào file functions.php trong theme
Có thể thay thế ajaxurl trên bằng admin_url('admin-ajax.php'), Chú ý nếu không có tham số này bạn sẽ gặp ngay lỗi "ajaxurl is not defined". Another way is to add a button on the page with a workflow to load more items from your collection every time a user clicks on the button. Step 1: Add a buttonDrag-and-drop a Button on the Canvas or Navigator, wherever you want to display it on the Page. In the example below, we placed it below our list of calls: Step 2: Create a variableThis Variable will be called Its default value will be the number of items you want to display on the page by default. In the example below, we want to display 5 items by default. Step 3: Add a workflowOn the button you created in step 1, add a workflow to In the example below, we are saying:
As a result, every time a user clicks on the button, the Step 4: Link the collection to the variableNow, when we bind our Collection List, we need to tell the browser to display the number of items in the In order to do that, we have to WARNING The In the screenshot above, we see that:
Step 5: Test in PreviewOk, that should work. Back in Preview mode, you can click on the button to see the |