欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

从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;
}

保存并返回前端刷新页面,如下图所示:
从0到1制作WordPress主题#7添加样式和分解文件

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

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

保存并返回刷新前端页面,如下图:
从0到1制作WordPress主题#7添加样式和分解文件

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;
}

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

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

footer{
    background: #393939;
    color:#fff;
    padding:10px 10px;
    text-align: center;
}

分解文件

您可以看到我们有headermain区域,我们循环浏览帖子并显示它们,我们有footer区域。现在,WordPress中的常见做法是将headerfooter分解为独立的文件,然后将它们包含在index.php中。

1、接下来我们在主题文件夹中创建两个新的文件:header.phpfooter.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>&copy; <?php the_date('Y'); ?>-<?php bloginfo('name'); ?></p>
    </div>
</footer>

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

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

<?php get_footer(); ?> 

返回浏览器前端刷新,看起来没有任何变化。

下一节我们将学习如何点击这些帖子将我们带到单独的帖子页面。

相关标签: WordPress