Trang chủ WordpressWordpress Development [Lập trình theme WordPress] Viết code cho header.php

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

bởi Thạch Phạm
29 bình luận 6475 views

https://www.youtube.com/watch?v=dSTEns33vxc

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="http://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="http://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.

29 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
29 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
Dũng

a giải thích cho e là !function_exits nghĩa là như thế nào ạ

Híu Híu

là kiểm tra xem cái hàm đó đã có chưa đó bạn, nếu chưa có thì tạo

Nan Huỳnh

Cảm ơn anh. Bài viết rất dễ hiểu

Ryan

Chào anh Thạch Phạm
Em đã code show ra được menu, nhưng em không custom được, thậm chí em xóa luôn menu thì nó vẫn hiển thị anh ạ 🙁

Chí

thiết kế web miễn phí nè mọi người
http://congnghecit.com/thiet-ke-website-mien-phi.html

loc

mình nói nỳ các bạn đừng giận nhé, mình cũng mới học lập trình thôi, nhưng mình biết là học lạp trình có khi không hiểu nhưng quan trọng phải gõ và sửa lỗi, gõ đi gõ lại, sửa lỗi mới hiểu bài. lỗi không sửa dc thì gõ lại. Mình toàn làm vậy. hiểu và nhớ dễ hơn. Theo mình thì câu nên hỏi là:” làm cái này như thế nào?” chứ không phải là:” lỗi này sửa làm sao?” thân!

Trường Giang

Em viết code function ổn cả rồi, nhưng khi sang bên header thì k hiển thị gì cả khi view source, e k biết sai ở đâu

cường

Bìa viết rất hay, cảm ơn bác đã chia sẻ

Đại Nguyễn

mình không hiểu cái dòng này cho lắm
http://prntscr.com/d5tq4f

Ngọc Hiền

Thạch ơi sao của mình nó báo lỗi cú pháp : ” Parse error: syntax error, unexpected ‘}’ in /home/u351258652/public_html/wp-content/themes/hospital/functions.php on line 29″ , mắc dù code mình làm y như bạn

loc

Bạn xem lại dấu phẩy cuối dòng 28 xem đúng không

Loc

Anh Thạch Phạm ơi em cũng giống tình trạng của bạn Hiển Giang,không hiểu sao,mặc dù cuối cùng thử copy toàn bộ code của anh trong file function.php và header.php nhưng khi ra trang trủ website của mình vẫn hiện trống. Em cũng đã đổi false–>true,nhưng cũng vẫn không được luôn. Gio thì làm theo tiếp seri kiểu gì khi không hiện. Anh cho em lời khuyên đi ạ. Em cảm ơn anh.

Hoa

Chào anh Thạch Phạm, cho e hỏi khi mình viết dưới localhost thì chổ chữ thachpham mà anh nói là textdomain để nhận diện >>> mình sẽ ghi là gì anh? có phải là localhost

tunghunt

Anh Thach xem ho em loi nay voi

sushi

Hi Ad, Mình vừa mua gói Managed WordPress Hosting của Godday. Mình đã cài theme, có sử dụng Siteorigin CSS, filezilla. Vì cái LOGO TEXT của mình bị đổi màu khi rê chuột vào đó, mình muốn nó không đổi màu, Ad giúp mình với. Và mình không tìm thấy chỗ sửa cái LOGO TEXT của mình trên header. Mình vào siteorigin bấm vào thì thấy nó hiện đường dẫn header container->header middle-> header middle content->logo heading title. Tim trong Style.css không thấy chỗ nào có. Mình là người mới nên viết không rõ lắm. Mongs Ad chỉnh giúp. Tks… Xem thêm »

Anh Duẩn

<html />

&lt;meta charset = &quot;" &gt;

&lt;link rel=&quot;pingback&quot; href=&quot;"&gt;

<body >

&lt;?php
printf('<a href="%1$s" title="%2$s">%3$s</a>',
get_bloginfo('url'),
get_bloginfo('description'),
get_bloginfo('sitename')
);
?&gt;

Sao title nó không nhận được vậy a?

Hiển Giang

Chào Thạch Phạm, mình đang vọc theo hướng dẫn của bạn. Đến phần này mình có làm theo hướng dẫn, đến khi mình làm xong thẻ sau đó chạy thử trang home thì trống, view source thì trống, title cũng ko có thay đổi (mình đã add đoạn code add_theme_support( ‘title-tag’ ) trong file functions.php. Thạch Phạm giúp mình với. Cảm ơn nhiều!

Hiển Giang

Cảm ơn Thạch Phạm trả lời. Mình đã sửa wp-config.php (define(‘WP_DEBUG’, true)) Tuy nhiên tình trạng không thay đổi, trình duyệt không output error cho mình xem. Mình thử Debug từng hàm trong file functions nhưng thấy trả về kết quả đúng. Nội dung file Header: <html > &lt;meta charset=&quot;" &gt; &lt;link rel=&quot;pingback&quot; href=&quot;" /&gt; Nội dung file index <?php get_header(); File Function mới có nội dung của bài trước, bài này mình chưa viết thêm gì hết. do mới dừng ở thẻ head thôi Để cho anh Thạch Phạm dễ kiểm tra, mình gửi nội dung file functions.php <?php… Xem thêm »

Hiển Giang

Cảm ơn anh Thạch Phạm. Do mình paste lên đây thiếu. Mình gửi lại các file, anh Thạch Phạm giúp mình với, vì vướng ở bài thì nên không thể đi tiếp được. Nội dung file index.php: <?php get_header(); ?> Mình gửi tiếp nội dung file functions.php<?php define ('THEME_URL', get_stylesheet_directory()); define ('CORE', THEME_URL.'/core'); require_once (CORE.'/init.php'); /** @Thiet lap chieu rong noi dung / if (!isset($content_width)){ $content_width = 620; } / @Khai bao chuc nang trong theme / if (!function_exists('hiengiang_theme_setup')) { function hiengiang_theme_setup(){ /Thiet lap text domain/ $language_folder = THEME_URL.'/languages'; load_theme_textdomain('hiengiang',$language_folder); /*Tu dong them link RSS len */ add_theme_support(‘automatic-feed-links’); /Them post… Xem thêm »

Hiển Giang

Mình add code, nhưng ko hiểu sao không đọc được. anh Thạch Phạm xem file này nhé:


Hiển Giang

Chào anh Thạch!
Cảm ơn anh đã theo dõi và hỗ trợ em mấy hôm nay. Do em đang code header, em thấy đoạn widget không cần nên em bỏ ra luôn xem sao, nhưng vẫn không được. Cái title của web không tự nhận, viewsource thì vẫn trống trơn.

Dang Huy

Bạn sửa được lỗi này chưa . giúp mình . cũng lỗi tương tự

29
0
Would love your thoughts, please comment.x
()
x