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

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

今天和大家分享WordPress主题修改文章列表为图文样式的方法。下面的方法通用于任何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; ?>

您可能对以下内容感兴趣