Tạo Mẫu Trang Tùy chỉnh cho Chủ đề của bạn

Hệ thống mẫu WordPress rất linh hoạt, nhưng đôi khi bạn cần một mẫu trang tùy chỉnh cho nội dung của mình. Chúng tôi sẽ trình bày cách tạo tệp mẫu trang tùy chỉnh để trình chỉnh sửa WordPress có thể chọn tệp đó. Sau đó, chúng tôi sẽ sử dụng mẫu mới để triển khai Vòng lặp chính của WordPress.

Khi bạn mở rộng một chủ đề bằng cách tạo một chủ đề con tùy chỉnh, bạn “kế thừa” một cách hiệu quả các tùy chọn và tùy chọn tùy chỉnh từ chủ đề mẹ. Điều này bao gồm các tệp mẫu trang mà bạn có thể sử dụng để bố trí nội dung trang của mình. Hầu hết các chủ đề mẹ đều có các tùy chọn mẫu đặt trước như:

  • "Chiều rộng đầy đủ"
  • "Chiều rộng cố định"
  • “Chiều rộng đầy đủ - Không có thanh bên”
… Đại loại vậy.
Đối với hầu hết nội dung của bạn, bạn sẽ ổn, nhưng đôi khi bạn sẽ muốn làm điều gì đó không chuẩn một chút. Đối với dự án nhỏ này, chúng tôi sẽ tạo một mẫu trang tùy chỉnh có tên là “ Brochure ”.

Hãy viết một số mã

Trong chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên là template-brochure.php và dán phần sau vào đó.
/**
 * Template Name: Brochure
 */
?>

Our Brochure Template

Đây là xương trần tuyệt đối. Bằng cách lưu tệp này vào thư mục của chủ đề con tùy chỉnh của bạn, giờ đây bạn có thể chỉnh sửa bất kỳ trang nào của mình, chọn “Brochure” làm mẫu, nhấp vào Xuất bản và sau đó xem.

Nếu bạn truy cập trang của mình ngay bây giờ, tất cả những gì bạn sẽ thấy là:

Để làm cho mẫu mới này thực sự làm được điều gì đó hữu ích, chúng ta cần thêm một số hàm tiêu chuẩn của WordPress để xuất ra những thứ như tiêu đề HTML, liên kết đến các biểu định kiểu CSS, chân trang, thanh quản trị và các bit-and-bob khác.

Thêm một số cấu trúc WordPress

Để hỗ trợ tiêu đề, menu và chân trang WordPress chuẩn, chúng ta cần làm cho tệp PHP của mình trông giống như thế này…
/**
 * Template Name: Brochure
 */
get_header();
?>

Our Brochure page template.

<?php get_footer();
Lưu ý rằng chúng ta không kết thúc tệp bằng thẻ đóng PHP ngắn “?>” - đây là điều có chủ ý. Hàm get_footer () đóng tài liệu của chúng ta bằng thẻ đóng “</html>”. Bằng cách không có “?>” Trong tệp của mình, chúng tôi giảm nguy cơ vô tình thêm bất kỳ ký tự thừa nào vào tài liệu sau dấu đóng “</html>” - dấu cách ngẫu nhiên ở cuối hoặc dòng mới.

Hãy xem trang và bạn sẽ thấy “ Mẫu trang Brochure của chúng tôi ”. bây giờ đã ngồi đẹp trong phong cách trang của chúng tôi.

Chúng tôi đang tiến bộ, vì vậy bây giờ chúng ta hãy xem nội dung trang thực tế…

Vòng lặp WordPress

Ruột của hầu hết mọi thành phần WordPress là một vòng lặp. Cho dù đó là mẫu trang, menu hay tiện ích con, vòng lặp WordPress sẽ lặp lại danh sách các mục nội dung (bài đăng / trang / sản phẩm / v.v.), xuất ra HTML cho từng mục.

Sử dụng vòng lặp WordPress liên quan đến việc áp dụng logic khá chuẩn…

  1. Tạo một mảng tham số truy vấn.
  2. Tạo một đối tượng WP_Query, dựa trên các tham số truy vấn của bạn.
  3. Nếu truy vấn có bất kỳ bài đăng nào
    • Xuất một số HTML mở.
    • Đối với mỗi bài đăng trong kết quả của truy vấn
      • Lấy bài tiếp theo có sẵn trong kết quả của truy vấn.
      • Đưa ra một số nội dung cụ thể…
        • Tiêu đề.
        • Permalink.
        • Đoạn trích.
        • Nội dung.
        • Sao cũng được…
      • Xuất ra các bit-và-bob ở chân trang của bài đăng, như nhận xét.
    • Xuất một số HTML đóng.
    • Đặt lại siêu dữ liệu bài đăng vòng lặp WP.
  4. Khác
    • Đưa ra thông báo “không tìm thấy bài đăng nào”.
Bởi vì chúng tôi đang xử lý tệp mẫu trang, WordPress đã thiết lập vòng lặp chính cho chúng tôi. Vì vậy, chúng tôi không phải thực hiện các bước 1 hoặc 2 và chúng tôi cũng không cần đặt lại siêu dữ liệu ở cuối vòng lặp.

Hãy cập nhật template-fullpage-app.php để nó xuất ra nội dung trang thực tế của chúng ta.

/**
 * Template Name: Brochure
 */
get_header();
// Output a breadcrumb trail if Yoast is installed.
if (function_exists('yoast_breadcrumb')) {
   yoast_breadcrumb('

', '

'); } // The sidebar will be specific to the parent theme you're using. Have a // look at your parent theme's page.php to see where to call get_sidebar(), // if you even want to call it. Maybe you don't want a sidebar? // get_sidebar(); // The main WordPress loop. if (have_posts()) { // Open any container HTML elements. echo '
'; while (have_posts()) { // Grab the next post available in the query's results. the_post(); // It's often useful to have access to the ID for this // piece of content. $post_id = get_the_ID(); // Output the post-specific content here... // the_category(','); // the_excerpt(); // the_meta(); // ... the_title('

', '

'); the_content(); // Comment-out this next bit if you never want to see comments // with this page type. if (comments_open() || get_comments_number()) { comments_template(); } } echo '
'; //.main .brochure } else { printf('

%s

', __('No posts found', 'mywebsitetheme')); } get_footer();

Để hoàn tất mọi thứ, đoạn CSS sau có thể đi vào tệp style.css của chủ đề con của bạn .

/**
 * Brochure
 */
.main.brochure {
   background-color: pink;
   border: 1em solid lightpink;
   padding: 2em;
   border-radius: 0.5em;
   box-shadow: 0.25em 0.25em 1em lightgrey;
}
.main.brochure h1 {
   padding-bottom: 0.5em;
   margin-bottom: 0.5em;
   border-bottom: 0.125em dashed #404040;
}
@media (min-width: 768px) {
   .main.brochure {
      margin: 4em auto 4em auto;
      width: 768px;
   }
}

Điều này đủ để giúp bạn bắt đầu và sử dụng mẫu trang tùy chỉnh cơ bản nhưng có thể mở rộng. Nó sẽ không giành được bất kỳ giải thưởng thiết kế nào.

Vì vậy, thay vì hack xung quanh với các tệp PHP trong chủ đề mẹ của chủ đề con, bạn chỉ có thể tạo một mẫu mới cụ thể cho các yêu cầu của bạn. Đó là mã sạch và di động mà bạn có thể sử dụng trong bất kỳ dự án WordPress nào của mình.

Chúng tôi sẽ làm nhiều điều thú vị hơn với vòng lặp WordPress trong một hướng dẫn khác và hãy nhớ rằng vòng lặp chính (như trong một trang) hơi khác so với vòng lặp WordPress được sử dụng ở bất kỳ nơi nào khác (như để hiển thị danh sách các bài đăng trong một tiện ích tùy chỉnh ) .

Chúc bạn vui vẻ!