评论可见
前往评论
今天给大家分享一个子比主题列表文章加一个分类标识，需要的收藏保存本网站。
具体子比文件名：/zibll/inc/functions/zib-posts-list.php，大概是494行，if (!$_thumb) {开头
我们用代码编辑器，快速找到了$_thumb = zib_post_thumbnail('', 'fit-cover radius8');这段代码，没错他只是一个简单的变量，我们通过文本编辑器定位到这段代码后，那么就是改代码咯！
子比v7.6版本的代码是这样的
if (!$_thumb) {
$_thumb = zib_post_thumbnail('', 'fit-cover radius8');
$_thumb = '<a' . $post_target_blank . ' href="' . $get_permalink . '">' . $_thumb . '</a>';
}想要加一级分类的标识那么首先就是要获取当前文章的一级分类名称及链接
if (!$_thumb) {
$_thumb = zib_post_thumbnail('', 'fit-cover radius8');
// 获取当前文章的一级分类名称和链接
$categories = get_the_category();
$first_category_name = '';
$first_category_link = '';
if ($categories) {
$first_category = $categories[0];
$first_category_name = $first_category->name;
$first_category_link = get_category_link($first_category);
}
$_yjfl = '<a class="item-category" href="' . esc_url($first_category_link) . '">' . $first_category_name . '</a>';
$_thumb = '<a' . $post_target_blank . ' href="' . $get_permalink . '">' . $_thumb . $_yjfl . '</a>';
}我们把代码变成了上面这样，其中比较关键的变化就是，下面这段代码
隐藏内容
很多人会说，看不懂啊，到底啥意思？那么我来给大家解释一下
$categories = get_the_category();: 这行代码通过 get_the_category() 函数获取当前文章所属的所有分类，并将其存储在 $categories 变量中。
$first_category_name = '';: 在这里初始化了一个变量 $first_category_name，用来存储当前文章的一级分类名称，默认为空字符串。
$first_category_link = '';: 类似地，这里初始化了一个变量 $first_category_link，用来存储当前文章的一级分类链接，默认为空字符串。
if ($categories) { ... }: 这个条件判断确保当前文章有分类信息。如果当前文章有分类信息，则执行后续操作。
$first_category = $categories[0];: 将当前文章的第一个分类（即一级分类）赋值给 $first_category 变量。
$first_category_name = $first_category->name;: 从 $first_category 中获取一级分类的名称，并将其存储在 $first_category_name 变量中。
$first_category_link = get_category_link($first_category);: 使用 get_category_link() 函数获取一级分类的链接，并将其存储在 $first_category_link 变量中。
最后下面这段代码就好理解咯，设置变量名$_yjfl
$_yjfl = '<a class="item-category" href="' . esc_url($first_category_link) . '">' . $first_category_name . '</a>';
最后附上相关CSS代码
.item-category {
position: absolute;
left: 10px;
top: 10px;
border-radius: 2px;
background: rgba(0, 0, 0, .6);
padding: 4px 8px;
font-size: 12px;
line-height: 14px;
color: #fff;
}
.item-category:hover {
background: var(--focus-color);
color: #fff;
}在完成上面代码的修改后，我们需要将置顶图标按钮调整位置，我们可以加入到文章列表的标题前面
那么我们通过代码文本编辑器在zib-posts-list.php文件里搜索置顶，这个时候会自动显示具体位置，那么我们将他进行删除，具体的置顶代码如下
$sticky = is_sticky() ? '<div class="sticky-post">置顶</div>' : ''; $get_permalink = get_permalink(); $_post_target_blank = _post_target_blank(); $title = get_the_title() . get_the_subtitle(true, 'focus-color');
然后在zib-posts-list.php文件找到function zib_get_posts_list_title($class = 'item-heading')这段函数（具体在436行）
我们将这段函数进行修改为下面代码
//获取文章列表的标题
function zib_get_posts_list_title($class = 'item-heading')
{
$sticky = is_sticky() ? '<span class="sticky-post">置顶</span>' : '';
$get_permalink = get_permalink();
$_post_target_blank = _post_target_blank();
$title = get_the_title() . get_the_subtitle(true, 'focus-color');
$html = '<h2 class="' . $class . '"><a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $sticky . $title . '</a></h2>';
return $html;
}相关的CSS代码：
.sticky-post{
display: inline-block;
padding: 0 5px;
margin-top: 3px;
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #fff;
background: var(--theme-color);
border-radius: 2px;
vertical-align: top;
margin-right: 10px;
}好了可以看效果了
发表评论