本功能有了衍生进化版

文章正文前后添加同一分类目录下文章提示功能（二）只显示与它相邻的前3篇和后3篇文章 本文是以下文章的衍生版本： [pix_post ids=250] 刚开始建站的时候，考虑到文章稀少，没有什么可读性，为了提高网站粘度，在文章前后插入了同类分类目录下的所有文章。随着文章越来越多，如果不... 时间:2023/11/21 分类:技术相关

本功能已经适配了PIX主题，并且做了适当美化，包括添加了四角为圆的虚框，以及虚框内相对舒适的背景颜色。理论上适应于任何WP主题，但可能需要做相应修改，尤其是CSS部分。

PIX因为没有专题collection功能，它的专题名字虽然叫专题，其实就是分类目录category。因此，如果你是其它主题，想要实现统一专题下文章提示功能，只需要把本文代码中的category替换为collection即可。

先看效果：

改造开始：

1、为了保证pix/functions.php的安全，我们先在同目录下建立func.php，这样的好处是以后我们添加、删除或者修改以及以后的主题升级都不会对functions.php造成任何威胁。

建立完func.php后，functions.php最后添加以下代码用来引用func.php。

if (file_exists(get_theme_file_path('/func.php'))) {
    require_once get_theme_file_path('/func.php');
}

2、编辑pix/func.php，添加以下代码并保存。

[reply]

<?php

// 调用该文章所在分类目录的其他文章
function get_category_posts_list( $location = 'before' ) {
    if( is_singular('post') ) {
        $post_id = get_the_ID();
        $categories = get_the_category( $post_id );
        if( $categories && !is_wp_error($categories) ) {
            foreach ( $categories as $category ) {
                $category_id = $category->term_id;
                $category_name = $category->name;
                $category_desc = $category->description;
                $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => -1,
                    'nopaging'  => true,
                    'ignore_sticky_posts' => true,
                    'order'     => 'ASC',
                    'category__in' => array( $category_id ),
                );
                $the_query = new WP_Query( $args );
                $count = $current = false;
                if ( $the_query->have_posts() ) {
                    ob_start();
                    $i = 1;
                    while ( $the_query->have_posts() ) {
                        $the_query->the_post();
                        $count = $the_query->found_posts;
                        if( $post_id == get_the_ID() ) {
                            $current = $i;
                        }
                        $i++;
                    }
                    $class = 'category-before';
                    if( $location == 'after' ) $class = 'category-after';
                    if( ($location == 'before' && $current > 1) || ($location == 'after' && $current < $count) ){
                        echo '<div class="category-posts '.$class.'">';
                        if( $location == 'before' ) {
                            echo '<p class="before">本文是《<a target="_blank" title="'.$category_desc.'" href="'.esc_url( get_category_link($category_id) ).'">'.$category_name.'（共'.$count.'篇）</a>》分类目录的第 '.$current.' 篇。阅读本文前，建议先阅读前面的文章：</p>';
                        } elseif ( $location == 'after' ) {
                            echo '<p class="after">您已阅读完《<a target="_blank" title="'.$category_desc.'" href="'.esc_url( get_category_link($category_id) ).'">'.$category_name.'（共'.$count.'篇）</a>》分类目录的第 '.$current.' 篇。请继续阅读该目录下后面的文章：</p>';
                        }
                        echo '<ul class="category-posts-ul">';
                        $i = 1; 
                        while ( $the_query->have_posts() ) {
                            $the_query->the_post();
                            if( ( $location == 'before' && $i < $current ) || ( $location == 'after' && $i > $current ) ) {
                                echo '<li><span>'.$i.'.</span><a href="'.esc_url( get_permalink() ).'">' . get_the_title() . '</a></li>';
                            }
                            $i++;
                        }
                        echo '</ul>';
                        echo '</div>';
                    }
                }
                wp_reset_postdata();
                return ob_get_clean();
            }
        }
    }
}

// 文章中添加该文章所属分类目录的其他文章列表
function display_category_posts( $content ) {
    if( is_singular('post') ) {
        $before = get_category_posts_list( 'before' );
        $after = get_category_posts_list( 'after' );
        $content = $before . "\n" . $content . "\n" . $after;
    }
    return $content;
}
add_filter('the_content', 'display_category_posts' );

?>

[/reply]

3、编辑pix/style.css，最后添加以下CSS代码并保存，没改动过的话，大概975处。

.category-posts {
    border: 1px dashed #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: #f7f1e3; /* 舒适的背景颜色 */
}

.category-posts p {
    font-size: 12px;
    color: #333;
    margin: 0;
}

.category-posts ol {
    padding-left: 20px;
}

.category-posts ol li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
}

.category-posts ol li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #ccc; /* 标记的颜色 */
    border-radius: 50%;
}

.category-posts ol li a {
    color: #2c3e50;
    font-size: 14px;
    text-decoration: none;
}

.category-posts ol li a:hover {
    color: #e74c3c;
}

四、大功告成，浏览器删除缓存后刷新看效果。