Tag: 缩略图

1. 激活文章缩略图功能

要激活该功能，打开你主题的functions.php文件，输入下面的代码:

add_theme_support( 'post-thumbnails' );

你也可以添加一个参数来指定在post还是page激活该功能:

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

2.输出到主题

要在你的主题中显示出设置的图片，你需要在loop里面添加下面这个函数:

<?php the_post_thumbnail(); ?>

你可以给该函数传递一个参数值来调用图片的不同尺寸，

the_post_thumbnail(); // 默认显示缩略图
the_post_thumbnail('thumbnail'); // 显示缩略图
the_post_thumbnail('medium'); // 显示中等尺寸
the_post_thumbnail('large'); // 显示大尺寸
the_post_thumbnail( array(100,100) ); // 自定义尺寸图

3. 在loop外调用某篇文章的文章缩略

如果你想在loop以外调用某些文章的缩略图，另一个函数为你准备:

<?php echo get_the_post_thumbnail(); ?>

和the_post_thumbnail()相比，它需要再传入一个参数来指定文章的ID:

get_the_post_thumbnail($id);
get_the_post_thumbnail($id, 'thumbnail');
get_the_post_thumbnail($id, 'medium');
get_the_post_thumbnail($id, 'large');
get_the_post_thumbnail($id, array(100,100) );

WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统).博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片,通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图.

2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说,制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150×150 规格的小图 (如果图片高度/宽度不足 150px,使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能(不用每次输入缩略图), 坏处是消耗服务器流量.

Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

<?php
$args = array(
  'post_parent' => $post->ID,
  'post_type' => 'attachment',
  'post_mime_type' => 'image'
);
  
$images = &get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
$imageUrl = '';
  
if ($images) {
  $image = array_pop($images);
  $imageSrc = wp_get_attachment_image_src($image->ID);
  $imageUrl = $imageSrc[0];
}else{
  $imageUrl = get_bloginfo('template_url') . '/img/default.gif';
}
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>

这段代码会去找第一个上传的图片 的缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推…),如果找不到任何上传图片则使用默认图片. 代码中用到 get_children 和 wp_get_attachment_image_src两个方法

然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.

<?php include('thumb.php'); the_content('Read More...'); ?>

下面是实现使用自定义字段来显示日志缩略图的详细步骤：

1. 首先你应该能够上传图片到你的服务器，你可以通过 FTP 工具或者在 WordPress 后台通过其他任何 WordPress 插件上传图片。

2. 在撰写新日志的页面，向下滚动到一个叫做自定义字段（Custom Fields）的地方，点击按钮展开它。

3. 在 Key 字段输入 “image_thumb”，然后在 “Value” 字段输入你刚才上传的图片的 URL。

4. 然后继续你写日志的常规动作，增加标题，输入内容，选择分类，最后发布。

5. 现在打开你当前主题的 index.php 文件，搜索到下面这行：

<?php the_content('Read the rest of this entry &raquo;'); ?>

这上面这行之前添加以下代码：

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php $values = get_post_custom_values("image_thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a>

方法一、

1. 将以下这段代码添加到主题functions.php文件内：

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)){ //Defines a default image
    $first_img = "/images/default.jpg";
   }
  return $first_img;
}

代码解释：post内如果有图片则显示图片，如果没有图片则显示默认图片

2.在loop内调用：

<?php echo catch_that_image() ?>

方法二、

利用一个简单的正则表达式实现，用在CMS主题上，为每一篇文章添加一张缩略图。

<?php
$szPostContent = $post->post_content;
$szSearchPattern = '~<img [^\>]*\ />~'; // 搜索所有符合的图片
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
$iNumberOfPics = count($aPics[0]); // 检查一下至少有一张图片
if ( $iNumberOfPics > 0 ) {
  echo '<div align="center">'.$aPics[0][0].'</div>';
  }
?>

以上这段代码仅显示内容中的第一张图片，如需显示更多，可修改下：

if ( $iNumberOfPics > 0 ) {
  echo '<div align="center">'.$aPics[0][0].'</div>';
};

显示第二张：

echo '<div align="center">'.$aPics[0][1].'</div>';

显示第三张

echo '<div align="center">'.$aPics[0][2].'</div>';

实现的效果是（我想很多人也是想实现这样的效果）:

1.首页每篇文章可设定字数，整齐的截断

2.首页每篇文章显示一张图片，而文章页不显示该图片

为此有如下几个方案（只想看结果的就可以忽略这部分了）:

1.纯用more标签

也就是我以前的做法，这种最简单，但是很难保证首页每篇文章的字数完全一样。而且内容页中也会出现首页的图片。

2.使用mb_strimwidth()函数

这个函数的作用是将一段文字截取一定的物理长度显示，且它最大的优点是会根据”宽度”来截取文字，全角字符宽度为2，半角字符为1，只要我们将截断的宽度设置为偶数，那最后截断输出的内容一定不会有乱码。有些所谓自动截断的插件也是这个原理。

但是，有个问题就是如果截断的位置正好是html标签，那么就会出现问题，比如侧边拦掉到下面去。所以侧边拦的问题有时并不是因为css，而是因为这个。

综上，解决方法是：mb_strimwidth()函数+自定义域

首先，写文章的时候，插入自定义域如下

名称：imgs（自己起的），值：首页显示的图片地址

然后在主题的index.php中放置图片的地方写代码：

<?php if ( get_post_meta($post->ID, 'image', true) ) : ?>
  <?php $image = get_post_meta($post->ID, 'image', true); ?>
  <a href="<?php echo $image; ?>"><img src="<?php echo $image; ?>" /></a>
<?php else: ?>
  <img src="<?php bloginfo('template_directory'); ?>/imgs/title.jpg" />
<?php endif; ?>

其中，title.jpg是放置在主题文件夹下的默认图片，如没有定义图片，就会显示这张。此外，为图片加链接是为了lightbox效果。

然后，把内容部分代码，也就是th_content()或者the_expert()换成如下：

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 140,"......"); ?>

其中140是截断的字符数，strip_tags()是去掉html标签。我也想过用strip_tags()的同时排除img标签的做法，但如果内容中有图片，且刚好截断到该图片的时候同样会出现问题。

当然，为了美观，还要为图片定制样式，比如float和边框。