TIAN

WordPress首页显示大图及多媒体

折腾2016年04月23日

为了让不同类型的文章在首页文章列表里有更丰富的表现，昨天又对首页做了一些改动。

例如我希望分享音乐类型的文章，能直接在文章列表就显示播放器，而不用点击标题到文章内页去播放。再者如果一些摄影照片之类的文章，文字可能比较少，那么用缩略图+摘要的形式就不太合适，显得很空洞，直接在文章列表里显示大图的体验可能会更棒。

本文主要是记录操作的一些想法和实现过程，所以会比较罗嗦，算不上教程，依然是在MUFENG的Arbitrary主题上做修改，其他主题可参照我的思路举一反三。

代码现状

打开index.php，检查现在的文章列表循环部分

<div class=”post-body”>

<?php if($has_thumbnail) :?>
<div class=”post-thumbnail”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?=$thumbnail[“src”];?>” alt=”<?php the_title();?>” /></a></div>
<div class=”post-content”>
<?php echo “<p>” . mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 420,”…”). “</p>”;?>
</div>
<?php else :?>
<div class=”post-content”>
<?php echo “<p>” . mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 500,”…”). “</p>”;?>
</div>
<?php endif;?>
</div>

这一段判断文章是否有缩略图（特色图像），有缩略图则输出缩略图以及文章摘要，没有缩略图则直接输出文章摘要。高亮部分代码即为输出摘要的代码，这段摘要代码是输出文章的前部分为摘要，可以定义具体字数，修改里面的420、500处数字即可。

思考

目前的摘要代码只能输出文字，如果要显示图像和其他内容是无法实现的，我想要的效果是在有缩略图的情况下，显示缩略图加摘要，无缩略图则显示原文内容。

则第一部分修改代码如下：

 <div class=”post-body”>
<?php if($has_thumbnail) :?>
<div class=”post-thumbnail”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?=$thumbnail[“src”];?>” alt=”<?php the_title();?>” /></a></div>
<div class=”post-content”>
<?php echo “<p>” . mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 420,”…”). “</p>”;?>
</div>
<?php else :?>
<div class=”post-content”>
<?php the_content(”); ?>
</div>
<?php endif;?>
</div>

这样，在没有缩略图的情况下，首页就会展示文章的原文内容，包括图片或其他多媒体播放器等。当然有的文章内容会比较长，不适合全部显示在文章列表，这里只需在文章里加入“More”标签截断即可。

问题来了

修改完成后发现，如果是不含图片的文章，首页会按照我的预期展示相应的内容，但是文章包含图片的话，会自动抓取文章里的第一张图作为缩略图，这对于我的完美预期是个bug。幸亏度娘跟我讲了一下缩略图的生成原理，原来Arbitrary使用的是一种叫做timthumb的php程序来处理缩略图的，之前修改缩略图尺寸的时候记得是在functions里有一段关于缩略图的控制代码，于是去翻腾functions，找到如下代码：

// Post thumbnail
add_theme_support( ‘post-thumbnails’ );
function mfthemes_thumbnail($width=155, $height=115){
global $post;
$title = $post->post_title;
if( has_post_thumbnail() ){
$timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),’full’);
$src = $timthumb_src[0];
return array(
“hasThumbnail” => true,
“src” => TPLDIR . “/timthumb.php&#63;src={$src}&#38;w={$width}&#38;h={$height}&#38;zc=1&#38;q=100”
);
}else{
ob_start();
ob_end_clean();
$output = preg_match_all(‘/\<img.+?src=”(.+?)”.*?\/>/is’,$post->post_content,$matches ,PREG_SET_ORDER);
$cnt = count( $matches );
if($cnt>0){
$src = $matches[0][1];
return array(
“hasThumbnail” => true,
“src” => TPLDIR . “/timthumb.php&#63;src={$src}&#38;w={$width}&#38;h={$height}&#38;zc=1&#38;q=100”
);
}
}
return array(
“hasThumbnail” => false,
“src” => null
);
}

依然是一段判断句（小白不懂php哈，只知道英文if和else，只能理解到这里），高亮部分即为判断如果文章无缩略图则调取文章第一张图裁剪为缩略图。

小心翼翼的删除了上述部分代码，保存、上传、刷新、成功！

 

注意：本文代码部分没有特殊处理，直接复制有可能被转义为中文字符导致出错。

wordpress