WordPress模板层次07：header.php

在index.PHP之后，我们将看的下一个文件是header.php。这里我们将重点讲解这2个函数，wp_head()，它用于动态加载css和js代码，body_class()，它用于提供许多有用的页面信息。

get_header()函数

在index.php文件中，可以看到顶部的这个get_header函数会自动调用任何名为hearer.php的文件。

/***自动调用header.php***/
    

WordPress约定：get_header()函数将调用header.php。

因此，所有网站的页头部分的代码，都将放在header.php文件中。

header.php

header.php完整文件如下：

/***声明文档类型***/

  
    
    
     /***一些常用的WordPress模板标签（wp_title/get_bloginfo）***/

    /***wp_head()允许WordPress以及任何其他插件，在这里放置任何CSS，Javascript所需的代码***/

  

  >/***body_class()函数会根据网站所处的页面，将专用代码，作为body标签中的class输出***/

    

      

        

          
            Toggle navigation
            
            
            
          
          
        
        

         'header-menu',            
            'menu_class'  => 'nav navbar-nav',
            'container'   => false
          );
          wp_nav_menu( $args );/***包含主菜单***/
        ?>  
        
      
      
    

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。

header xuhss.com02 - WordPress模板层次07：header.php

所以，随着学习的深入，body_class()函数将提供许多超级有用的信息，我们可以使用它来识别当前所使用的页面，以及正在使用的模板或者其他一些信息。这对于前端和后端WordPress的开发都是非常有用的。

所以，当你编写你的主题时，确保你在body标签里面包含PHP的body_class()模板标签。

wp_nav_menu()函数

header文件的内部通常还需要包含主菜单。由于header文件中的所有内容都显示在每个页面上，因此在此头文件中包含顶部菜单是有意义的。

wp_nav_menu()函数是WordPress中的菜单时通常会用到的函数。我们将会在主题开发实战课程中，深入的学习该函数。