Wordpress主题制作之首页

深碍√TFBOYSˉ_ 2023-06-12 06:24 46阅读 0赞

**前言** 上节中已经通过Wordpress最基本的组成元素编写了一个mapull主题，现在需要将发布的博客内容展示出来。

这一节开始需要写PHP代码了，但是一定要有一个意识，浏览器是不认识PHP代码的，浏览器只能解析HTML，CSS，JS。  
因此，在HTML文件中，所见到的就是浏览器里显示的，但是PHP中的代码需要服务器(Apache、nginx)解析后才会发给浏览器。

## 输出文章内容 ##

Wordpress提供很多了方法来方便开发者调用，方法很多，每个方法还有多个参数，全部记住它们几乎不可能。  
但是对于常用的，还是需要记住，其实大多数方法使用默认参数就能满足绝大部分需求。

对于一篇文章，最重要的几个部分：

*  标题
 *  作者
 *  发布日期
 *  摘要/内容

在wordpress中，这些内容都被封装了一个个方法，我们可以方便地拿到这些信息。

#### 标题 ####

`<?php the_title(); ?>`  
大多数时候，点击标题可以到详情，还需要文章的链接：`<?php the_permalink(); ?>`

#### 作者 ####

作者姓名：`<?php the_author(); ?>`

#### 时间 ####

发布时间：`<?php the_time('Y年n月j日') ?>`

<table> 
 <thead> 
  <tr> 
   <th>PHP代码</th> 
   <th>输出内容</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;?php the_time('Y年n月j日') ?&gt;</td> 
   <td>2019年5月1日</td> 
  </tr> 
  <tr> 
   <td>&lt;?php the_time('Y年m月d日') ?&gt;</td> 
   <td>2019年05月01日</td> 
  </tr> 
  <tr> 
   <td>&lt;?php the_time('Y-m-d') ?&gt;</td> 
   <td>2019-05-01</td> 
  </tr> 
  <tr> 
   <td>&lt;?php the_time('y-m-d H:i:s') ?&gt;</td> 
   <td>19-05-01 02:09:08</td> 
  </tr> 
 </tbody> 
</table>

#### 内容 ####

摘要信息：  
`<?php the_excerpt(); ?>`  
如果在写文章的时候，写了摘要，就会显示摘要的内容，如果没有编写摘要，就会取文章的开头的一部分文字，然后加上 …  
正文信息：  
`<?php the_content(); ?>`  
正文用于输出全文，当然如果你在编写文章的时候，用了分页标签``，只会显示标签之前的内容。

把上面的内容组合一下，改造 index.php

<body>
    <div>
        <p><strong>Logo文字</strong></p>
        <p>发现</p>
        <p>关注</p>
        <p>消息</p>
    </div>
    <div>
        <main>
                <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                <h5><?php the_author(); ?>    <?php the_time('Y年n月j日') ?></h5>
                <article>
    				<?php the_excerpt(); ?>
                </article>
        </main>
    </div>
    </body>

先去发布几篇文章，然后访问一下主页 http://localhost

到目前为止，首页还只能显示一篇文章，要想输出所有文章，需要用到PHP的循环。

加上循环代码后的 index.php

<body>
    <div>
        <p><strong>Logo文字</strong></p>
        <p>发现</p>
        <p>关注</p>
        <p>消息</p>
    </div>
    <div>
        <main>
    		<?php while (have_posts()) : the_post(); ?>
                <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                <h5><?php the_author(); ?>    <?php the_time('Y年n月j日') ?></h5>
                <article>
    				<?php the_excerpt(); ?>
                </article>
    		<?php  endwhile; ?>
        </main>
    </div>
    </body>

访问一下主页 http://localhost，看看是不是显示了更多的文章。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
实际上，在wordpress中输出文章的内容，有相对固定的写法：

*  判断文章是否存在
 *  循环遍历所有文章
 *  输出文章标题
 *  显示文章内容/摘要

虽然现在的页面看起来还有点丑，不过可以通过一些css来美化一下。

在首页中添加一些元素  
`index.php`

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>模板文件</title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
    </head>
    <body>
    <div class="header-view">
        <a class="logo" href="<?php home_url() ?>"><strong>Logo文字</strong></a>
        <a class="menu" href="#">发现</a>
        <a class="menu" href="#">关注</a>
        <a class="menu" href="#">消息</a>
        <input type="text" class="search" placeholder="搜索">
    </div>
    <div class="content-area">
        <main id="main" class="site-main">
            <?php while (have_posts()) : the_post(); ?>
                <h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
                <article class="article-content">
                    <?php the_excerpt(); ?>
                </article>
                <h5><?php the_author(); ?>    <?php the_time('Y年n月j日') ?></h5>
            <?php  endwhile; ?>
        </main>
    </div>
    </body>
    </html>

然后在样式表文件中美化一下  
`style.css`

a { 
        text-decoration: none;
        color: #0f0f0f;
    }
    body { 
        color: #333;
    }
    .content-area { 
        width: 60%;
        padding-top: 30px;
        margin: auto;
    }
    .logo { 
        padding: 0 80px;
        color: #FF4400;
    }
    .menu{ 
        padding: 0 20px;
    }
    .search { 
        width:240px;
        height: 38px;
        font-size: 14px;
        border-radius: 40px;
        background: #eee;
        border: none;
        outline: none;
        padding-left: 20px;
    }
    .article-title { 
        color: #969696;
        font-size: 18px;
        line-height: 1.5;
    }
    .article-content { 
        font-size: 14px;
        line-height: 24px;
        color: #999;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
看起了和某网站相似多了。

![QR Code][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20230531/a38dba5032b241c88b4497a66c695986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWFuZ2NoYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20230531/fe4493908bc14b12bc5ea97a0fb0e1d5.png
[QR Code]: /images/20230531/3bd873977fc343c1b3009123f6594eff.png