Hướng dẫn code giao diện bài viết theo từng chuyên mục WordPress

50 Lượt xem

Hướng dẫn code giao diện bài viết theo từng chuyên mục WordPress cực kỳ đơn giản. Xem ngay bài hướng dẫn dưới nhé.

Nhắc lại kiến thức cơ bản tạo file nhận theo chuyên mục

1.Tạo giao diện khác nhau cho từng Category (Chuyên mục):

WordPress đã hỗ trợ sẵn cho bạn và bạn có thể tạo File category.php theo ID hoặc Slug riêng cho Category đó. Thường thì mình hay tạo file theo slug riêng để dễ quản lý, cụ thể ví dụ dưới đây.

Ví dụ :

Theo ID: Bạn sẽ tạo 1 file là : category-id.php(category-1.php,category-2.php,category-3.php, …)

Theo Slug: file category sẽ có dạng: category-slug.php(category-tin-tuc.php, category-du-an.php)

Sau đó chúng ta tự thay code hiển thị riêng cho Category này.

Xem lại bài: Hướng dẫn thiết kế giao diện cho từng chuyên mục

2.Tạo giao diện khác nhau cho từng Post (Bài viết theo chuyên mục):

Tương tự cách tạo như ở trên, chỉ khác là giao diện bài viết nên mình chỉ cần đổi tên category => content-singel.

Ví dụ:

conten-single-tin-tuc.php, content-single-du-an.php

Cách thiết kế giao diện bài viết theo từng chuyên mục WordPress

Mình sẽ làm thực tế trên website Cam Ranh Media để bạn đọc dễ hình dung. Cụ thể là trang kho giao diện website mình có file category-kho-giao-dien.php và bây giờ là các bước thiết kế giao diện post theo chuyên mục kho giao diện.

Bước 1: Tạo file content-single-kho-giao-dien.php

Vào thư mục theme hoặc child theme (tùy từng loại theme nếu có) tạo file hiển thị bài viết có tên là conten-single-khoa-giao-dien.php

Bước 2: Gọi hàm hiển thị header và footer

<?php
/*
 * Template Name: Template Themes
 * Template Post Type: post
 */
 get_header();  ?>


<?php get_footer();?>

Giải thích

<?php get_header();?> : Hàm hiển thị header của theme

<?php get_footer();?>: Hàm hiển thị footer của theme

Template Themes: Là tên giao diên của Kho giao diên mà mình đặt (Bạn có thể đặt lại theo ý bạn thích)

Template Post Type: post => Nhận diện tên theme post trong quản trị admin

=> Chú ý: Sau khi hoàn thành xong bước 2, bạn hãy vào tất cả bài viết – Sửa nhanh (Post bất kỳ) – Chọn giao diện Template Themes.

Bước 3: Đặt hàm get nội dung ra bên ngoài

Quan trọng nằm ở bước 2 thôi, chứ bước này các bạn chỉ việc dùng các hàm hiển thị nội dung ra ngoài. Cụ thể như dưới đây:

<?php echo the_post_thumbnail() ?> : Hàm hiển thị ảnh đại diện

<?php the_title(); ?> : Hàm hiển thị tiêu đề bài viết

<?php the_content(); ?> : Hàm hiển thị nội dung bài viết

<?php get_comment();?> : Hàm hiển thị bình luận bài viết

Xem thêm: Các hàm thông dụng trong WordPress

Xem kết quả bài hướng dẫn này: https://camranhmedia.com/mau-website-bao-hiem-petrolimex

Thông tin liên hệ Cam Ranh Media

Hy vọng, qua bài viết này bạn có thể tự code thiết kế giao diện 1 trang bài viết nhẹ và mượt mà như gái 18+ 😆 . Chúc các bạn thành công!

  • Địa chỉ: 40/31 Phạm Văn Đồng, Cam Ranh, Khánh Hòa
  • Điện thoại: 0935.961.044 – Zalo: 0346.260.994 Mr.Toàn
  • Email: dungtoan96@gmail.com
  • Website: toancr.com | camranhmedia.com
  • Fanpage: fb.com/camranhmedia

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0935961044