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ẻ

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

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

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 [