B2主题美化之文章底部添加所属专题

跟大家分享一下由倡萌原创的“WordPress网站B2主题美化之文章底部添加所属专题”。

B2主题的专题功能有利于将相关的文章组织到一起，但是在专题中的文章内页，并没有关于该专题的其他信息，也没有引导用户阅读该专题的其他文章。

效果图

教程

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

将下面代码放入主题function文件。

/**
* 调用该文章所在专题的其他文章
* https://www.xingkongweb.com/60668.html
*/
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.xingkongweb.com/60668.html
*/
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' );

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;
}