WordPress主题将文章列表修改为图文样式

穆小七 • 2015-05-18 15:13 • 经验知识 • 阅读 632

今天和大家分享WordPress主题修改文章列表为图文样式的方法。下面的方法通用于任何WordPress主题，修改方法很简单，但是记得修改主题文件前一定要备份哦。

效果：自动获取文章的第一张图片，并按固定大小显示，文章没有图片时，显示默认图片；自动截取一定字数的内容作为摘要显示。第一篇文章为默认效果，第二篇文章为鼠标置顶效果。

图文样式修改方法：

1.主题的functions.php文件中，添加下面的代码，主要作用是获取文章第一张图片

　　/* 获取缩略图 cmhello.com */

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('//i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){

$first_img = bloginfo('template_url'). '/img/default-thumb.jpg';

}

return $first_img;

}

;

注意：上面的代码中的/img/default-thumb.jpg ，是你默认图片所在的路径及文件名，当你的文章没有图片时，就会自动调用这张图片。

2.在主题的style.css文件中添加CSS样式，可以根据自己的需要修改样式

　　/* 文章列表 cmhello.com*/

.articlelist {display:block;width:648px;height:170px;float:left;margin-bottom:8px;

border:1px solid #09C;-webkit-box-shadow:0 0 5px #09C; -moz-box-shadow:0 0px 5px #09C;

}

.articlelist:hover,

.articlelist:active { background:#FFFF99; border:1px solid #FFCC00;-webkit-box-shadow:0 0 5px #FFCC00; -moz-box-shadow:0 0px 5px #FFCC00;}

.articlelist h3 {width:648px;height:24px;font-size:13px;line-height:24px;

border-bottom: 1px dotted #09C;}

.articlelist h3:hover {border-bottom: 1px dotted #FFCC00;}

.articlelist h3 a {text-decoration:none;color:#BF400F;}

.articlelist h3 p {font-weight:normal;}

.title {float:left;margin-left:5px;}

.title a {text-decoration:none;color:#BF400F;font-weight:bold;}

.time {float:right;color:#BF400F;margin-right:5px;}

.articlelist img {width:160px;height:125px;float:left;background:#fff;padding:1px;

margin:8px 8px 0 8px;border:1px solid #E0E0E0;}

.abstract {display:block;float:left;width:450px;font-size:13px;color:#666;

line-height:20px;padding:5px;margin:5px 0 0 5px;}

.abstract a{float:right;color:#FFFFFF;margin-right:5px;background:#09C;padding:2px;}

.abstract a:hover{text-decoration:none;background:#BF400F;}

3.在需要显示文章列表的地方(比如archive.php,search.php等)，使用下面的列表调用代码，替换你原来的对应代码

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<span class="articlelist">
<h3>
<p class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
<p class="time"> <?php if(function_exists('the_views')) { the_views(); } ?> | <?php the_time('Y年m月j日'); ?></p>
</h3>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /></a>
<p class="abstract"><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 310,"..."); ?><a href="<?php the_permalink(); ?>" rel="nofollow">阅读全文 </a></p>
</span>
<?php endwhile; ?>
<?php else : ?>
<h3>什么也找不到！</h3>
<p>抱歉,你要找的文章不在这里.</p>
<?php endif; ?>

本作品（图文、音视频）由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系 yu.jianchun@qq.com

WordPress主题将文章列表修改为图文样式

相关推荐