Sau khi hoàn thiện được bước tổ chức dữ liệu, chúng ta tiến hành code các thành phần Header của website.

Mục lục

  • Lên bố cục bằng HTML và đổ dữ liệu bằng PHP cho Header.
  • Định dạng CSS cho màn hình Mobile.
  • Định dạng CSS cho các màn hình lớn hơn.

Kiến thức yêu cầu:
– HTML, CSS, JS, PHP căn bản.
– Kiến thức Bootstrap căn bản.
– Chuẩn viết code của WordPress (xem ở đây).
– Cách sử dụng Starter Theme của Waytech.
– Cách sử dụng phần mềm IDE có kết nối FTP như PHP Designer.

Lên bố cục bằng HTML và đổ dữ liệu bằng PHP cho Header

Chuẩn bị

Trong bài hướng dẫn sẽ sử dụng phần mềm PHP Designer 8.1.2 để viết code với kết nối sẵn FTP lên Hosting (khi Save file code sẽ tự động upload lên Hosting).

Mở phần mềm PHP Designer lên, truy cập vào thư mục …wp-content/themes/waytech/layout.

Thư mục layout là thư mục chứa tất cả những file thể hiện phần giao diện, nên mọi thành phần thuộc về giao diện website chúng ta sẽ code trong những file của thư mục này.

Như phân tích ở bài trước, khu vực Header gồm 2 thành phần (Section):

  1. Header Section 1:
    – Header Menu: chiếm 9 cột bên trái.
    – Header More: gồm các nút Social, Search và Email, chiếm 3 cột bên phải.
  2. Header Section 2:
    – Khối logo: chiếm full width, có khối màu cam đi kèm phía trước logo.

Thực hiện

  • Mở file header-content.php trong thư mục layout lên bằng phần mềm PHP Designer (từ nay mặc định khi nói mở file để code thì sẽ mở bằng phần mềm PHP Designer).
  • Mặc định trong file header-content.php đang chứa layout của Starter Theme, chúng ta có thể tận dụng lại bố cục này để viết code nhanh hơn.

header-content.php

  • Sửa phần nội dung bên trong nhóm code ở phần Section 1 lại như sau:
    <!-- Header Menu -->
    <div class="header-menu hidden-medium-down col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
    <div class="row">
    </div>
    </div>
    
    <!-- Header More -->
    <div class="header-more col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
    <div class="row">
    </div>
    </div>

    Giải thích code:

    – Chúng ta đang dùng các class column (col-xs-*, col-sm-*, col-md-*, col-lg-*, col-xl-*) của Bootstrap để phân chia giao diện theo từng loại màn hình, bên trong các class column là class row để trả lại độ rộng ban đầu cho thành phần.

    Lý do vì sao phải trả lại độ rộng? Vì mặc định của Boostrap thì các class column sẽ có padding-left: 15pxpadding-right: 15px, còn class row mặc định là margin-left: -15pxmargin-right: -15px, nên khi lồng class row vào trong thẻ chứa các class column thì độ rộng ban đầu được giữ nguyên. Nếu không có thẻ .row bên trong thì chúng ta bị mất đi 30 px chiều rộng do padding của các thẻ column.

    – Class hidden-medium-down trong thẻ .header-menu có tác dụng làm ẩn thành phần này từ màn hình medium trở xuống (các thuộc tính này cần xem lại kiến thức Bootstrap căn bản). Vì trên các màn hình nhỏ, chúng ta sẽ dùng menu ở Sidebar để làm menu chính, Header Menu sẽ được dùng jQuery để di chuyển xuống dưới Sidebar Menu (gộp 2 menu lại thành 1).

  • Trong phần Header Menu, ta chèn code sau:
    <!-- Header Menu -->
    <div class="header-menu hidden-medium-down col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
    <div class="row">
    
    <?php
       wp_nav_menu(
          array(
             'menu' => 'Header Menu',
             'theme_location' => 'header',
             'container_class' => 'clear-after',
          )
       );
    ?>
    
    </div>
    </div>

    Giải thích code:

    – Hàm wp_nav_menu( array( <tham_so> ) ) được dùng để get menu theo các thông số yêu cầu và in ra HTML. Xem document.

    – Ở ví dụ này ta chỉ dùng 3 tham số cơ bản là menutheme_location và container_class.

    menu: là tên menu được đặt lúc tạo menu trong Admin.

    – theme_location: là tên theme_location trong phần khai báo menu trong file functions.php ở thư mục theme waytech. Phiên bản 4.0.4 sắp tới sẽ cập nhật tên location hiển thị luôn ra ngoài trong phần tạo menu để lập trình viên thuận tiện sử dụng.

    – container_class: đặt tên class cho thẻ div bao ngoài thẻ ul của menu (có thể inspect để xem mã nguồn giao diện để hiểu rõ hơn). Nếu không khai báo tham số này thì WordPress sẽ phát sinh class theo mặc định.

    Chú ý: class clear-after là 1 class đặc trưng của Starter Theme Waytech, nó tạo 1 thành phần DOM ảo ::after bên trong thẻ hiện tại với thuộc tính CSS là clear: both nhằm giúp thẻ hiện tại không bị mất height do các thành phần trôi nổi bên trong. Các thành phần trôi nổi bên trong được hiểu là bất kỳ thẻ con nào có mang thuộc tính float: left hoặc float: right (như các class column của Bootstrap luôn là thẻ trôi nổi).

  • Trong phần Header More, ta chèn đoạn code sau:
    <!-- Header More -->
    <div class="header-more col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
    <div class="row">
    
       <div class="header-more-fixed">
    
          <!-- More Button Group -->
          <div class="more-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    
             <!-- More Button on Mobile -->
             <i class="fa fa-ellipsis-h hidden-lg-up" aria-hidden="true"></i>
    
             <!-- Facebook -->
             <a class="social-item facebook hidden-md-down" href="<?php echo esc_attr( get_option( 'social_facebook' ) ); ?>" target="_blank">
                <i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>
             </a>
    
             <!-- Google+ -->
             <a class="social-item google-plus hidden-md-down" href="<?php echo esc_attr( get_option( 'social_facebook' ) ); ?>" target="_blank">
                <i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>
             </a>
    
             <!-- Search -->
             <i class="fa fa-search hidden-md-down trans3" aria-hidden="true"></i>
    
             <!-- Email -->
             <a class="social-item email hidden-md-down" href="mailto:<?php echo esc_attr( get_option( 'company_email_1' ) ) ?>" target="_blank">
                <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
             </a>
    
          </div><!-- /.more-button -->
    
          <!-- Dropdown Menu Group -->
          <div class="dropdown-menu">
    
             <!-- Search Box -->
             <div class="dropdown-item search-box">
                <?php get_search_form( true );?>
             </div>
    
             <div class="dropdown-divider"></div>
    
             <!-- Social -->
             <div class="dropdown-item social">
     
                <!-- Facebook -->
                <a class="social-item facebook" href="<?php echo esc_attr( get_option( 'social_facebook' ) ) ?>" target="_blank">
                   <i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>
                </a>
     
                <!-- Google+ -->
                <a class="social-item google-plus" href="<?php echo esc_attr( get_option( 'social_google_plus' ) ) ?>" target="_blank">
                   <i class="fa fa-google-plus fa-fw" aria-hidden="true"></i>
                </a>
     
                <!-- Email -->
                <a class="social-item email" href="mailto:<?php echo esc_attr( get_option( 'company_email_1' ) ) ?>" target="_blank">
                   <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
                </a>
    
             </div><!-- /.social -->
    
          </div><!-- /.dropdown-menu -->
    
       </div><!-- /.header-more-fixed -->
    
    </div><!-- /.row -->
    </div><!-- /.header-social -->

    Giải thích code:

    – Nhóm layout Header More cũng là 1 thành phần đặc trưng của Starter Theme Waytech. Nó giúp các thành phần phụ như các nút mạng xã hội, hộp search, nút gửi mail, nút gọi điện…được hiển thị gọn gàng trên giao diện Mobile và các màn hình lớn hơn. Phần này sẽ được giải thích bên dưới, giờ chúng ta tập trung vào hàm lấy Option của WordPress để hiển thị các thông tin liên hệ.

    – Hàm get_option( ‘option_name’ ) trong WordPress được dùng để lấy giá trị Option của WordPress (chỉ return giá trị, không echo ra màn hình). Xem document.

    – Các giá trị Option này đã được khai báo sẵn trong file waytech/functions/extra-functions.php, tuy nhiên chúng ta chỉ cần vào Waytech Board trong Admin là sẽ thấy các option_name đã được hiển thị kèm theo mỗi Option nên cũng không cần vào file extra-functions.php để xem nữa.

    – Hàm esc_attr( ‘text’ ) trong WordPress là hàm dùng để chuyển các ký tự đặc biệt trong HTML như < > & ” ‘ thành kiểu string để tránh lỗi vỡ cấu trúc khi in ra tài liệu HTML (chỉ return giá trị, không echo ra màn hình). Nếu giữ nguyên các ký tự đặc biệt này mà in ra HTML, thì giống như việc chèn thêm một số thẻ HMTL không mong muốn vào vậy, giao diện sẽ bị vỡ do các thành phần này. Xem document.

  • Tiếp theo là phần Section 2 chứa logo, chúng ta sửa lại thành như sau:
    <!-- Section 2 -->
    <section id="header-section-2" class="section header-section">
    <div class="wrap clear-after">
     
       <!-- 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><!-- /.header-logo-->
     
    </div>
    </section>

    Giải thích code:

    – Vẫn sử dụng hàm get_option(), nhưng lần này là option mặc định của WordPress tạo sẵn, tên là title_tagline. Option này là 1 mảng chứa tiêu đề website, mô tả website (khẩu hiệu), Header Logo, Footer Logo và Favicon (biểu tượng site). Chính vì thế ta phải đặt riêng cho nó 1 biến tên là $logo rồi sau đó mới truy xuất đến phần tử mảng logo_header_img để lấy được giá trị là URL của Logo.

    – Chúng ta có thể vào xem option này như sau: trong Admin, menu Giao diện ⇒ Tùy chỉnh ⇒ Nhận dạng site. Mặc định thì Starter Theme chưa upload Logo hay Favicon nào lên cả.

    – Về cấu trúc HTML, bên trong Section 2 chỉ có 1 thành phần là Header Logo nên chúng ta không cần phải dùng đến các class column của Bootstrap để chia layout nữa. Chính vì vậy mà bên trong thẻ .header-logo cũng không cần dùng đến class row.

    – Hàm bloginfo( ‘name’ ) dùng để in ra tiêu đề website (echo). Xem document.

    – Vòng lặp if () else () bên trên được viết dưới dạng short-hand, để kiểm tra xem nếu trong phần Nhận dạng site lúc nãy mà chưa upload Logo lên thì nó sẽ in ra tiêu đề website tại vị trí logo.

  • Vậy là xong phần HTML cơ bản cho Header, chúng ta cũng chưa vội upload logo lên lúc này, hãy trở ra màn hình giao diện người dùng của website để xem đã hiển thị được gì lên đó nhé!

Header No CSS