wordpress文章缩略图设置详解

本文将详细的讲解wordpress如何无插件实现首页缩略图，相关文章缩略图，热门文章缩略图及随机文章缩略图。wordpress获取缩略图最常见两种方式，一获取特色图片作为缩略图，二获取文中第一张图片作为缩略图。本文以此为契机扩展整理缩略图各类应用。以下代码均在本地做过测试。

编辑模版函数首先我们需要将两个函数添加到functions.php以获得文章缩略图，将以下代码复制到functions.php中。

//获取文章特色图片
function PostThumbURL() {
    global $post, $posts;
    $thumbnail = '';
    ob_start();the_post_thumbnail();$toparse=ob_get_contents();ob_end_clean();
    preg_match_all('/src=("[^"]*")/i', $toparse, $img_src); $thumbnail = str_replace("\"", "", $img_src[1][0]);
    return $thumbnail;
}
//获取文章首张图片
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)){ //设置默认图片，在文中没有图片是显示
        $first_img = "/wp-content/themes/wii/assets/images/placeholder.jpg";
  }
  return $first_img;
}

说明：

函数PostThumbURL()：获取文章特色图片作为缩略图，需要主题支持特色图片，如果你的主题不支持特色图片，将以下代码添加到functions.php

add_theme_support( 'post-thumbnails' );

缩略图引用代码

如果你是要设置首页缩略图的话，只需将下列代码添加到index.php合适的位置。别忘了给图片加上width和height定义大小。

<!-- 如果文章有特色图片 -->
<?php if (has_post_thumbnail()){?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php echo PostThumbURL(); ?>" alt="<?php the_title(); ?>" />
</a>
<!-- 如果文章没有特色图片则获取首张图片-->
<?php }else if (catch_that_image()) {?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />
</a>
<?php } ?>

说明：首先获取文章特色图片，没有特色图片，获取文章首张图片，文中没有图片则指定图片。

相关文章缩略图

在下列代码说明的位置添加上缩略图引用代码，然后将代码复制粘贴到single.php，便可实现相关文章缩略图。不过别忘了给缩略图加上样式，这个以后再说。

<div class=”thumbnails”>
<ul>
<?php
foreach(get_the_category() as $category){
$cat = $category->cat_ID;
}
query_posts(‘cat=’ . $cat . ‘&orderby=rand&showposts=5’);//控制相关文章排序为随机，显示5篇相关文章
while (have_posts()) : the_post();
?>
<li>
/*缩略图引用代码*/
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>

热门文章缩略图

热门文章缩略图需要wp-postviews插件支持，没有的请先安装此插件。同样在下列代码说明的位置添加上缩略图引用代码，然后将代码复制粘贴到single.php或index.php，便可实现热门文章缩略图。关于样式以后再说。

<div class=”thumbnails”>
<ul>
<?php
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$args = array(
‘meta_key’ => ‘views’,
‘orderby’ => ‘meta_value_num’,
‘paged’ => $paged,
‘order’ => DESC,
‘showposts’ => 5//显示5片文章
);
query_posts($args);
while (have_posts()) : the_post();
?>
<li>
/*缩略图引用代码*/
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>

随机文章缩略图

在下列代码说明的位置添加上缩略图引用代码，然后将代码复制粘贴到single.php或index.php，便可实现随机文章缩略图。关于样式马上就说。

<div class=”thumbnails”>
<ul>
<?php
//define number (in this case five posts) of random post
$args = array( ‘numberposts’ => 5, ‘orderby’ => ‘rand’ );
$rand_posts = get_posts( $args );
?>
<?php foreach( $rand_posts as $post ) : ?>
<li>
/*缩略图引用代码*/
</li>
<?php endforeach; ?>
</ul>
</div>

文章缩略图样式

方格样式

.thumbnails li {background-color:rgba(255,255,255,0.8);margin:0 0 5px 5px;}
.thumbnails li,.thumbnails li a,.thumbnails li span {float:left;height:60px;overflow:hidden;width:60px;}
.thumbnails li a:hover {-moz-opacity:.5;filter:alpha(opacity=50);opacity:.5;}

横字排开

.thumbnails {height: 140px; margin: 20px auto; }
.thumbnails a {text-decoration: none;font-size:12px;}
.thumbnails h3 {margin-bottom: 10px;font-weight: bolder; font-size: 12px;}
.thumbnails ul {list-style: none; margin: 0 auto;padding: 0px 3px; }
.thumbnails li {float: left; padding:6px;margin:0 9px;}
.thumbnails ul li img {width: 100px;height: 75px; overflow:hidden;padding: 2px; border: 1px solid #CCC; }
.thumbnails ul li img:hover {border: 1px solid #B3CA4B; }

随机缩略图展示

修改主题模版函数

//随机缩略图
function catch_first_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$random = mt_rand(1, 20);
echo get_bloginfo ( ‘stylesheet_directory’ );
echo ‘/images/random/’.$random.’.jpg’;
}
return $first_img;
}

在主题图片文件夹images下新建random文件夹，上传命名为1，2，3，直到20的jpg图片。

说明：此段代码实现获取文章中第一张图片，在文章中没有图片的情况下，随机展现指定目录下的20张图片。

指定分类下的文章缩略图

在主题需要展现的地方添加，例如侧边栏

<h4 class=”widgetTitle”>电子书</h4>
<div class=”ebooks”>
<ul>
<?php
query_posts(‘cat=38&orderby=rand&showposts=6’); //排序为随机，显示5篇指定分类文章
while (have_posts()) : the_post();
?>
<li>
<!– 如果文章有特色图片 –>
<?php if (has_post_thumbnail()){?>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>
<img src=”<?php echo PostThumbURL(); ?>” alt=”<?php the_title(); ?>” width=”86px” height=”86″ />
</a>
<!– 如果文章没有特色图片则获取首张图片–>
<?php } else if (catch_that_image()) {?>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>
<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” width=”86px” height=”86″ />
</a>
<?php } ?>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>

Wordpress

版权声明：本文内容以盗版加工为主，原创为辅，意在分享，收藏，记录工作中的点点滴滴。不代表任何组织，不代表任何商业机构，也不代表我个人所有想法。
心晴客栈 » wordpress文章缩略图设置详解

分享到：

5 评论

普通爱你的博客
2013/05/16 at 22:56 回复
感激不尽！！！
普通爱你的博客
2013/05/16 at 23:04 回复
关键是获取文章首张图片代码中的 $output = preg_match_all(‘//i’, $post->post_content, $matches);
与别的网站的$output = preg_match_all(‘//i’, $post->post_content, $matches);不一样获取路径不一样吧！
能解答吗
普通菜贩儿
2014/01/13 at 17:34 回复
你好，分享出来了，总要给我复制啊，要不然我怎么弄啊，我是菜鸟一只，请指点
1. 普通 Nate
  2014/01/13 at 19:16 回复
  直接“ctrl+s”吧，网站生成静态页面了，改起来太麻烦，不好意思
普通爱客
2017/02/22 at 14:43 回复
我这边主题首页的缩略图是从中间显示的我想让他从头开始显示怎么改呢

相关推荐

5 评论

发表回复 取消回复

发表回复取消回复