定制Intuition Pro主题search.php以显示产品搜索结果图片

步骤1：备份原文件 #

修改主题文件前，先备份当前的search.php，避免操作失误导致网站异常。

步骤2：修改search.php代码 #

将原代码替换为以下内容，我们添加了产品/文章特色图片的展示逻辑，同时兼容普通内容和WooCommerce产品：

<?php get_header(); ?>

<div id="main" class="main">
    <div class="container">
        <section id="content" class="content">
            <?php do_action('cpotheme_before_content'); ?>
            <?php if(have_posts()): while(have_posts()): the_post(); ?>
            <article class="search-result" id="post-<?php the_ID(); ?>">
                <!-- 添加产品/文章缩略图 -->
                <?php if (has_post_thumbnail()) : ?>
                    <div class="search-thumbnail">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark">
                            <?php 
                            // 针对WooCommerce产品使用电商专用缩略图尺寸，普通内容用默认缩略图
                            if (is_product()) {
                                the_post_thumbnail('woocommerce_thumbnail');
                            } else {
                                the_post_thumbnail('thumbnail');
                            }
                            ?>
                        </a>
                    </div>
                <?php endif; ?>
            
                <h4 class="search-title heading">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
                </h4>
                <div class="search-byline">
                    <?php the_permalink(); ?>
                </div>
            </article>
            <?php endwhile; ?>
            <?php cpotheme_numbered_pagination(); ?>
            <?php endif; ?>
            <?php do_action('cpotheme_after_content'); ?>
        </section>
        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

步骤3：添加CSS样式（可选） #

为了让图片和文本排版更协调，可在主题的自定义CSS区域添加以下样式：

.search-result {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.search-thumbnail {
    margin-right: 15px;
    flex-shrink: 0;
}

.search-thumbnail img {
    max-width: 100px;
    height: auto;
}

@media (max-width: 768px) {
    .search-result {
        flex-direction: column;
    }
    .search-thumbnail {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

说明 #

• 代码通过has_post_thumbnail()判断是否存在特色图片，避免无图时出现空白区域
• 针对WooCommerce产品调用电商专用缩略图尺寸，适配产品展示场景
• 样式可根据网站整体设计调整尺寸、间距和颜色

内容的提问来源于stack exchange，提问作者garry rigby