从0到1制作WordPress主题#7添加样式和分解文件

69 阅读 0 评论 46 点赞

我是靠谱客的博主受伤板凳，这篇文章主要介绍从0到1制作WordPress主题#7添加样式和分解文件，现在分享给大家，希望可以做个参考。

添加样式

打开style.css 文件添加一些基本样式。整个项目的目的并不是要创建一些外观漂亮的主题，我只是希望您熟悉PHP代码以及如何设置主题。
1、在样式表中加入以下代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}

保存并返回前端刷新页面，如下图所示：
header样式

你能看到顶部的空白区域; 这是因为我们以管理员身份登录，WordPress正在尝试显示管理栏，因为我们没有显示它的特殊功能，所以现在是一片空白区域。
2、打开index.php文件，在body 的结束标签前加入如下代码：

复制代码

1
2
3
4
     <?php wp_footer(); ?>
</body>
</html>

保存并返回刷新前端页面，如下图：
管理栏

3、在header标签代码中加入一个class=“container”的div，如下：

复制代码

1
2
3
4
5
6
7
<header>
	<div class ="container">
		<h1><?php bloginfo('name'); ?></h1>
		<span><?php bloginfo('description'); ?></span>
	</div>
</header>

样式如下：

复制代码

1
2
3
4
5
6
.container{
	width:1020px;
	margin:0 auto;
	overflow: auto;
}

在**.main** 和footer中加入同样的代码**.container**，保存代码返回前端刷新页面，你会看到所有东西都跑到中间位置。

4、接下来给footer 加点样式，让文字居中显示。

复制代码

1
2
3
4
5
6
7
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中。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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替换上面剪切掉的代码：

复制代码

1
2
<?php get_header(); ?>

4、将以下代码剪切，并粘贴到footer.php 文件中，并保存

复制代码

1
2
3
4
5
6
7
8
9
10
<footer>
	<div class="container"> 
	<p>&copy; <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
	</div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

5、在回到index.php,我们用php get_footer替换上面剪切掉的代码：

复制代码