get_header()函数
描述
从当前主题中引入 header.php 模板文件。如果名字是特定的,那么包含特定名称的头部文件 header-{name}.php 就会被引入。
如果主题没有 header.php 文件,就会引入默认文件 wp-includes/theme-compat/header.php
。
用法
<?php get_header( $name ); ?>
参数
$name
(string) (可选) 调用 header-name.php.
默认: None
get_footer()函数
描述
引入当前主题的页脚文件 footer.php,如果使用特定的名字,那么就会调用这个特定名字的页脚文件 footer-{name}.php 。
如果主题没有 footer.php 就会引入默认的 wp-includes/theme-compat/footer.php 。
用法
<?php get_footer( $name ); ?>
参数
$name
(string) (可选) 调用 footer-name.php.
默认: None
官方自带的主题:twentywenty 中的index.php文件对get_header()和get_footer()的使用
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
get_header();
?>
<main id="site-content" role="main">
<?php
中间省略
<?php
get_footer();
上面的代码出现了:get_header() 和get_footer()
下面开始讲解这两个函数的功能和用法
网页一般分为三大部分:头部,主体,底部。一个网站的大部分网页,头部和底部是相同的。我们可以单独地写头部和底部的代码,然后让其它网页包含它即可。
正是基于这种想法,wordpress提供了get_header()函数可以支持包含header.php文件,get_footer()函数可以footer.php文件
具体实现
在自定义模板目录下创建header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><<?php bloginfo('name'); ?></title>
<?php wp_head() ?>
</head>
<body>
<!-- 开以放一些导航菜单-->
在自定义模板下创建footer.php
<!--可以写一大部分网页底部共同的代码-->
<?php wp_footer(); ?>
</body>
</html>
然后在Index.php文件中使用get_header()函数get_footer()函数引入header.php和footer.php
<?php get_header() ?>
<?php if (have_posts()):
while (have_posts()): the_post();
the_title('<h3>','</h3>');
the_excerpt();
the_content();
endwhile;
endif;
?>
<?php get_footer(); ?>
get_header()函数不局限于仅包含header.php,还可以包含heaeder-{name}.php的文件
在自义定主题的目录下,分别创建header-pc.php和header-mobile.php两个文件,分别代码pc端和移动端的头部文件
header-pc.php的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><<?php bloginfo('name'); ?></title>
<?php wp_head() ?>
</head>
<body>
<!-- 在这里写pc端的代码-->
header-mobile.php的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><<?php bloginfo('name'); ?></title>
<?php wp_head() ?>
</head>
<body>
<!-- 在这里写mobile端的代码-->
index.php的代码
<?php
if(wp_is_mobile()):
//如果是移动端,加载header-mobile.php文件
get_header('mobile');
else:
//如果是pc端,加载header-pc.php文件
get_header('pc');
endif;
?>
<?php if (have_posts()):
while (have_posts()): the_post();
the_title('<h3>','</h3>');
the_excerpt();
the_content();
endwhile;
endif;
?>
<?php get_footer(); ?>