wordpress文章缩略图设置详解

建站教程 心晴客栈 7515次浏览 5个评论 扫描二维码

本文将详细的讲解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>

支持博主

心晴客栈 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明wordpress文章缩略图设置详解
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 感激不尽!!!
    爱你的博客2013-05-16 22:56 回复 Windows 7 | Chrome 26.0.1410.64
  2. 关键是获取文章首张图片代码中的 $output = preg_match_all('//i', $post->post_content, $matches); 与别的网站的$output = preg_match_all('//i', $post->post_content, $matches);不一样 获取路径不一样吧!能解答吗
    爱你的博客2013-05-16 23:04 回复 Windows 7 | Chrome 26.0.1410.64
  3. 你好,分享出来了,总要给我复制啊,要不然我怎么弄啊,我是菜鸟一只,请指点
    菜贩儿2014-01-13 17:34 回复 Windows 7 | Chrome 30.0.1599.101
    • 直接“ctrl+s"吧,网站生成静态页面了,改起来太麻烦,不好意思
      Nate2014-01-13 19:16 回复 Windows XP | Chrome 27.0.1453.94
  4. 我这边主题首页的缩略图是从中间显示的 我想让他从头开始显示 怎么改呢
    爱客2017-02-22 14:43 回复 Windows 10 | 搜狗浏览器 2.X