Quản trị-ajax PHP

Thiết kế tốt là vô hình. Nó giống như một máy điều hòa không khí được cài đặt điều khiển nhiệt độ tự động. Cho đến khi bạn cảm thấy quá nóng hoặc quá lạnh, bạn sẽ không chú ý đến nó nữa, thay vào đó tập trung vào nhiệm vụ đang làm hoặc chỉ tận hưởng thời gian của mình

Đối với người dùng lướt web, Ajax giống như một chiếc điều hòa tự động. Nó làm cho các trang web mượt mà hơn và nhanh hơn để sử dụng, mang lại trải nghiệm thú vị. Và quan trọng nhất, nó chỉ hoạt động

Thay vào đó, nếu bạn thích một video hơn, bạn thật may mắn

glH4b6-jyzQ

Tìm hiểu cách sử dụng Ajax dễ dàng

Ajax chính xác là gì?

Ajax là một kỹ thuật phát triển web viết tắt của JavaScript và XML không đồng bộ. Nó được sử dụng để tạo các ứng dụng web động có tính tương tác và thú vị. Với Ajax, bạn không cần phải đợi trang web tải lại để thấy sự thay đổi. Mọi thứ được xử lý tự động trong nền mà không làm gián đoạn những gì bạn đang làm, nhờ đó nâng cao trải nghiệm người dùng của bạn

Ajax tại nơi làm việc

Có thể bạn đã bắt gặp Ajax trên web rồi. Tính năng tự động điền của Google Tìm kiếm có lẽ là tính năng phổ biến nhất. Google Maps là một thứ khác. Làm mới trực tiếp các tweet, bình luận trên Facebook, bài đăng trên Reddit, lượt thích trên YouTube, tất cả những trải nghiệm người dùng đáng kinh ngạc này đều có thể thực hiện được nhờ Ajax và các công nghệ liên quan

Trong bài đăng này, tôi sẽ giới thiệu nhanh cho bạn về Ajax, liệt kê các ưu điểm của nó, giải thích cách nó hoạt động trong WordPress và sau đó chúng ta sẽ đi sâu vào việc tạo một Plugin WordPress Ajax đơn giản

Nghe có vẻ vui?

Khái niệm cơ bản về Ajax

Ajax sử dụng kết hợp các ngôn ngữ lập trình như HTML/CSS, JavaScript, XML/JSON và một ngôn ngữ kịch bản phía máy chủ (PHP, ASP. NET, v.v. ). Nó hoạt động bằng cách gửi dữ liệu từ trình duyệt đến máy chủ, máy chủ sẽ xử lý dữ liệu đó và gửi lại phản hồi. Phản hồi này được trình duyệt sử dụng để cập nhật trang web mà không cần tải lại

Đây là cách nó thường diễn ra

  • Một hành động của người dùng sẽ kích hoạt một sự kiện trong trình duyệt (như nhấp vào nút)
  • Cuộc gọi Ajax kích hoạt, gửi yêu cầu đến máy chủ, sử dụng XML/JSON
  • Tập lệnh phía máy chủ xử lý yêu cầu này. Nó cũng có thể truy cập cơ sở dữ liệu nếu nó cần
  • Sau đó, máy chủ sẽ gửi phản hồi lại cho trình duyệt
  • Hàm JavaScript thứ hai, được gọi là hàm gọi lại, nhận phản hồi và cập nhật trang web

Quản trị-ajax PHP

Nhiều ưu điểm của Ajax

  1. Giảm thiểu việc sử dụng băng thông và tối ưu hóa các hoạt động của mạng, vì các máy chủ sẽ không cần phải xử lý tải dữ liệu
  2. Tiết kiệm thời gian cho cả người dùng và máy chủ vì người dùng có thể thấy phản hồi từ máy chủ ngay lập tức
  3. Tăng hiệu suất. Vì không có dữ liệu toàn trang nào được gửi nên Ajax cải thiện hiệu suất, tốc độ và khả năng sử dụng của các trang web/ứng dụng
  4. Tăng khả năng đáp ứng. Bằng cách loại bỏ tải lại toàn trang, các trang web sẽ nhanh hơn và có độ phản hồi cao, do đó thân thiện hơn với người dùng

Các kỹ năng cần thiết để làm việc với Ajax trong WordPress

  • Kiến thức về HTML, CSS và JavaScript (jQuery là đủ)
  • Làm quen cơ bản với các định dạng trao đổi dữ liệu XML hoặc JSON
  • Kiến thức về PHP cho kịch bản phía máy chủ

Nếu kiến ​​thức jQuery hoặc PHP của bạn là chạm và sử dụng, đừng băn khoăn. Bạn vẫn có thể làm theo logic hướng dẫn. Vui lòng tham gia phần bình luận nếu bạn gặp khó khăn hoặc cần trợ giúp về điều gì đó. )

Giới thiệu về Ajax trong WordPress

Cốt lõi của WordPress đã sử dụng Ajax, nhưng chỉ trong màn hình quản trị. Ví dụ: khi bạn kiểm duyệt nhận xét hoặc thêm/xóa các mục khỏi danh mục hoặc bài đăng, bạn có thể thấy các cập nhật tức thì nhờ Ajax. Đó cũng là công nghệ đằng sau chức năng tự động lưu rất được yêu thích

Ajax được sử dụng phổ biến nhất với các hàm jQuery trên WordPress, vì nó đơn giản hơn nhiều so với VanillaJS. Hơn nữa, lõi WordPress đã được tải sẵn thư viện jQuery

Đây là quy trình sử dụng Ajax trong WordPress trông như thế nào

  1. Người dùng kích hoạt một yêu cầu Ajax, lần đầu tiên yêu cầu này được chuyển đến quản trị viên-ajax. php trong thư mục wp-admin
  2. Yêu cầu Ajax cần cung cấp ít nhất một phần dữ liệu (sử dụng phương thức GET hoặc POST). Yêu cầu này được gọi là hành động
  3. Mã trong admin-ajax. php sử dụng hành động để tạo hai hook. wp_ajax_youraction và wp_ajax_nopriv_youraction. Ở đây, hành động của bạn là giá trị của biến hành động GET hoặc POST
  4. Móc đầu tiên wp_ajax_youraction chỉ thực thi cho người dùng đã đăng nhập, trong khi hook thứ hai wp_ajax_nopriv_youraction dành riêng cho người dùng đã đăng xuất. Nếu bạn muốn nhắm mục tiêu tất cả người dùng, bạn cần kích hoạt riêng cả hai người dùng
  5. Lập kế hoạch các chức năng hook để xuống cấp duyên dáng. Nó đảm bảo rằng mã của bạn sẽ hoạt động ngay cả trên các trình duyệt đã tắt JavaScript

Quản trị-ajax PHP

Hãy tạo một plugin WordPress Ajax

Mọi hành trình vĩ đại đều bắt đầu bằng một bước duy nhất, và việc học của chúng ta cũng vậy. Hãy để chúng tôi xây dựng một plugin WordPress cơ bản có tên là Bộ đếm lượt thích bài đăng với các tính năng sau

  • Người dùng đã đăng nhập có thể thích bài đăng
  • Plugin theo dõi tổng số lượt thích bài đăng và hiển thị chúng
  • Bộ đếm lượt thích bài đăng được cập nhật ngay lập tức trên giao diện người dùng
  • Người dùng đã đăng xuất sẽ được hiển thị thông báo lỗi nếu họ cố gắng thích một bài đăng

Để bắt đầu, hãy tạo một plugin WP trống và kích hoạt nó. Nếu bạn cần trợ giúp về điều này, bạn có thể tham khảo hướng dẫn phát triển plugin WordPress của chúng tôi. WordPress Codex cũng có một trang chi tiết về cách viết plugin WP

Tìm mẫu bài đăng theo chủ đề của bạn

Sau đó, bạn cần tìm đĩa đơn của chủ đề. mẫu bài viết php. Nó được sử dụng khi một bài đăng được truy vấn, đó là nơi chúng tôi muốn bộ đếm lượt thích bài đăng của mình. Tệp này có thể được tìm thấy trong thư mục gốc của chủ đề đang hoạt động của bạn. Giữ nó mở để chỉnh sửa

Chuẩn bị mẫu bài đăng sẵn sàng cho cuộc gọi Ajax

Hãy tạo một liên kết ở đây để cho phép người dùng thích bài viết. Nếu người dùng đã bật JavaScript, thì họ sẽ sử dụng tệp JavaScript mà chúng tôi sẽ tạo sau này; . Đặt mã được cung cấp dưới đây vào đĩa đơn của bạn. tập tin php

Đang tải ý chính 1379ac822720e8c8c1860209a2bfe323

Ngoài ra, bạn có thể thêm mã này vào bất kỳ phần mẫu nào trong đĩa đơn của mình. tập tin php bao gồm. Chẳng hạn, nếu bạn đang sử dụng chủ đề Twenty Nineteen chính thức, bạn có thể chèn mã này vào nội dung đơn của chủ đề. tập tin php. Để kiểm tra mã plugin này, tôi đã chèn nó vào tệp này ở cuối div của nó. phần nội dung đầu vào

Giải quyết cuộc gọi Ajax mà không cần JavaScript

Nhấp vào liên kết được tạo ở trên sẽ đưa bạn đến quản trị viên-ajax. php, nhưng bạn sẽ không thấy bất kỳ đầu ra hữu ích nào vì bạn chưa tạo bất kỳ chức năng nào để chạy hành động của mình

Để làm điều đó, hãy tạo một chức năng trong tệp plugin của bạn và thêm nó vào hai móc được WordPress tạo cho bạn. Thực hiện theo các mã hiển thị dưới đây

Đang tải ý chính 5b77823b65250637eee4396d8abcc5a0

Nếu mọi thứ đều ổn, khi người dùng đã đăng nhập nhấp vào liên kết Thích bài đăng này, bộ đếm lượt thích ở trên sẽ tự động tăng thêm 1. Đối với các trình duyệt đã tắt JavaScript, trang sẽ làm mới nhưng vẫn hiển thị số lượt thích được cập nhật

Chức năng xử lý người dùng đã đăng xuất không làm được gì nhiều ở đây ngoại trừ việc đưa ra thông báo lỗi. Nó chỉ có nghĩa là để phục vụ như một ví dụ. Tất nhiên, bạn có thể xây dựng dựa trên điều này và cung cấp cho khách truy cập của mình nhiều tùy chọn hữu ích hơn

Cuối cùng, Thêm hỗ trợ cho JavaScript

Đó là một cách thực hành tốt để thêm hỗ trợ cho JavaScript vào cuối, vì nó làm cho mọi thứ rõ ràng hơn nhiều. Để sử dụng Ajax trên WordPress, bạn cần liệt kê thư viện jQuery cũng như tệp JavaScript tùy chỉnh của plugin của bạn. Đối với điều này, hãy truy cập plugin của bạn và thêm đoạn mã sau

Đang tải ý chính c4ba96f5ac2997b294c70c90b82d43d3

Khi đã xong, đã đến lúc tạo liker_script. tệp JavaScript js. Sau đó, bạn phải tải tệp này lên vị trí được tham chiếu trong mã trước đó (gợi ý. đó là thư mục gốc của plugin của bạn). Đây là mã cho liker_script. js

Đang tải ý chính 9d3183eeca419da10b9ff997ef236b87

Hàm my_user_like() được xác định trong plugin của chúng tôi sẽ gửi phản hồi cho trình duyệt của chúng tôi dưới dạng mảng kết quả được mã hóa JSON, cũng có thể được sử dụng làm đối tượng JavaScript. Sử dụng điều này, chúng tôi có thể cập nhật số lượt thích của bài đăng mà không cần tải lại trang web

Và đó là nó. Hoan hôyyyy

Bây giờ bạn đã bật chức năng Ajax cho plugin của mình. Tất nhiên, bạn có thể mở rộng về điều này và thêm nhiều tính năng hơn theo ý thích của mình. Hãy tiếp tục, chỉnh sửa nó cho đến khi bạn thực hiện được

Quản trị-ajax PHP
Bộ đếm lượt thích bài đăng đơn giản của chúng tôi. Bạn có thể thêm kiểu, hoạt ảnh và các tập lệnh khác để tăng cấp cho nó

Các plugin WordPress đáng chú ý sử dụng Ajax

Cần một số nguồn cảm hứng Ajax để kích thích bạn?

  1. Plugin lười tải
    Lazy Loading là một kỹ thuật phát triển web được sử dụng để cải thiện thời gian tải trang ban đầu. Nó được thực hiện bằng cách trì hoãn việc tải các nội dung nặng tài nguyên không hiển thị cho người dùng trong chế độ xem của trình duyệt của họ. Các nội dung này được tải tự động khi người dùng cuộn trang web xuống. Phiên bản miễn phí của Smush hỗ trợ lazy loading
  2. người định hình
    Một plugin tạo biểu mẫu hoàn toàn có thể mở rộng cũng hỗ trợ các cuộc thăm dò, câu hỏi, biểu mẫu đặt hàng với các tùy chọn thanh toán, v.v. Nó có một tùy chọn để cho phép gửi biểu mẫu với Ajax, làm cho nó trở thành một trải nghiệm liền mạch cho người dùng
  3. Đăng nhập bằng Ajax
    Tăng sức mạnh cho trang web WordPress của bạn với các hiệu ứng đăng nhập và đăng ký Ajax mượt mà với plugin giàu tính năng này. Nếu bạn đang muốn cung cấp cho người dùng của mình trải nghiệm đăng nhập và đăng ký tốt hơn so với trải nghiệm mặc định của WordPress, thì không cần tìm đâu xa
  4. WP-PostRatings
    Plugin đơn giản này thêm hệ thống xếp hạng Ajax cho các bài đăng và trang trên trang web WordPress của bạn. Nó cũng thêm hỗ trợ mã ngắn cho xếp hạng để bạn có thể hiển thị chúng ở bất cứ đâu bạn muốn
  5. Bộ lọc sản phẩm Ajax YITH WooC Commerce
    Một plugin cực kỳ hữu ích và mạnh mẽ dành cho WooC Commerce cho phép bạn áp dụng các bộ lọc chính xác mà bạn cần để hiển thị các biến thể sản phẩm mà bạn đang tìm kiếm. Ajax đảm bảo rằng tất cả diễn ra trong nháy mắt
  6. Tìm kiếm Ajax Lite
    Một plugin tìm kiếm trực tiếp, đáp ứng cho WordPress, được cung cấp bởi Ajax. Nó cũng bao gồm các đề xuất từ ​​khóa và tự động điền của Google. Cung cấp cho người dùng của bạn trải nghiệm tìm kiếm tốt hơn trên trang web của bạn với plugin này
  7. Trò chuyện Ajax đơn giản
    Bạn đã bao giờ tự hỏi liệu bạn có thể trò chuyện trực tiếp với những người dùng khác trên một trang web không? . Nó tương thích với thiết bị di động và được xây dựng để cực kỳ tùy biến theo ý thích của bạn

Đi qua WordPress. kho plugin của org để triển khai Ajax hiệu quả hơn

Giữ bình tĩnh và bật Ajax

What’s good for the is good for the user and server too, but you need to balance it out. Ajax is a powerful tool in your arsenal to enhance website performance and user experience. But you should only use it where it’s necessary. Always focus on the user experience aspect. It’ll be a bit rough in the beginning, but once you’ve mastered the basics of Ajax, there’s no stopping you!

Bạn đã từng sử dụng hoặc tạo một plugin hỗ trợ Ajax cho WordPress trước đây chưa?

quản trị viên là gì

Quản trị viên-ajax. tệp php chứa tất cả mã để định tuyến các yêu cầu Ajax trên WordPress . Mục đích chính của nó là thiết lập kết nối giữa máy khách và máy chủ bằng Ajax. WordPress sử dụng nó để làm mới nội dung của trang mà không cần tải lại, do đó làm cho nó trở nên năng động và tương tác với người dùng.

Làm cách nào để sử dụng AJAX trong php?

Sau đó, chúng tôi sẽ sử dụng mvc AJAX để tìm kiếm kết quả phù hợp rồi hiển thị tên đầy đủ của khung ngay bên dưới biểu mẫu tìm kiếm. .
Bước 1) Tạo trang chỉ mục. Mục lục. php. .
Bước 2) Tạo trang khung. khuôn khổ. php. .
Bước 3) Tạo tập lệnh JS. .
Bước 4) Kiểm tra ứng dụng PHP Ajax của chúng tôi

Làm cách nào để gọi AJAX trong quản trị viên WordPress?

Khi bạn định thực hiện cuộc gọi Ajax, bạn cần phải gửi yêu cầu tới quản trị viên-ajax. tệp php , là một phần của lõi WordPress. Tệp này chịu trách nhiệm xử lý và xử lý tất cả các yêu cầu Ajax của bạn trong bối cảnh WordPress. KHÔNG sử dụng URL trực tiếp của đường dẫn tệp.

Làm thế nào để giảm bớt quản trị viên

Chuyển đến Bảng điều khiển của bạn -> Plugin -> Thêm mới. Tìm kiếm plugin theo tên, nhấp vào cài đặt và kích hoạt nó. Sau khi kích hoạt, hãy đi tới Cài đặt -> Cài đặt kiểm soát nhịp tim. Tại đây, bạn có thể đặt các quy tắc khác nhau cho các vị trí khác nhau