在 wordpress 首页制作中,通过一个简单的 index.php
文件,显示了一个网站首页。
实际上,Wordpress 并不是通过某一个文件来显示内容的,而是一堆模板文件组合显示。
网站的风格千姿百态,我选取内容型网站(如简书,知乎等)作为样例。图片或者视频型的网站大都不是这样设计的,但是某些地方又有相通之处
可以将网站划分为以下几个模块:
直观表示,就是下图的样子:
实际上,Wordpress 在设计之初,就是按照上面的页面结构来规划的。
页面上每一块内容,都被 Wordpress 划分成了一个个单独的文件,称之为模板文件,通过这些文件的组合显示完整的页面。
这样最大的好处就是模块化,具体来说就是统一管理、统一配置、便于阅读、代码重用。
网站头部信息,在大多数时候,是相对统一和固定的。
头部信息拆解到 header.php
,代码类似下面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板文件</title>
<link rel="stylesheet" href="" type="text/css" />
</head>
<body>
<div class="header-view">
<a class="logo" href=""><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
文件即可。找起来容易,改起来方便。
侧边栏的用途根据网站的定位显示内容千差万别,大部分网站显示文章的归档信息,广告栏(联盟广告、推荐内容,公众号二维码等等),CSDN 还显示了友情链接,备案信息等。
甚至还可以显示双侧 sidebar,中间显示内容,又比如 CSDN。当然,也有很多站点根本不显示 sidebar。
Wordpress 默认有实现了一个侧边栏,可以通过下面的代码来使用:
<aside id="secondary" class="sidebar widget-area" role="complementary">
dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .widget-area -->
将上述内容放置到 sidebar.php
文件中,引用的地方加上如下代码:
获取到的是 sidebar.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
的地方,加上如下代码:
一般,只会在首页引用到 footer,详情页大概率不会用到。
作为网站的主体内容,index.php
在不同的场景下,扮演者不同的角色。
因此,往往在index.php
中只有少量内容,而把主体内容交给 single.php
和 page.php
两个文件。
当网站位于首页时,使用index.php
。
对于详情(内容)页,如果是静态内容,例如关于我们,特别说明等相对不会变化的内容,使用page.php
,如果是正常发布的内容,就是网站中绝大多数内容都用single.php
。
对于 index.php
中内容,可以参考下面的写法:
get_header();
?>
<div class="content-area">
<main id="main" class="site-main">
while (have_posts()) : the_post(); ?>
<h1 class="article-title"><a href=""> the_title(); ?></a></h1>
<article class="article-content">
the_excerpt(); ?>
</article>
<h5> the_author(); ?> the_time('Y年n月j日') ?></h5>
endwhile; ?>
</main>
get_sidebar(); ?>
</div>
get_footer(); ?>
对于内容页 page.php
,可以参考下面的写法:
get_header(); ?>
<section class="container container-page">
<div class="content">
while (have_posts()) : the_post(); ?>
<header class="article-header">
<h1 class="article-title"><a href=""> the_title(); ?></a></h1>
</header>
<article class="article-content">
the_content(); ?>
</article>
endwhile; ?>
</div>
get_sidebar(); ?>
</section>
get_footer(); ?>
对于内容页 single.php
,可以参考下面的写法:
get_header(); ?>
<section class="container">
<div class="content-wrap">
<div class="content">
while (have_posts()) : the_post(); ?>
<header class="article-header">
<h1 class="article-title"><a href=""> the_title(); ?></h1>
</header>
tb_xzh_render_body() ?>
<article class="article-content">
_the_ads($name='ads_post_01', $class='asb-post asb-post-01') ?>
the_content(); ?>
</article>
</div>
</div>
get_sidebar(); ?>
</section>
get_footer();
仔细观察这些文件,发现它们的差别很小,甚至有时候,可以让 single.php
和 page.php
一致。