wordpress文章缩略图设置详解
本文将详细的讲解wordpress如何无插件实现首页缩略图,相关文章缩略图,热门文章缩略图及随机文章缩略图。wordpress获取缩略图最常见两种方式,一获取特色图片作为缩略图,二获取文中第一张图片作为缩略图。本文以此为契机扩展整理缩略图各类应用。 以下代码均在本地做过测试。
//获取文章特色图片 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; }
add_theme_support( 'post-thumbnails' );
<!-- 如果文章有特色图片 --> <?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 } ?>
<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>
<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>
<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;
}
<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>
感激不尽!!!
关键是获取文章首张图片代码中的 $output = preg_match_all(‘//i’, $post->post_content, $matches);
与别的网站的$output = preg_match_all(‘//i’, $post->post_content, $matches);不一样 获取路径不一样吧!
能解答吗
你好,分享出来了,总要给我复制啊,要不然我怎么弄啊,我是菜鸟一只,请指点
直接“ctrl+s”吧,网站生成静态页面了,改起来太麻烦,不好意思
我这边主题首页的缩略图是从中间显示的 我想让他从头开始显示 怎么改呢