Thực hành ajax trong wordpress nơi tình yêu bắt đầu

Thực hành ajax trong wordpress nơi tình yêu bắt đầu

Ngày 23 - 03 - 2018 - Tại chuyên mục: Wordpress - Lượt xem: 1231

Bài viết trước mình đã giới thiệu cho các bạn cơ bản về cách sử dụng ajax trong wordpress và cũng có ví dụ cụ thể… Nhưng mình vẫn thấy cái ví dụ đó chưa phê lắm. Vì thế hôm nay mình quyết định làm một bài về thực hành ajax trong wordpress, bài viết này sẽ giúp các bạn hiểu rỏ hơn về ajax trong wordpress và cũng có thể đây là nơi tình yêu bắt đầu với ajax :))

Trong quá trình thực hành sẽ sử dụng rất nhiều kỹ thuật xử lý javascript cụ thể là jquery vì thế bạn hãy trang bị kiến thức jquery cơ bản trước khi xem bài viết này nha. Đồng thời bạn cũng có kiến thức về lập trình theme wordpress cơ bản như (get category, new wp_query). Nếu đã có những kiến thức đó thì chúng ta bắt đầu nhé.

Thực hành ajax trong wordpress

Load bài viết ngẫu nhiên sử dụng ajax trong wordpress

Ở bài này yêu cầu sẽ được nâng cao hơn: Load bài viết ngẫu nhiên với số lượng bài viết cho trước. 

Code chức năng ở phía front end:

Code html hiển thị giao diện theo yêu cầu gồm có 1 button để lick load bài viết, một ô textbox (input) để nhập số lượng bài viết, cũng giống như ví dụ trước <div class=”display-post-cat”></div> dùng để chứa nội dung trả về.

Code jquery lấy bắt sự kiện click, lấy dữ liệu từ thẻ input và chạy hàm ajax: Gởi dữ liệu đi, nhận dữ liệu rả về và hiển thị tra giao diện.

 

Code chức năng ở phía server:

Tương tự như ví dụ ở bài trước đoạn code sử lý ajax được đặt ở file functions.php của theme. Nhưng ở trường hợp này là lấy danh sách bài viết ngẫu nhiên theo số lượng cho trước. Để lấy được số lượng gởi từ front end chúng ta dùng đoạn code:  $number = isset($_POST[‘number’]) ? (int)$_POST[‘number’] : 0; 

Chúng ta sẽ lấy theo phương thức là POST vì hàm ajax ở front end sử dụng phương thức là POST nhé. Sau khi lấy được số lượng chúng ta cho vào vòng lặp get post nhưng bình thường là oke.

Video hướng dẫn ví dụ số 1:

Get bài viết theo chuyên mục sử dụng ajax trong wordpress

Ví dụ này yêu cầu chúng ta làm chức năng sau: List tất cả danh mục bài viết dưới dạng tabs. Khi click vào tên chuyên mục thì phía dưới sẽ load ra toàn bộ bài viết của chuyên mục đó.

Đánh giá yêu cầu của đề bài chúng ta cần các kiên thức sau để làm được yêu cầu này:

  • Biết cách hiển thị danh mục bài viết
  • Bắt được sự kiện khi click vào từng chuyên mục khác nhau sẽ lấy những thông tin khác nhau tương ứng.
  • Liệt kê được những dữ liệu mà frontend gởi lên cho backend.
  • Biết cách get bài viết theo chuyên mục trong wordpress.

Xử lý code bên phía front end:

Ở phía front end chúng ta sẽ làm 2 công việc đó là: List tất cả danh của bài viết ra và xây dựng hàm ajax để gởi dữ liệu cho server, nhận dữ liệu từ server trả về và hiển thị chúng tra ngoài.

Code list tất cả danh mục bài viết:

Đây là đoạn get danh mục bài viết. Phần data-id=”<?php echo $cate->term_id; ?>” đây là phần chúng ta sẽ dựa vào để lấy id của từng chuyên mục khi lick vào chuyên mục đó.

Code xử lý javascript ajax ở front end: 

Để lấy bài viết theo chuyên mục thì chúng ta phải gởi cho server 2 thành phần đó là action và id của chuyên mục đó.

Chúng ta sẽ gởi đi action: getpostcat_id : cat_id trong đó cat_id được lấy thông qua thuộc tính data(‘id’) đây là cách lấy giá trị từ trong 1 thẻ bất kỳ của html5 nhé.

Xử lý code bên phía backend (server):

Video hướng dẫn ví dụ số 2:

Tổng kết:

Hôm nay mình vừa hướng dẫn cho các bạn cụ thể hơn cách dùng ajax trong wordpress. Những bài tiếp theo mình vẫn tiếp tục viết chủ đề ajax, làm một số chức năng cao siêu hơn 😀 Hẹn gặp lại các bạn trong những bài viết hướng dẫn wordpress tiếp theo 🙂

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native... 😂😂 tối về viết blog... (Còn tiếp...)

12
  • Thanh_TaiAnh làm video hướng dẫn làm mấy cái custom, như post type, taxonomy... E mới biết WP nên đọc bài viết chưa hiểu lắm ;))

    Thích Trả lời 4 tháng trước

  • chungmình làm ajax cũng như vậy cho custom posttype nhưng gặp phải vấn đề là nó không gửi được cái cat_id lên để thực hiện truy vấn, vậy thì phải làm sao ạ! link lưu file mình đã viết....https://anotepad.com/notes/r44bfq khi mình return biến được gửi từ client ra thì kết quả nhận đc luôn = 0 vậy là sao ạ?

    Thích Trả lời 2 tháng trước

    • Huy KiraMình ko biết cậu thiết kế trong admin như thế nào. Mình chỉ cần thấy 'post_type' => 'track_record', 'category' => $cat_id, là thấy sai rồi. cái category mặc định nó chỉ đi với post type là post thôi. Bạn kiểm tra lại chổ custom post type và custom taxonomy nhes~!

      Thích Trả lời 2 tháng trước

  • mau giuong goiMy brother recommended I might like this website. He was totally right. This submit truly made my day. You cann't believe just how so much time I had spent for this info! Thank you!

    Thích Trả lời 1 tháng trước

  • Bảo BảoXem video cũng dễ hiểu đó, hôm nào Huy làm clip cách rip teamplate blogspot nhé.

    Thích Trả lời 1 tháng trước

  • Thư Thị Chào anh, cho em hỏi một vấn đề ngoài lề, ko liên quan tới bài viết này ạ. E mới lập web site ạ. Đến cái đoạn này "Đây là bài viết quan trọng", nhưng em ko biết trường hợp nào thì mình tích chọn vào đó. Có phải là bài viết phải trên 900 từ thì mới đc tích chọn vào ô đó đúng ko anh? (anh xem hình đây ạ: https://www.facebook.com/photo.php?fbid=164843444379367&set=a.164843517712693.1073741829.100025611367101&type=3&theater). Cảm ơn anh rất nhiều!

    Thích Trả lời 3 tuần trước

  • Haocảm ơn anh, may quá có task cụ thể mới làm được, chứ trc h em đọc định nghĩa hơi vi mô chút :D

    Thích Trả lời 3 tuần trước

    • Huy KiraHehe thì nó hơn rắc rối nên a mới làm 2 bài. 1 lý thuyết 1 thực hành chứ :D

      Thích Trả lời 3 tuần trước

  • Bạn Huy KiraHướng dẫn mình dùng ajax làm cái comment như này đi cậu

    Thích Trả lời 1 tuần trước

  • Người dùngLúc load ajax như vậy nhiều bài quá thì làm sao để đưa phân trang vào trong đó cậu ơi

    Thích Trả lời 1 tuần trước

AVT