外贸独立站的底层设计密码WordPress 成品站建站

文章中添加该文章所属专题的其他文章列表

  1. 主页
  2. 文档
  3. B2主题使用教程
  4. B2主题二开
  5. 文章中添加该文章所属专题的其他文章列表

B2主题的专题功能有利于将相关的文章组织到一起,但是在专题中的文章内页,并没有关于该专题的其他信息,也没有引导用户阅读该专题的其他文章。今天倡萌就和大家分享下优化方案。

具体效果:在文章顶部显示该专题前面的文章,在文章底部显示该专题后面的文章。

文章中添加该文章所属专题的其他文章列表 - Collection Posts

实现的代码如下,将代码添加到子主题的 functions.php 即可。

/**
 * 调用该文章所在专题的其他文章
 * https://www.wpdaxue.com/docs/b2/b2-dev/collection-posts
 */
function b2child_get_collection_posts_list( $location = 'before' ) {
    
    if( is_singular('post') ) {
        
        $post_id = get_the_ID();
        
        if( has_term( '', 'collection' ) ) {
            $terms = get_the_terms( $post_id, 'collection' );
            if( $terms && !is_wp_error($terms) ) {
                foreach ( $terms as $term ) {
                    $term_id = $term->term_id;
                    $term_name = $term->name;
                    $term_desc = $term->description;
                    
                    $args = array(
                    	'post_type' => 'post',
                    	'posts_per_page' => -1,
                    	'nopaging'  => true,
                    	'ignore_sticky_posts' => true,
                    	'order'     => 'ASC',
                    	'tax_query' => array(
                    		array(
                    			'taxonomy' => 'collection',
                    			'field'    => 'term_id',
                    			'terms'    => $term_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 = 'collection-before';
                    if( $location == 'after' ) $class = 'collection-after';
                    
                    if( ($location == 'before' && $current > 1) || ($location == 'after' && $current < $count) ){
                            
                        echo '<div class="collection-posts '.$class.'">';
                        
                        if( $location == 'before' ) {
                            echo '<p class="before">文本是《<a target="_blank" title="'.$term_desc.'" href="'.esc_url( get_term_link($term_id) ).'">'.$term_name.'(共'.$count.'篇)</a>》专题的第 '.$current.' 篇。阅读本文前,建议先阅读前面的文章:</p>';
                        } elseif ( $location == 'after' ) {
                            echo '<p class="after">您已阅读完《<a target="_blank" title="'.$term_desc.'" href="'.esc_url( get_term_link($term_id) ).'">'.$term_name.'(共'.$count.'篇)</a>》专题的第 '.$current.' 篇。请继续阅读该专题下面的文章:</p>';
                        }
                        
                    	echo '<ul class="collection-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();
                
                }
            }
        }
        
    }
}

/**
 * 文章中添加该文章所属专题的其他文章列表
 * https://www.wpdaxue.com/docs/b2/b2-dev/collection-posts
 */
function b2child_display_collection_posts( $content ) {
    
    if( is_singular('post') ) {
        
        $before = b2child_get_collection_posts_list( 'before' );
        
        $after = b2child_get_collection_posts_list( 'after' );
        
        $content = $before ."\n". $content ."\n". $after;
    }
    
    return $content;
    
}
add_filter('the_content', 'b2child_display_collection_posts', 999 );

参考的样式代码如下,可以添加到子主题的 style.css 中:

.collection-before {
    border-bottom: 1px solid #ddd;
}
.entry-content > .collection-after {
    border-top: 1px solid #ddd;
    padding-top: 1.5em;
    margin-bottom: 0;
}
.collection-posts-ul {
    background: #f5f5f5;
    padding: 10px 0;
    border-radius: 2px;
    max-height: 290px;
    overflow-y: hidden;
}
.collection-posts-ul:hover {
    overflow-y: scroll;
}
.entry-content .collection-posts-ul a {
    color: #444;
}
.entry-content .collection-posts-ul a:hover {
    color: #ff3657;
}

有能力的朋友可以自行修改代码。已将该方案提交给春哥,后续更新应该会集成到父主题。

这篇文章对您有用吗? 3 4
6 条回复 A文章作者 M管理员
  1. 设计趁年华

    我怎么加上之后,阅读前,阅读后的专题都在文章地步呢

    • 倡萌

      不清楚,大学网站正在使用,目前没发现问题哦,你也可以试试最后一行代码后面添加一个优先级 add_filter(‘the_content’, ‘b2child_display_collection_posts’, 999 );

    • 倡萌

      上面的代码的单引号被转义为中文的了,注意将上面代码的单引号换成英文的哦

  2. user25898

    有个问题假如这个专题有100+文章,那样显示出来岂不是太长了?建议加个缩略显示。

    • 倡萌

      通过样式限制了最大高度,超过高度会显示滚动条的

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索