Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Template Động trong WordPress, Phần 2

by
Read Time:12 minsLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 1
Dynamic Page Templates in WordPress, Part 3

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

Trong phần 1 của loạt bài hướng dẫn này, tôi đã giới thiệu các khái niệm cơ bản về template động và tạo ra một template tiêu chuẩn đóng vai trò như là nền tảng cho các công việc sau này. Một theme WordPress con dựa trên theme cha là Twenty Seventeen đã được sử dụng để cài đặt template.

Trong hướng dẫn này, bạn sẽ tìm hiểu cụ thể hơn về các template động và cách bạn có thể sử dụng chúng trong các dự án WordPress của riêng bạn.

Tôi cũng sẽ hướng dẫn cho bạn từng bước một cách mở rộng template từ hướng dẫn đầu tiên và chuyển nó thành template động đầu tiên của bạn!

Template Động: Cách tiếp cận Linh hoạt hơn

Vậy làm thế nào chúng ta có thể làm cho các template trở nên linh hoạt hơn, và tại sao nó lại hữu ích?

Giả sử bạn có một template portfolio xuất ra một bộ sưu tập các mục của portfolio. Mỗi mục sẽ có một kích thước cố định, và chỉ có rất nhiều mục có thể phù hợp với mỗi hàng.

Tất nhiên, chúng ta có thể thêm một template khác để hiển thị portfolio tại các kích thước khác nhau. Nhưng nếu chúng ta muốn hiển thị portfolio theo dạng nhỏ, trung bình hay lớn thì sao? Đối với vấn đề này, chúng ta có thể cần ba template riêng biệt, với mỗi template có các kích thước khác nhau cho các mục của portfolio.

Điều này có thể được làm cho trở nên linh hoạt hơn bằng cách thêm một menu sổ xuống để chọn kích thước portfolio (tức là Nhỏ, Trung bình hoặc Lớn). Điều này sẽ thuận tiện hơn cho người dùng vì meta-box cho template sẽ ít lộn xộn hơn khi không có các lựa chọn không cần thiết.

Nó còn có ý nghĩa hơn đối với những nhà phát triển, những người chỉ có một template để duy trì chứ không phải là ba cái! Việc này tuân theo nguyên tắc phát triển phần mềm Do not Repeat Yourself (DRY), tức là không lặp lại chính mình.

Tất cả Template có nên là Template Động?

Cần lưu ý rằng, không phải tất cả các template đều nhất thiết phải là template động. Nếu bạn có một template mà chỉ làm một công việc, và chỉ một thôi, thì template đó ổn. Không có lý do gì để thêm các điều khiển tùy biến và logic phụ vào một template trong trường hợp này.

Nhưng, rồi bạn sẽ thấy khi kết thúc hướng dẫn này, nhiều template sẽ rất có lợi từ việc trở nên linh hoạt hơn.

Một ví dụ hữu ích khác cho một template động sẽ là một form liên hệ. Có nhiều điều khiển tùy biến có thể được thêm vào để làm cho template này có tính linh hoạt cao.

Ví dụ, thay vì xuất ra một bộ các trường form cố định, thì các điều khiển có thể được thêm vào để cho phép bạn lược bỏ các trường nhất định. Hoặc có thể một trường Captcha tuỳ chọn có thể hiển thị để ngăn chặn spam? Có rất nhiều cách để bạn có thể tùy biến một form liên hệ.

Tôi sẽ tạo ra template động trong phần 3 của loạt bài hướng dẫn này. Nhưng trước tiên, chúng ta hãy bắt đầu với việc tạo ra một template động cho mục đích chung.

Template Động Đầu tiên của Chúng ta

Để bắt đầu với nó, chúng ta sẽ tạo ra một template động cơ bản để minh hoạ cách mà tất cả các thành phần kết hợp lại với nhau. Các điều khiển tuỳ biến sẽ được thêm vào trình chỉnh sửa trang, cái mà sẽ được sử dụng sau này để kiểm soát đầu ra của template động.

Template tùy biến mà chúng ta sẽ thêm vào sau đây sẽ có:

  • Textbox
  • Textarea
  • Checkbox
  • Radio Button
  • Select box

Về mặt ý tưởng thì, các điều khiển nên được thêm trực tiếp bên dưới hộp chọn template để cho thấy rõ chúng liên quan đến một template.

Tuy nhiên, WordPress không cung cấp bất kỳ hook nào cho việc này cả, do đó bạn sẽ phải (ngay bây giờ) thêm các điều khiển cho template tuỳ biến trong một meta-box tùy biến riêng biệt. Trong phần ba của loạt bài hướng dẫn này, tôi sẽ chỉ cho bạn cách giải quyết vấn đề này.

Hook là nguyên tắt cơ bản đối với phát triển WordPress. Chúng cho phép các nhà phát triển mở rộng code cơ sở mà không cần phải chỉnh sửa các tập tin bên trong nhân của WordPress, điều mà thường được coi là một ý tưởng tồi. Điều này là bởi vì bất kỳ code tuỳ biến nào cũng đều sẽ bị xóa sạch bất cứ khi nào WordPress được cập nhật (điều mà có thể diễn ra khá thường xuyên).

Để hiển thị meta-box của chúng ta ở trên màn hình soạn thảo trang, hãy thêm hook load-post.phpload-post-new.php vào phương thức init() của theme con mà chúng ta đã tạo ra trong phần 1.

Chúng ta sử dụng hai hook WordPress để đảm bảo meta-box hiển thị trên trình soạn thảo trang, cho dù là bạn đang tạo một trang mới hoặc chỉnh sửa một trang hiện có. Ngoài ra còn có một hook gọi là save_post xử lý việc lưu meta-data của bài viết, cái mà tôi sẽ đề cập đến trong giây lát nữa.

Thêm bốn phương thức lớp sau đây để tạo, hiển thị và lưu dữ liệu cho meta-box.

Tôi sẽ không đi sâu vào chi tiết về các meta-box trong WordPress ở đây, vì toàn bộ nó có thể cần một hướng dẫn riêng, nhưng hãy lưu ý những điểm sau đây trong code mà tôi đã thêm vào ở trên:

  • Phương thức lớp page_template_meta_box()add_page_template_meta_box() đăng ký meta-box với WordPress.
  • Trong add_page_template_meta_box(), tham số 'page' xác định rằng meta-box này sẽ chỉ được hiển thị trên trình soạn thảo có post type là 'page' bên trong quản trị của WordPress.
  • Phương thức lớp display_page_template_meta_box() kết xuất meta-box và thiết lập một nonce để làm cho các diều khiển của form trở nên an toàn hơn.

Nếu tất cả đều ổn, giờ đây bạn sẽ có một meta-box hiển thị trên trình soạn thảo trang, như minh hoạ dưới đây.

A new page meta boxA new page meta boxA new page meta box

Tuy nhiên, lúc này nó chưa có nội dung, vì vậy hãy thêm một số điều khiển.

Thêm các Điều khiển Tuỳ biến

Nếu bạn còn nhớ, chúng ta sẽ thêm các điều khiển bao gồm một Textbox, Textarea, Checkbox, radio button, và select box vào meta-box. Hãy bắt đầu bằng cách thêm đoạn code sau vào phương thức display_page_template_meta_box() bên dưới hàm nonce.

Code này truy vấn các giá trị hiện tại của các điều khiển meta-box và lưu trữ chúng trong các biến cục bộ. Bây giờ hãy thêm code HTML sau đây ngay sau nó, để kết xuất các điều khiển cho meta-box.

Mỗi điều khiển được chứa bên trong một thẻ đoạn văn p, và giá trị hiện tại của nó được cập nhật thông qua biến cục bộ mà chúng ta đã tạo ra trước đó. Việc này đảm bảo rằng các điều khiển của meta-box luôn luôn hiển thị đúng các thiết lập.

Tuy nhiên, điều này sẽ không xảy ra trừ khi chúng ta lưu dữ liệu của các điều khiển meta-box hiện tại vào cơ sở dữ liệu WordPress.

Cách đây không lâu, tôi đã đăng ký một hook để thực thi một phương thức lớp mỗi khi trình biên tập trang được cập nhật. Hãy thêm phương thức đó vào lớp của theme con của chúng ta ngay bây giờ.

Phương thức lớp save_page_template_meta() xử lý việc lưu dữ liệu từ các điều khiển của meta-box. Nó chỉ lưu dữ liệu meta-box nếu nonce đã được xác minh, những người dùng hiện tại có thể sửa bài viết, và chúng ta đang ở trên trang quản trị.

Nếu các điều kiện đó được thỏa mãn, thì chúng ta trích xuất dữ liệu cho mỗi điều khiển được lưu trong biến $_POST toàn cục. Biến này được thiết lập mỗi lần form được submit.

Cuối cùng, dữ liệu từ meta-box được lưu vào cơ sở dữ liệu WordPress dưới dạng meta-data cho trang hiện tại.

Với các điều khiển cho template tuỳ biến được thêm vào, meta-box của chúng ta sẽ như sau.

Adding controls to the meta boxAdding controls to the meta boxAdding controls to the meta box

Hãy nhập một số văn bản vào Textbox và Textarea và chọn checkbox, radio button và select box. Nhấn Update để lưu các thay đổi của bạn, và khi trình biên tập trang tải lại, các điều khiển trên meta-box của bạn sẽ hiển thị dữ liệu mà bạn vừa nhập.

Populating the meta boxPopulating the meta boxPopulating the meta box

Mã nguồn đầy đủ cho tập tin functions.php của theme con được minh hoạ dưới đây.

Phần cuối cùng của câu đố là, sử dụng dữ liệu từ các điều khiển trên meta-box trong template của chúng ta ở trên front-end. Hãy mở tập tin test-page-template.php mà chúng ta đã tạo ra ở trong phần 1 và thay thế nội dung bằng code đã được cập nhật sau đây.

Hãy đảm bảo 'Test Page Template' là template hiện đang được chọn và quan sát trang ở trên front-page.

Viewing the output of the meta boxViewing the output of the meta boxViewing the output of the meta box

Như bạn có thể thấy, giờ đây template đã bao gồm các giá trị vừa mới được thiết lập cho các điều khiển trên meta-box trong trình soạn thảo trang. Đây là mấu chốt cho phần còn lại của hướng dẫn vì chúng ta sẽ xây dựng dựa trên ví dụ cơ bản này và tạo ra các ví dụ khác nhau về các template động đầy đủ chức năng mà bạn có thể sử dụng trong các dự án WordPress của riêng bạn.

Phần Tóm tắt

Trong hướng dẫn này, chúng ta đã khái quát cách tạo một template động. Tại thời điểm này, mặc dù nó hoạt động, nhưng template cơ bản của chúng ta không hữu ích cho lắm.

Trong phần ba và phần cuối của loạt bài hướng dẫn này, tôi sẽ chỉ cho bạn thấy cách xây dựng các template động khác nhau, từ đầu đến cuối, mà bạn có thể sử dụng (và mở rộng) trong các dự án WordPress của riêng bạn.

Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng để lại cho tôi một tin nhắn trong phần bình luận ​​dưới đây. Tôi rất muốn lắng nghe những suy nghĩ của bạn về hướng dẫn này.

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.