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

Template Động trong WordPress, Phần 1

by
Read Time:10 minsLanguages:
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 Dai Phong (you can also view the original English article)

Các template trong WordPress là một cách tuyệt vời để thay đổi hoàn toàn cách hiển thị của các trang cụ thể. Bạn có thể sử dụng chúng để thêm hàng loạt chức năng vào trang web của bạn.

Tuy nhiên, chúng có một hạn chế đó là chúng là các template 'tĩnh'. Bạn không thể tùy biến chúng hoặc thay đổi hành vi của chúng theo bất kỳ cách nào. Bạn chỉ có thể lựa chọn bật hoặc tắt một template. Mặc định, một template sẽ đơn giản là thực hiện một chức năng cố định, ví dụ như, hiển thị sơ đồ trang web hoặc gỡ bỏ sidebar để hiển thị trang full-width, tức một trang chiếm toàn bộ chiều rộng.

Trong loạt bài này, tôi sẽ hướng dẫn cách bạn có thể mở rộng các template sao cho linh hoạt hơn, cải thiện tính năng của chúng. Tôi sẽ bắt đầu bằng cách giới thiệu về cách tạo template tiêu chuẩn thông qua một theme con, trước khi di chuyển đến hướng tiếp cận linh hoạt hơn, nơi tôi sẽ tạo một template động cho mục đích chung.

Cuối cùng, tôi sẽ trình bày cho bạn ba ví dụ thực tế về các template động đầy đủ chức năng. Tôi cũng sẽ khái quát các chủ đề nâng cao như cách gán các template cho các kiểu bài viết tuỳ biến (hay còn gọi là custom post type).

Bạn muốn làm theo hướng dẫn chứ?

Để làm theo loạt bài hướng dẫn này, bạn sẽ cần một trang WordPress cùng với quyền truy cập phần quản trị. Cách dễ nhất để làm việc này là sử dụng một môi trường phát triển cục bộ. Một trình soạn thảo văn bản chuyên dụng cũng hữu ích nhưng không bắt buộc.

Nếu như bạn đang phát triển WordPress thông qua một máy chủ từ xa thì bạn cần phải có khả năng chỉnh sửa các tập tin của theme thông qua trang quản trị của WordPress, hoặc chỉnh sửa các tập tin tại máy cục bộ và sử dụng phần mềm FTP để chuyển chúng ngược trở lại máy chủ. Để cho đơn giản, tôi sẽ giả định rằng bạn đang làm việc với WordPress tại máy cục bộ trong suốt phần còn lại của hướng dẫn này.

Để cài đặt các template của chúng ta, tôi sẽ sử dụng một theme con dựa trên theme cha là Twenty Seventeen, là theme (tại thời điểm viết) mặc định mới nhất của WordPress. Vì vậy, nếu bạn thực hiện theo hướng dẫn thì tốt nhất bạn nên cài đặt theme này trước khi tiếp tục.

The default Twenty Seventeen ThemeThe default Twenty Seventeen ThemeThe default Twenty Seventeen Theme

Bạn có thể sử dụng một theme con dựa trên một theme cha khác nếu muốn, nhưng bạn sẽ cần chỉnh sửa một số code để làm cho nó hoạt động một cách trơn tru với theme cha của bạn. Tuy nhiên, phương pháp cơ bản đều khá giống nhau cho bất kỳ theme con nào.

Template trong WordPress

Trước khi tìm hiểu cách để làm cho các template trở nên linh hoạt hơn, chúng ta hãy đi qua một số chi tiết cơ bản.

WordPress sử dụng một hệ thống phân cấp template để quyết định template nào sẽ kết xuất trang hiện tại. Template được sử dụng trong hầu hết các trường hợp cho các trang là page.php, nhưng có thể khác nếu bạn đang xem một trang với một ID hoặc slug cụ thể. Tuy nhiên, nếu bạn chọn một template cho một trang cụ thể, thì template này sẽ luôn được ưu tiên sử dụng, giúp dễ dàng tùy biến bất kỳ trang nào bằng một template.

Dưới đây là một số ví dụ tiêu biểu về các template được sử dụng phổ biến trong WordPress:

  • Form Liên hệ
  • Trang Portfolio
  • Các câu hỏi thường gặp
  • Trang 404 Tuỳ biến
  • Trang Đăng nhập Tuỳ biến
  • Sơ đồ trang
  • Trang Full-Width
  • Trang Blog
  • Trang Widget
  • Và còn nhiều trang khác...

Tôi có thể kể tiếp, nhưng như vậy bạn đã có thể hình dung về template. Template thật tuyệt vời! Bạn có thể sử dụng chúng cho hầu hết mọi thứ.

Nếu bạn đã từng sử dụng WordPress trong bao lâu cũng được, thì rất có thể bạn đã vô tình bắt gặp một hoặc nhiều ví dụ ở trên. Hầu hết các theme đều bao gồm các template để bổ sung chức năng vào theme, và bạn có thể dễ dàng thêm các tính năng của riêng bạn thông qua một theme con. Tôi sẽ khái quát cách để làm điều này trong giây lát nữa.

Các template là rất hữu ích vì chúng cho phép bạn hoàn toàn kiểm soát toàn bộ một trang. Bạn có thể bỏ đi header, footer và/hoặc sidebar nếu bạn muốn. Đây là một trong những lý do tại sao template cho trang full-width lại rất phổ biến, bởi vì rất dễ dàng lắp ghép sidebar thông qua một template.

Để nhìn thấy tất cả các template hiện có, hãy vào trình soạn thảo trang trong WordPress và truy cập vào menu thả xuống Template thông qua meta-box Page Attributes. Chỉ cần chọn template mà bạn muốn và, khi trang đã được cập nhật, nó sẽ được hiển thị trong lần tiếp theo khi trang được xem.

Thêm Template thông qua một Theme con

Như đã đề cập ở trên, chúng ta sẽ sử dụng một theme con tuỳ biến để cài đặt tất cả các template trong suốt hướng dẫn này. Tôi sẽ bắt đầu với một theme con và một template cơ bản, và sau đó thêm các tính năng phức tạp hơn vào nó khi chúng ta tiếp tục.

Toàn bộ quá trình sẽ được khái quát từng bước từng bước một, vì vậy đừng lo lắng nếu bạn chưa rành về theme con và/hoặc template. Bạn sẽ quen với chúng khi kết thúc hướng dẫn này!

Ý tưởng cơ bản đằng sau các theme con là chúng cho phép bạn tùy biến giao diện của theme hiện tại (được gọi là theme cha) theo một cách mà không bị ảnh hưởng khi theme cha được cập nhật.

Nếu code được thêm trực tiếp vào theme cha thì tất cả các tùy biến sẽ được thay thế và mất đi trong quá trình cập nhật theme. Đây là điểm mấu chốt vì bất kỳ theme được bảo trì tốt sẽ được cập nhật một cách thường xuyên. Để tìm hiểu thêm về các theme con, tôi khuyên bạn nên xem qua tài liệu hướng dẫn chính thức.

Điều thú vị cần lưu ý là, về mặt kỹ thuật, có thể sử dụng plugin WordPress để thêm các template, nhưng sẽ đơn giản hơn nhiều khi sử dụng theme con. Tôi không muốn làm phức tạp hoá những thứ không cần thiết bằng code không liên quan, vì vậy tôi sẽ gắn bó với theme con cho việc cài đặt template của chúng ta.

Hãy bắt đầu nào!

Được rồi, lý thuyết như vậy là đã đủ—hãy tạo template đầu tiên của chúng ta! Nó sẽ được đặt trong một theme con tuỳ biến của Twenty Seventeen sẽ hoạt động như là một kho chứa template của chúng ta, vì vậy chúng ta cần phải tạo theme con trước.

Hãy mở thư mục theme của bạn và tạo một thư mục mới cho theme con. Theo cách làm tốt nhất của WordPress, bạn nên đặt tên cho thư mục theme con giống với theme cha mà nó dựa trên, và thêm '-child' vào phía sau tên thư mục. Vì thư mục theme cha của chúng ta được đặt tên là twentyseventeen, nên hãy đặt tên cho thư mục của theme con của bạn là twentyseventeen-child. Bên trong thư mục mới này, tạo một tập tin duy nhất đặt tên là style.css và thêm khối chú thích sau đây ở trên cùng.

Bây giờ chúng ta cần phải tham chiếu đến tất cả các css từ theme Twenty Seventeen. Nếu bạn đã từng làm việc với theme con trước đây, thì bạn có thể đã từng thêm một câu lệnh CSS @import trực tiếp bên dưới khối chú thích. Đây không còn được coi là một cách làm tốt nhất trong WordPress nữa do những quan ngại về tốc độ. Thay vào đó, chúng ta sẽ enqueue các css của theme cha, cách làm này sẽ hiệu quả hơn.

Bên trong thư mục gốc của theme con, hãy tạo một tập tin functions.php và thêm code sau đây để thiết lập một kho chứa rỗng cho lớp. Chúng ta sẽ sử dụng lớp này cho tất cả code thiết lập của chúng ta.

Lưu ý: Câu lệnh đóng PHP là không cần thiết, nhưng bạn có thể thêm nó nếu bạn thích.

Bây giờ hãy thêm một hook và callback để enqueue các css của theme cha Twenty Seventeen, thay vì import chúng trực tiếp bên trong tập tin style.css. Làm điều này bằng cách thêm hai phương thức lớp mới.

Lưu các thay đổi của bạn và kích hoạt theme con. Bây giờ bạn đã có một theme con đầy đủ chức năng, cho dù đơn giản là theme con của Twenty Seventeen. Để kiểm tra xem nó có làm việc đúng hay không, hãy thêm một dòng CSS tuỳ biến vào style.css.

Nếu tất cả đều ổn, thì bạn sẽ nhìn thấy tất cả các văn bản bên trong trang web của bạn bây giờ có một màu đỏ tươi rất đẹp!

Updated styles as per the child themeUpdated styles as per the child themeUpdated styles as per the child theme

Đừng quên xóa dòng CSS thử trước khi tiếp tục. Bây giờ theme con đã được kích hoạt, chúng ta có thể bắt đầu cài đặt template đầu tiên của chúng ta.

Thêm Template Đầu tiên Của chúng ta

Một điều cần lưu ý về nơi bạn lưu các template bên trong theme con của bạn. Bạn có thể lưu các template trực tiếp bên trong thư mục gốc của theme con hoặc ở trong một thư mục cấp cao nhất. Không quan trọng là bạn chọn vị trí nào; vị trí nào cũng đều tốt.

Tuy nhiên, nếu bạn có nhiều template, bạn có thể chọn lưu chúng trong một thư mục để dễ dàng quản lý. Tên của thư mục không quan trọng, nhưng nó phải được đặt trực tiếp bên trong thư mục gốc của theme con, nếu không WordPress sẽ không nhận ra các template của bạn. Đối với hướng dẫn này, tôi sẽ sử dụng một thư mục gọi là page-templates.

Hãy thêm một template mới vào theme con. Cách tiêu chuẩn để làm việc này là sao chép tập tin page.php ở trong theme cha và thêm nó vào theme của bạn. Bạn có thể đặt tên tập tin này tuỳ thích, nhưng tôi khuyên bạn nên đặt theo một cái gì đó làm cho nó có thể dễ dàng nhận ra như là một template. Tôi sẽ đặt tên cho nó là test-page-template.php.

Một khi bạn đã sao chép tập tin page.php (và đổi tên nó) vào thư mục page-templates, thì cấu trúc của theme con của bạn bây giờ sẽ giống như sau:

Adding the first page templateAdding the first page templateAdding the first page template

Mở tập tin test-page-template.php lên và thay thế khối chú thích ở phía trên cùng của tập tin bằng các chú thích sau.

Bước này rất quan trọng vì khối chú thích nói cho WordPress biết rằng tập tin này là một template và sẽ thêm nó vào danh sách các template có sẵn trên màn hình soạn thảo trang.

Toàn bộ code hoàn chỉnh cho template sẽ giống như sau.

Hãy thử template của chúng ta. Truy cập vào trang quản trị của WordPress và chỉnh sửa bất kỳ trang hiện có nào hoặc tạo một trang mới. Trên màn hình soạn thảo trang, chọn trình đơn thả xuống Template từ meta-box Page Attributes để chỉ định template cho trang hiện tại.

The Page AttributesThe Page AttributesThe Page Attributes

Bởi vì chúng ta chỉ sao chép tập tin template page.php từ theme cha, nên template tuỳ biến của chúng ta không làm gì khác hơn là xuất ra trang hiện tại, điều này không hữu ích lắm. Ngoài ra, chúng ta sẽ không cần xuất ra nội dung hoặc chú thích nằm trong trình soạn thảo, vì vậy hãy xóa chúng khỏi vòng lặp while của template, và thêm một thông điệp tùy biến. Thay đổi nội dung của vòng lặp while thành như sau.

Lưu nó và xem trang ở trên front-end.

Viewing the page template on the front-endViewing the page template on the front-endViewing the page template on the front-end

Lưu ý: Nếu bạn không thể nhìn thấy thông điệp tùy biến thì hãy chắc rằng bạn đã chọn template tuỳ biến trên trình soạn thảo trang và lưu nó để cập nhật các cài đặt.

Bây giờ chúng ta hãy làm cho template tuỳ biến của chúng ta trở nên hữu ích hơn một chút. Hãy thay thế thông điệp mà chúng ta đã thêm ở trên bằng code sau đây để xuất ra sơ đồ của tất cả các trang đã xuất bản.

Việc này sẽ cho ra kết quả sau đây.

Viewing the sitemapViewing the sitemapViewing the sitemap

Thật dễ dàng để nhận ra các template có thể hữu ích như thế nào. Nhưng chúng ta thậm chí có thể làm tốt hơn!

Phần Tóm tắt

Cho đến lúc này, chúng ta đã tạo được một theme con và sử dụng nó để cài đặt template tiêu chuẩn của chúng ta. Trong bài tiếp theo, tôi sẽ hướng dẫn cho bạn từng bước cách mở rộng template này, minh hoạ cách các template có thể được làm cho linh hoạt hơn.

Cụ thể, chúng ta sẽ tạo một template động phục vụ cho mục đích chung bằng cách thêm các điều khiển tùy biến vào màn hình soạn thảo trang. Logic điều khiển sẽ được thêm vào template để cho phép chúng ta trực tiếp tùy biến cách trang được kết xuất.

WordPress có một nền kinh tế cực kỳ năng động. Có các theme, plugin, thư viện và nhiều sản phẩm khác giúp bạn xây dựng trang web và dự án của mình. Tính chất nguồn mở của nền tảng này cũng giúp nó trở thành một lựa chọn tuyệt vời để bạn có thể nâng cao kỹ năng lập trình của mình. Bất kể là gì, bạn có thể tìm thấy những gì mà chúng tôi hiện có bán trên Envato Market.

Đây là hướng dẫn đầu tiên của tôi (xin hãy nhẹ nhàng!), vì vậy xin vui lòng để lại bất kỳ phản hồi nào trong phần bình luận dưới đây. Tôi sẽ cố gắng hết sức để trả lời mọi câu hỏi.

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.