咱们上次说到启用我们开发的主题后,发现主页一片混乱。
这一看就是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页等。下一节,我们将建立这些页面,从“宏观”上看一下,它们是如何串起来的。
暂无评论,抢个沙发...