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

Mẫu trang web động trong WordPress, phần 3

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Vietnamese (Tiếng Việt) translation by Thùy Trang (you can also view the original English article)

Ở hai phần trước, chúng ta đã đề cập đến các mẫu template động là gì và tại sao lại cần dùng đến chúng. Chúng ta cũng biết các dòng lệnh code cần thiết để tạo ra trang mẫu.

Trong phần ba của loạt bài này, tôi sẽ tạo ra hai mẫu template động đơn giản mà bạn có thể dùng cho riêng mình. Hai mẫu này được chọn đặc biệt là để dễ dàng chỉnh sửa thêm nếu cần thiết và cũng giúp bạn có thêm cảm hứng cho những dạng template khác mà bạn có thể nghĩ ra.

Hai mẫu trang web động mà chúng ta sẽ nghiên cứu sau đây là:

  • Biểu mẫu liên hệ đơn giản
  • Lưu trữ bài đăng blog

Tôi cũng sẽ hướng dẫn bạn cách trình bày lại template cho đẹp hơn, bằng cách custom lại code CSS và JavaScript, để việc tương tác trở nên thân thiện hơn với người dùng.  

Ngoài ra, chúng ta cũng sẽ cùng tìm hiểu cách sử dụng template cho bất kì kiểu post nào. Từ WordPress 4.7 trở lên, bạn có thể gán một kiểu post type với một mẫu template. Hãy xem bạn có thể chỉnh sửa một template động có sẵn và tận dụng được tính năng mới đó cho bất cứ post type nào không.

Chúng ta vẫn còn rất nhiều thứ để nói trong bài hướng dẫn này, vậy nên bắt đầu thôi!

Khởi tạo Theme

Chúng ta sẽ sử dụng lại child theme (hay theme con) Twenty Seventeen đã dùng trong phần 2 và chèn thêm code chỉnh sửa. Chúng ta hãy bắt đầu bằng một theme con trống.

Tạo một thư mục đặt tên là twentyseventeen-child và thêm vào các file sau:

  • functions.php
  • style.css

Bên trong style.css, thêm:

Và bên trong functions.php, thêm:

Bây giờ hãy hêm một theme con vào thư mục theme WordPress như đã làm trước đó. Nếu quên cách làm, bạn có thể xem lại hướng dẫn cách làm ở phần 2.

Chúng ta bây giờ đã có môt theme con (trống) và sẵn sàng để có thể chèn thêm code.

Template trang biểu mẫu động

Việc đầu tiên cần thực hiện là một form liên hệ đơn giản. Chúng ta sẽ thêm vào những trường sau:

  • Tiêu đề
  • Tên
  • Chủ đề
  • Thư điện tử
  • Số điện thoại

Ngoại trừ tiêu đề là một HTML tag, những trường còn lại đều dưới dạng text.

Tuy nhiên, trước khi bắt tay vào thực hiện mẫu template thực, chúng ta cần phải thêm các custom control vào editor cho phép chúng ta sửa đổi output của template. Để sau khi tạo xong template, nó sẽ được hiển thị theo đúng những custom control đã được tùy chỉnh trong editor.

Trong phần 2 tôi cũng đã đề cập tới việc không có cách nào tối giản để thêm các custom control trực tiếp vào meta box Page Attributes nơi chứa drop-down box cho các mẫu template.

Page Attributes

Điều này có nghĩa là chúng ta phải thêm các template control đó theo cách khác . Tôi sẽ chỉ cho bạn cách giải quyết vấn đề này với CSS và Javascript. Bây giờ, chúng ta hãy giải quyết nó bằng cách khác, hãy thêm các custom control đó vào một meta box khác.

Trong class DPT_Twenty_Seventeen_Child, tạo ra 2 action hooks mới trong hàm init, đồng thời tạo thêm một hàm mới là page_template_meta_boxes.

Hai action hooks load-post.phpload-post-new.php sẽ chạy ngay sau khi một post type được chỉnh sửa hoặc được tạo ra. Sau đó, ta sẽ tạo một action hook khác, hãy đặt tên là add_meta_boxe, action hook này giúp tạo ra custom meta box thông qua việc gọi hàm callback add_page_template_meta_boxes. Hãy viết đoạn code cho hàm callback này.

Những control meta box sẽ được render thông qua hàm callback display_form_page_template_meta_box, hàm callback sẽ được truyền vào hàm to add_meta_box() như là một tham số.

Hiện giờ thì tôi đã thêm text mẫu vào khung meta box mới tạo ở trong editor.

Form Page Template Meta Box

Các bạn hãy nhớ là template mẫu của chúng ta sẽ có 1 tiêu đề và 4 trường text. Và bạn có thể chọn rất nhiều cách để custom lại form output, nhưng lần này thì chúng ta sẽ thêm check box để toggle sự ẩn/hiện của mỗi field. Hãy cập nhật lại code trong trong hàm display_form_page_template_meta_box() như sau.

Một cách bảo mật trong Wordpress là dùng nonce, nonce value sẽ được thêm vào và sẽ được xác minh lại trước khi các giá trị được lưu xuống database.

Lưu ý: Nếu vì lý do nào đó mà nonce value không được xác minh thì những thiết lập trước đó sẽ không được lưu lại.

Sau đó, các giá trị của form sẽ được lưu và truy hồi lại trước khi những trường đó được hiện ra trên metabox.

Form Page Template Meta Box with Options

Hiện tại thì các check box này sẽ không được lưu lại khi chúng ta update bài viết. Để giữ nguyên các thiết lập của form thì chúng ta cần thêm hook mới vào trong hàm init(), khi save_post được gọi ra thì nó sẽ được kích hoạt để thực hiện cập nhật các meta setting của bài viết.

Sau khi kiểm tra được nonce value, quyền user, và đúng post type, sau đó viết code check lại các giá trị và lưu vào database.

Giờ thì các check box đã đủ chức năng, do đó chúng ta có thể tiếp tục chỉnh sửa template thực. Trong folder child theme gốc, hãy thêm vào một folder mới đặt tên page-templates và sau đó thêm vào một file là form-page-template.php.

Bạn hãy thêm vào file vừa tạo đoạn code sau để tạo ra một template trống mới.

Để giảm độ phức tạp, mẫu form liên hệ sẽ không validate các user input ngoài một số phần check và validation đơn giản cho form, vì trong phần này, chúng ta chỉ tập trung việc tạo ra cách thức tạo ra output của form thôi. 

Trước hết, chúng ta cần lấy ra các giá trị từ check box trong form.

Sau đó hãy thêm code tương ứng cho form. Cách làm khá giống với các trường của form. Bạn hãy để ý kĩ đến trường name.

Chúng ta sẽ kiểm tra giá trị của check box từ setting trước, nếu trường đó được check thì thêm phần code cho phần output tương ứng. Nếu không được check thì sẽ không output ra gì hết. Làm tương tự cho tất cả các trường khác của form như heading, subject…

Sau khi form được gửi đi, chúng ta sẽ gửi email cho admin và hiển thị thông báo trên màn hình. Dưới đây là tổng hợp code để tạo ra trang template.

Để kiểm tra mọi thứ có hoạt động chính xác hay không, hãy đảm bảo rằng tất cả các check box của template đều được kiểm tra và cập nhật bài đăng. Bây giờ chúng ta sẽ ghé qua giao diện bên ngoài để kiểm tra một chút.

Looking at the template on the front-end

Giờ bạn thử bỏ chọn một số check box trên form template đi. Bạn sẽ thấy rằng chỉ các trường được chỉ định mới được hiển thị. Vậy là bạn được tự do việc hiển thị các form như thế nào rồi đó! Trong screenshot dưới đây, tôi chỉ bỏ chọn checkbox của email và điện thoại đi.

Changing options for the front-end

Lưu ý: Có thể chức năng gửi mail sẽ chưa hoạt động lúc này. Nó sẽ chỉ hoạt động nếu bạn có một mail server được cài đặt và đang hoạt động.

Một form có thể dễ dàng chỉnh sửa để dùng với bất kì một loại control nào. Ví dụ: bạn có thể thêm trường CAPTCHA tùy chọn vào form của mình hoặc có thể sắp xếp lại thứ tự các trường output, hoặc chỉnh sửa text cho tiêu đề, các label. Điểm tuyệt vời ở đây là bạn có thể sử dụng các mẫu template động để tùy chỉnh form của bạn theo bất cứ cách nào bạn muốn. Các khả năng gần như là vô tận.

Sắp Xếp/Tùy chỉnh Lại Các Control

Có thể bạn sẽ nhận thấy rằng có một vài vấn đề về khả năng sử dụng với các điều khiển quản trị cho mẫu trang động của chúng ta. Về mặt chức năng, tốt, nhưng lý tưởng là các trình kiểm soát mẫu trang động nên nằm trong cùng một meta box với drop-down.

The meta boxes

Hãy nhớ là hiện tại chúng ta đang phải thêm các control vào một meta box riêng biệt, vì không có WordPress hook nào để gắn control đó trực tiếp vào meta box của template.

Ngoài ra, khi một template được chọn, chúng ta chỉ muốn những control tương ứng với template đó hiển thị ra. Tuy nhiên, chúng ta hoàn toàn có thể thực hiện cả 2 điều trên chỉ bằng thay đổi code CSS và Javascript trong editor.

Cụ thể chúng ta làm như sau:

  • Ẩn khung meta box.
  • Đợi tới khi editor admin load xong hoàn toàn.
  • Chuyển các control tới meta box ‘Page Attributes’.
  • Chỉ hiển thị các control khi template tương ứng được chọn.

Bây giờ bạn hãy thêm 2 thư mục css js vào trong folder gốc của child theme. Trong thư mục css, thêm vào file style.css, còn trong thư mục js thêm vào file script.js. Bạn có thể đổi tên file tùy ý. Và chỉ cần nhớ tên của chúng để sau đó chèn vào code.

Tiếp theo, chúng ta sẽ chỉ thêm hai file đó vào màn hình chỉnh sửa trang. Chúng ta đều không muốn thêm chúng vào trong tất cả các trang. Vậy nên hãy thêm một action hook mới vào hàm init() để load các file scripts trong trang admin, và sau đó thêm hàm callback để chèn vào các file script.

Bạn hãy để ý đến cách chúng ta so sánh post type với page, hay post-new.php và post.php. Đơn giản là chúng ta đang muốn các file script chỉ được load trong editor.

Bây giờ hãy cùng bắt đầu thêm CSS và Javascript để custom lại các control. Đầu tiên, bạn hãy thêm đoạn code css sau vào file style.css để ẩn đi form meta box.

Cũng có thể thay đổi bằng cách sửa code Javascript, nhưng nếu dùng CSS sẽ có hiệu ứng ngay lập tức. Nếu sửa bằng Javascript, thì đoạn code Javascript mới được load sau khi page được load xong, nên metabox sẽ được ẩn sau đó. Do đó dùng css trong trường hợp này thì đơn giản và hiệu quả hơn.

Đã tới lúc chỉnh sửa Javascript. Thêm đoạn code sau vào file script.js .

Tôi sẽ không đi vào quá chi tiết ngôn ngữ JavaScript, mà chúng ta sẽ đi qua tổng quan của phần này để nắm được cách làm.

Đầu tiên chúng ta sẽ lưu trong bộ nhớ cache các CSS selector và chuyển form control tới khung Page Attributes. Sau đó, hàm displayControls () dùng để ẩn/hiện các control tương ứng với giá trị được chọn từ thanh drop-down. Hàm displayControls() sẽ được gọi khi load trang và mỗi khi giá trị trong thanh drop-down bị thay đổi.

Với đoạn code CSS và JavaScript vừa được thêm vào thì các control đã đươc hiển thị đúng trên meta box tương ứng và hiển thị đúng với template tương ứng được chọn.

All of the page attributes

Cách chỉnh sửa này vô cùng tiện lợi và dễ dàng hơn cho người dùng. Bởi vì bây giờ các meta box có thể nằm ở bất kì đâu trên màn hình, các control không nhất thiết phải liền kề thanh drop-down. Chúng ta đã có thể giải quyết vấn đề trên một cách nhanh chóng và hiệu quả để đảm bảo các control của chúng ta luôn luôn xuất hiện ngay bên trong của thanh drop-down của trang template.

Mẫu Template Cho Bài Blog

Mẫu template tiếp theo sẽ hiển thị danh sách các bài blog mới nhất. Nhưng thay vì hiển thị tất cả trên cùng một trang, chúng ta sẽ sử dụng một list box (tương tự như một drop-down) cho phép bạn chọn loại post. Không chỉ chọn một, bạn cũng có thể chọn nhiều loại post cùng lúc từ list box đó.

Hãy bắt đầu bằng việc thêm vào một khung meta box mới trong hàm add_page_template_meta_boxes ().

Bây giờ, chúng ta sẽ viết hàm callback để hiển thị khung meta box.

Hãy chia nhỏ và thực hiện từng bước. Đầu tiên define một biến chứa danh sách các danh mục post đã được cập nhật. Và một biến khác chứa danh sách tất cả các danh mục post.

Lưu ý: Chúng ta đã define một trường nonce trong template trước, nên giờ không cần tạo ra một nonce khác nữa, vì chúng ta vẫn đang làm việc trên cùng trang admin.

Sau đó, chúng ta sẽ loop qua danh sách các danh mục post từ drop-down control. Các danh mục nào đã được chọn trước đó sẽ vẫn hiện lên dưới dạng ‘được chọn’.

Bạn cũng có thể để ý là một trong các tham số gọi tới hàm selected() là một function call. Thông thường, chúng ta sẽ chỉ dùng hàm selected() để so sánh giữa hai giá trị để kiểm tra được danh mục nào đang được chọn. Tuy nhiên, bởi vì ta có thể chọn nhiều hơn một danh mục, nên dữ liệu sẽ luôn được lưu dưới dạng array (cho dù chỉ có 1 danh mục được chọn).

Hàm q() là một hàm helper cho phép kiểm tra việc so sánh danh sách các danh mục hiện tại với danh sách của các danh mục đã được lưu trước đó.

Với mỗi một danh mục thì ID danh mục và danh sách các danh mục đã lưu sẽ được truyền vào hàm q(). Nên nếu danh mục hiện tại nằm trong danh sách đó, nó sẽ được trả ra hàm selected() tương ứng như là tham số đầu tiên. Do đó, hàm selected() sẽ đánh dấu danh mục hiện tại như là được chọn. Đây là một phương thức đơn giản và hiệu quả để xử lý multiple option trong 1 single control. 

Vậy nên chúng ta chỉ cần cập nhật hàm save_page_template_meta() để xử lý việc lưu danh sách các post. Hãy thêm đoạn code sau để xử lý việc này.

Bây giờ chúng ta sẽ tạo template bài blog. Trong thư mục page-templates của theme con, tạo file mới đặt lên là blog-page-template.php và thêm vào đoạn code sau.

Thứ khác biệt nhất so với template chúng ta đã tạo ra trước đó là đoạn code bên trong HTML tag <main>, hãy cùng đi vào chi tiết hơn.

Đầu tiên hãy gán giá trị cho biến query paged dùng để hiển thị các bài post trên nhiều trang. Sau đó, truy hồi tất cả các danh mục được chọn từ meta box editor. Danh sách các danh mục sẽ được chuyển sang dạng string hoặc gán giá trị default nếu rỗng. Tiếp theo, một query mới được tạo ra và chạy vòng lặp để lấy được kết quả.

Thông qua việc chỉnh sửa trên editor, chúng đã có thể hoàn toàn kiểm soát được danh sách các danh mục sẽ được truyền vào query object.

Chúng ta chỉ cần ẩn khung danh mục blog và chuyển control đó tới khung Page Attributes giống như ta đã làm trước đó là đủ.

Trong file style.css, cập nhật lại code để ẩn đi khung blog.

Và cũng cần cập nhật lại file script.js. Sau đây là code đầy đủ cần cập nhật.

Hầu hết các thay đổi đáng lưu ý đều nằm trong hàm .on(‘change’). Bởi vì bây giờ chúng ta đã có nhiều template nên chúng ta phải kiểm tra xem cái nào đã được chọn từ thanh drop-down và sau đó truyền tham số tương ứng vào hàm displayControls ().

Chúng ta cũng cần phải ẩn những control còn lại. Và nếu trang mặc định của template đang được hiển thị, thì chúng ta sẽ ẩn tất cả các control trong trang. Thật ra code Javascript có thể được tùy chỉnh để tối ưu hóa hơn nữa, nhưng với hai template đơn giản hiện tại thì đoạn code trên cũng đã đủ sử dụng rồi.

An example of dynamic page templates

Sau khi sửa đổi những phần trên, chúng ta hiện tại đang có hai mẫu template với một số chức năng kèm theo, và mỗi mẫu template có thể được tùy chọn từ thanh drop-down.

Các mẫu trang cho tất cả mọi người

Ở phần đầu tôi đã nhắc tới việc làm cách nào để gắn một page template với một post type bất kỳ cho WordPress phiên bản từ 4.7 trở lên. Với phiên bản trước 4.7, bạn chỉ có thể gắn template mẫu cho post type page, nhưng thật ra không hẳn là vậy.

Chỉ cần thêm một vài dòng code vào phần bình luận trên tiêu đề trang, và chọn danh sách các post type mà bạn muốn sử dụng làm template bằng cách liệt kê tên các loại post type và phân cách chúng bằng dấu phẩy.

Tên loại post type cần giống với khi tạo slug, nếu không nó sẽ không được hiển thị như khi mình muốn.

Liệu chúng ta có thể gắn template động cho tất cả các loại post type khác nhau hay không? Chỉ cần một vài sửa đổi là chúng cũng có thể được hỗ trợ. Hãy cùng tìm hiểu xem bước tiếp theo là gì.

Rất may là ngoài việc thêm một dòng code vào phần đầu của trang, tất cả các thay đổi đều nằm trong một file: functions.php.

Đầu tiên, chúng ta sẽ chèn những trang CSS và JavaScript không chỉ trên post type page mà trên tất cả các post type mà muốn dùng tới. Ví dụ trong hàm enqueue_editor_scripts() có thể code như sau:

Như vậy thì các scripts sẽ được load trong tất cả các post type page và movie.

Sau đó, trong hàm add_page_template_meta_boxes (), hãy cập nhật lại các hàm add_meta_box() bằng cách đổi tham số page thành một array các loại post type.

Và cuối cùng, cập nhật tương tự cho hàm save_page_template_meta() giống như trong hàm enqueue_editor_scripts().

Bằng cách làm theo các bước trên, bạn có thể sửa đổi các mẫu template cho bất kì post type nào.

Lưu ý: Đối với bất kỳ trang web đang sử dụng WordPress phiên bản thấp hơn 4.7, các text tiêu đề cho Template Post Type sẽ bị bỏ qua và tất cả các page template sẽ hiển thị theo mặc định. Nếu bạn không muốn chuyện này xảy ra thì bạn hãy chỉnh sửa lại code của mình để làm cho các mẫu trang của mình tương thích ngược lại.

Phần code snippet này được lấy từ bài blog Make Wordpress, và bạn cũng có thể thu thập nhiều thông tin về những sự không tương thích giữa các phiên bản hay tìm hiểu những tính năng của phiên bản mới trong phần chi tiết hơn.

Kết luận

Chúng ta đã tìm hiểu một chút của vấn đề trong phần cuối của loạt bài hướng dẫn này. Đặc biệt, chúng ta đã thực hiện hai mẫu trang web động hoạt động đầy đủ tính năng và sử dụng CSS và Javasript tùy chỉnh để thêm sự hoàn chỉnh cho kinh nghiệm người dùng.

Mặc dù các loại bài post động được giới thiệu trong loạt bài hướng dẫn này là tương đối đơn giản, sẽ rất dễ dàng mở rộng chúng để tạo ra các mẫu trang mạnh mẽ và linh hoạt. Có nhiều chức năng hay ho khác có thể thêm. Và, từ WordPress 4.7, bạn cũng không bị hạn chế trong việc phát triển chỉ cho các trang như trước nữa.

Nếu bạn đang tìm kiếm các tiện ích khác để giúp bạn xây dựng các công cụ của bạn cho WordPress hoặc các code để nghiên cứu và trở nên thành thục hơn về WordPress, đừng quên để xem những gì chúng tôi đã có sẵn tại Envato Market.

Loạt bài hướng dẫn này đã truyền cảm hứng bạn tạo trang mẫu động phải không? Nếu vậy, hãy cho tôi biết trong các ý kiến dưới đây. Tôi rất thích nghe ý tưởng của bạn và làm thế nào bạn có thể sử dụng chúng trong các dự án của riêng bạn.

Advertisement
Advertisement
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.