在 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 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 中內容，可以參考下面的寫法：
<?php
get_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(); ?> <?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一致。