WordPress模板層次07：header.php

huangbangqing12發表於2018-07-08
HeaderPHP

在index.PHP之後，我們將看的下一個檔案是header.php。這裡我們將重點講解這2個函式，wp_head()，它用於動態載入css和js程式碼，body_class()，它用於提供許多有用的頁面資訊。

get_header()函式

在index.php檔案中，可以看到頂部的這個get_header函式會自動呼叫任何名為hearer.php的檔案。

<?php get_header(); ?>/***自動呼叫header.php***/
    <div class="container" role="main">

WordPress約定：get_header()函式將呼叫header.php。

因此，所有網站的頁頭部分的程式碼，都將放在header.php檔案中。

header.php

header.php完整檔案如下：

<!DOCTYPE html>/***宣告文件型別***/
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title('|', true, 'right'); ?><?php echo get_bloginfo('name'); ?></title> /***一些常用的WordPress模板標籤（wp_title/get_bloginfo）***/

    <?php wp_head(); ?>/***wp_head()允許WordPress以及任何其他外掛，在這裡放置任何CSS，Javascript所需的程式碼***/

  </head>

  <body <?php body_class(); ?>>/***body_class()函式會根據網站所處的頁面，將專用程式碼，作為body標籤中的class輸出***/

    <div class="navbar navbar-default" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
        </div>
        <div class="collapse navbar-collapse">
        <?php 
          $args = array(
            'menu'        => 'header-menu',            
            'menu_class'  => 'nav navbar-nav',
            'container'   => false
          );
          wp_nav_menu( $args );/***包含主選單***/
        ?>  
        </div>
      </div>      
    </div>

wp_head()函式

WordPress並沒有像通常的建立靜態網站那樣，直接連結到我們的CSS和JavaScript檔案。而是在functions.php檔案的內部，通過wp_enqueue_script來載入所有的JavaScript和CSS檔案。

所以，要成功引入CSS和JavaScript檔案，就需要在關閉head標籤之前，呼叫wp_head函式。

body_class()函式

body_class()函式位於body標籤內。這個函式會根據你在網站上的所處頁面，將專用程式碼，作為body標籤中的class輸出。

例如，開啟Home頁面，右鍵檢視網頁原始碼，並找到body標籤：

You must be logged in to view the hidden contents.

可以看到class為page-template-default，page，page-id-113，login-in，admin-bar，customize-support。

如果切換到”About”頁面，右鍵檢視網頁原始碼，並找到body標籤，可以看到不同的是：page-id-115。

8311587-98a5ddf150f595bc.png
header xuhss.com02 - WordPress模板層次07：header.php

所以，隨著學習的深入，body_class()函式將提供許多超級有用的資訊，我們可以使用它來識別當前所使用的頁面，以及正在使用的模板或者其他一些資訊。這對於前端和後端WordPress的開發都是非常有用的。

所以，當你編寫你的主題時，確保你在body標籤裡面包含PHP的body_class()模板標籤。

wp_nav_menu()函式

header檔案的內部通常還需要包含主選單。由於header檔案中的所有內容都顯示在每個頁面上，因此在此標頭檔案中包含頂部選單是有意義的。

wp_nav_menu()函式是WordPress中的選單時通常會用到的函式。我們將會在主題開發實戰課程中，深入的學習該函式。

相關文章