美文网首页
WordPress主题制作进阶#6自定义存档页面

WordPress主题制作进阶#6自定义存档页面

作者: 埼玉是个逗B | 来源:发表于2018-09-29 13:22 被阅读28次

    现在,如果我们点击其中一个类别,它将跳转到一个类别存档。我们来创建自定义的存档页面。

    定制存档页

    如果我们点击admin,用户名,会跳转到作者档案。 我们也可以按日期存档,我们可以通过标签来存档,等等。我们进入主题文件夹,创建一个新文件并将其保存为archive.php。
    现在,如果我们返回并单击某个类别,您可以看到它是空白的,因为它正在查看archive.php页面。 复制index.php页面中的内容并将其粘贴到archive.php中。
    我希望这些页面内容更加简单。 我们不需要元数据,不需要图像;只要标题,日期就好。 我们去找<article>标签,用以下代码替换整个部分。

    <div class="archive-post">
         <h4>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
         </h4>
        <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
    </div>
    

    现在回到浏览器刷新一下,就是下面这样子了

    archive

    我们打开样式表,为其添加一些样式

    .archive-post {
        border-bottom: #ccc 1px solid;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    .archive-post h4,
    .archive-post p {
        margin: 0;
        padding: 0;
    }
    

    现在我们希望根据文档类型来设置不同的标题。 那么让我们回到archive.php并在main block div下面添加以下代码:

    <div class="main block">
            <h1 class="page-header">
            <?php
                if(is_category()){
                    single_cat_title();
                } else if(is_author()){ 
                    the_post();
                    echo 'Archives By Authors: ' .get_the_author();
                    rewind_posts();
                } else if(is_tag()){
                    single_tag_title();
                } else if(is_day()){
                    echo 'Archives By Day: ' .get_the_date();
                } else if(is_month()){
                    echo 'Archives By Month: ' .get_the_date('F Y');
                } else if(is_year()){
                    echo 'Archives By Year: ' .get_the_date('Y');
                } else {
                    echo 'Archives';
                } 
            ?>
            </h1>
            <?php if(have_posts()) : ?>
    

    现在我们返回前端刷新,我们点击分类,会跳转到下图

    IT分类

    回到首页再点击admin,会跳转到下图

    按作者分类

    定制搜索页

    弄懂了存档页archive.php的原理,接下来我们如法炮制来自定义一个搜索页。
    我们将创建一个新文件并将其命名为search.php,把archive.php 中的代码复制粘贴到search.php中,然后删除和修改一些不需要的代码:

    <?php get_header(); ?>
    
        <div class="container content">
            
            <div class="main block">
            <h1 class="page-header">搜索结果</h1>
    
            <?php if(have_posts()) : ?>
                <?php while(have_posts()) : the_post(); ?>
                <div class="archive-post">
                    <h4>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h4>
                    <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
                </div>
                <?php endwhile; ?>
            <?php else : ?>
                <?php echo wpautop('Sorry, no posts were found'); ?>
            <?php endif; ?>  
            </div>
    

    为了确保搜索确实有效,让我们在“从0到1”这篇博客中中加入Hello这个词,然后更新:

    hello

    现在,我们回到前端并搜索Hello,那么“从0到1”这篇博客就出现了:

    搜索结果

    出现了。

    相关文章

      网友评论

          本文标题:WordPress主题制作进阶#6自定义存档页面

          本文链接:https://www.haomeiwen.com/subject/tnwvoftx.html