WordPress主题开发教程 3_摩拳擦掌

江河/ 03月25日/ WordPress/ 浏览 668

咱们上次说到启用我们开发的主题后,发现主页一片混乱。


这一看就是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页等。下一节,我们将建立这些页面,从“宏观”上看一下,它们是如何串起来的。




发表评论

暂无评论,抢个沙发...

客服 工单