Bài học này sẽ liệt kê những kiểu bố trí HTML chi tiết để thể hiện một nội dung nào đó trên website, như là 1 cụm các bài viết, một khối nội dung trên trang chủ, hay các bài viết dạng slider trình chiếu ở các sidebar…

Mục lục

Kiến thức yêu cầu:
– HTML, CSS, JS căn bản.
– WordPress căn bản.
– Hiểu cách dùng Waytech Starter Theme căn bản.

Cấu trúc 1 bài viết Article Item điển hình

Cấu trúc Layout bài viết trong trang Category

Cấu trúc Layout bài viết trong trang Category

Chúng ta gọi một bài viết như vậy là Article Item, với cấu trúc thường gặp như sau:

  • Ảnh đại diện (item-thumbnail).
  • Tiêu đề (item-title).
  • Ngày đăng (item-date).
  • Tóm tắt (item-excerpt).
  • Chuyên mục (item-category).
  • Tác giả (item-author).
<article class="item clear-after" id="post-<?php the_ID(); ?>">

   <figure class="item-thumbnail">
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         <?php echo the_post_thumbnail( 'waytech400x300' ); ?>
      </a>
   </figure>

   <h3 class="item-title">
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         <?php the_title(); ?>
      </a>
   </h3>

   <div class="item-date">
      <?php echo get_the_date(); ?>
   </div>

   <div class="item-excerpt">
      <?php limited_excerpt( 150 ); ?>
   </div>

   <div class="item-category">
      <?php
         $cat_of_post = get_the_category();
      ?>
      <a href="<?php echo esc_url( get_category_link( $cat_of_post[0]->term_id ) ) ?>">
         <?php echo $cat_of_post[0]->cat_name ?>
      </a>
   </div>

   <div class="item-author">
      <?php echo get_the_author(); ?>
   </div>

</article>

Trong nhóm code thể hiện cấu trúc cho Article Item này, có một số điểm lưu ý sau:

  • Hàm the_post_thumbnail() có tham số là tên Image Size, là chỉ định lấy hình ảnh ở kích thước nào. Trong WordPress mặc định có 5 kích thước: thumbnail, medium, medium_large, large, full (Xem document). Waytech Starter Theme tích hợp thêm 1 loại kích thước nữa là waytech400x300 chuyên dùng cho hình đại diện với kích thước là 400 x 300 px.
  • Hàm get_the_date() sẽ trả về ngày đăng bài, với định dạng lấy theo cài đặt ngày giờ trong mục Cài đặt ⇒ Tổng quanAdmin.
  • Hàm limited_excerpt() là hàm viết riêng của Waytech Starter Theme, với tham số là số ký tự tối đa được in ra. Có thể xem hàm này trong file waytech/functions/custom-functions.php.
  • Hàm get_the_category() trả về tất cả các Object Category của bài viết hiện tại, lưu thành một mảng. Có thể var_dump() giá trị hàm này ra để hiểu chi tiết về định dạng kết quả của nó. Trong nhóm code phía trên, chúng ta chỉ lấy về phần tử đầu tiên trong mảng kết quả trả về.

Một nhóm cấu trúc như thế này thường được lưu thành một file template riêng để có thể sử dụng lại nhiều lần cho nhiều vị trí khác nhau. Có thể tham khảo các file trong thư mục waytech/functions/template.

– Mục lục –

Cấu trúc 1 nhóm các bài viết Article Group điển hình

Article Group

Article Group

Khi đặt các Article Item vào 1 nhóm thì phát sinh thêm một số vấn đề khác, đó là số lượng Item trên cùng 1 dòng ở các màn hình khác nhau và khoảng cách giữa các Item. Chúng ta sẽ sử dụng các class của Bootstrap gắn vô các thẻ article.item để giải quyết 2 vấn đề trên.

Trong Article Item ta thêm class Bootstrap như sau:

<article class="item clear-after col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4" id="post-<?php the_ID(); ?>">

   <figure class="item-thumbnail">
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         <?php echo the_post_thumbnail( 'waytech400x300' ); ?>
      </a>
   </figure>

   <h3 class="item-title">
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
         <?php the_title(); ?>
      </a>
   </h3>

   <div class="item-date">
      <?php echo get_the_date(); ?>
   </div>

   <div class="item-excerpt">
      <?php limited_excerpt( 150 ); ?>
   </div>

   <div class="item-category">
      <?php
         $cat_of_post = get_the_category();
      ?>
      <a href="<?php echo esc_url( get_category_link( $cat_of_post[0]->term_id ) ) ?>">
         <?php echo $cat_of_post[0]->cat_name ?>
      </a>
   </div>

   <div class="item-author">
      <?php echo get_the_author(); ?>
   </div>

</article>

Trở lại cấu trúc Section, ta bố trí code như sau:

<section class="section">
   <div class="wrap">

      <header class="section-header">
         Section Header Here
      </header>

      <div class="section-content">

         <div class="item-group">
            <div class="row">

               <article class="item clear-after col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> ... </article>

               <article class="item clear-after col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> ... </article>

               <article class="item clear-after col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> ... </article>

               ...

            </div>
         </div>

      </div>
   </div>
</section>

Đó là một cách kết hợp các Article Item vào một nhóm để thể hiện danh sách các bài viết trong Section. Các class của Bootstrap được sử dụng ở đây là thẻ div.row nằm ngay trong thẻ div.item-group và các class column trong các thẻ article.item.

Sau đây là một cấu trúc hiển thị bài viết hoàn chỉnh dùng trong Waytech Starter Theme, lấy dữ liệu các bài viết trong category có ID là 2 hiển thị ra ngoài Section ở trang chủ:

<section class="section">
   <div class="wrap">

      <header class="section-header">
         Section Header Here
      </header>

      <div class="section-content">

         <div class="item-group">
            <div class="row">

            <?php
               $arg = array(
                  'post_type' => 'post',
                  'posts_per_page' => 8,
                  'cat' => 2,
                  'meta_key' => 'hien_thi_trang_chu',
                  'meta_value' => true
               );
               query_posts( $arg );
               while( have_posts() ){
                  the_post();
                  $index = $wp_query->current_post;
                  get_template_part( "functions/template/article", "thumbnail-title-date-excerpt" );
               }
               wp_reset_query();
            ?>

            </div>
         </div>

      </div>
   </div>
</section>

– Mục lục –

Cấu trúc 1 nhóm các bài viết dạng slider Carousel điển hình

Waytech Starter Theme đã tích hợp sẵn Owl Carousel Slider trong phần core, nên giờ chỉ việc bố trí đúng theo chuẩn của Owl Carousel và gắn Script vào file waytech/js/script.js là sẽ chạy được.

Article Group Using Owl Carousel Slider

Article Group Using Owl Carousel Slider

<section class="section">
   <div class="wrap">

      <header class="section-header">
         Section Header Here
      </header>

      <div class="section-content">

         <div class="item-group owl-carousel customer-carousel">

               <article class="item clear-after"> ... </article>

               <article class="item clear-after"> ... </article>

               <article class="item clear-after"> ... </article>

         </div>

      </div>
   </div>
</section>

Cấu trúc để tạo một trình chiếu Carousel Slider đơn giản hơn cấu trúc Article Group bình thường, đó là không cần dùng đến Bootstrap vì bản thân Owl Carousel Slider đã hỗ trợ Responsive bằng jQuery rồi. Chú ý class .owl-carousel là bắt buộc, còn class .customer-carousel là do lập trình viên tự đặt để thuận tiện trong việc viết hàm chạy Slider trong fiel script.js.

Tiếp theo là viết đoạn script sau vào file waytech/js/script.js:

$(document).ready(function() {

   $( '.customer-carousel' ).owlCarousel({
      loop: true,
      margin: 0,
      dots: true,
      nav: true,
      navText:
         [
            '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
            '<i class="fa fa-chevron-right" aria-hidden="true"></i>'
         ],
      autoplay:true,
      autoplayTimeout:3000,
      autoplaySpeed: 1000,
      navSpeed: 1000,
      dotsSpeed: 1000,
      responsive:{
         0:{
            items:1
         },
         544:{
            items:1
         },
         768:{
            items:2
         },
         992:{
            items:3
         },
         1200:{
            items:4
         }
      }
   }); // End owlCarousel()

}

Các option tham số bên trong hàm owlCarousel() các bạn xem tại đây.

– Mục lục –

Trong Waytech Starter Theme đã có tích hợp sẵn một cấu trúc để hiển thị phần Header Menu như sau:

<!-- Header Menu -->
<div class="header-menu col-xs-12 col-sm-12 col-md-* col-lg-* col-xl-*">
   <div class="row">
 
      <div class="mobile-menu-button hidden-lg-up">
         <i class="fa fa-bars fa-fw" root="fa-bars" active="fa-chevron-left"></i>
         <?php _e( 'Menu', 'waytech' ); ?>
      </div>
 
      <?php
         wp_nav_menu(
            array(
               'menu' => 'Header Menu',
               'theme_location' => 'header',
               'container_class' => 'menu-toggle trans3 clear-after',
            )
         );
      ?>
 
   </div>
</div>

Các bước tuần tự để hiển thị một menu ra giao diện như sau:

  1. Vào mục Giao diện ⇒ Menu tạo ra một menu muốn hiển thị.
  2. Dùng hàm wp_nav_menu() kèm theo các tham số để hiển thị theo ý muốn (Xem document).
  3. Kết hợp BootstrapjQuery nếu muốn Responsive trên Mobile.

Chú ý:

  • Các class .menu-toggle.trans3 là các class đặc trưng của Header Menu trong Waytech Starter Theme.
  • Các menu khác không nhất thiết phải có 2 class này, chỉ cần class .clear-after là đủ.

– Mục lục –

Trong Waytech Starter Theme, ảnh logo được lưu trong mục Giao diện ⇒ Tùy chỉnh ⇒ Nhận dạng site ở Admin, bao gồm Header LogoFooter Logo. Các data của logo được lưu trong option title_tagline, đây là 1 array, phần tử chứa logo là title_tagline[logo_header_img] và title_tagline[logo_footer_img].

Cấu trúc hiển thị một logo điển hình như sau:

<!-- Header Logo -->
<div class="header-logo">
   <a class="logo-image" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo( 'name' ); ?>">
      <?php
         $logo = get_option( 'title_tagline' );
         if( !empty( $logo['logo_header_img'] ) ):
      ?>
         <img src="<?php echo $logo['logo_header_img']; ?>" alt="<?php bloginfo( 'name' ); ?>" />
      <?php else: ?>
         <?php bloginfo( 'name' ); ?>
      <?php endif; ?>
   </a>
</div>

– Mục lục –