咱们上次说到启用我们开发的主题后，发现主页一片混乱。
这一看就是css失效了。在WordPress主题模板中，如何正确的引用css文件呢？WordPress非常贴心地提供了一个函数-get_stylesheet_uri，这个函数会直接返回style.css的路径，所以，修改一下index.php头部style.css的路径就可以了。如下：
<!-- <link rel="stylesheet" href="style.css"> --><link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">刷新一下首页，是不是好一点了。图片的路径也不对。虽然，这些图片都只是临时用一下，不过现在看着非常难受…… 可以使用WordPress的另一个函数-get_stylesheet_directory_uri，这个函数会返回style.css所在目录（也就是当前主题目录）的路径。那么只要在原来图片路径的前面拼接上目录路径就可以了。
类似下面的修改：
<!-- <img alt="picture loss" src="images/jiangqie.png"> --><img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/jiangqie.png' ?>">把全部图片一一修改，再刷新一下页面，总算正常一点了。
整个页面的中心就是一个文章列表，这个文章列表如何实现呢？这就要用到大名鼎鼎的WordPress主循环了。
一个典型的主循环结构：
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 在这里展示文章信息
endwhile;
else :
echo '没有找到文章';
endif;我们把这段代码添加到文章列表的位置，然后把文章列表中的第一个文章块粘贴到“在这里展示文章信息”的位置，如下：
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<div class="post-div simple-item simple-left-side slide-in post-div-stick">
<div class="simple-img simple-left-img">
<a class="simple-left-img-a" href="javascript:void(0)" title="追格资讯小程序（开源版）V2.0.0更新">
<img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/jiangqie.png' ?>">
</a>
<a class="simple-left-img-cat-a" href="javascript:void(0)" title="追格快讯"><strong>追格快讯</strong></a>
</div>
<div class="simple-content">
<h2>
<strong>置顶</strong>
<a href="javascript:void(0)" title="">追格资讯小程序（开源版）V2.0.0更新</a>
</h2>
<p><a href="javascript:void(0)" title="">追格资讯小程序Free（又称酱茄free），实现WordPress网站...</a></p>
<p class="simple-info">
<a href="javascript:void(0)" title="酱茄小助理">
<img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/default_avatar.jpg' ?>">
<em>酱茄小助理</em>
</a> · <cite>浏览 11356</cite> · <cite>点赞 38</cite> · <cite>评论 10</cite> ·<cite>1年前 (2022-10-11)</cite>
</p>
</div>
</div>
<?php endwhile;
else : echo '没有找到文章';
endif; ?>刷新一下页面，代码已经生效了！
接下来，使用函数the_title替换文章标题，函数the_permalink替换文章链接。如下：
<?php if (have_posts()) :
while (have_posts()) :
the_post();
?>
<div class="post-div simple-item simple-left-side slide-in post-div-stick">
<div class="simple-img simple-left-img"><a class="simple-left-img-a" href="<?php the_permalink() ?>" title="<?php the_title() ?>"><img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/jiangqie.png' ?>"></a><a class="simple-left-img-cat-a" href="javascript:void(0)" title="追格快讯"><strong>追格快讯</strong></a></div>
<div class="simple-content">
<h2><strong>置顶</strong><a href="<?php the_permalink() ?>" title="<?php the_title() ?>"><?php the_title() ?></a></h2>
<p><a href="javascript:void(0)" title="">追格资讯小程序Free（又称酱茄free），实现WordPress网站...</a></p>
<p class="simple-info"><a href="javascript:void(0)" title="酱茄小助理"><img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/default_avatar.jpg' ?>"><em>酱茄小助理</em></a> · <cite>浏览 11356</cite> · <cite>点赞 38</cite> · <cite>评论 10</cite> ·<cite>1年前 (2022-10-11)</cite></p>
</div>
</div>
<?php endwhile;
else : echo '没有找到文章';
endif; ?>再看一下页面，文章列表中标题都已经出来了！
这里需要注意一下，后台->设置->阅读 的设置，需要是下面这样：
至于为什么，这里先不管了，以免扰乱我们的思路。
文章链接也加上了，点一下试试！页面刷新了一下，文章列表中只剩下刚才点击的那篇文章了，还有地址栏变成了：http://【你的域名】/?p=101。
但是，并没有像我们期望的那样：跳转到文章详情页面。
等等，我们的文章详情页面在哪里？它还是个静态页面呢！
主题目录下，找到 detail.html ，并将其重命名为 single.php。再重新试一下。
这次确实跳转到详情页面，但是我们又遇到了老问题，css失效。返回文章开头开一眼，照猫画图改一下，再刷新页面就好了。
不过，每个页面都这样改一下，工作量有点大，而且感觉有点笨……。其实，WordPress 提供了标准的解决办法。观察一下主题的页面，不难发现头部和尾部都是一样的。
在 WordPress 中，页面头部叫header，页面尾部叫footer，对应的模板文件 header.php 和 footer.php。新建一个 footer.php 文件，并把 index.php 中第348行之后的内容剪切，粘贴到 footer.php 中。新建一个 header.php 文件，并把 index.php 中第1-48行剪切，粘贴到 header.php 中。
如何再把这些文件拼接成一个完整的页面呢？WordPress 提供了函数 get_header() 和 函数 get_footer()。看名字就知道这两个函数是干啥的了。
在 index.php 头部加上：
<?php get_header(); ?>在 index.php 尾部加上：
<?php get_footer(); ?>返回网站首页看一下，是没问题的，还和原来一样。现在可以复用 header.php 和 footer.php 了，参考index.php改造方法，改造 single.php。
single.php 中，header 元素及其以上元素，修改为：
<?php get_header(); ?>footer 元素及以下元素，修改为：
<?php get_footer(); ?>刷新一下文章详情页面，没问题的，样式都正常了--除了那些图片的路径，如果不能忍，就参考文章头部介绍的方法改一下就好。
等等，主页和详情页右边有一大块貌似也是一样的！这个应该也能复用吧？没错！WordPress 也是这么想的，它管右边的一块叫：sidebar。就和header、footer一样，也有一个模板文件，叫：sidebar.php；也有一个函数，叫：get_sidebar()。
依葫芦画瓢，动手吧。
新建一个文件，命名为：sidebar.php。
把 index.php 中 aside元素，剪贴到 sidebar.php 中。
在 aside 元素原来的位置上，加上 <?php get_sidebar(); ?>
修改好了，看看我们的成果，是不是有点成就感……
眼前还有个问题比较扎眼，就是文章详情展示的文章信息还是静态的…… 这次要用下面的代码了：
if (have_posts()) : the_post();// 文章信息else :// 没有找到文章endif;把这个结构放到 article 元素中，把原来article内部的内容放到“文章信息”那里。然后，the_title(), the_content()…… 这些函数就又用上了。代码太长，就不在这里贴了，直接去下载：https://gitee.com/zhuige_com/course_jiangqie_theme
现在，我们有了首页和文章详情页，并且能从首页点击链接进入文章详情页了。在 WordPress 主题中，常见的页面还有文章归档页（分类文章列表，标签文章列表，作者文章列表等），单页（关于我们之类的页面），搜索文章结果页，404页等。下一节，我们将建立这些页面，从“宏观”上看一下，它们是如何串起来的。
暂无评论，抢个沙发...