Wordpress 主题开发教程-页面结构与模板

在 wordpress 首页制作中，通过一个简单的 index.php 文件，显示了一个网站首页。
实际上，Wordpress 并不是通过某一个文件来显示内容的，而是一堆模板文件组合显示。

页面结构

网站的风格千姿百态，我选取内容型网站（如简书，知乎等）作为样例。图片或者视频型的网站大都不是这样设计的，但是某些地方又有相通之处

可以将网站划分为以下几个模块：

Header 网站的头部：显示 logo、导航条、搜索框等
Content 网站的主体：首页时显示一条条的概要信息，内容页时显示文章具体内容
Side bar 侧边栏：显示介绍性的内容、推荐信息、广告等
Footer 页脚：显示相关链接，主体信息（网站属于谁），备案信息（国内合规网站必备）等

直观表示，就是下图的样子：

实际上，Wordpress 在设计之初，就是按照上面的页面结构来规划的。
页面上每一块内容，都被 Wordpress 划分成了一个个单独的文件，称之为模板文件，通过这些文件的组合显示完整的页面。

header.php 控制网页头部显示
sidebar.php 控制网页侧边栏显示
footer.php 控制网页底部显示
index.php 页面主要内容显示，不过要注意，index.php并不是严格意义上显示主体内容的，之后会对这个文件扩充解释

这样最大的好处就是模块化，具体来说就是统一管理、统一配置、便于阅读、代码重用。

模板文件

header.php

网站头部信息，在大多数时候，是相对统一和固定的。

头部信息拆解到 header.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>

其他页面使用该头部信息的地方加上如下代码：

get_header();

获取到的就是 header.php文件中的完整内容，如果想修改页面上头部信息的显示方式，只用修改header.php文件即可。找起来容易，改起来方便。

sidebar.php

侧边栏的用途根据网站的定位显示内容千差万别，大部分网站显示文章的归档信息，广告栏（联盟广告、推荐内容，公众号二维码等等），CSDN 还显示了友情链接，备案信息等。

甚至还可以显示双侧 sidebar，中间显示内容，又比如 CSDN。当然，也有很多站点根本没有 sidebar。

Wordpress 默认实现了一个侧边栏，可以通过下面的代码来使用：

<aside id="secondary" class="sidebar widget-area" role="complementary"><?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .widget-area -->

将上述内容放置到 sidebar.php文件中，引用的地方加上如下代码：

<?php get_sidebar(); ?>

获取到的是 sidebar.php文件中完整内容。

footer.php

大部分网站会在网页最下方列出帮助信息，友情链接，版权信息，备案号等。

<div class="footer-view"><a class="menu" href="#">关于我们</a><a class="menu" href="#">友情链接</a><a class="menu" href="#">内容合作</a>
</div>
<div class="footer-footer">
Copyright @ 2021 XXX 备案号000000
</div>
</body>
</html>

在需要引用到 footer.php的地方，加上如下代码：

<?php get_footer(); ?>

一般，只会在首页引用到 footer，而详情页大概率不会用到。

index.php

作为网站的主体内容，index.php在不同的场景下，扮演者不同的角色。

因此，往往在index.php中只有少量内容，而把主体内容交给 single.php 和 page.php 两个文件。

当网站位于首页时，使用index.php。首页指的是第一次进入站点，展示给用户的网页。
对于详情（内容）页，如果是静态内容，例如关于我们，特别说明等相对不会变化的内容，使用page.php，如果是正常发布的内容，就是网站中绝大多数内容都用single.php。

对于 index.php 中内容，可以参考下面的写法：

<?phpget_header();
?><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><?php get_sidebar(); ?>
</div><?php get_footer(); ?>

对于内容页 page.php，可以参考下面的写法:

<?php get_header(); ?>
<section class="container container-page"><div class="content"><?php while (have_posts()) : the_post(); ?><header class="article-header"><h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1></header><article class="article-content"><?php the_content(); ?></article><?php endwhile;  ?></div><?php get_sidebar(); ?>
</section>
<?php get_footer(); ?>

对于内容页 single.php，可以参考下面的写法:

<?php get_header(); ?><section class="container"><div class="content-wrap"><div class="content"><?php while (have_posts()) : the_post(); ?><header class="article-header"><h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></h1></header><?php tb_xzh_render_body() ?><article class="article-content"><?php _the_ads($name='ads_post_01', $class='asb-post asb-post-01') ?><?php the_content(); ?></article></div></div><?php get_sidebar(); ?>
</section><?php get_footer();

仔细观察这些文件，发现它们的差别很小，甚至有时候，可以让 single.php 和 page.php一致。