Wordpress主题制作之首页

前言上节中已经通过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日') ?>

PHP代码	输出内容
<?php the_time('Y年n月j日') ?>	2019年5月1日
<?php the_time('Y年m月d日') ?>	2019年05月01日
<?php the_time('Y-m-d') ?>	2019-05-01
<?php the_time('y-m-d H:i:s') ?>	19-05-01 02:09:08

内容

摘要信息：
<?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(); ?> &nbsp;&nbsp; <?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(); ?> &nbsp;&nbsp; <?php the_time('Y年n月j日') ?></h5><article><?php the_excerpt(); ?></article><?php  endwhile; ?></main>
</div>
</body>

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

实际上，在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(); ?> &nbsp;&nbsp; <?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;
}

看起了和某网站相似多了。

Wordpress主题制作之首页相关推荐

WordPress主题制作全过程（二）：主题文件构成
声明:本文转自露兜博客在开始制作WordPress主题之前,首先得了解WordPress主题到底由哪些文件构成,你得清楚WordPress程序是怎样与主题文件连接的. 以下是WordPress默认主 ...
wordpress主题制作教程(十):制作文章单页模板single.php
wordpress主题制作教程(十):制作文章单页模板single.php 您现在的位置:阿树工作室->wordpress主题教程->基础教程 2012.7.25 浏览数:39,982 ...
WordPress主题制作全过程（五）：制作header.php
你可以尝试用文本编辑器打开从WordPress主题制作全过程(三):HTML静态模板制作下载到的 .html 文件,不知道你有没有发现他们头部的代码都非常的相似呢?其实我们可以提取这部分相似的代码,放 ...
WordPress主题制作全过程（九）：制作single.php
今天我们来制作单文章页single.php,有了之前制作index.php的经验,制作single.php也不再那么难了,这里将直接略过一些内容,直接给出结果.如果对某些修改不太清楚,可以先参考:Wo ...
wordpress引入php文件,WordPress主题制作之模板文件的引入方法，wordpress模板
WordPress主题制作之模板文件的引入方法,wordpress模板 get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 ge ...
使用 WordPress 主题制作的20个精美网页
WordPress 是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用 PHP 语言和 MySQL 数据库开发的.用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客.这 ...
专业的wordpress主题制作软件Artisteer 3.0
专业的wordpress主题制作软件Artisteer 3.0 转载于:https://www.cnblogs.com/helpwz/articles/2477771.html
WordPress主题制作全过程
WordPress主题制作全过程完整列表: WordPress主题制作全过程(一):基础准备 WordPress主题制作全过程(二):主题文件构成 WordPress主题制作全过程(三):HTML静态 ...
wordpress主题制作1 将html制作为wordpress主题模板
wordpress有一些主题基础知识,可参考:wordpress主题制作开发实战教程3.1(1)- 主题基础 BY WP花园文章内容目录: WordPress主题主要文件模块模板工作流程,判断使用 ...
WordPress主题制作全过程（三）：HTML静态模板制作
制作WordPress需要了解PHP,但是不管怎样,你的博客页面都是一张网页,网页之所以能够在浏览器中显示出来,是因为最终传送给浏览器的是HTML.CSS和JS等终端代码,最终由这些代码控制浏览器的显 ...

Wordpress主题制作之首页

输出文章内容

标题

作者

时间

内容

Wordpress主题制作之首页相关推荐

最新文章

热门文章