Tạo mẫu trang trong plugin wordpress

Nick Schäferhoff là một doanh nhân, nhà tiếp thị trực tuyến và blogger chuyên nghiệp đến từ Đức. Khi không xây dựng trang web, tạo nội dung hoặc giúp đỡ khách hàng của anh ấy … Thông tin thêm về Nick ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Nguyên tắc chung về kiểu chữ với Elliot Jay Stocks

• Danh sách kiểm tra thiết kế giao diện thông minh

• Giao diện người dùng SmashingConf 2023

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Các mẫu thiết kế giao diện Đào tạo UX

Tôi thích nghĩ về WordPress như một loại thuốc cửa ngõ cho sự phát triển web. Nhiều người bắt đầu sử dụng nền tảng ban đầu chỉ đơn thuần là tìm kiếm một cách thoải mái (và miễn phí) để tạo một trang web đơn giản. Một số Google và tham khảo ý kiến ​​​​của WordPress Codex sau, nó đã hoàn thành và đó sẽ là nó. Kiểu như “Tôi sẽ thử một lần

Tôi thích nghĩ về WordPress như một loại thuốc cửa ngõ cho sự phát triển web. Nhiều người bắt đầu sử dụng nền tảng này ban đầu chỉ đơn thuần là tìm kiếm một cách thoải mái (và miễn phí) để tạo một trang web đơn giản, thường là với sự trợ giúp của plugin trình tạo trang WordPress. Kiểu như “Tôi sẽ thử một lần. ”

Tuy nhiên, một lượng lớn người dùng không dừng lại ở đó. Thay vào đó, họ bị cuốn hút. Nghĩ ra nhiều ý tưởng hơn. Cuộc thí nghiệm. Dùng thử các plugin mới. khám phá con đom đóm. bùng nổ. Chẳng bao lâu nữa sẽ không quay đầu lại. Điều đó nghe giống như câu chuyện của bạn? . Để khao khát thiết kế tùy chỉnh, chức năng tùy chỉnh, mọi thứ tùy chỉnh

Đọc thêm trên SmashingMag.

• Cách tạo và tùy chỉnh chủ đề con WordPress
• Xây dựng trang lưu trữ tùy chỉnh cho WordPress
• Tùy chỉnh kho lưu trữ WordPress

May mắn thay, WordPress được xây dựng chính xác cho điều đó. Cấu trúc linh hoạt và kiến ​​trúc ngăn cách của nó cho phép mọi người thay đổi thực tế mọi thứ trên trang web của họ

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ các Hội thảo Smashing về giao diện người dùng & UX, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Christine Vallaure và rất nhiều người khác

Chuyển đến hội thảo ↬

Trong số các công cụ quan trọng nhất trong nhiệm vụ kiểm soát trang web hoàn chỉnh là các mẫu trang. Chúng cho phép người dùng thay đổi đáng kể thiết kế và chức năng trang web của họ. Muốn có một tiêu đề tùy chỉnh cho trang chủ của bạn? . Một thanh bên bổ sung chỉ dành cho trang blog của bạn? . Một trang lỗi 404 duy nhất? . Của tôi. Khách

Nếu bạn muốn biết các mẫu trang WordPress có thể giúp bạn đạt được điều đó như thế nào, hãy đọc tiếp. Nhưng trước tiên, một chút thông tin cơ bản

Tệp mẫu trong WordPress

Chúng ta đang nói về điều gì khi nói về các mẫu trong ngữ cảnh của WordPress?

Phiên bản dài hơn một chút. mỗi khi ai đó gửi yêu cầu xem một phần trang web của bạn, nền tảng WordPress sẽ tìm ra nội dung họ muốn xem và cách hiển thị phần cụ thể đó trên trang web của bạn

Về sau, WordPress sẽ cố gắng sử dụng tệp mẫu phù hợp nhất được tìm thấy trong chủ đề của bạn. Cái nào được quyết định trên cơ sở một trật tự đã định,. Bạn có thể thấy điều này trông như thế nào trong ảnh chụp màn hình bên dưới hoặc trong phiên bản tương tác này

Hệ thống phân cấp mẫu WordPress. (Tín dụng hình ảnh. WordPress Codex)(Xem phiên bản lớn)

Hệ thống phân cấp mẫu là danh sách các tệp mẫu mà WordPress quen thuộc được xếp hạng để xác định tệp nào được ưu tiên hơn tệp khác

Bạn có thể coi nó như một cây quyết định. Khi WordPress cố gắng quyết định cách hiển thị một trang nhất định, nó sẽ hoạt động theo cách của nó xuống phân cấp mẫu cho đến khi tìm thấy tệp mẫu đầu tiên phù hợp với trang được yêu cầu. Ví dụ: nếu ai đó cố gắng truy cập địa chỉ https. // trang web của bạn. com/category/news, WordPress sẽ tìm đúng tệp mẫu theo thứ tự này

1. danh mục-{slug}. php. trong trường hợp này là danh mục tin tức. php
2. Thể loại ID}. php>. nếu ID danh mục là 5, WordPress sẽ cố gắng tìm tệp có tên danh mục-5. php
3. thể loại. php
4. lưu trữ. php
5. mục lục. php

Ở dưới cùng của hệ thống phân cấp là chỉ mục. php. Nó sẽ được sử dụng để hiển thị bất kỳ nội dung nào không có tệp mẫu cụ thể hơn được đính kèm với tên của nó. Nếu một tệp mẫu xếp hạng cao hơn trong hệ thống phân cấp, WordPress sẽ tự động sử dụng tệp đó để hiển thị nội dung được đề cập

Mẫu trang và cách sử dụng chúng

Đối với các trang, mẫu chuẩn thường là trang được đặt tên phù hợp. php. Trừ khi có sẵn một tệp mẫu cụ thể hơn (chẳng hạn như tệp lưu trữ. php cho một trang lưu trữ), WordPress sẽ sử dụng trang. php để hiển thị nội dung của tất cả các trang trên trang web của bạn

Tuy nhiên, trong nhiều trường hợp, có thể cần phải thay đổi thiết kế, giao diện hoặc chức năng của từng phần riêng lẻ trên trang web của bạn. Đây là nơi các mẫu trang phát huy tác dụng. Các mẫu trang tùy chỉnh cho phép bạn cá nhân hóa bất kỳ phần nào trên trang web WordPress của mình mà không ảnh hưởng đến phần còn lại của nó

Bạn có thể đã thấy điều này tại nơi làm việc. Ví dụ: nhiều chủ đề WordPress ngày nay đi kèm với tùy chọn thay đổi trang của bạn thành toàn bộ chiều rộng, thêm thanh bên thứ hai hoặc chuyển đổi vị trí của thanh bên. Nếu đó là trường hợp của bạn, nó có thể được thực hiện thông qua các tệp mẫu. Có một số cách để thực hiện điều này và chúng ta sẽ xem xét chúng sau

Đầu tiên, tuy nhiên, một lời cảnh báo. vì làm việc với các mẫu liên quan đến việc chỉnh sửa và thay đổi các tệp trong chủ đề đang hoạt động của bạn, nên bạn luôn nên sử dụng một chủ đề con khi thực hiện các loại tùy chỉnh này. Bằng cách đó, bạn không gặp nguy cơ bị ghi đè các thay đổi khi chủ đề gốc của bạn được cập nhật

Cách tùy chỉnh bất kỳ trang nào trong WordPress

Có ba cách cơ bản để sử dụng các mẫu trang tùy chỉnh trong WordPress. thêm các câu điều kiện vào một mẫu hiện có; . Chúng ta sẽ lần lượt xem xét từng vấn đề này

Sử dụng thẻ có điều kiện trong mẫu mặc định

Một cách dễ dàng để thực hiện các thay đổi dành riêng cho từng trang là thêm nhiều thẻ điều kiện của WordPress vào một mẫu đã được sử dụng. Như tên cho thấy, các thẻ này được sử dụng để tạo các chức năng chỉ được thực thi nếu một điều kiện nhất định được đáp ứng. Trong ngữ cảnh của các mẫu trang, đây sẽ là nội dung dọc theo dòng “Chỉ thực hiện hành động X trên trang Y. ”

Thông thường, bạn sẽ thêm các thẻ có điều kiện vào trang chủ đề của mình. php (tất nhiên, trừ khi bạn muốn tùy chỉnh một phần khác của trang web của mình). Chúng cho phép bạn thực hiện các thay đổi giới hạn ở trang chủ, trang nhất, trang blog hoặc bất kỳ trang nào khác trên trang web của bạn

Dưới đây là một số thẻ điều kiện thường được sử dụng

1. 2. để nhắm mục tiêu một trang cụ thể. Có thể được sử dụng với ID, tiêu đề hoặc URL/tên của trang

2. 3. áp dụng cho trang chủ

3. 4. nhắm mục tiêu trang đầu của trang web của bạn như được đặt trong Cài đặt → Đọc

4. 5. điều kiện cho một trang thể loại. Có thể sử dụng ID, tiêu đề hoặc URL/tên như thẻ
   2

5. 7. cho các bài đăng đơn lẻ hoặc tệp đính kèm

6. 8. điều kiện cho các trang lưu trữ

7. 9. chỉ áp dụng cho các trang lỗi 404

Ví dụ: khi được thêm vào trang của bạn. php thay cho thẻ

-
  Page template without sidebar
 */

// Additional code goes here...

0 tiêu chuẩn, đoạn mã sau sẽ tải tệp tiêu đề tùy chỉnh có tên là header-shop. php khi hiển thị trang https. // trang web của bạn. com/sản phẩm

if ( is_page('products') ) {
  get_header( 'shop' );
} else {
  get_header();
}

Một trường hợp sử dụng tốt cho điều này là nếu bạn có một cửa hàng trên trang web của mình và bạn cần hiển thị một hình ảnh tiêu đề khác hoặc menu tùy chỉnh trên trang cửa hàng. Sau đó, bạn có thể thêm các tùy chỉnh này vào header-shop. php và nó sẽ hiển thị ở nơi thích hợp

Tuy nhiên, thẻ có điều kiện không giới hạn trong một trang. Bạn có thể thực hiện một số câu lệnh liên tiếp như vậy

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

Trong ví dụ thứ hai này, hai điều kiện sẽ thay đổi hành vi của các trang khác nhau trên trang web của bạn. Bên cạnh việc tải tệp tiêu đề dành riêng cho cửa hàng đã nói ở trên, giờ đây nó cũng sẽ tải tệp tiêu đề về. php trên một trang có ID là 42. Đối với tất cả các trang khác, tệp tiêu đề tiêu chuẩn được áp dụng

Để tìm hiểu thêm về việc sử dụng các thẻ có điều kiện, các tài nguyên sau đây rất được khuyến khích

• Mã WordPress. Thẻ có điều kiện
• chủ đềLab. Hướng dẫn cơ bản về các thẻ có điều kiện của WordPress

Tạo các tệp dành riêng cho trang trong hệ thống phân cấp WordPress

Thẻ có điều kiện là một cách tuyệt vời để giới thiệu những thay đổi nhỏ hơn cho các mẫu trang của bạn. Tất nhiên, bạn cũng có thể tạo các tùy chỉnh lớn hơn bằng cách lần lượt sử dụng nhiều câu lệnh điều kiện. Tuy nhiên, tôi thấy đây là một giải pháp rất cồng kềnh và thay vào đó sẽ chọn các tệp mẫu được chỉ định

Một cách để làm điều này là khai thác hệ thống phân cấp mẫu WordPress. Như chúng ta đã thấy, hệ thống phân cấp sẽ duyệt qua danh sách các tệp mẫu có thể có và chọn tệp đầu tiên mà nó thấy phù hợp. Đối với các trang, cấu trúc phân cấp trông như thế này

• Mẫu trang tùy chỉnh
• trang-{slug}. php
• trang-{id}. php
• trang. php
• mục lục. php

Ở vị trí đầu tiên là các mẫu trang tùy chỉnh đã được chỉ định trực tiếp cho một trang cụ thể. Nếu một trong số đó tồn tại, WordPress sẽ sử dụng nó bất kể có tệp mẫu nào khác. Chúng tôi sẽ nói nhiều hơn về các mẫu trang tùy chỉnh sau

Sau đó, WordPress sẽ tìm một mẫu trang bao gồm sên của trang được đề cập. Ví dụ: nếu bạn bao gồm tệp có tên page-about. php trong các tệp chủ đề của bạn, WordPress sẽ sử dụng tệp này để hiển thị trang 'Giới thiệu' của bạn hoặc bất kỳ trang nào có thể được tìm thấy trong https. //www. trang web của bạn. com/về

Ngoài ra, bạn có thể đạt được điều tương tự bằng cách nhắm mục tiêu ID trang của bạn. Vì vậy, nếu cùng một trang đó có ID là 5, WordPress sẽ sử dụng tệp mẫu trang-5. php trước trang. php nếu nó tồn tại;

(Nhân tiện, bạn có thể tìm ra ID cho mọi trang bằng cách di chuột qua tiêu đề của nó bên dưới 'Tất cả các trang' trong phần phụ trợ WordPress của bạn. ID sẽ hiển thị trong liên kết được trình duyệt của bạn hiển thị. )

Chỉ định mẫu trang tùy chỉnh

Bên cạnh việc cung cấp các mẫu ở dạng mà WordPress sẽ tự động sử dụng, bạn cũng có thể gán các mẫu tùy chỉnh theo cách thủ công cho các trang cụ thể. Như bạn có thể thấy từ hệ thống phân cấp mẫu, những tệp này sẽ vượt trội hơn bất kỳ tệp mẫu nào khác có trong thư mục chủ đề

Giống như việc tạo các mẫu dành riêng cho trang cho hệ thống phân cấp WordPress, điều này yêu cầu bạn cung cấp một tệp mẫu và sau đó liên kết nó với bất kỳ trang nào bạn muốn sử dụng. Cái sau có thể được thực hiện theo hai cách khác nhau mà bạn có thể đã quen thuộc. Chỉ trong trường hợp bạn không, đây là cách thực hiện

1. Chỉ định các mẫu trang tùy chỉnh từ trình chỉnh sửa WordPress

Trong trình chỉnh sửa WordPress, bạn tìm thấy trường tùy chọn có tên ‘Thuộc tính trang’ với menu thả xuống bên dưới ‘Mẫu’

Thuộc tính trang trong trình chỉnh sửa WordPress. (Xem bản lớn)

Nhấp vào nó sẽ cung cấp cho bạn một danh sách các mẫu trang có sẵn trên trang web WordPress của bạn. Chọn cái bạn muốn, lưu hoặc cập nhật trang của bạn và bạn đã hoàn tất

Các mẫu có sẵn trong Thuộc tính trang. (Xem bản lớn)

2. Đặt mẫu tùy chỉnh qua chỉnh sửa nhanh

Điều tương tự cũng có thể đạt được mà không cần vào trình chỉnh sửa WordPress. Chuyển đến 'Tất cả các trang' và di chuột qua bất kỳ mục nào trong danh sách ở đó. Một menu sẽ hiển thị bao gồm mục 'Chỉnh sửa nhanh'

Nhấp vào nó để chỉnh sửa cài đặt trang trực tiếp từ danh sách. Bạn sẽ thấy cùng một trình đơn thả xuống để chọn một mẫu trang khác. Chọn một, cập nhật trang và bạn đã hoàn tất

Rốt cuộc không quá khó phải không?

Hướng dẫn từng bước để tạo mẫu trang tùy chỉnh

Tập hợp các tệp mẫu tùy chỉnh cho các trang của bạn không khó nhưng đây là một số chi tiết bạn phải chú ý. Do đó, chúng ta hãy xem xét quá trình từng chút một

1. Tìm Mẫu Mặc định

Một cách hay là bắt đầu bằng cách sao chép mẫu hiện đang được sử dụng bởi trang bạn muốn sửa đổi. Việc sửa đổi mã hiện có dễ dàng hơn là viết toàn bộ trang từ đầu. Trong hầu hết các trường hợp, đây sẽ là trang. tập tin php

(Nếu bạn không biết cách tìm ra tệp mẫu nào đang được sử dụng trên trang bạn muốn chỉnh sửa, plugin What The File sẽ hữu ích. )

Tôi sẽ sử dụng chủ đề Twenty Twelve để trình diễn. Đây là mẫu trang tiêu chuẩn của nó trông như thế nào

Như bạn có thể thấy, không có gì quá lạ mắt ở đây. các cuộc gọi thông thường cho đầu trang và chân trang và vòng lặp ở giữa. Trang trong câu hỏi trông như thế này

Mẫu trang mặc định trong chủ đề Twenty Twelve. (Xem bản lớn)

2. Sao chép và đổi tên tệp mẫu

Sau khi xác định tệp mẫu mặc định, đã đến lúc tạo một bản sao. Chúng tôi sẽ sử dụng tệp trùng lặp để thực hiện các thay đổi mong muốn đối với trang của chúng tôi. Vì vậy, chúng tôi cũng sẽ phải đổi tên nó. Không thể có hai tệp cùng tên, điều đó gây nhầm lẫn cho mọi người

Bạn có thể tự do đặt cho tệp bất kỳ tên nào bạn thích miễn là nó không bắt đầu bằng bất kỳ. Vì vậy, đừng đặt tên cho nó là trang gì đó. php hoặc bất kỳ thứ gì khác khiến WordPress nghĩ rằng đó là một tệp mẫu chuyên dụng

Thật hợp lý khi sử dụng một tên dễ dàng xác định tệp mẫu này được sử dụng cho mục đích gì, chẳng hạn như my-custom-template. php. Trong trường hợp của tôi, tôi sẽ sử dụng tùy chỉnh toàn chiều rộng. php

3. Tùy chỉnh tiêu đề tệp mẫu

Tiếp theo, chúng ta phải nói với WordPress rằng tệp mới này là một mẫu trang tùy chỉnh. Để làm được điều đó, chúng ta sẽ phải điều chỉnh tiêu đề tệp theo cách sau

________số 8_______

Tên bên dưới 'Tên mẫu' là tên sẽ được hiển thị bên dưới 'Thuộc tính trang' trong trình chỉnh sửa WordPress. Đảm bảo điều chỉnh nó thành tên mẫu của bạn

4. Tùy chỉnh mã

Bây giờ là lúc chuyển sang phần thịt và khoai tây của mẫu trang. mật mã. Trong ví dụ của tôi, tôi chỉ muốn xóa thanh bên khỏi trang demo của mình

Điều này tương đối dễ dàng, vì tất cả những gì tôi phải làm là xóa

-
  Page template without sidebar
 */

// Additional code goes here...

1 khỏi mẫu trang của mình vì đó là thứ gọi là thanh bên. Kết quả là, mẫu tùy chỉnh của tôi trông như thế này

-
  Page template without sidebar
 */

get_header(); ?>


  


    
      
      
    

  

5. Tải lên mẫu trang

Sau khi lưu tệp tùy chỉnh của tôi, bây giờ là lúc tải nó lên trang web của tôi. Các mẫu trang tùy chỉnh có thể được lưu ở một số nơi để được WordPress công nhận

• Thư mục của chủ đề (con) đang hoạt động của bạn
• Thư mục của chủ đề chính của bạn
• Một thư mục con trong một trong hai

Cá nhân tôi muốn tạo một thư mục có tên page_templates trong chủ đề con của mình và đặt bất kỳ mẫu tùy chỉnh nào vào đó. Tôi thấy điều này dễ dàng nhất để giữ lại tổng quan về các tệp và tùy chỉnh của tôi

6. Kích hoạt Mẫu

Bước cuối cùng, bạn cần kích hoạt mẫu trang. Như đã đề cập trước đó, điều này được thực hiện trong Thuộc tính trang → Mẫu trong trình chỉnh sửa WordPress. Lưu, xem trang và voilà. Đây là trang tùy chỉnh của tôi không có thanh bên

Mẫu trang tùy chỉnh không có thanh bên. (Xem bản lớn)

Không quá khó phải không? . Để giúp bạn có ấn tượng tốt hơn về việc sử dụng các mẫu trang này để làm gì, tôi sẽ trình bày các trường hợp sử dụng bổ sung (bao gồm cả mã) trong phần còn lại của bài viết

Năm cách khác nhau để sử dụng mẫu trang

Như đã đề cập, các mẫu trang có thể được sử dụng cho nhiều mục đích khác nhau. Bạn có thể tùy chỉnh khá nhiều thứ trên bất kỳ trang nào với sự trợ giúp của họ. Chỉ có trí tưởng tượng của bạn (và khả năng mã hóa) cản đường bạn

1. Mẫu trang có chiều rộng đầy đủ

Trường hợp đầu tiên chúng ta sẽ xem xét là phiên bản nâng cao của mẫu demo mà chúng ta đã tạo ở trên. Trên đó, chúng tôi đã xóa thanh bên bằng cách xóa

-
  Page template without sidebar
 */

// Additional code goes here...

1 khỏi mã. Tuy nhiên, như bạn đã thấy từ ảnh chụp màn hình, điều này không thực sự dẫn đến bố cục toàn chiều rộng do phần nội dung nằm ở bên trái

Để giải quyết vấn đề này, chúng ta cần xử lý CSS, cụ thể là phần này

.site-content {
  float: left;
  width: 65.1042%;
}

Thuộc tính

-
  Page template without sidebar
 */

// Additional code goes here...

3 giới hạn phần tử chứa nội dung của chúng ta ở mức 65. 1042% không gian có sẵn. Chúng tôi muốn tăng điều này

Tuy nhiên, nếu chúng tôi chỉ thay đổi nó thành 100%, điều này sẽ ảnh hưởng đến tất cả các trang khác trên trang web của chúng tôi, điều này khác xa với những gì chúng tôi muốn. Do đó, thứ tự đầu tiên ở đây là thay đổi lớp chính của

-
  Page template without sidebar
 */

// Additional code goes here...

4 trong mẫu tùy chỉnh của chúng tôi thành một thứ khác, chẳng hạn như

-
  Page template without sidebar
 */

// Additional code goes here...

5. Kết quả

-
  Page template without sidebar
 */

get_header(); ?>


  


    
      
      
    

  

Bây giờ chúng ta có thể điều chỉnh CSS cho lớp tùy chỉnh mới của mình

.site-content-fullwidth {
  float: left;
  width: 100%;
}

Do đó, nội dung hiện trải dài khắp màn hình

Mẫu trang tùy chỉnh ở toàn bộ chiều rộng. (Xem bản lớn)

2. Trang lỗi 404 động với các khu vực widget

Trang lỗi 404 là nơi mọi người truy cập vào một trang không tồn tại trên trang web của bạn, do lỗi đánh máy, liên kết bị lỗi hoặc do liên kết cố định của trang đã thay đổi

Mặc dù thực tế là mọi người trên Internet đều không thích nhận được lỗi 404, nhưng nếu bạn đang điều hành một trang web thì trang lỗi 404 cũng không kém phần quan trọng. Nội dung của nó có thể là yếu tố quyết định liệu ai đó có rời khỏi trang web của bạn ngay lập tức hay không và xem nội dung khác của bạn

Mã hóa trang lỗi tùy chỉnh từ đầu rất cồng kềnh, đặc biệt nếu bạn không tự tin vào khả năng của mình. Cách tốt hơn là xây dựng các khu vực widget vào mẫu của bạn để bạn có thể thay đổi linh hoạt những gì được hiển thị ở đó bằng cách kéo và thả

Đối với điều này, chúng tôi sẽ lấy và chỉnh sửa 404. php đi kèm với Twenty Twelve (phân cấp mẫu, nhớ không?). Tuy nhiên, trước khi chúng tôi thay đổi bất cứ điều gì trên đó, trước tiên chúng tôi sẽ tạo một tiện ích con mới bằng cách chèn đoạn mã sau vào các chức năng của chúng tôi. tập tin php

register_sidebar( array(
  'name' => '404 Page',
  'id' => '404',
  'description'  => __( 'Content for your 404 error page goes here.' ),
  'before_widget' => '
',
  'after_widget' => '
',
  'before_title' => '
',
  'after_title' => '
'
) );

Điều này sẽ hiển thị tiện ích mới được tạo trong phần phụ trợ WordPress của bạn. Để đảm bảo rằng nó thực sự bật lên trên trang web, bạn cần thêm dòng mã sau vào trang 404 của mình ở vị trí thích hợp

Trong trường hợp của tôi, tôi muốn thay thế biểu mẫu tìm kiếm (

-
  Page template without sidebar
 */

// Additional code goes here...

6) bên trong mẫu bằng tiện ích con mới của mình, tạo đoạn mã sau

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

0

Sau khi tải mẫu lên trang web của tôi, đã đến lúc điền vào khu vực tiện ích con mới của tôi

Tiện ích mẫu trang 404. (Xem bản lớn)

Nếu bây giờ tôi xem trang lỗi 404, các tiện ích con mới tạo của tôi sẽ hiển thị ở đó

Trang 404 tùy chỉnh. (Xem bản lớn)

3. Mẫu trang để hiển thị các loại bài đăng tùy chỉnh

Các loại bài đăng tùy chỉnh là một cách tuyệt vời để giới thiệu nội dung có tập hợp các điểm dữ liệu, thiết kế và các tùy chỉnh khác của riêng nó. Trường hợp sử dụng yêu thích cho các loại bài đăng này là các mục đánh giá như sách và phim. Trong trường hợp của chúng tôi, chúng tôi muốn tạo một mẫu trang hiển thị các mục danh mục đầu tư

Trước tiên, chúng tôi cần tạo loại bài đăng tùy chỉnh (CPT). Điều này có thể được thực hiện thủ công hoặc thông qua plugin. Một tùy chọn plugin mà tôi hết lòng giới thiệu là Các loại. Nó cho phép bạn dễ dàng tạo các loại bài đăng tùy chỉnh và các trường tùy chỉnh

Cài đặt và kích hoạt Các loại, thêm một bài đăng tùy chỉnh, đảm bảo sên của nó là 'danh mục đầu tư', tùy chỉnh bất kỳ trường nào bạn cần (chẳng hạn như thêm hình ảnh nổi bật), điều chỉnh bất kỳ tùy chọn nào khác và lưu

Bây giờ, chúng tôi có loại bài đăng danh mục đầu tư của mình, chúng tôi muốn nó hiển thị trên trang web của chúng tôi. Điều đầu tiên chúng tôi sẽ làm là tạo trang được đề cập. Xin lưu ý rằng nếu bạn chọn 'danh mục đầu tư' làm sên cho CPT của mình, thì trang không thể có cùng sên. Tôi đã sử dụng

-
  Page template without sidebar
 */

// Additional code goes here...

7 của mình và cũng đã thêm một số văn bản ví dụ

Trang danh mục đầu tư không có mẫu trang tùy chỉnh. (Xem bản lớn)

Sau khi thêm một vài mục vào phần loại bài đăng 'danh mục đầu tư', chúng tôi muốn chúng hiển thị trên trang của chúng tôi ngay bên dưới nội dung trang

Để đạt được điều này, chúng tôi sẽ lại sử dụng một dẫn xuất của trang. tập tin php. Sao chép nó, gọi nó là mẫu danh mục đầu tư. php và thay đổi tiêu đề này

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

1

Tuy nhiên, trong trường hợp này, chúng tôi sẽ phải thực hiện một vài thay đổi đối với mẫu ban đầu. Khi bạn nhìn vào mã của trang. php, bạn sẽ thấy nó gọi một tệp mẫu khác ở giữa, có tên là trang nội dung. php (có ghi là

-
  Page template without sidebar
 */

// Additional code goes here...

8). Trong tệp đó, chúng tôi tìm thấy đoạn mã sau

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

2

Như bạn có thể thấy, ở đây tiêu đề và nội dung của trang được gọi là. Vì chúng tôi chắc chắn muốn những thứ đó trên trang danh mục đầu tư của mình, chúng tôi sẽ cần sao chép các phần cần thiết của mẫu này vào trang của chúng tôi. tập tin php. Kết quả trông như thế này

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

3

Để đưa các danh mục đầu tư vào trang của chúng tôi, chúng tôi sẽ thêm đoạn mã sau ngay bên dưới cuộc gọi

-
  Page template without sidebar
 */

// Additional code goes here...

9

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

4

Điều này sẽ làm cho CPT hiển thị trên trang

Mẫu danh mục đầu tư tùy chỉnh. (Xem bản lớn)

Tôi chắc rằng tất cả chúng ta đều đồng ý rằng nó trông kém xuất sắc hơn, vì vậy một số kiểu dáng là phù hợp

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

5

Tốt hơn nhiều, bạn có nghĩ vậy không?

Mẫu danh mục đầu tư tùy chỉnh với kiểu dáng. (Xem bản lớn)

Và đây là toàn bộ mã cho mẫu trang danh mục đầu tư

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

6

4. Trang cộng tác viên có hình ảnh đại diện

Tiếp theo trong các trường hợp sử dụng mẫu trang của chúng tôi là trang cộng tác viên. Chúng tôi muốn thiết lập một danh sách các tác giả trên trang web của chúng tôi, bao gồm hình ảnh của họ và số lượng bài đăng họ đã xuất bản dưới tên của họ. Kết quả cuối cùng sẽ như thế này

Trang cộng tác viên tùy chỉnh đã hoàn thành. (Xem bản lớn)

Chúng tôi sẽ lại bắt đầu với tệp kết hợp của mình từ trước đó và thêm mã cho danh sách cộng tác viên vào đó. Nhưng nếu bạn không biết cách tạo ra một thứ như vậy thì sao?

Bạn thấy đấy, chủ đề mặc định của Twenty Fourteen đi kèm với trang cộng tác viên theo mặc định. Bạn có thể tìm thấy mẫu của nó trong thư mục mẫu trang với tên người đóng góp. php

Tuy nhiên, khi xem tệp, bạn sẽ chỉ tìm thấy cuộc gọi sau trong đó.

-
  Page template without sidebar
 */

get_header(); ?>


  


    
      
      
    

  

0. May mắn thay, với tư cách là một người dùng WordPress cuồng nhiệt, giờ đây bạn kết luận rằng điều này có thể đề cập đến một chức năng trong chức năng của Twenty Fourteen. php và bạn sẽ đúng

Từ những gì chúng tôi tìm thấy trong đó, phần mà chúng tôi quan tâm là đây

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

7

Chúng tôi sẽ thêm nó một lần nữa bên dưới lệnh gọi cho

-
  Page template without sidebar
 */

// Additional code goes here...

9 với kết quả như sau

Trang cộng tác viên tùy chỉnh chưa được tạo kiểu. (Xem bản lớn)

Bây giờ cho một chút phong cách

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

8

Và đó nên là nó. Cảm ơn Hai Mươi Mười Bốn

5. Trang lưu trữ tùy chỉnh

Twenty Twelve đi kèm với mẫu riêng cho các trang lưu trữ. Ví dụ, nó sẽ bắt đầu hành động khi bạn cố gắng xem tất cả các bài đăng trước đây từ một danh mục nhất định

Tuy nhiên, tôi muốn một cái gì đó giống như những gì Problogger đã làm. một trang cho phép mọi người khám phá nội dung bổ sung trên trang web của tôi theo nhiều cách khác nhau. Điều đó, một lần nữa, được thực hiện với một mẫu trang

Giữ nguyên mẫu hỗn hợp của chúng tôi từ trước, chúng tôi sẽ thêm phần sau vào bên dưới cuộc gọi

-
  Page template without sidebar
 */

// Additional code goes here...

9

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

9

Ngoài ra, một chút phong cách cho thanh tìm kiếm

0

Và kết quả sẽ trông giống như thế này

Trang lưu trữ tùy chỉnh. (Xem bản lớn)

Để hoàn thành, đây là toàn bộ tệp

1

Đừng quên gán nó cho một trang

Tóm tắt các mẫu trang WordPress

Trên con đường thành thạo WordPress, học cách sử dụng các mẫu trang là một bước quan trọng. Họ có thể làm cho việc tùy chỉnh trang web của bạn trở nên rất, rất dễ dàng và cho phép bạn chỉ định chức năng và thiết kế độc đáo cho nhiều hoặc ít trang tùy thích. Từ việc thêm các khu vực tiện ích để hiển thị các loại bài đăng tùy chỉnh đến hiển thị danh sách những người đóng góp cho trang web của bạn — khả năng thực tế là vô tận

Việc bạn sử dụng các thẻ có điều kiện, khai thác hệ thống phân cấp mẫu WordPress hay tạo các tệp mẫu dành riêng cho trang hoàn toàn phụ thuộc vào bạn và những gì bạn đang cố gắng đạt được. Bắt đầu từ việc nhỏ và làm theo cách của bạn đến những điều phức tạp hơn. Sẽ không lâu nữa trước khi mọi phần của trang web WordPress của bạn sẽ trả lời mọi cuộc gọi của bạn

Bạn có kinh nghiệm sử dụng các mẫu trang trong WordPress không?

Bạn có thể tạo mẫu trang trong WordPress không?

Những plugin nào có thể được sử dụng để xây dựng bố cục trang trong WordPress?

Làm cách nào để tạo trang tùy chỉnh trong WordPress theo lập trình?

Các mẫu trang WordPress được lưu trữ ở đâu?