wp主题开发之header.php

header.php是页面的头部, 无论是文章主页还是文章页面, 都使用head.php充当头部, 通常都是这么做的

制作logo

这里不介绍如何制作logo, 而是在默认情况下, 你的模板并没有引入logo

我们需要制作, 并上传, 假设你已经制作完毕, 下面请上传该logo到主题根目录下

创建header.php

在主题根目录下, 创建一个 header.php文件,

接下来, 拷贝如下代码到header.php中, 具体意义请往下参考

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 */
?>
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php //下面这句话, 看你是否响应式设计, 响应式一般都要,否则不要写?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php //引入favicon图标 ?>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/favicon.ico" type="image/x-icon" />
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	
	<?php wp_body_open(); ?>  <?php //这里是顶部adminbar ?>

	<header class="site-header" role="banner">
		<div class="container site-header-container">
		    <a href="<?php get_bloginfo('url') ?>">首页</a>
            <a href="https://www.52dixiaowo.com" target="_blank">52的小窝</a>
		</div>
	</header>

	<div class="site-content container" id="content">

在index.php中引入 header.php后, 我们的index页面不再是空白, 我们就会得到3样东西

网站logo
顶部工具条
手动加的头部内容

在其他页面, 比如 single.php, 或者 page.php等都可以使用相同的代码引入header

本篇完，还有疑问？

加入QQ交流群：11500065636