给 GeneratePress 文章添加相关文章列表

直接将下面的代码复制到 GeaneratePress 子主题的 functions.php 文件中就可以 GeneratePress 主题文章的底部添加相关文章列表了：

<?php
/**
 * GeneratePress Child Theme Functions
 * 相关文章功能
 */

// 添加相关文章功能
function gp_child_add_related_posts() {
    if (is_single() && 'post' == get_post_type()) {
        global $post;
        
        // 获取当前文章的分类
        $categories = get_the_category($post->ID);
        if (empty($categories)) {
            return;
        }
        
        $cat_ids = array();
        foreach($categories as $category) {
            $cat_ids[] = $category->term_id;
        }
        
        // 查询参数
        $args = array(
            'category__in'   => $cat_ids,
            'post__not_in'   => array($post->ID),
            'posts_per_page' => 4,
            'orderby'        => 'rand',
        );
        
        $related_query = new WP_Query($args);
        
        if ($related_query->have_posts()) :
            echo '<div class="gp-related-posts-section">';
            echo '<h3 class="related-heading">相关文章推荐</h3>';
            echo '<div class="related-posts-grid">';
            
            while ($related_query->have_posts()) : $related_query->the_post();
                echo '<div class="related-post-item">';
                echo '<a href="' . get_permalink() . '" class="related-post-link">';
                
                if (has_post_thumbnail()) {
                    echo '<div class="related-post-image">';
                    the_post_thumbnail('medium');
                    echo '</div>';
                } else {
                    echo '<div class="related-post-image no-thumb">';
                    echo '<img src="' . get_stylesheet_directory_uri() . '/images/default-thumb.jpg" alt="' . get_the_title() . '">';
                    echo '</div>';
                }
                
                echo '<h4 class="related-post-title">' . get_the_title() . '</h4>';
                echo '</a>';
                echo '</div>';
            endwhile;
            
            echo '</div>'; // .related-posts-grid
            echo '</div>'; // .gp-related-posts-section
            
            wp_reset_postdata();
        endif;
    }
}
add_action('generate_after_content', 'gp_child_add_related_posts', 20);

// 添加相关文章样式
function gp_child_related_posts_styles() {
    if (is_single()) {
        ?>
        <style id="gp-related-posts-styles">
        .gp-related-posts-section {
            margin: 50px 0;
            padding: 30px 0;
            border-top: 1px solid #eaeaea;
            clear: both;
        }
        
        .related-heading {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
            color: #333;
        }
        
        .related-posts-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        
        .related-post-item {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .related-post-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.12);
        }
        
        .related-post-image {
            height: 160px;
            overflow: hidden;
        }
        
        .related-post-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .related-post-item:hover .related-post-image img {
            transform: scale(1.05);
        }
        
        .related-post-image.no-thumb {
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .related-post-title {
            margin: 0;
            padding: 15px;
            font-size: 15px;
            line-height: 1.4;
            font-weight: 500;
        }
        
        .related-post-link {
            text-decoration: none;
            color: #333;
            display: block;
        }
        
        .related-post-link:hover {
            color: #0066cc;
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .related-posts-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .related-posts-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            
            .related-heading {
                font-size: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .related-posts-grid {
                grid-template-columns: 1fr;
            }
            
            .related-post-image {
                height: 140px;
            }
        }
        </style>
        <?php
    }
}
add_action('wp_head', 'gp_child_related_posts_styles');