Cách hiển thị nội dung trên trang chính. Chúng tôi phân tích cú pháp và điền vào tệp php WordPress chỉ mục. Tệp mẫu WordPress CMS

WordPress là một liều thuốc dễ dàng trong thế giới phát triển web. Nhiều người bắt đầu sử dụng nền tảng này ban đầu đang tìm kiếm một cách dễ dàng (và miễn phí) để tạo một trang web đơn giản. Tất cả điều này có thể được thực hiện với một chút tìm kiếm trên Google và lời khuyên được cung cấp trong codex WordPress. Về cơ bản, “Tôi chỉ muốn thử và mọi việc đều thành công.”

Tuy nhiên, nhiều người dùng không dừng lại ở làm quen đơn giản. Thay vào đó, họ bắt đầu tích cực sử dụng hệ thống. Họ đưa ra nhiều ý tưởng hơn. Họ đang thử nghiệm. Đang thử các plugin mới. Mở Firebug. Tất cả. Điểm không thể quay lại đã được thông qua. Bạn có đồng ý không, điều này có giống với câu chuyện của bạn không? Việc người dùng WordPress ngày càng muốn có nhiều khía cạnh hơn trong việc quản lý trang web của họ là điều bình thường. Muốn có một thiết kế độc đáo, chức năng đã được chứng minh, có thể tùy chỉnh mọi chi tiết.

May mắn thay, hệ thống WordPressđược thiết kế chính xác cho việc này. Cô ấy cấu trúc linh hoạt và kiến ​​trúc mô-đun cho phép mọi người thay đổi hầu hết mọi thứ trên trang web của họ.

Trong số những công cụ quan trọng nhất liên quan đến toàn quyền kiểm soát trang web, bạn có thể đánh dấu các mẫu trang. Chúng cho phép người dùng thay đổi hoàn toàn thiết kế và chức năng của trang web của họ. Bạn muốn tạo một tiêu đề hoàn toàn khác cho trang chủ của mình? Một cách dễ dàng. Một thanh bên bổ sung sẽ chỉ xuất hiện trên trang blog? Không có gì. Trang duy nhất 404? Vui lòng!

Nếu bạn muốn biết các mẫu như thế nào trang WordPress sẽ giúp bạn giải quyết những vấn đề này, hãy đọc tiếp. Tuy nhiên, trước tiên chúng tôi sẽ cung cấp một số thông tin cơ bản cần thiết để hiểu cách các mẫu trang hoạt động trong WordPress.

Mẫu WordPress

Chúng ta có ý gì khi nói về các mẫu trong ngữ cảnh của WordPress? Nói tóm lại, mẫu là các tệp cho WordPress biết cách xuất các loại khác nhau nội dung.

Hơn giải thích chi tiết: Bất cứ khi nào ai đó đưa ra yêu cầu xem một phần trang web của bạn, nền tảng WordPress sẽ xác định nội dung nào người dùng muốn nhận và phần nào trên trang web của bạn sẽ được hiển thị.

Sau đó, WordPress sẽ cố gắng sử dụng mẫu phù hợp nhất có sẵn trong chủ đề của bạn cho phần này của trang web. Cái nào chính xác phụ thuộc vào hệ thống phân cấp của các mẫu WordPress. Bạn có thể thấy hệ thống phân cấp này trông như thế nào trong ảnh chụp màn hình bên dưới.

Hệ thống phân cấp mẫu là danh sách những cái quen thuộc tập tin WordPress các mẫu được xếp hạng để xác định tệp nào có mức độ ưu tiên cao nhất.

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

1. danh mục-(slug).php: trong trong trường hợp này danh mục-news.php
2. Category-(id).php>: Nếu ID danh mục là 5, WordPress sẽ cố gắng tìm tệp có tên Category-5.php
3. danh mục.php
4. archive.php
5. chỉ mục.php

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

Mẫu trang và công dụng của chúng

Đối với các trang, mẫu chuẩn là tệp page.php. Nếu không có mẫu nào tốt hơn (chẳng hạn như archive.php cho các trang lưu trữ), WordPress sẽ sử dụng page.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 hầu hết các trường hợp, cần phải thay đổi thiết kế, vẻ bề ngoài, chức năng khu vực riêng lẻđịa điểm. Trong trường hợp này, các mẫu trang được sử dụng. Mẫu trang tùy chỉnh cho phép bạn tùy chỉnh bất kỳ phần nào trên trang web của mình mà không ảnh hưởng đến phần còn lại.

Bạn có thể đã thấy điều này trong thực tế. Ví dụ, ngày nay nhiều người Chủ đề WordPressđi kèm với các tùy chọn để hiển thị các trang của bạn ở chế độ toàn màn hình, thêm thanh bên bổ sung hoặc thay đổi vị trí của nó, v.v. Tất cả điều này thường được thực hiện thông qua các mẫu. Có một số cách để làm điều này và chúng ta sẽ xem xét chúng ở phần tiếp theo.

Tuy nhiên, trước tiên, hãy thận trọng: Vì làm việc với các mẫu liên quan đến việc chỉnh sửa và sửa đổi các tệp chủ đề đang hoạt động của bạn, chúng tôi khuyên bạn nên sử dụng chủ đề con để thực hiện những điều chỉnh này. Bằng cách này, những thay đổi của bạn sẽ không bị ghi đè khi chủ đề gốc được cập nhật.

Cách thay đổi bất kỳ trang nào trong WordPress

Có ba cách chính để sử dụng mẫu trang tùy chỉnh trong WordPress: thêm câu điều kiện vào một mẫu hiện có; tạo mẫu cho một trang cụ thể sẽ xếp hạng cao hơn trong hệ thống phân cấp; cũng như gán trực tiếp các mẫu cho các trang cụ thể. Chúng ta sẽ lần lượt xem xét từng phương pháp này.

Sử dụng thẻ có điều kiện trong mẫu chuẩn

Cách dễ nhất để thực hiện thay đổi cho một trang riêng lẻ là sử dụng các thẻ có điều kiện trong mẫu của trang đó. Như tên cho thấy, các thẻ này được sử dụng để tạo các hàm chỉ được thực thi khi một điều kiện được đáp ứng. Trong ngữ cảnh của các mẫu trang, điều này giống như “Chỉ thực hiện hành động X trên trang Y”.

Thông thường, các thẻ có điều kiện sẽ được thêm vào mẫu page.php của chủ đề của bạn (trừ khi bạn muốn thay đổi một phần khác của trang web). Họ giúp bạn thực hiện những thay đổi chỉ dành cho trang chủ, trang chủ, 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 phổ biến:

1. is_page(). Trỏ đến một trang cụ thể. Có thể được sử dụng với ID, tiêu đề và URL/tiêu đề.
2. is_home(): Áp dụng cho trang chủ.
3. is_front_page(): áp dụng cho trang chủ trang web của bạn, được chỉ định trong phần “Tùy chọn” – “Đọc”.
4. là _category(): Điều kiện cho trang chuyên mục. Có thể được sử dụng với ID, tiêu đề, URL/tiêu đề, giống như thẻ is_page().
5. is_single(): dành cho các bài đăng đơn lẻ và tệp đính kèm
6. is_archive(): điều kiện cho các trang lưu trữ
7. is_404(): Chỉ áp dụng cho trang 404

Ví dụ: nếu bạn thêm page.php vào mẫu thay vì get_header(); đoạn mã sau, bạn sẽ nhận được tiêu đề tùy chỉnh có tên header-shop.php khi hiển thị trang http://yoursite.com/products.

Nếu (is_page("products")) ( get_header("shop"); ) else ( get_header(); )

Ví dụ tốt sử dụng mã này: nếu bạn có một cửa hàng trên trang web của mình và bạn muốn hiển thị hình ảnh tiêu đề khác hoặc menu đã sửa đổi trên trang cửa hàng. Bạn có thể thực hiện các thay đổi thích hợp đối với header-shop.php để đảm bảo tất cả những điều này xuất hiện trên trang web của bạn.

Tuy nhiên, thẻ có điều kiện không chỉ giới hạn ở một trang. Bạn có thể đặt nhiều điều kiện cùng một lúc:

If (is_page("products")) ( get_header("shop"); ) elseif (is_page(42)) ( get_header("about"); ) else ( get_header(); )

Trong ví dụ này, chúng tôi đã đặt 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. Ngoài việc tải tiêu đề cho cửa hàng đã được đề cập ở trên, chúng tôi tải header-about.php trên trang có ID 42. Đối với tất cả các trang khác, tiêu đề chuẩn sẽ được hiển thị.

Tạo mẫu trang trong hệ thống phân cấp mẫu WordPress

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

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

• Mẫu trang tùy chỉnh
• trang-(sên).php
• trang-(id).php
• trang.php
• chỉ mục.php

Đầu tiên hãy đến các mẫu trang tùy ý được gán trực tiếp cho trang này. Nếu có ít nhất một mẫu như vậy tồn tại, WordPress sẽ sử dụng nó bất kể sự tồn tại của các mẫu khác. Chúng ta sẽ nói về các mẫu trang tùy chỉnh sau.

Sau đó, WordPress sẽ tìm mẫu trang có chứa slug cho trang được đề cập. Ví dụ: nếu bạn đưa tệp page-about.php vào tệp chủ đề của mình, 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 khác có tại http://www.yoursite.com/about .

Bạn có thể đạt được điều tương tự bằng cách chỉ định ID trang của mình. Ví dụ: nếu cùng một trang có ID là 5, WordPress sẽ sử dụng mẫu page-5.php nếu nó tồn tại; Điều này sẽ chỉ xảy ra nếu không có mẫu trang nào có nhiều ưu tiên cao trong hệ thống phân cấp.

Bạn có thể tìm ra ID của bất kỳ trang nào bằng cách di chuột qua tiêu đề của nó trong phần Tất cả các trang của phần phụ trợ WordPress. ID sẽ nằm trong liên kết được trình duyệt của bạn hiển thị.

Liên kết các mẫu trang tùy chỉnh

Ngoài các mẫu mà WordPress có thể sử dụng tự động, bạn luôn có thể liên kết các mẫu tùy chỉnh với nhiều trang khác nhau. Như bạn có thể đã học được từ hệ thống phân cấp mẫu, các mẫu tùy chỉnh có mức độ ưu tiên cao nhất.

Giống như việc liên kết các mẫu tới các trang cụ thể, bạn sẽ cần tạo một mẫu và liên kết nó với trang mà bạn dự định sử dụng. Việc sau có thể được thực hiện theo hai cách mà bạn có thể đã quen thuộc. Để đề phòng, chúng tôi sẽ chỉ cho bạn cách thực hiện.

Liên kết mẫu trang tùy chỉnh thông qua trình chỉnh sửa WordPress

TRONG Trình chỉnh sửa WordPress bạn có thể tìm thấy một trường có tên Thuộc tính Trang. Nó chứa một danh sách Mẫu.

Bạn có thể chọn từ danh sách này bất kỳ thứ gì có sẵn Mẫu WordPress. Chỉ cần chọn mẫu thích hợp, sau đó lưu hoặc làm mới trang của bạn.

Đặt mẫu tùy chỉnh thông qua chỉnh sửa nhanh

Điều tương tự có thể được thực hiện mà không cần vào trình chỉnh sửa WordPress. Đi tới phần Tất cả các trang và di con trỏ chuột lên bất kỳ mục nào trong danh sách. Một menu sẽ xuất hiện trên màn hình, bao gồm mục Chỉnh sửa nhanh.

Bấm vào mục này để chỉnh sửa thông số trang trực tiếp từ danh sách. Bạn sẽ thấy trình đơn thả xuống tương tự cho phép bạn chọn mẫu trang. Chọn một mẫu và cập nhật trang. Sẵn sàng.

Không quá khó phải không? Tuy nhiên, nếu bạn chưa có mẫu trang tùy chỉnh thì sao? Làm thế nào để tạo ra nó? Đừng lo lắng, chúng ta sẽ thảo luận điều này trong phần tiếp theo.

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

Tạo mẫu tùy chỉnh cho các trang không phải như vậy quá trình khó khăn Tuy nhiên, nó cần phải tính đến một số chi tiết. Chúng ta hãy xem xét quá trình này từng bước một.

1. Chúng tôi đang tìm kiếm một mẫu tiêu chuẩn.

Một cách hay để bắt đầu tạo mẫu trang tùy chỉnh là sao chép mẫu có trong khoảnh khắc nàyđã được sử dụng cho trang được yêu cầu trong chủ đề của bạn. Việc thay đổi mã hiện có sẽ 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à tệp page.php.

Nếu bạn không thể xác định mẫu nào đang được sử dụng cho một trang nhất định, bạn có thể sử dụng plugin What The File.

Tôi sẽ sử dụng chủ đề Twenty Twelve làm ví dụ. Mẫu trang tiêu chuẩn trông như thế này:

Như bạn có thể thấy, không có gì thú vị: cuộc gọi thường xuyênđầu trang và chân trang, cũng như một vòng lặp ở giữa. Trang này sẽ trông như thế này:

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

Sau khi xác định mẫu chuẩn chúng ta sẽ cần phải sao chép nó. Chúng tôi sẽ sử dụng bản sao để đóng góp sự thay đổi cần thiếtđến trang của chúng tôi. Chúng tôi cũng sẽ cần phải đổi tên nó.

Bạn có thể đặt tên tập tin bất cứ điều gì bạn muốn. Điều chính là nó không bắt đầu bằng tên tệp chủ đề dành riêng. Bạn không nên đặt tên file page-something.php hay gì đó tương tự vì WordPress sẽ nghĩ đó là một mẫu tùy chỉnh.

Tốt nhất nên đặt tên tệp sao cho nó phản ánh được bản chất của mẫu. Ví dụ: my-custom-template.php. Trong trường hợp của chúng tôi, chúng tôi sẽ gọi nó là custom-full-width.php.

1. Thay đổi tiêu đề mẫu

Bây giờ chúng ta cần nói với WordPress rằng điều này tập tin mới là một mẫu trang tùy chỉnh. Để làm điều này, chúng ta chỉ cần điều chỉnh tiêu đề tệp:

Tên Mẫu sẽ xuất hiện trong phần Thuộc tính Trang của trang soạn thảo WordPress. Hãy chắc chắn rằng bạn thay đổi nó thành của riêng bạn.

1. Đang thiết lập mã.

Bây giờ là lúc làm việc với mã mẫu. Trong ví dụ của chúng tôi, chúng tôi sẽ xóa thanh bên khỏi trang demo.

Điều này tương đối dễ thực hiện - chỉ cần xóa get_sidebar(); từ mẫu trang. Kết quả là mẫu của tôi trông như thế này:

1. Đang tải mẫu trang

Sau khi lưu tệp đã sửa đổi, chúng ta cần tải nó lên trang web. Mẫu trang tùy chỉnh có thể được lưu trữ ở những nơi khác nhau:

• Thư mục có chủ đề đang hoạt động (con) của bạn
• Thư mục có chủ đề chính của bạn
• Thư mục con trong một thư mục có chủ đề bất kỳ (cả cha và con)

Tôi thích tạo thư mục page_templates trong chủ đề trẻ em và đặt tất cả các mẫu tùy ý trong đó. Đây là cách dễ nhất để tôi truy cập các tập tin đã thay đổi.

1. Kích hoạt mẫu

Bước cuối cùng: chúng ta cần kích hoạt mẫu trang. Như đã nêu trước đó, việc này được thực hiện trong phần Thuộc tính Trang → Mẫu của trình chỉnh sửa WordPress. Chúng tôi lưu, xem trang - và xem Bản mẫu mớiđang hoạt động (không có thanh bên):

Không quá khó phải không? Đừng lo lắng, bạn sẽ có thể nâng cao kỹ năng tạo mẫu của mình ngay lập tức. Để cung cấp cho bạn ý tưởng chính xác về cách sử dụng các mẫu này, tôi sẽ chỉ cho bạn một số mẫu lựa chọn thú vị sử dụng.

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

Như đã đề cập trướ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 hầu hết mọi khu vực trên bất kỳ trang nào. Trở ngại duy nhất trên con đường này sẽ là trí tưởng tượng của bạn (và kỹ năng viết mã).

Mẫu hiển thị trang toàn màn hình

Trường hợp đầu tiên chúng ta xem xét là phiên bản mở rộng của mẫu demo mà chúng ta đã tạo ở trên. Chúng tôi đã xóa thanh bên bằng cách xóa get_sidebar(); từ mã. Tuy nhiên, như bạn có thể thấy trong ảnh chụp màn hình, trang vẫn không hiển thị ở toàn bộ chiều rộng của màn hình vì phần nội dung vẫn được căn trái.

Để khắc phục điều này, chúng ta cần làm việc với CSS, đặc biệt là phần này:

Nội dung trang web ( float: left; width: 65.1042%; )

Thuộc tính width đặt chiều rộng của nội dung của chúng tôi thành 65,1042% không gian có sẵn. Chúng tôi muốn tăng giá trị này.

Nếu chúng tôi chỉ thay đổi giá trị chiều rộng thành 100% thì cuối cùng tất cả các trang trên trang web của chúng tôi sẽ được hiển thị ở toàn bộ chiều rộng của màn hình - chúng tôi không cần điều này. Bước đầu tiên của chúng tôi là thay đổi lớp của div bằng id=primary trong mẫu tùy chỉnh của chúng tôi. Bạn có thể thay đổi nó thành class="site-content-fullwidth". Kết quả:

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

Toàn bộ nội dung trang web ( float: left; width: 100%; )

Kết quả nội dung sẽ chiếm toàn bộ màn hình:

Các trang 404 động với các khu vực tiện ích

Trang 404 xuất hiện khi người dùng cố gắng truy cập một trang không tồn tại trên trang web của bạn. Điều này xảy ra do lỗi đánh máy, liên kết không chính xác hoặc do liên kết cố định đến trang đã bị thay đổi.

Mặc dù không ai thích nhận được các trang 404 nhưng chúng đóng một vai trò quan trọng đối với trang web của bạn. Nội dung của họ thường là yếu tố quyết định liệu một người sẽ từ bỏ trang web của bạn ngay lập tức hay cố gắng tìm kiếm nội dung khác trên đó.

Viết trang 404 từ đầu là một quá trình khá khó khăn, đặc biệt nếu bạn không có nhiều kinh nghiệm. Tốt nhất bạn nên nhúng các khu vực widget vào mẫu của mình để có thể thay đổi linh hoạt nội dung hiển thị trên màn hình.

Cụ thể cho việc này, chúng tôi sẽ sử dụng tệp 404.php đi kèm với chủ đề Twenty Twelve (bạn có nhớ hệ thống phân cấp mẫu không?). Nhưng trước khi chúng ta thay đổi bất cứ điều gì trong đó, hãy tạo tiện ích mới bằng cách dán mã vào tệp tin.php.

Register_sidebar(array("name" => "Trang 404", "id" => "404", "description" => __("Nội dung cho bạn Trang lỗi 404 xuất hiện ở đây."), "Before_widget" => "

", "after_title" => "

Điều này sẽ xuất ra tiện ích mới của chúng tôi trong phần phụ trợ WordPress. Để đảm bảo nó thực sự xuất hiện trên trang web của chúng tôi, chúng tôi cần thêm hàng tiếp theo mã vào tệp trang 404 ở 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 bằng get_search_form(); trong mẫu vào khu vực tiện ích. Đây là những gì nó trông giống như:

Sau khi tải mẫu lên trang web, chúng ta có thể điền vào khu vực widget mới:

Nếu bây giờ chúng ta truy cập trang 404, chúng ta sẽ thấy các tiện ích mới:

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

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

Đầu tiên chúng ta cần tạo loại bài đăng tùy chỉnh của mình. Điều này có thể được thực hiện bằng tay hoặc thông qua một plugin. Tôi có thể giới thiệu plugin Loại cho việc này. Nó sẽ 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 Loại, thêm loại bài đăng tùy chỉnh, biến nó thành một slug “danh mục đầu tư”, định cấu hình các trường bạn yêu cầu (ví dụ: thêm hình thu nhỏ), điều chỉnh các tùy chọn khác và lưu.

Bây giờ chúng ta đã có loại bài đăng danh mục đầu tư, chúng ta cần hiển thị nó trên trang web. Việc đầu tiên chúng ta sẽ làm là tạo trang mong muốn. Xin lưu ý rằng nếu bạn đã chọn danh mục đầu tư làm phần mở rộng cho kiểu tùy ý bản ghi, trang không được có cùng một phần mở rộng. Tôi quyết định về danh mục khách hàng và thêm một số văn bản bổ sung.

Sau khi thêm một vài thành phần vào phần portfolio, chúng ta cần hiển thị chúng trên trang ngay sau nội dung chính.

Để làm điều này, chúng tôi sử dụng một bản sao của page.php. Hãy sao chép tệp, gọi nó là portfolio-template.php và thay đổi tiêu đề của nó:

Tuy nhiên, trong trường hợp này chúng ta sẽ cần thực hiện một số thay đổi đối với mẫu ban đầu. Nếu bạn nhìn vào mã page.php, bạn sẽ thấy nó gọi một mẫu khác, content-page.php (get_template_part('content', 'page');). Trong tập tin này, chúng ta sẽ cần đoạn mã sau:

Như bạn có thể thấy, tiêu đề và nội dung của trang được gọi ở đây. Vì chúng tôi cũng cần chúng trong phần portfolio nên chúng tôi sẽ sao chép những đoạn này vào mẫu page.php của mình. Kết quả sẽ như sau:

Get_header(); ?>

Để hiển thị các mục danh mục đầu tư trên trang của chúng tôi, chúng tôi sẽ cần thêm mã sau ngay sau lệnh gọi the_content():

"portfolio", // nhập loại bài đăng tùy chỉnh "orderby" => "date", "order" => "DESC",); $loop = WP_Query mới($args); if($loop->have_posts()): while($loop->have_posts()): $loop->

Do đó, một loại bài đăng tùy chỉnh sẽ được hiển thị trên trang của chúng tôi:

Nó trông không đẹp lắm, vì vậy hãy thêm một số kiểu dáng ở đây:

/* Bài đăng danh mục đầu tư */ .portfolio ( -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0,75); bóng hộp: 0px 2px 2px 0px rgba(50, 50, 50, 0.75); lề: 0 0 20px; phần đệm: 30px; ) .portfolio-image ( display: block; float: left; Margin: 0 10px 0 0; max-width: 20%; ) .portfolio-image img ( border-radius: 0; ) .portfolio-work ( display: inline-block; max-width: 80%; ) .portfolio h3( border-bottom : 1px Solid #999; cỡ chữ: 1.57143rem; độ dày phông chữ: bình thường; lề: 0 0 15px; phần đệm dưới cùng: 15px; )

Giờ thì tốt hơn nhiều rồi, bạn có nghĩ vậy không?

Đây là tất cả mã cho mẫu trang danh mục đầu tư:

Trang thành viên có hình đại diện

Ví dụ tiếp theo về việc sử dụng mẫu của chúng tôi là trang thành viên. Chúng tôi muốn liệt kê các tác giả của trang web của chúng tôi, bao gồm cả hình ảnh của họ, cũng như 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ư sau:

Chúng ta sẽ bắt đầu với cùng một tệp kết hợp như trước và thêm mã vào đó để hiển thị danh sách những người tham gia.

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

Tuy nhiên, nếu nhìn vào tệp này, bạn sẽ chỉ tìm thấy lệnh gọi sau: Twentyfourteen_list_authors();. Rõ ràng, điều này có liên quan đến hàm có trong tệp function.php của chủ đề. Chúng tôi quan tâm đến đoạn sau:

"ID", "orderby" => "post_count", "order" => "DESC", "who" => "tác giả",)); foreach ($contributor_ids as $contributor_id): $post_count = count_user_posts($contributor_id); // Tiếp tục nếu người dùng chưa xuất bản bài viết nào. if (! $post_count) ( tiếp tục; ) ?>

Chúng ta sẽ thêm nó ngay bên dưới lệnh gọi the_content() và nhận được kết quả sau:

Bây giờ hãy thiết lập một số kiểu dáng:

/* Trang cộng tác */ .contributor ( border-bottom: 1px Solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- định cỡ: hộp viền; hiển thị: khối nội tuyến; đệm: 48px 10px; ) .contributor p ( lề-dưới: 1rem; ) .contributor-info ( lề: 0 tự động 0 168px; ) .contributor-avatar ( viền: 1px rgba rắn (0, 0, 0, 0.1); float: trái; chiều cao dòng: 0; lề: 0 30px 0 -168px; phần đệm: 2px; ) .contributor-avatar img( bán kính đường viền: 0; ) .contributor -tóm tắt ( float: left; ) .contributor-name( font-weight: normal; lề: 0 !important; ) .contributor-posts-link ( màu nền: #24890d; đường viền: 0 không có; bán kính đường viền: 0 ; màu sắc: #fff; hiển thị: khối nội tuyến; cỡ chữ: 12px; độ dày phông chữ: 700; chiều cao dòng: bình thường; phần đệm: 10px 30px 11px; chuyển đổi văn bản: chữ hoa; căn chỉnh dọc: dưới cùng; ) . cộng tác viên-bài viết-link:hover ( color: #000; text-trang trí: none; )

Sẵn sàng. Cảm ơn bạn Hai mươi mười bốn!

Trang lưu trữ đã thay đổi

Twenty Twelve có cái riêng của nó mẫu riêng cho các trang lưu trữ. Ví dụ: nó sẽ được sử dụng nếu bạn cố xem các bài đăng trước đây từ một danh mục nhất định.

Tuy nhiên, tôi muốn làm điều gì đó thú vị hơn, như Problogger: một trang cho phép mọi người truy cập nội dung bổ sung những cách khác. Điều này được thực hiện một lần nữa bằng cách sử dụng mẫu trang.

Chúng ta có thể thêm đoạn mã sau ngay bên dưới the_content() trong tệp của mình, mã này được sử dụng làm ví dụ:

Lưu trữ theo năm:

Lưu trữ theo tháng:

Lưu trữ theo chủ đề:

Bạn cũng sẽ cần một số kiểu dáng cho tìm kiếm:

Lưu trữ-tìm kiếm-form ( đệm: 10px 0; text-align: center; )

Kết quả sẽ như sau:

Đây là toàn bộ tập tin để bạn có thể hiểu nó là gì:

Đừng quên liên kết mẫu này với trang!

Cách đây không lâu một hướng dẫn đã được xuất bản về. Đó là bản chất của sự quen biết ở giai đoạn đầu, nhưng cũng bao gồm ví dụ thực tế. Tôi muốn tiếp tục hướng đi này, chỉ cần chú ý đến các trang. Tài liệu về chủ đề này rất đa chức năng, nghĩa là rất lớn. Vì vậy, sẽ rất khó để mở hết các tính năng của một mẫu trang trong một bài viết. Nhưng ít nhất chúng tôi sẽ cố gắng đề cập đến các chi tiết gián tiếp và tất nhiên là các thông số chính.

Hệ thống phân cấp trang

Hệ thống phân cấp có nghĩa là một trình tự từ cấp cao nhất đến cấp thấp nhất hoặc ngược lại. Trong trường hợp của chúng tôi, đây là thứ tự quyền hạn của các tệp mẫu cho trang. Khi người dùng truy cập vào một trong các trang của bạn, WordPress sẽ hiển thị nội dung của nó dựa trên tùy chọn tạo trang (xem thêm bên dưới).

Mẫu tùy chỉnh– ký hiệu bình luận có điều kiệnở trên cùng bên trong một tệp có tên ngẫu nhiên.

trang-slug.php– một mẫu có tên của trang (phím tắt). Nếu mẫu tùy chỉnh không được chỉ định thì WordPress sẽ sử dụng loại này như là chính.

trang-id.php– mã định danh trang duy nhất.

trang.php – tập tin tiêu chuẩn chịu trách nhiệm về nội dung của trang.

chỉ mục.php – tập tin chỉ mục. Nếu WordPress không tìm thấy bất kỳ mẫu nào được liệt kê ở trên thì theo mặc định, nó sẽ chịu trách nhiệm về các trang.

Chú ý. Ngoài ra còn có một mẫu trang trong WordPress có tên paged.php, tuy nhiên, nó không được sử dụng để hiển thị các trang bài đăng đơn lẻ mà để hiển thị danh sách các trang trong kho lưu trữ bài đăng.

Tạo mẫu tùy chỉnh để sử dụng hàng loạt

Có một số tùy chọn để tạo mẫu với những ưu và nhược điểm gần như không đáng kể. Tùy chọn này, mà bây giờ chúng tôi sẽ xem xét, là phổ biến nhất. Bước đầu tiên là tạo tập tin php hoặc sao chép page.php tiêu chuẩn. Sau đó lưu nó dưới một tên khác, ví dụ: templates_my.php. Sau đó thêm nhận xét ở đầu tệp:

Bước tiếp theo là tải tệp lên chủ đề của bạn, đi tới bảng quản trị trong tab “Trang - Thêm mới” hoặc bạn có thể mở một tệp hiện có. Trong thuộc tính trang, chọn mẫu nào sẽ được sử dụng trên trang này.

Nếu đột nhiên bạn không có bảng “Thuộc tính trang”, thì chỉ cần chọn hộp trong cài đặt màn hình ở góc trên bên phải để hiển thị nó.

Việc sử dụng rộng rãi có nghĩa là loại mẫu này có thể được áp dụng cho bất kỳ trang nào trên trang web. Ngược lại với chuyên ngành, được tạo bằng mã định danh hoặc nhãn trang cụ thể.

Khuyên bảo. Mẫu được tạo theo cách này có thể được đặt trong thư mục con chủ đề hiện tại. Do đó, không chiếm thêm không gian và tạo ra một cái nhìn nhỏ gọn.

Quan trọng. Không sử dụng tiền tố trang- làm tên của trang mẫu. Bởi vì WordPress sẽ hiểu tệp này là một tệp chuyên biệt, rõ ràng chỉ áp dụng cho một trang.

Mẫu trang tùy chỉnh

Phương pháp thứ hai chỉ dành cho một số trang nhất định không có ngoại lệ. Hãy đưa ra một ví dụ về kế hoạch cũ. Giả sử bạn có một trang tên là "Portfolio", theo mặc định nhãn của nó được dịch sang từ "portfolio" tiếng Anh. Điều này có thể được nhìn thấy trong cài đặt “Thuộc tính trang”. Bây giờ chúng ta chỉ cần sao chép tệp page.php và đổi tên nó thành page-portfolio.php.

ID được tạo theo cách tương tự, chỉ ID trang được thay thế cho nhãn. Anh ấy đang ở trong thanh địa chỉ, phần “Chỉnh sửa trang” trông giống như thế này post=9 . Theo cách tương tự, tệp tiêu chuẩn được sao chép và đổi tên thành page-9.php.

Quan trọng. Một mẫu cùng loại, chỉ được tạo cho trang cụ thể không thể được đặt trong thư mục con chủ đề. Hoàn toàn giống như trong các chủ đề trẻ em.

Ví dụ thực tế về việc tạo mẫu trang

Bây giờ, làm ví dụ, hãy tạo một mẫu dựa trên tùy chọn đầu tiên và thay đổi vòng lặp trong đó bằng cách thêm đầu ra của các danh mục có bản ghi. Mở bất kỳ trình soạn thảo nào, thêm mã bên dưới, lưu nó dưới tên template_my.php và tải nó lên máy chủ.

Bây giờ bạn cần viết style trong file style.css

My_main ( box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); lề: 20px tự động; đệm: 15px; nền: #fff; chiều rộng:1000px; ) .page_cat ( lề: 0 9px 20px; đệm: 15px; căn chỉnh dọc: trên cùng; chiều rộng: 28%; hiển thị: khối nội tuyến; ) .page_cat h2 ( color: #676767; font: đậm 18px arial; lề-dưới: 20px; ) .page_cat li a ( trang trí văn bản : none; color: #2879af; display: block; ) .page_cat li ( lề-bottom: 6px; phần đệm: 3px 3px 3px 10px; display: block; ) .page_cat li a:hover ( text-trang trí: gạch chân; ) . page_cat li:nth-child(2n) ( nền: #f7f7f7; )

Chỉ còn một việc phải làm: trong bảng quản trị, trong tab “Chỉnh sửa trang”, chỉ định mẫu “mẫu ví dụ” đã tạo trước đó của chúng tôi trong thuộc tính trang.

Kết quả.

Thẻ trang có điều kiện

Trong đoạn cuối cùng, chúng ta sẽ xem xét một số thẻ có điều kiện. Chúng được viết trong tệp page.php tiêu chuẩn.

Hiển thị các phần tử trên các trang cụ thể

/images/img.png"/> /hình ảnh/img.jpg"/> /hình ảnh/img.jpg"/> /hình ảnh/img.jpg"/>

đầu ra thông tin