首页 > 主题开发 > 模板层次 > WordPress模板层次07:header.php
2018
02-22

WordPress模板层次07:header.php

在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标签:

header xuhss.com01 - WordPress模板层次07:header.php

可以看到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中的菜单时通常会用到的函数。我们将会在主题开发实战课程中,深入的学习该函数。

最后编辑:
作者:MrBang
WordPress迷

留下一个回复