Hướng dẫn thiết kế theme wordpress

This entry is part 6 of 8 in the series Wordpress for Beginner

wp-content/uploads/2013/12/creating-wordpress-theme-from-static-html-screengrab-300x286.jpg

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:

<?php  /* the archive file - for displaying archives */  
get_header(); ?>
<div class="two-thirds" id="content"></div><!-- #content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php /* the archive file - for displaying archives */

get_header(); ?>

<?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

<?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(); ?-->

<?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(); ?>

<?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

<?php // start the loop proper ?>
<?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>">></article><!-- #post-theID-->
<?php endwhile; ?>

<?php // start the loop proper ?>

<?php while ( have_posts() ) : the_post(); ?>

<?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:

<section class="left image quarter">
  <img class="size-thumbnail" alt="" src="images/featured-image.jpg" />
</section><!-- .image -->

</section>

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

<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 -->

<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>

Vậy là xong rồi đấy,chúng ta cùng chiêm ngưỡng thành quả nhé.

Series Navigation<< Hướng dẫn thiết kế theme wordpress – Page TemplateHướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer >>

Hướng dẫn thiết kế theme wordpress – Archive Template

Tạo một Archive Template

Hiển thị tiêu đề trang – Page Title

Loop

Feature Image

Mô tả ngắn

Like this:

Có liên quan

Nguyễn Trung Hiếu

Tạo một Archive Template

Hiển thị tiêu đề trang – Page Title

Loop

Feature Image

Mô tả ngắn

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu