Các cấu trúc layout HTML thường dùng trong thiết kế website được thống nhất thành một chuẩn chung, giúp các thiết kế được rõ ràng và tùy biến cao.

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.

Website không có sidebar

Web Layout Fullwith

Web Layout Fullwith

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">
         <header id="header">
            Header
         </header>
         <div id="main">

            <section class="section">
               <div class="wrap">
                  Section 1
               </div>
            </section>

            <section class="section">
               <div class="wrap">
                  Section 2
               </div>
            </section>

            <section class="section">
               <div class="wrap">
                  Section 3
               </div>
            </section>

         </div>

         <footer id="footer">
            Footer
         </footer>

      </div>
   </body>
</html>

Từ cách bố trí HTML trên, ta thấy:

  • Toàn bộ website được bao bọc bởi thẻ div#layout nhằm khống chế độ rộng toàn bộ website (để dễ dàng chuyển đổi qua lại giữa layout fullwidth và layout box).
  • Bên trong thẻ div#layout được chia thành 3 phần rất rõ ràng là thẻ header#header, thẻ div#main và thẻ footer#footer.
  • Trong thẻ div#main có nhiều section được bao bọc trong các cấu trúc thẻ Section, sẽ được triển khai chi tiết trong phần cấu trúc Section của bài học này.

– Mục lục –

Web Layout Left Sidebar

Web Layout Left Sidebar

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">

         <header id="header">
            Header
         </header>

         <div id="main">

            <section class="section">
               <div class="wrap">
                  
                  <div id="main-content">
                     Main Content
                  </div>

                  <div id="left-sidebar">
                     Left Sidebar
                  </div>

               </div>
            </section>

         </div>

         <footer id="footer">
            Footer
         </footer>

      </div>
   </body>
</html>

Ngoài phần thẻ div#main ra, các thành phần khác vẫn giống như kiểu website không có sidebar:

  • Bên trong thẻ div#main vẫn bố trí theo kiểu Section, tuy nhiên lúc này chỉ 1 Section chính mà thôi.
  • Bên trong cấu trúc thẻ section.section này, ta mới lần lượt bố trí thẻ div#main-content và thẻ div#left-sidebar vào.
  • Các thành phần bên trong thẻ div#main-content gọi là các Part.
  • Các thành phần bên trong thẻ div#left-sidebar gọi là các Widget.

– Mục lục –

Web Layout Right Sidebar

Web Layout Right Sidebar

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">

         <header id="header">
            Header
         </header>

         <div id="main">

            <section class="section">
               <div class="wrap">
                  
                  <div id="main-content">
                     Main Content
                  </div>

                  <div id="right-sidebar">
                     Right Sidebar
                  </div>

               </div>
            </section>

         </div>

         <footer id="footer">
            Footer
         </footer>

      </div>
   </body>
</html>

– Mục lục –

Website có 2 sidebar 2 bên

Web Layout 2 Sidebars

Web Layout 2 Sidebars

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">

         <header id="header">
            Header
         </header>

         <div id="main">

            <section class="section">
               <div class="wrap">
                  
                  <div id="main-content">
                     Main Content
                  </div>

                  <div id="left-sidebar">
                     Left Sidebar
                  </div>

                  <div id="right-sidebar">
                     Right Sidebar
                  </div>

               </div>
            </section>

         </div>

         <footer id="footer">
            Footer
         </footer>

      </div>
   </body>
</html>

Chúng ta chú ý đến sự sắp xếp của thẻ div#main-content, thẻ div#left-sidebar và thẻ div#right-sidebar, thứ tự này chính là thứ tự sẽ hiển thị trên màn hình di động, ưu tiên phần nội dung chính lên trên đầu.

Khi xem trên màn hình lớn, chúng ta sử dụng các class pullpush của Bootstrap để sắp xếp lại div#left-sidebar nằm bên trái, còn div#main-content nằm ở giữa.

– Mục lục –

Cấu trúc từng Section trên website

Section Structure

Section Structure

Để thuận tiện cho việc bố trí các thành phần trên website, chúng ta sử dụng cấu trúc Section cho các thành phần lớn trên web như Header, Main, Footer. Cấu trúc Section bắt đầu bằng thẻ <section> với class quy định là .section.

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">

         <header id="header">

            <section class="section">
               Section
            </section>

            <section class="section">
               Section
            </section>

            <section class="section">
               Section
            </section>

         </header>

         <div id="main">

            <section class="section">
                  Section
            </section>

            <section class="section">
                  Section
            </section>

            <section class="section">
                  Section
            </section>

         </div>

         <footer id="footer">

            <section class="section">
               Section
            </section>

            <section class="section">
               Section
            </section>

            <section class="section">
               Section
            </section>

         </footer>

      </div>
   </body>
</html>

Sau đây là cấu trúc chung của mỗi Section, gồm 2 phần: Section HeaderSection Content. Trong đó thành phần Section Header có thể có hoặc không tùy kiểu thiết kế của giao diện.

Section Layout

Section Layout

<section class="section">
   <div class="wrap clear-after">
      
      <header class="section-header">
         Section Header
      </header>

      <div class="section-content">
         Section Content
      </div>

   </div>
</section>

section-example

– Mục lục –

Cấu trúc từng Part trong Section

Trong trường hợp website có sidebar thì bên trong thẻ div#main chúng ta chỉ có 1 Section duy nhất, bên trong Section đó chứa các thẻ div#main-content, div#left-sidebar hoặc div#right-sidebar (xem lại Left Sidebar Layout). Khi đó các thành phần ở thẻ div#main-content sẽ được bố trí bên trong các Part.

Part Structure

Part Structure

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <div id="layout">

         <header id="header">
            Header
         </header>

         <div id="main">

            <section class="section">
               <div class="wrap">
                  
                  <div id="main-content" class="col-xs-12 col-sm-12 col-md-9 push-md-3 col-lg-9 push-lg-3 col-xl-9 push-xl-3">
                     <div class="row clear-after">

                        <div class="part">
                           Part
                        </div>

                        <div class="part">
                           Part
                        </div>

                        <div class="part">
                           Part
                        </div>

                     </div>
                  </div>

                  <div id="left-sidebar" class="col-xs-12 col-sm-12 col-md-3 pull-md-9 col-lg-3 pull-lg-9 col-xl-3 pull-xl-9">
                     Left Sidebar
                  </div>

               </div>
            </section>

         </div>

         <footer id="footer">
            Footer
         </footer>

      </div>
   </body>
</html>

Sau đây là cấu trúc chung của mỗi Part, tương tự như cấu trúc của Section, tuy nhiên Part không có thẻ div.wrap và thành phần Part Header có thể có hoặc không:

Part Layout

Part Layout

<div class="part">
      
      <header class="part-header">
         Section Header
      </header>

      <div class="part-content">
         Section Content
      </div>

</part>
Part Example

Part Example

– Mục lục –

Cấu trúc từng Widget trong sidebar

Widget Structure

Widget Structure

Các Sidebar có cấu trúc tổng thể như sau:

<div id="left-sidebar" class="sidebar col-xs-*...">
   <div class="row">
      <div class="wrap clear-after">

         <aside class="widget">
            Widget
         </aside>

         <aside class="widget">
            Widget
         </aside>

         <aside class="widget">
            Widget
         </aside>

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

Mỗi Widget có cấu trúc chung như sau:

<aside class="widget">

   <h3 class="widget-title"><span>The Widget Title Here</span></h3>
   
   <div class="some-class">
      Widget Content Here
   </div>

</aside>

Tuy nhiên, trong Waytech Starter Theme đã được tích hợp sẵn hàm phát sinh sidebar trong mỗi file PHP trong thư mục Layout, chỉ cần khai báo Widget ID thì hàm đó sẽ tự phát sinh cấu trúc HTML của 1 sidebar và đổ nội dung tương ứng vào.

Đó là hàm show_sidebar();

show_sidebar( $layout, $left_widget_id, $right_widget_id );

Trong đó:

  • $layout (string): là giá trị layout của trang hiện tại, lấy bằng hàm get_option( ‘current-layout-name’ ).
  • $left_widget_id (string): là chuỗi ID của Widget muốn thể hiện trong cột Left Sidebar (xem các ID của mỗi vị trí Widget trong phần Giao diệnWidgetAdmin).
  • $right_widget_id (string): là chuỗi ID của Widget muốn thể hiện trong cột Right Sidebar.
  • Hàm show_sidebar() in ra các thẻ HTML cùng nội dung bên trong.
  • Hàm này được viết trong file waytech/functions/extra-functions.php.

Ví dụ về hàm show_sidebar() trong file waytech/layout/main-single-sidebar.php

<?php
   /** DATA SETUP **/
   $layout = get_option( 'single_layout' );
?>

<!-- Main Content -->
<div id="main-content" class="<?php echo bootstrap_class( $layout, 'content' ); ?>">
   <div class="row clear-after">

      <div class="part"> ... </div>

      <div class="part"> ... </div>

      <div class="part"> ... </div>

   </div>
</div>

<?php
   show_sidebar( $layout, 'post-left-sidebar', 'post-right-sidebar' );
?>

Với đoạn code trên, file main-single-sidebar.php sẽ tự động in ra các Widget được thêm vào ở vị trí Post Left Sidebar hoặc Post Right Sidebar (tùy vào biến $layoutLeft Sidebar hay Right Sidebar) bên trong Giao diện ⇒ WidgetAdmin.

– Mục lục –

Widget In Footer

Widget In Footer

Trong Footer, chúng ta không có sẵn hàm phát sinh code Widget như ở Sidebar, nên chúng ta sẽ phải khai báo thủ công cho từng Widget. Giả sử chúng ta có kiểu layout ở Footer như hình trên:

<footer id="footer">

   <section class="section"> ... </section>

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

         <div class="footer-widget"> ... </div>

         <div class="footer-widget"> ... </div>

         <div class="footer-widget"> ... </div>

      </div>
   </section>

   <section class="section"> ... </section>

</footer>

Mỗi Widget sẽ có cấu trúc như sau:

<div class="footer-widget col-xs-*...">
   <div class="row">
      <div class="wrap clear-after">

         <?php
            if ( is_active_sidebar( $widget_id ) ) {
               dynamic_sidebar( $widget_id );
            }
         ?>

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

Trong đó:

  • $widget_id (string): là chuỗi ID của Widget muốn thể hiện (xem các ID của mỗi vị trí Widget trong phần Giao diệnWidgetAdmin).
  • Hàm is_active_sidebar() (boolean): trả về TRUE nếu có tồn tại $widget_id trong phần khai báo Widget, ngược lại trả về FALSE.
  • Hàm dynamic_sidebar(): in ra cấu trúc HTML của Widget được khai báo tương ứng.

– Mục lục –

Lâm Mã Trắc