Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Tiếp theo các cách làm tốt nhất trong phát triển WordPress

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với phần thứ hai của loạt bài này. Trong bài viết đầu tiên, chúng tôi đã giải thích các tiêu chuẩn viết code cho WordPress, làm thế nào để tránh đụng độ không gian tên, trích dẫn code, và một số lời khuyên bảo mật cơ bản.

Hôm nay, chúng ta sẽ đi sâu hơn một chút và viết một số code và tìm hiểu một số kỹ thuật để cải thiện hiệu suất và bảo mật cho plugin của chúng ta. Các chủ đề mà chúng ta sẽ bao quát gồm:

  1. Làm thế nào và khi nào nên bao gồm script/style
  2. Cách gọi hàm Ajax đúng cách
  3. Filter và action để tạo sự tự do cho người dùng của bạn

Lấy trình soạn thạo văn bản của bạn và hãy sẵn sàng chơi đùa với WordPress!

Cách nào và khi nào thì tôi nên bao gồm các script của tôi?

Điều đầu tiên bạn cần phải ghi nhớ là WordPress có hai hàm rất tuyệt vời (wp_enqueue_script và wp_enqueue_style) để cho phép bạn bao gồm các script và style của bạn. Cuối cùng, xin vui lòng đừng thêm chúng theo cách thủ công trong header hoặc bằng cách sử dụng action hook wp_head.

Nếu bạn sử dụng các phương thức của WordPress, thì kỹ thuật caching và minifying các plugin sẽ có thể bao gồm các script của bạn vào trong các hàm của chúng, bạn sẽ có thể chọn đặt chúng ở footer hoặc header rất dễ dàng, bạn sẽ có thể thêm các script phụ thuộc và đồng thời sử dụng tất cả các thủ thuật được trình bày dưới đây cùng với các chức năng khác.

Cách làm sai:

Cách làm đúng:

Tôi không cho bạn một hướng dẫn đầy đủ về cách sử dụng wp_enqueue_xxxx vì nó có rất nhiều (và Codex là nguồn tài liệu tuyệt vời!) và tôi đang cố gắng chỉ ra cách đơn giản mà bạn nên làm để thêm script vào trong các theme hoặc plugin của bạn.

Những gì bạn cần phải luôn luôn ghi nhớ là làm cho nó nhẹ nhất có thể. Điều này có nghĩa là bạn không nên bao gồm các tập tin mà chúng không được sử dụng.

Bạn có thể nghĩ "nó chỉ là một tập tin, nó không ảnh hưởng đến trang web" và với suy nghĩ đó nó giống như việc ném một tờ giấy ra ngoài sân trong một công viên bởi vì nó chỉ là một mẩu giấy nhỏ, nhưng đó không phải là cách mà mọi thứ làm việc; nếu tất cả các nhà phát triển để các sript của họ khắp nơi, thì người dùng cuối sẽ hoàn toàn rời bỏ trang web và chúng ta không muốn điều đó.

Bây giờ thì chúng ta đã rõ điều đó, do đó hãy xem một số chỉ dẫn trong việc bao gồm các script của bạn chỉ khi nào cần thiết.

1. Không bao giờ bao gồm các tập tin Front End trong Backend và ngược lại

Nhưng khoan! Hãy tiến thêm bước nữa và chỉ bao gồm các script trong các trang mà bạn thật sự cần chúng. Một phương thức tốt là đăng ký chúng trước và sau đó thêm chúng trong các trang cần thiết.

2. Bao gồm các tập tin chỉ trong các trang cần thiết

3. Bạn có thêm các script để sử dụng với Shortcodes?

4. Bao gồm các style bằng các điều kiện

Trong khi các đoạn mã khác áp dụng cho cả hai, các script và style, thì điều sau đây sẽ chỉ làm việc với wp_enqueue_style (ít nhất là bây giờ).

Bạn có thể xem thêm một số ví dụ trong Codex. Một ví dụ tuyệt vời mà bạn có thể sử dụng để bắt đầu tất cả các plugin của bạn là WordPress Plugin Boilerplate. Hãy xem code để biết cách các script và style được bao gồm. Plugin Wpfavs (dựa trên WordPress Plugin Boilerplate) nó là một ví dụ về làm thế nào để tạo ra một plugin cho backend của Wordpress.

2. Gọi hàm Ajaxx đúng cách

Đối với chủ đề này tôi sẽ chia sẻ một số thói quen xấu mà tôi thấy rất nhiều khi thực hiện Ajax trong WordPress và chúng có thể được chia thành các câu sau đây:

  • Các cuộc gọi AJAX không nên được thực hiện trực tiếp vào một tập tin
  • Cuộc gọi AJAX nên sử dụng một giá trị nonce
  • Kiểm tra quyền truy cập của người dùng, nếu cần thiết
  • Các biến JavaScript nên được bao gồm trong wp_localize_script

Tôi biết jQuery làm cho các cuộc gọi Ajax trở nên đơn giản, và chúng ta chỉ đơn giản là có thể tạo một tập tin gọi là ajax.php, bao gồm wp-load.php trong nó và gọi Ajax ở đó. Nhưng đó không phải là "cách của WordPress" - nó không phải là tiêu chuẩn tương lai. Thậm chí, nó là kém an toàn và bạn sẽ bỏ lỡ rất nhiều chức năng của WordPress.

Cách chính xác là sử dụng các action hook wp_ajax_my_actionwp_ajax_nopriv_my_action. Sự khác biệt chính giữa hai cái này là cái đầu tiên được sử dụng cho người dùng đã đăng nhập và cái thứ hai được sử dụng cho người dùng không đăng nhập.

Lưu ý rằng "my_action" phải được thay đổi theo tên action của bạn. Chúng ta sẽ xem cách điều đó thực hiện trong chốc lát nữa.

Hãy xem tất cả điều này trong một ví dụ đơn giản với một chút code và trí tưởng tượng. Hãy tưởng tượng rằng chúng ta muốn hiển thị 5 bài viết khi bất kỳ người dùng nào (đăng nhập hay không) nhấp chuột vào một nút. Chúng ta sẽ đặt tên action này là cool_ajax_example, vì vậy, hãy bắt đầu thêm các hàm callback Ajax sẽ trả về dữ liệu.

Bạn có thể bao gồm đoạn code này trong functions.php của bạn hoặc bên trong plugin của bạn.

Như bạn có thể nhìn thấy cả hai hook sử dụng cùng hàm callback mà sẽ trả về dữ liệu. Đồng thời lưu ý rằng tên action của chúng ta là khúc sau của tên hook wp_ajax_cool_ajax_example.

Điều cực kỳ quan trọng là viết tên action đúng, nếu không nó sẽ không hoạt động.

Trước khi chúng ta tiếp tục với hàm callback hãy chuyển đến jQuery cần thiết cho các cuộc gọi Ajax. Script jQuery sẽ chạy khi chúng ta nhấn một nút HTML đơn giản, và chúng ta cần gửi yêu cầu đó đến tập tin admin-ajax.php đó là script mà xử lý tất cả các yêu cầu AJAX trong Wordpress. Đồng thời, chúng ta cần phải thêm một nonce vì chúng ta đã nói rằng chúng ta muốn làm cho nó an toàn vì vậy ở đây vào action wp_localize_script.

Nếu bạn bao gồm các script của bạn đúng cách như đã giải thích ở phần đầu của bài viết này bạn có một tên xử lý (Trong các ví dụ của chúng ta ở trên 'script-handler'), vì vậy hãy sử dụng nó để truyền các giá trị PHP của chúng ta vào trong tập tin javascript của chúng ta. Bạn có thể bao gồm một ít code này ngay sau wp_enqueue_function được sử dụng để bao gồm JavaScript.

Như bạn có thể thấy wp_localize_script là một cách dễ dàng để truyền bất kỳ biến PHP nào vào trong các tập tin JavaScript và nó sẽ in mã xhtml hợp lệ bởi nhờ các thẻ <![CDATA[. Code ở trên sẽ được in ra trong phần header khi tập tin JavaScript với script-handler đóng vai trò như là tên được nạp và nó sẽ trông giống như thế này:

Bây giờ là lúc tạo tập tin javascript của chúng ta, hãy gọi nó là my.js và nó sẽ trông giống như thế này:

Vui lòng lưu ý cách mà chúng ta đang sử dụng nonce và ajax_url mà chúng ta truyền vào với wp_localize_script. Đồng thời kiểm tra xem chúng ta đang truyền một giá trị POST được gọi là "action" phù hợp với tên action mà chúng ta đã sử dụng trong hook wp_ajax.

Bây giờ là lúc để hoàn tất hàm callback của chúng ta. Điều đầu tiên chúng ta cần làm là kiểm tra xem nonce là đúng và sau đó chúng ta có thể trả về một số bài viết.

Nếu trường hợp mà bạn cần thứ gì đó phức tạp hơn giống như việc xoá một bài viết thì hãy luôn luôn kiểm tra quyền của người dùng, như tôi đã đề cập ở phần đầu của chủ đề này. Ví dụ, nếu bạn chỉ muốn các admin thực hiện một hành động cụ thể nào đó bạn có thể làm điều đó trong script của bạn giống như thế này:

Với tất cả các chỉ dẫn ở trên bây giờ bạn là một chuyên gia trong WordPress Ajax và bạn có thể thực hiện bất kỳ action nào mà bạn muốn. Cố gắng chơi với cái ở trên và tinh chỉnh nó để phù hợp với nhu cầu của bạn. Cá nhân tôi thích sử dụng kiểu dữ liệu json và tôi thực hiện echo json_encode() thay vì đơn giản là in ra trên script của tôi, nhưng đó là một vấn đề khác.

3. Filter và Action

Mục đích của phần này sẽ không dạy bạn cách các filter và action làm việc, có nhiều bài hướng dẫn hay về chủ đề này giải thích rõ về nó. Những gì tôi sẽ giải thích ở đây là lý do bạn nên thêm các filter và action trong plugin của bạn và cho bạn xem một số ví dụ để dễ hiểu.

Nhưng đầu tiên hãy giới thiệu về các khái niệm này:

  • Hook: Một action hook được thêm vào tại một thời điểm cụ thể trong plugin của bạn, thường xoay quanh các action quan trọng (ví dụ: trước nội dung, sau nội dung). Bất kỳ người dùng nào đều có thể "hook" vào nó bằng các hàm để cho code của họ được thực thi tại thời điểm đó. Khi một action hook chạy, tất cả các hàm được kết nối, hoặc "hooked" vào nó cũng sẽ chạy.
  • Filter: Một filter hook cũng được đặt trong plugin của bạn để các hàm khác gắn vào nó. Trong trường hợp này các filter cho phép dữ liệu được phân phối hoặc chỉnh sửa trước khi nó được sử dụng. Vì vậy bạn thường đặt nó với các biến mà bạn muốn cho phép người dùng hiệu chỉnh nó.

Hãy xem Plugin API để biết thêm về các action hook và filter hook.

Tại sao phải làm cho Plugin của tôi có thể được mở rộng?

Đơn giản: Bởi vì nó làm cho plugin của bạn trở nên tốt hơn. Bằng cách đó các nhà phát triển và những người dùng bình thường tất cả cùng nhau sẽ có thể mở rộng, lắp ráp vào hoặc cải tiến plugin của bạn bên cạnh mục đích ban đầu của nó mà không tác động đến nhân của nó.

Lấy ví dụ một plugin eCommerce. Nhờ các hook và filter mà bạn có thể tạo các plugin mới mà hook vào nó, giống như ví dụ các cổng thanh toán, các hàm shipping mới, và nhiều hơn nữa.

Nghe có vẻ hay đấy, nhưng tôi phải đặt chúng ở đâu trong plugin của tôi?

Đừng cuốn lên và thêm các action và filter ở mọi nơi. Đầu tiên bạn sẽ thấy một chút khó khăn hay rắc rối này, vì vậy cố gắng nghĩ giống như bạn là một nhà phát triển đang tìm kiếm một plugin mới và hỏi chính bạn "Tôi có cần một action hook ở đây không?". Đồng thời phần hớn các action và filter sẽ được thêm vào theo yêu cầu một khi bạn bắt đầu hỗ trợ các yêu cầu (vâng, bạn sẽ luôn luôn có chúng!) hoặc feedback từ người dùng.

Cũng giống như mọi thứ trong cuộc sống, một khi điều này trở thành một thói quen thì bạn sẽ thấy rõ hơn chỗ nào cần đặt chúng.

Một số lời khuyên về nơi đặt chúng:

  • Khi các mảng được thiết lập, một tuỳ chọn tốt là thêm một filter để cho phép người dùng chỉnh sửa chúng.
  • Khi các đối tượng dữ liệu được thiết lập thì điều tương tự xảy ra. Bạn có thể muốn cho phép người dùng chỉnh sửa đối tượng trước khi nó được sử dụng.
  • Khi các chuỗi dữ liệu được thiết lập chúng ta có thể thêm các filter để cho phép người dùng thay đổi chúng.

Hãy sử dụng hàm callback được sử dụng trong bài viết này để xem một ví dụ về các lời khuyên ở trên. Để tạo các biến có thể filter trong trường hợp này chúng ta sử dụng apply_filters()

Như bạn có thể thấy tôi đã thêm một filter vào biến $args mà sẽ chạy ngay trước khi WP_Query chạy. Với một filter đơn giản đó bất kỳ người dùng nào cũng có thể thay đổi ví dụ về cách các bài viết được trả về.

Bạn có thể sử dụng filter trong nhiều ngữ cảnh, chỉ cần trí tưởng tượng của bạn. Ví dụ trong plugin WordPress Social Invitations của tôi, tôi cho phép người dùng thay đổi stylesheet của bảng thông báo với một filter trong trường hợp họ muốn thay đổi toàn bộ phong cách.

Hoặc trong trường hợp khi plugin gởi các email tôi cho họ cơ hội để thay đổi "From email" mà wp_email() sẽ sử dụng.

Khi làm việc với action thì điều này có một chút thay đổi. Bạn muốn thêm action hook trong các trường hợp sau đây (không giới hạn):

  • trươc khi tác vụ được thực thi,
  • sau khi tác vụ được thực thi,
  • trong quá trình tác vụ được thực thi ví dụ mở rộng mã đánh dấu.

Để tạo các khu vực có thể hook chúng ta sử dụng hàm do_action(). Hãy áp dụng chúng trong ví dụ của chúng ta.

Như bạn có thể thấy tôi đang truyền một đối số vào trong các hook với hàm get_the_ID(). Bất kỳ hàm nào mà hook vào trong action hook của chúng ta  sẽ có thể sử dụng tham số đó. Hãy xem một số ví dụ:

Đồng thời bạn có thể sử dụng hook do_action() để chạy các action khác thay vì thêm mã đánh dấu giống như ví dụ ở trên. Ví dụ, trong WordPress Social Invitations tôi có một action hook mà thực thi mỗi khi một tin nhắn được gởi đi. Sau đó sử dụng plugin myCRED tôi có thể hook action ở thời điểm cho trước tới người dùng mà vừa mới gởi tin nhắn.

Như bạn có thể thấy, thêm các hook và filter sẽ không chỉ giúp ích cho plugin của bạn, mà sẽ còn giúp ích cho những nhà phát triển và người dùng khác. Vậy tại sao không bắt đầu thêm một số filter và action?

Kết luận

Hôm nay chúng ta đã học cách thêm các script và style, cách để gọi hàm Ajax theo cách của WordPress và một số chỉ dẫn cơ bản về filter và action. Chúng ta đã có một số thông tin để phát triển một plugin tuyệt vời và bây giờ tôi có thể nói loạt bài viết này đã gần kết thúc.

Trong bài viết cuối cùng, tôi sẽ nói về internationalization, xử lý lỗi, và tài liệu hướng dẫn để tổng hợp cá thứ về những gì tôi nghĩ là quan trọng nhất trong việc phát triển một plugin.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.