从0到1制作WordPress主题#7添加样式和分解文件
程序员文章站
2022-03-07 11:52:30
...
添加样式
打开style.css 文件添加一些基本样式。整个项目的目的并不是要创建一些外观漂亮的主题，我只是希望您熟悉PHP代码以及如何设置主题。
1、在样式表中加入以下代码：
body{
font-family: Arial;
font-size:15px;
color:#333;
background:#f4f4f4;
margin:0;
padding:0;
line-height: 1.7em;
}
header{
background: #393939;
color:#fff;
padding:20px 10px;
}
header h1{
color:#fff;
margin:0;
padding:0;
padding-bottom: 10px;
}
.main{
margin:15px 0;
}保存并返回前端刷新页面，如下图所示：
你能看到顶部的空白区域; 这是因为我们以管理员身份登录，WordPress正在尝试显示管理栏，因为我们没有显示它的特殊功能，所以现在是一片空白区域。
2、打开index.php文件，在body 的结束标签前加入如下代码：
<?php wp_footer(); ?>
</body>
</html>保存并返回刷新前端页面，如下图：
3、在header标签代码中加入一个class=“container”的div，如下：
<header>
<div class ="container">
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
</div>
</header>样式如下：
.container{
width:1020px;
margin:0 auto;
overflow: auto;
}在.main 和footer中加入同样的代码.container，保存代码返回前端刷新页面，你会看到所有东西都跑到中间位置。
4、接下来给footer 加点样式，让文字居中显示。
footer{
background: #393939;
color:#fff;
padding:10px 10px;
text-align: center;
}分解文件
您可以看到我们有header和main区域，我们循环浏览帖子并显示它们，我们有footer区域。现在，WordPress中的常见做法是将header和footer分解为独立的文件，然后将它们包含在index.php中。
1、接下来我们在主题文件夹中创建两个新的文件：header.php 和footer.php。
2、让我们转到index.php文件并剪切以下代码部分，并粘贴到header.php中。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="container">
<h1><?php bloginfo('name'); ?></h1>
<span><?php bloginfo('description'); ?></span>
</div>
</header> 3、在回到index.php,我们用php get_header替换上面剪切掉的代码：
<?php get_header(); ?> 4、将以下代码剪切，并粘贴到footer.php 文件中，并保存
<footer>
<div class="container">
<p>© <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>5、在回到index.php,我们用php get_footer替换上面剪切掉的代码：
<?php get_footer(); ?> 返回浏览器前端刷新，看起来没有任何变化。
下一节我们将学习如何点击这些帖子将我们带到单独的帖子页面。