首页文章显示缩略图方法

如今wordpress主题极力提倡简洁,但是我认为这个简洁也应该有个度,太过简洁,那就不叫简洁了,该叫单调了,试想,当一个用户无意间点开你的网站,发现你的网站只有黑灰白三色,除非你的内容十分经典,否则,用户对你的网站绝对不会有好的感觉,今天我从自己的现用主题里面把这个显示缩略图的功能提取出来,分享给大家!再次感谢作者weisay!
首先贴出所需的css代码,放到你的主题文件style.css里面,要显示的图片的大小可以通过下面的width和height设置:

.thumbnail_box {

float:left;

width:140px;

height:100px;

margin:17px10px8px15px;_margin:17px10px8px7px;

padding:4px;

border:1pxsolid#ccc;}

.thumbnail img{

position:absolute;

z-index:3;}

显示缩略图有两种方式:
第一种:随机显示一张图片,这个需要在images文件夹下新建一个文件夹random,里面的图片最好事先处理好大小,名称统一为:tb+数字,如tb1.jpg,tb2.jpg…不要问偶为什么,程序就这么写的,实在懒得改,怕改错!
代码如下,添加到主题文件index.php里面:

<divclass=”thumbnail_box”>

<divclass=”thumbnail”>

<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>

<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpelse: ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/random/tb<?php echo rand(1,20)?>.jpg”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpendif; ?>

</div></div>

第二种:先从文章中读取图片作为缩略图,如果文章中没有缩略图,再使用上一种方法里面建立的random文件夹里面的图片!
分两步:首先往主题文件functions.php添加如下代码:

if( function_exists(‘add_theme_support’) )

add_theme_support(‘post-thumbnails’);

functioncatch_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(emptyempty($first_img)){

$random= mt_rand(1, 20);

echoget_bloginfo ( ‘stylesheet_directory’ );

echo’/images/random/tb’.$random.’.jpg’;

}

return$first_img;

}

然后在往主题文件index.php里面添加如下代码:

<divclass=”thumbnail_box”>

<divclass=”thumbnail”>

<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>

<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpelse: ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”>

<?phpif(has_post_thumbnail()) { the_post_thumbnail(‘thumbnail’); }

else{ ?>

<imgclass=”home-thumb”src=”<?php echo catch_first_image() ?>”width=”140px”height=”100px”alt=”<?php the_title(); ?>”/>

<?php } ?>

</a>

<?phpendif; ?>

</div></div>

没了。
注意事项:
1.调用缩略图的代码要放在和文章摘要同一级的层了,然后编辑比这一级层更高级的层属性css代码要添加这样一句话:float:right;   当然如果你添加完代码显示一切正常,可以略去这一步。
2.与这个一起的还有首页文章实现摘要的方法,用得到的可以去拿去:

只需把如下代码插入到主题文件目录下的index.php找到<?php the_content(); ?>,将其替换为:

<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 365,“…”); ?><span class=“more”><a href=“<?php the_permalink() ?>” title=“详细阅读 <?php the_title(); ?>” rel=“bookmark”>阅读全文</a></span>

评论 (4)
  1. 沙发
    2873849567 2016/06/03 23:42

    看看您的博客!

  2. 板凳
    灰常记忆 2016/08/16 17:59

    看着挺简单~ 你真的很在行 现在这个主题可以分享?

    • Meteor 2016/08/17 00:39
      @灰常记忆 嘿嘿,你咋知道我这个网站的?这个网站也是随便弄弄,没太在意,主站还是那个。主题当然可以给你哈,我今晚在家上网发你邮箱吧,大概晚上8点左右哈,公司里外网邮箱屏蔽上不去,没法发给你。此主题也是无意中发现的,作者是国外的,我这里有好几个比较好看的国外主题,到时我一并打包给你。我发现国外的主题在写日志的时候就需要设置特色图像,如果没设置,就出不来这个效果,而且感觉国外的主题要想达到演示那种效果,文章摘要都要人为手工分割。用国人的懒人方法,自动截取摘要,根本出不来效果,这只是个人看法哈。
  3. 地板
    尚爱思笑话 2016/08/30 03:42

    感觉很不错的样子!

Top