* 文章内容很有用，那就5星好评吧!😘
大家好，我是飞小优，最近有客户的文章列表像非常简单，要求重新改造一下，今天就跟大家来介绍下如何将简单的文章列表项改造成下载列表项，废话不多说，具体看下方教程：
未改造前的前端
改造后的前端
具体实操步骤
先找到这个循环模板，一般在主题中loop-xxx.php，自己在原生主题下找一下，找到后的源码为：
<li class="item">
<a href="<?php echo esc_url( get_permalink() );?>"<?php echo funion_post_target();?> rel="bookmark">
<span><?php the_title();?></span>
</a>
<span class="date"><?php the_time(get_option('date_format'));?></span>
</li>重上述代码来看，这是非常简单的结构，标题超链接和文章日期,就两个区块内容代码，为实现改造后的效果则需要进一步重构代码，由于本身从前端需求来看，就只需要增加缩略图+下载按钮，将时间代码块做一定的顺序调整，因此我们就不需要采用自定义文章页面方案实现，我们之际在源码基础上进行扩展啊即可，以下是扩展后的代码：
<?php
//针对特定分类采用该样式
$categories = wp_get_post_categories(get_the_ID());
$special_categories = array(4);
$is_special_category = count(array_intersect($categories, $special_categories)) > 0;
?>
<?php if ($is_special_category) : ?>
<li class="special-category-item">
<div class="special-category-container">
<?php if (has_post_thumbnail()) : ?>
<div class="special-category-thumbnail">
<a href="<?php echo esc_url(get_permalink()); ?>"<?php echo funion_post_target(); ?> rel="bookmark">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<?php endif; ?>
<div class="special-category-content">
<a href="<?php echo esc_url(get_permalink()); ?>"<?php echo funion_post_target(); ?> class="special-category-title" rel="bookmark">
<span><?php the_title(); ?></span>
</a>
<div class="special-category-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="special-category-actions">
<?php if (is_user_logged_in()) : ?>
<a href="<?php echo esc_url(get_permalink()); ?>" class="special-category-download-btn" title="下载内容">我要下载</a>
<?php else : ?>
<a href="<?php echo esc_url(wp_registration_url()); ?>" class="special-category-download-btn" title="请先注册">我要下载</a>
<?php endif; ?>
<span class="special-category-date"><?php the_time(get_option('date_format')); ?></span>
</div>
</div>
</div>
</li>
<?php else : ?>
<li class="item">
<a href="<?php echo esc_url(get_permalink()); ?>"<?php echo funion_post_target(); ?> rel="bookmark">
<span><?php the_title(); ?></span>
</a>
<span class="date"><?php the_time(get_option('date_format')); ?></span>
</li>
<?php endif; ?>
<style type="text/css">
.special-category-item {
all: initial;
display: block;
padding: 15px;
border-bottom: 1px solid #eee;
border-radius: 4px;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.special-category-container {
all: initial;
display: flex;
margin-top: 10px;
gap: 15px;
width: 100%;
}
.special-category-thumbnail {
all: initial;
flex: 0 0 120px;
}
.special-category-thumbnail a {
all: initial;
display: block;
width: 100%;
height: 100%;
}
.special-category-thumbnail img {
all: initial;
display: block;
width: 100%;
height: auto;
border-radius: 3px;
cursor: pointer;
max-width: 100%;
transition: opacity 0.2s ease;
}
.special-category-thumbnail:hover img {
opacity: 0.9;
}
.special-category-content {
all: initial;
flex: 1;
display: flex;
flex-direction: column;
}
.special-category-title {
all: initial;
font-size: 1.1em;
font-weight: bold;
color: #333;
text-decoration: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.special-category-title:hover {
color: var(--theme-color);
}
.special-category-excerpt {
all: initial;
font-size: 0.8em;
color: #666;
line-height: 1.5;
margin: 10px 0 10px 0;
opacity: 0.8;
}
.special-category-actions {
all: initial;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 10px;
}
.special-category-download-btn {
all: initial;
display: inline-block;
padding: 5px 12px;
background: #f0f0f0;
color: #555;
text-decoration: none;
border-radius: 3px;
font-size: 0.85em;
transition: all 0.2s;
cursor: pointer;
order: 1;
}
.special-category-date {
all: initial;
font-size: 0.85em;
color: #999;
order: 2;
}
.special-category-download-btn:hover {
background: #333;
}
</style>最后直接替换原来的loop-list.php文件中即可，整体上就解决了从简约列表项到新的扩展列表项需求，赶快试试吧，更多外贸建站请联系我们！
