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

  • A+
所属分类:前端技术
摘要

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

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

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

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

//缩略图获取

function dm_the_thumbnail() {

global $post;

if ( has_post_thumbnail() ) {

echo '<a href="'.get_permalink().'" class="pic">';

$domsxe = simplexml_load_string(get_the_post_thumbnail());

$thumbnailsrc = $domsxe->attributes()->src;

echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';

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="大前端D4主题文章摘要旁边图片显示优化" 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 | 梦想象牙塔

  • 免费优惠券
  • 免费领取优惠券
  • weinxin
  • 支付宝红包领取
  • 支付宝大额红包
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

关闭震动