B2主题的专题功能有利于将相关的文章组织到一起,但是在专题中的文章内页,并没有关于该专题的其他信息,也没有引导用户阅读该专题的其他文章。今天倡萌就和大家分享下优化方案。
具体效果:在文章顶部显示该专题前面的文章,在文章底部显示该专题后面的文章。
实现的代码如下,将代码添加到子主题的 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;
}
有能力的朋友可以自行修改代码。已将该方案提交给春哥,后续更新应该会集成到父主题。
我怎么加上之后,阅读前,阅读后的专题都在文章地步呢
不清楚,大学网站正在使用,目前没发现问题哦,你也可以试试最后一行代码后面添加一个优先级 add_filter(‘the_content’, ‘b2child_display_collection_posts’, 999 );
上面的代码的单引号被转义为中文的了,注意将上面代码的单引号换成英文的哦
好像没有用呢
有个问题假如这个专题有100+文章,那样显示出来岂不是太长了?建议加个缩略显示。
通过样式限制了最大高度,超过高度会显示滚动条的