Viết code cho header.php – serie Lập trình theme WordPress

laptrinhtheme-finish-header

Khi tạo một theme, chúng ta đã thiết lập các chức năng cần thiết trong theme mà sẽ muốn nó sử dụng bằng cách viết code vào file functions.php như một cách khai báo chức năng. Ngay sau bước đó, chúng ta đã có thể tiến hành viết code cho từng template trong theme như header.php, footer.php, index.php,…mà ở bài này, chúng ta sẽ bắt đầu viết code cho file header.php trước.

Ý nghĩa của header.php

Tại file này, chúng ta sẽ khai báo các thẻ HTML cần thiết mà trong một tài liệu HTML chuẩn đều có như <html>, <head>, <body>,….và nhất là phần thẻ <head> là phần quan trọng nhất. Ngoài ra trong dự án này, chúng ta sẽ viết thêm code hiển thị tên website và menu để vào file header.php này vì các thành phần đó chúng ta đều muốn nó hiển thị trong tất cả mọi trang.

Bắt đầu viết code

Bây giờ bạn hãy mở file header.php ra, không cần viết thẻ mở PHP mà chúng ta sẽ khai báo bằng HTML có lồng PHP vào như sau:


<!DOCTYPE html>
<!--[if IE 8]> <html <?php language_attributes(); ?> class="ie8"> <![endif]-->
<!--[if !IE]> <html <?php language_attributes(); ?>> <![endif]-->

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<link rel="profile" href="https://gmgp.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?> > <!--Thêm class tượng trưng cho mỗi trang lên <body> để tùy biến-->
        <div id="container">

Trong đó, bạn nên lưu ý nhất là cái hook wp_head(), đây là cái hook để giúp WordPress hiểu được đây là khu vực thẻ <head> của theme bạn để nó có thể tự thêm các thành phần cần thiết lên, cũng như các plugin khác có muốn can thiệp vào khu vực này thì cũng sẽ dò qua hook wp_head().

Mình không thiết lập thẻ <title> là bởi vì ở phần trước, chúng ta đã thêm chức năng title-tag vào theme rồi. Còn thẻ meta description, meta keyword thì không cần thêm vì có thể dùng các plugin như WordPress SEO by Yoast, nó sẽ tự thêm vào.

Phía dưới, chúng ta mở thẻ <body> và có thêm template tag body_class() vào. Đây là hàm mà nó sẽ trả về các class tượng trưng cho từng trang lên thẻ body để nếu có tùy biến CSS cho từng trang thì cứ dựa vào các class tượng trưng này mà làm.

Trước khi làm tiếp, các bạn hãy mở file index.php và thêm đoạn này vào để nó có thể load file header.php ra.


<?php get_header(); ?>

Ok, bây giờ chúng ta viết tiếp code để hiển thị khu vực tên website trên header vào file functions.php. Tại sao lại viết vào file functions.php? Bởi vì chúng ta sẽ không viết trực tiếp vào file header.php vì nó rất rối mắt, không gọn gàng. Nên mình khuyến khích bạn nên tạo một hàm riêng trong functions.php để thực hiện việc hiển thị phần tên website trên header.


/**
@ Thiết lập hàm hiển thị logo
@ thachpham_logo()
**/
if ( ! function_exists( 'thachpham_logo' ) ) {
  function thachpham_logo() {?>
    <div class="logo">

      <div class="site-name">
        <?php if ( is_home() ) {
          printf(
            '<h1><a href="%1$s" title="%2$s">%3$s</a></h1>',
            get_bloginfo( 'url' ),
            get_bloginfo( 'description' ),
            get_bloginfo( 'sitename' )
          );
        } else {
          printf(
            '<p><a href="%1$s" title="%2$s">%3$s</a></p>',
            get_bloginfo( 'url' ),
            get_bloginfo( 'description' ),
            get_bloginfo( 'sitename' )
          );
        } // endif ?>
      </div>
      <div class="site-description"><?php bloginfo( 'description' ); ?></div>

    </div>
  <?php }
}

Trong đoạn trên, mình có sử dụng hàm printf như mục đích in chuỗi dữ liệu đã được định dạng. Các tham số như %1$s, %2$s, %3$s là từng tham số tương ứng với 3 hàm dữ liệu nằm bên dưới nó, cụ thể:

  • %1$s: get_bloginfo( ‘url’ )
  • %2$s: get_bloginfo( ‘description’ )
  • %3$s: get_bloginfo( ‘sitename’ )

Mục đích mình viết kiểu này là để cho bạn dễ nhìn hơn và ở các phần sau chúng ta sẽ dùng nó nhiều hơn, lý do mình sẽ nói sau.

Ok, bây giờ hãy trở lại file header.php và ta thêm hàm thachpham_logo() vào phần <header> như dưới:


	<header id="header">
		<?php thachpham_logo(); ?>
	</header>

Đoạn code ở file functions.php có nghĩa là tên website sẽ được hiển thị với thẻ <h1> ở trang chủ, còn các trang khác thì nó sẽ được hiển thị bằng thẻ <p>. Mục đích là tối ưu cho nó chuẩn SEO ấy mà. 😀

Và bây giờ là tới phần hiển thị menu nè, chèn đoạn code sau vào file functions.php:


  /**
  @ Thiết lập hàm hiển thị menu
  @ thachpham_menu( $slug )
  **/
  if ( ! function_exists( 'thachpham_menu' ) ) {
    function thachpham_menu( $slug ) {
      $menu = array(
        'theme_location' => $slug,
        'container' => 'nav',
        'container_class' => $slug,
      );
      wp_nav_menu( $menu );
    }
  }

Tức là chúng ta sẽ tạo ra một hàm tên là thachpham_show_menu( $slug ) để hiển thị menu. Cái biến $slug chính là tên slug của menu mà bạn cần gọi ra và nó sẽ tự áp dụng tên slug đó vào làm class cho menu hiển thị, sau này muốn tái sử dụng cũng dễ nữa.

Sau đó bạn sửa code đoạn <header> trong file header.php thành thế này:


	<header id="header">
		<?php thachpham_logo(); ?>
		<?php thachpham_menu( 'primary-menu' ); ?>
	</header>

primary-menu là cái slug của menu mà chúng ta đã tạo ra ở bài trước.

Bây giờ bạn hãy vào Appearance -> Menus và thêm một menu nào đó vào Primary Menu, tốt nhất nên chọn menu là Short vì nó ngắn, dễ nhìn.

laptrinhtheme-setmenu

Thiết lập hiển thị menu

Và bây giờ bạn vào trang chủ của website sẽ thấy nó hiển thị thế này:

laptrinhtheme-finish-header
Ok, vậy coi như phần này chúng ta làm xong việc viết code cho file header.php rồi. Dưới đây là toàn bộ nội dung code trong bài này:

Toàn bộ code file header.php


<!DOCTYPE html>
<!--[if IE 8]> <html <?php language_attributes(); ?> class="ie8"> <![endif]-->
<!--[if !IE]> <html <?php language_attributes(); ?>> <![endif]-->

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<link rel="profile" href="https://gmgp.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?> > <!--Thêm class tượng trưng cho mỗi trang lên <body> để tùy biến-->
        <div id="container">
	      <header id="header">
		   <?php thachpham_logo(); ?>
		   <?php thachpham_menu( 'primary-menu' ); ?>
	      </header>

Một số code thêm vào functions.php:


  /**
  @ Thiết lập hàm hiển thị logo
  @ thachpham_logo()
  **/
  if ( ! function_exists( 'thachpham_logo' ) ) {
    function thachpham_logo() {?>
      <div class="logo">

        <div class="site-name">
          <?php if ( is_home() ) {
            printf(
              '<h1><a href="%1$s" title="%2$s">%3$s</a></h1>',
              get_bloginfo( 'url' ),
              get_bloginfo( 'description' ),
              get_bloginfo( 'sitename' )
            );
          } else {
            printf(
              '</p><a href="%1$s" title="%2$s">%3$s</a></p>',
              get_bloginfo( 'url' ),
              get_bloginfo( 'description' ),
              get_bloginfo( 'sitename' )
            );
          } // endif ?>
        </div>
        <div class="site-description"><?php bloginfo( 'description' ); ?></div>

      </div>
    <?php }
  }

  /**
  @ Thiết lập hàm hiển thị menu
  @ thachpham_menu( $slug )
  **/
  if ( ! function_exists( 'thachpham_menu' ) ) {
    function thachpham_menu( $slug ) {
      $menu = array(
        'theme_location' => $slug,
        'container' => 'nav',
        'container_class' => $slug,
      );
      wp_nav_menu( $menu );
    }
  }

Lời kết

Trong phần này, chúng ta đã được học được cách nên viết các đoạn code nào vào file header.php để có được một header đơn giản. Ngoài ra, cái mà mình mong muốn truyền tải nhất trong bài này đó là kinh nghiệm tự tạo hàm riêng để hiển thị một cái gì đó thay vì viết code trực tiếp vào, vừa khó quản lý, khó nhìn lại không khoa học cho lắm. Và kể từ phần này trở đi, chúng ta sẽ sử dụng phương pháp này nhiều hơn nữa.

Nguồn: Viết code cho header.php – serie Lập trình theme WordPress | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Đánh giá StableHost Enterprise – Host dành cho web nhiều traffic
Hướng dẫn đưa các trang Woocommerce lên menu
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme