梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. Wordpress
  3. 正文

首页文章显示缩略图方法

2016/03/24 4983点热度 0人点赞 4条评论

如今wordpress主题极力提倡简洁,但是我认为这个简洁也应该有个度,太过简洁,那就不叫简洁了,该叫单调了,试想,当一个用户无意间点开你的网站,发现你的网站只有黑灰白三色,除非你的内容十分经典,否则,用户对你的网站绝对不会有好的感觉,今天我从自己的现用主题里面把这个显示缩略图的功能提取出来,分享给大家!再次感谢作者weisay!
首先贴出所需的css代码,放到你的主题文件style.css里面,要显示的图片的大小可以通过下面的width和height设置:

.thumbnail_box {

float:left;

width:140px;

height:100px;

margin:17px10px8px15px;_margin:17px10px8px7px;

padding:4px;

border:1pxsolid#ccc;}

.thumbnail img{

position:absolute;

z-index:3;}

显示缩略图有两种方式:
第一种:随机显示一张图片,这个需要在images文件夹下新建一个文件夹random,里面的图片最好事先处理好大小,名称统一为:tb+数字,如tb1.jpg,tb2.jpg…不要问偶为什么,程序就这么写的,实在懒得改,怕改错!
代码如下,添加到主题文件index.php里面:

<divclass=”thumbnail_box”>

<divclass=”thumbnail”>

<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>

<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpelse: ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/random/tb<?php echo rand(1,20)?>.jpg”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpendif; ?>

</div></div>

第二种:先从文章中读取图片作为缩略图,如果文章中没有缩略图,再使用上一种方法里面建立的random文件夹里面的图片!
分两步:首先往主题文件functions.php添加如下代码:

if( function_exists(‘add_theme_support’) )

add_theme_support(‘post-thumbnails’);

functioncatch_first_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(emptyempty($first_img)){

$random= mt_rand(1, 20);

echoget_bloginfo ( ‘stylesheet_directory’ );

echo’/images/random/tb’.$random.’.jpg’;

}

return$first_img;

}

然后在往主题文件index.php里面添加如下代码:

<divclass=”thumbnail_box”>

<divclass=”thumbnail”>

<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>

<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>

<?phpelse: ?>

<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”>

<?phpif(has_post_thumbnail()) { the_post_thumbnail(‘thumbnail’); }

else{ ?>

<imgclass=”home-thumb”src=”<?php echo catch_first_image() ?>”width=”140px”height=”100px”alt=”<?php the_title(); ?>”/>

<?php } ?>

</a>

<?phpendif; ?>

</div></div>

没了。
注意事项:
1.调用缩略图的代码要放在和文章摘要同一级的层了,然后编辑比这一级层更高级的层属性css代码要添加这样一句话:float:right;   当然如果你添加完代码显示一切正常,可以略去这一步。
2.与这个一起的还有首页文章实现摘要的方法,用得到的可以去拿去:

只需把如下代码插入到主题文件目录下的index.php找到<?php the_content(); ?>,将其替换为:

<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 365,“…”); ?><span class=“more”><a href=“<?php the_permalink() ?>” title=“详细阅读 <?php the_title(); ?>” rel=“bookmark”>阅读全文</a></span>

标签: wordpress
最后更新:2016/09/27

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >
最新 热点 随机
最新 热点 随机
[教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例 使用VestaCP搭建邮局(含DKIM,DMARC教程) [教程]利用宝塔面板邮局管理器搭建Roundcube Webmail自建邮局 [测评]喵云互联绍兴电信NAT套餐1测评 iperf3 网络性能测试 [收藏]13 个免费 PPT 模板网站汇总
[测评]喵云互联绍兴电信NAT套餐1测评[教程]利用宝塔面板邮局管理器搭建Roundcube Webmail自建邮局iperf3 网络性能测试使用VestaCP搭建邮局(含DKIM,DMARC教程)[教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例
wordpress远程图片文件自动本地化 让pre标签的代码块自动换行 日本高速云服务Phpapps免费1GB空间支持FTP可绑域名 AgilityHoster提供1GB稳定可绑米免费PHP空间 CentOS 6 卷组挂载硬盘教程 五种去掉免费空间广告的方法:JS,PHP,CSS安全去掉广告法
最近评论
b2b系统 发布于 1 年前(12月29日) 感谢分享
Meteor 发布于 2 年前(10月20日) 哈哈,友链一直都在,后来换了主题后忘记修改显示数量了,现在恢复好了。
弋牧 发布于 2 年前(10月12日) 这里已经看不到我的友连了吗?
彩鸽 发布于 2 年前(10月04日) 写的不错
B2B海外商城系统 发布于 2 年前(09月21日) 感谢分享
标签聚合
wordpress 域名解析 技巧 Linux技巧 VPS 活动 宝塔 虚拟主机
友情链接
  • Anders Norén
  • Appurse
  • CSS参考手册
  • DeeTeam-迪提姆
  • Fatesinger
  • FreeSSL
  • gandi
  • Internetbs
  • LogoMaker
  • Meteor's Blog
  • PM唐杰
  • SSL For Free
  • WPEX-Themes
  • 优品PPT
  • 免费顶级域名
  • 博客大全
  • 印记
  • 弋牧
  • 挖站否
  • 闫宝龙博客

COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang