wordpress once主题 搜索页无内容调整

2024-05-26 573 0

此主题 搜索页 搜索不到内容时 默认是空白,有点空寥寥的,总觉得缺少了什么是的,这里加加样式。

# vim /wordpress_web_path/wp-content/themes/once/search.php

<?php get_header(); ?>
<section class="index_area">
    <div class="container">
        <div class="row g-3">
            <div class="col-lg-9">
                <div class="cat_info_top">
                    <h2 class="mb-0">搜索"<?php echo get_query_var( 's' ); ?>"的结果!</h2>
                </div>
                <div class="post_box">
                <?php 
                    $kw = get_search_query();
                    if( have_posts() && $kw != '') : ?>
                       <?php while( have_posts() ): the_post(); ?>
                          <?php include('excerpt.php') ?>
                       <?php endwhile; ?>
                    <?php else : ?>
                       <ul class="post-loop post-loop-default">
                          <li class="post-loop-empty">
                              <img src="<?php echo bloginfo('template_directory');?>/assets/images/empty.svg" alt="empty">
                              <p><?php echo "抱歉,你搜索的内容未找到。" ?></p>
                          </li>
                       </ul>
                    <?php endif; ?>
                </div>
                <?php get_ds_posts_nav(); ?>
            </div>
            <?php get_sidebar() ?>
        </div>
    </div>
</section>
<?php get_footer(); ?>

上传图片到 /wordpress_web_path/wp-content/themes/once/assets/images/

修改css

# vim /wordpress_web_path/wp-content/themes/once/style.css

.post-loop-empty {
    color: var(--theme-light-color);
    padding: 80px 0;
    text-align: center;
}

.post-loop-empty img {
    display: block;
    height: auto;
    margin: 20px auto;
    max-width: 60%;
    width: 240px
}

.post-loop-empty p {
    line-height: 1.67;
    margin: 20px 0;
    padding: 0 30px
}

相关文章

wordpress once主题修改 代码块 序号旁添加竖线

发布评论