【完整教程】Wordpress主题开发之index.php
在 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 中内容，可以参考下面的写法：
<?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一致。
请收藏一下，避免以后找不到哦！
本文来源及出处：主题猫wordpress-http://ztmao.com
- 点赞
- 收藏
- 关注作者
评论（0）