大前端D4主题文章摘要旁边图片显示优化

最近玩WORDPRESS主题，大前端的D4主题，博客的首页和分类目录页不是D4主题默认的只显示图片，标题等栏目，而是额外添加了摘要内容，这样使得整个网页显得更加丰满，而且在一定程度上，减少了图片的显示数量，加快了网页打开速度。

D4主题默认的图片的显示机制是：当文章内有图片的时候自动调用文章内的图片，当没有图片的时候就调用img文件下的thumbnail.jpg文件。对于绝大多数文章都插入图片的站长同学来说，这个显示机制还是可以接受的，不过还有一些站长同学写文章不习惯插图，这就造成了首页图片的单调性，从而影响到用户体验。文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

下面我介绍另一种图片显示机制：当文章内有图片的时候依然自动调用文章内的图片，但当没有图片的时候就随机调用img/ random/文件夹下的已经放好的20张很漂亮的图片之一。我把D4主题的调用缩略图的代码稍微做了一下修改和优化，轻松实现想要的效果。代码如下：文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

//缩略图获取文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

function dm_the_thumbnail() {文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

global $post;文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

if ( has_post_thumbnail() ) {文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

echo '<a href="'.get_permalink().'" class="pic">';文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

$domsxe = simplexml_load_string(get_the_post_thumbnail());文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

$thumbnailsrc = $domsxe->attributes()->src;文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';文章源自陈学虎-https://chenxuehu.com/article/2012/05/768.html

echo '</a>';

} else {

$content = $post->post_content;

preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);

$n = count($strResult[1]);

$random = mt_rand(1, 20);

if($n > 0){

echo '<a href="'.get_permalink().'" class="pic"><img src="'.$strResult[1][0].'" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';

}else {

echo '<a href="'.get_permalink().'" class="pic"><img src="'.get_bloginfo('template_url').'/img/random/tb'.$random.'.jpg" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';

}

}

}

用这段代码覆盖掉在D4主题的function-opt.php中原来的那个即可，如果要在其他主题用的话，还需要加上以下代码：

add_theme_support('post-thumbnails');

set_post_thumbnail_size(140, 98, true);

注意事项：

1. 需要手动在img文件夹里建立random文件夹，然后在其中放入20个大小为140*98像素的图片，命名格式为：tb1.jpg,tb2.jpg……tb20.jpg。素材自己找吧，网上好看的图片有很多。
2. 百度比较喜欢带alt信息的图片，所以在以上代码中，我特意加上了图片alt信息自动调用文章标题的代码。
3. 需要在哪显示图片，就在哪调用函数<?php dm_the_thumbnail(); ?>即可，具体的css代码俺就不往上弄了，D4的架构很非主流了已经。

本文转自：http://www.dreamxyt.net/524.html | 梦想象牙塔