梓悦生活

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

首页文章显示缩略图方法

2016/03/24 3735点热度 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

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

点赞
< 上一篇
下一篇 >
最新 热点 随机
最新 热点 随机
利用DNSPod实现动态域名解析DDNS 如何在Win11/10上启用或禁用Windows Installer服务 在VPS上使用X-ui搭建节点教程 WARP使用教程:入门篇 Cloudflare WARP 一键安装脚本 使用教程 谷歌将替换Chrome 117版本中的挂锁图标
一键网络重装系统 – 魔改版(适用于Linux / Windows)Cloudflare WARP 一键安装脚本 使用教程Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙[云监控探针]支持节点管理和监控的ServerStatusVultr 推出免费云主机,用于鼓励全球创新HostPanel开源免费主机管理面板
V2安装管理一键脚本 Snapphq免费ASP.NET空间申请使用-支持MS SQL和FTP可绑域名 康美之恋 wordpress特色图像功能 常用正则表达式大全 AgilityHoster提供1GB稳定可绑米免费PHP空间
最近评论
Meteor 发布于 1 周前(06月01日) 你的mysql版本看一下,我记得之前开发大佬在群里说过这个问题,5.6版本还是5.7版本来着。 我...
ldsj007 发布于 2 周前(05月25日) 老大,数据库连不上,是不是最新版必须用docker数据库了?
Meteor 发布于 3 个月前(03月09日) 是的,要求的配置也要高很多,不一定所有服务器都适用
夏日博客 发布于 3 个月前(03月04日) 高版本的win系统越来越不好装了。
侠客书 发布于 6 个月前(11月29日) 具体改了些什么?
标签聚合
Linux Linux技巧 域名解析 VPS 虚拟主机 技巧 wordpress 活动
友情链接
  • Anders Norén
  • Appurse
  • CSS参考手册
  • DeeTeam-迪提姆
  • Fatesinger
  • FreeSSL
  • gandi
  • Internetbs
  • Kevan's Blog
  • LogoMaker

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

Theme Kratos Made By Seaton Jiang