wordpress5.3主题开发第三课:get_header()和get_footer()的使用

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(); ?>
发布了159 篇原创文章 · 获赞 45 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/lsmxx/article/details/104231320