- Hướng dẫn thiết kế theme wordpress – Khởi động
- Hướng dẫn thiết kế theme wordpress – Upload code lên host
- Hướng dẫn thiết kế theme wordpress – Hiển thị bài viết
- Hướng dẫn thiết kế theme wordpress – File Footer
- Hướng dẫn thiết kế theme wordpress – Page Template
- Hướng dẫn thiết kế theme wordpress – Archive Template
- Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
Trong bài viết này, các bạn sẽ học được cách tạo Archive Template cho website wordpress
Ở bài học trước, chúng ta đã được tìm hiểu về cách tạo một template là Page Template, bài học này, tôi sẽ hướng dẫn các bạn cách tạo một file template khác đó là archive.php. Một file được WordPress sử dụng để lưu trữ danh mục, tags hoặc bất kỳ một kiểu lưu trữ nội dung nào khác.
Nguyên liệu cần cho bài học
- Một bộ code editor
- Một trình duyệt để test thành quả
- Một phần mềm chỉnh sửa ảnh, có thể sử dụng ngay Paint trong window
- Nếu bạn sử dụng localhost, thì cần cài thêm một số server ảo như EasyPHP, XAMPP….
- Nếu bạn không có quyền truy cập thằng vào host, thì cần có một account FTP để upload code.
Tạo một Archive Template
Đầu tiên, bạn vào thư mục chứa theme của bạn, sau đó tạo một file có tên archive.php với nội dung như sau:
|
1 2 3 4 5 |
<?php /* the archive file - for displaying archives */ get_header(); ?> <div class="two-thirds" id="content"></div><!-- #content--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Cũng giống như Page Template, file archive.php cũng nhúng header, footer, và sidebar và thẻ div có id là #content
Hiển thị tiêu đề trang – Page Title
Do WordPress của chúng ta có chế độ lưu trữ theo nhiều kiểu khác nhau như: ngày tháng, danh mục, tag…do đó, chúng ta cần phải thay đổi lại tiêu đề trang cho phù hợp với từng kiểu lưu trữ khác nhau. Các bạn thêm đoạn code sau vào trong thẻ div có id #content
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /* Queue the first post, that way we know if this is a date archive so we can display the correct title. * We reset this later so we can run the loop properly with a call to rewind_posts(). */ if ( have_posts() ) the_post(); ?> <h2 class="page-title"> <?php if ( is_day() ) { ?> Archive for <?php echo get_the_date(); ?> <?php } elseif ( is_month() ) { ?--> Archive for <!--?php echo get_the_date('F Y'); ?> <?php } elseif ( is_year() ) { ?--> Archive for <!--?php echo get_the_date('Y'); ?> <?php } else { ?--> <?php echo get_queried_object()->name; ?> <?php } ?> </h2> <?php rewind_posts(); ?--> |
Ở đây, hàm get_the_date() sẽ lấy ra những giá trị là ngày, tháng, hay năm, sau đó sẽ in ra. Nếu như khác kiểu ngày tháng, chúng ta sẽ sử dụng hàm get_queried_object() để lấy ra là dạng categories, tag, hay taxonomy….
Loop
Loop trong archive.php cũng như loop trong index.php nhưng với cấu trúc khác biệt, cho phép thay features image bằng hiển thị text, sử dụng the_excerpt() hoặc the_content() để hiển thị nội dung của bài viết.
Để bắt đầu vòng lặp, chúng ta thêm đoạn code sau
|
1 2 3 4 |
<?php // start the loop proper ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>">></article><!-- #post-theID--> <?php endwhile; ?> |
Feature Image
Để thêm hình ảnh feature image cho từng bài viết, chúng ta thêm đoạn code sau:
|
1 2 3 |
<section class="left image quarter"> <img class="size-thumbnail" alt="" src="images/featured-image.jpg" /> </section><!-- .image --> |
Mô tả ngắn
Thêm đoạn mô tả ngắn cho từng bài viết, giống như trên sharecodeweb.net vậy, chúng ta thêm đoạn code sau
|
1 2 3 4 5 6 7 8 9 |
<section class="left archive-content three-quarters"> <h3 class="entry-title"> <a title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?> </a> </h3> <section class="entry-content"><?php the_excerpt(); ?></section><!-- .entry-content --> </section> <!-- .archive-content --> |
Vậy là xong rồi đấy,chúng ta cùng chiêm ngưỡng thành quả nhé.
