收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

wordpress日志缩略图功能深度分解

2012-06-19 16:10 来源: 卓杰科技 www.zhuojie.cc [ ]

<?php else : ?>

对于一个有深度有内在的网站而言,出色的内容永远都是要放在第一位的,但这并不意味着我们可以轻忽网站的外不美观设计,设想一下网站上处处都是年夜段的纯文字,那么即使字字玑珠,也会引起读者的视觉委靡。在这样一种情境下,为wordpress的日志正文搭配相关的插图、网站首页搭配日志缩略图就变得十分需要。

为了使上述代码能够流利的运行,还有几件工作需要做;

第二件工作是为了实现状取正文中第一张图片做缩略图的功能,需要在当前主题的function文件中添加如下函数:

function catch_that_image(){

日志正文搭配插图,这个没有什么技巧,直接经由过程wordpress的媒体库添加图片到编纂区就可以,是以本文将重点放在分解日志缩略图的设置体例上,接下来的内容,我会给巨匠将今朝设置缩略图的各类体例一一进行梳理,并整合成一个多条理的判定语句。

下面我经由过水平层前提判定语句的体例,将上述四种缩略图挪用体例整合到一路,并设置成四个挨次执行的环节,只有当膳缦沔的前提不知足的时辰,才会顺次对下面的前提进行判定,并执行响应的语句。(详见下图)

首先给巨匠展示一下,今朝设置缩略图的四种体例(详见下图),我按照自己的理解将其枚举成如下挨次,而且在图中列出了各类实现缩略图的体例的图片来历,经由过程自界说字段可根柢用外链图片,尔后面庞种体例仅能使用当地图片。

over。累死老汉,手艺文章,巨匠多多撑持。

缩略图实现流程

下面就到了见证事业的时刻,请看缩略图实现代码。

<div class="thumbnail"><a href="http://www.zhuojie.cc/?/web/2012/0619/<?php the_permalink(); ?>" title="<?php the_title(); ?>" ><?php if ( get_post_meta($post->ID, 'image', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'image', true); ?>
<img width="225px" height="136px" src="/userfiles/Auto/20121226" alt="<?php the_title(); ?>"/>
<?php elseif( has_post_thumbnail() ): ?>
<?php elseif(catch_that_image()) : ?>
<img src="/userfiles/Auto/20121226" width="225" height="136" alt="<?php the_title(); ?>" />
<?php endif;?></a></div>

<img src="/userfiles/Auto/20121226" width="225" height="136" alt="<?php the_title(); ?>"/>

上述代滤鱿脯设定的自界说字段的名字是image,如不美观你但愿经由过程外链图片作为缩略图,请在编纂文章的时辰添加一个名字为image的自界说字段,字段值为外链图片的链接即可。此外需要提请注重的是,本文设置的缩略图巨细为(225,136),你可以经由过程改削代码中的响应数字肆意调整缩略图巨细,以便更好的顺应你的主题结构。

wordpress缩略图


      $first_img = '';

第一件工作是确保当前所用wordpress主题撑持特色图像功能,查看一下主题的function文件中是否有add_theme_support('post-thumbnails')这一语句,没有的话请添加上;


      }
      global $post, $posts;
      ob_start();
<?php the_post_thumbnail(array( 225, 136 ), array('alt' => '<?php the_title(); ?>','title'=>trim(strip_tags( $attachment->post_title )) ));?>
      ob_end_clean();
      if(empty($first_img)){ //Defines a default image
      $output = preg_match_all('/<img.+src=http://www.zhuojie.cc/?/web/2012/0619/[/'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
        $first_img ="0";
    };

第三件事是在当前主题文件夹的images文件夹中新建一个名为random的文件夹,在琅缦沔放上若干jpg名目的图片即可,按照图片的数目响应改削rand函数后面的数字即可。


      $first_img = $matches [1] [0];
      return $first_img;

文章来历:http://www.zhuojie.cc/?.html