Cách sử dụng đánh dấu ngữ nghĩa HTML5 trong chủ đề WordPress

Được giới thiệu trong phiên bản WordPress 3.6, tính năng chủ đề này cho phép bạn sử dụng rõ ràng đánh dấu HTML5 trên biểu mẫu nhận xét, danh sách nhận xét và biểu mẫu tìm kiếm của chủ đề của bạn.Nói cách khác, nếu có liên quan, bất cứ khi nào bạn yêu cầu hoặc cho hoặc xuất danh sách nhận xét của mình, WordPress sẽ đánh dấu những nhận xét đó bằng mã HTML5 ngữ nghĩa.<?php comment_form(); ?><?php get_search_form(); ?> Ví dụ tốt nhất để minh họa điều này là hình thức bình luận. Người dùng đã đăng xuất sẽ thấy tất cả các trường bắt buộc và tùy chọn được trình bày để nhận xét về một bài đăng. tức là tên, email, trang web và các trường bình luận. Nếu bạn xem nguồn, các trường đó sẽ trông giống như sau:
<input id="author" name="author" type="text" value="" size="30" aria-required='true' />
<input id="email" name="email" type="text" value="" size="30" aria-required='true' />
<input id="url" name="url" type="text" value="" size="30" />
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
Đó là 3 trường văn bản và 1 vùng văn bản. Với tính năng chủ đề HTML5 được bật, các trường văn bản khác nhau được xử lý khác nhau để xử lý các mục đích khác nhau của chúng. Vì vậy, trường email không chỉ đơn giản là một trường văn bản mà là một trường "email" chính hiệu. Chuyển đến trường trang web bây giờ — với HTML5 — một trường “url”.

Tính năng chủ đề này phải được kích hoạt trước khi WordPress có thể sử dụng nó, nếu không, theo mặc định, WordPress xuất ra đánh dấu trước HTML5.

Thêm hỗ trợ chủ đề

Như với các tính năng chủ đề khác, bạn chỉ cần khai báo rằng chủ đề của bạn hỗ trợ nó. Như vậy:
add_theme_support( 'html5' );
Nếu bạn chỉ muốn áp dụng đánh dấu HTML5 cho biểu mẫu nhận xét, thì bạn phải chuyển đánh dấu đó vào mảng hoặc đối số. Như vậy:
add_theme_support( 'html5', array(
  'comment-form',
));
Trong khi trước HTML5, bạn sẽ có 3 trường văn bản và 1 vùng văn bản, bây giờ bạn có cái này:
<input id="author" name="author" type="text" value="" size="30" aria-required='true' />
<input id="email" name="email" type="email" value="" size="30" aria-required='true' />
<input id="url" name="url" type="url" value="" size="30" />
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
Lưu ý rằng tất cả các loại đầu vào đều khác nhau: văn bản, email, url và vùng văn bản.

Nếu bạn muốn có biểu mẫu tìm kiếm và danh sách nhận xét cũng xuất ra dưới dạng đánh dấu ngữ nghĩa HTML5, thì bạn chỉ cần chuyển chúng vào mảng như sau:

add_theme_support( 'html5', array(
  'search-form', 'comment-form', 'comment-list',
));

Theo bài viết này, đó là ba mục duy nhất được nhắm mục tiêu rõ ràng cho đánh dấu HTML5.

Vấn đề là gì?

Vâng, đối với một, trong khi bạn vẫn phải làm nhiều việc hơn để xác thực dữ liệu nhận được từ bất kỳ biểu mẫu nào trên trang web của mình, các trình duyệt hiện đại hiện thực hiện một chút xác thực cho bạn. tức là trường email tối thiểu sẽ thấy một @ và trường url cũng sẽ yêu cầu một giá trị giống với một URL thực tế.

Bạn chắc chắn nên làm nhiều hơn thế để xác thực các biểu mẫu của mình nhưng vì lợi ích của việc cập nhật cho bạn, đánh dấu HTML5 là con đường của tương lai. Chỉ cần lưu ý.