WordPress日志缩略图功能深度剖析

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 对于一个有深度有内涵的网站而言,精彩的内容永远都是要放在第一位的,但这并不意味着我们可以忽视网站的外观设计,设想一下网站上到处都是大段的纯文字,那么即使字字玑珠,也会引起读者的视觉疲劳。在这样一种情境下,为WordPress的日志正文搭配相关的插图、网站首页搭配日志缩略图就变得十分必要。

对于一个有深度有内涵的网站而言,精彩的内容永远都是要放在第一位的,但这并不意味着我们可以忽视网站的外观设计,设想一下网站上到处都是大段的纯文字,那么即使字字玑珠,也会引起读者的视觉疲劳。在这样一种情境下,为WordPress的日志正文搭配相关的插图、网站首页搭配日志缩略图就变得十分必要。

日志正文搭配插图,这个没有什么技巧,直接通过wordpress的媒体库添加图片到编辑区就可以,因此本文将重点放在剖析日志缩略图的设置方法上,接下来的内容,我会给大家将目前设置缩略图的各种方法逐一进行梳理,并整合成一个多层次的判断语句。

首先给大家展示一下,目前设置缩略图的四种方法(详见下图),我按照自己的理解将其排列成如下顺序,并且在图中列出了各种实现缩略图的方法的图片来源,通过自定义字段可以调用外链图片,而后面三种方法仅能使用本地图片。

wordpress缩略图

下面我通过分层条件判断语句的方式,将上述四种缩略图调用方式整合到一起,并设置成四个顺序执行的环节,只有当上面的条件不满足的时候,才会顺次对下面的条件进行判断,并执行相应的语句。(详见下图)

缩略图实现流程

下面就到了见证奇迹的时刻,请看缩略图实现代码。

<div><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” ><?php if ( get_post_meta($post->ID, ‘image’, true) ) : ?>
<?php $image = get_post_meta($post->ID, ‘image’, true); ?>
<img width=”225px” height=”136px” src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>”/>
<?php elseif( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(array( 225, 136 ), array(‘alt’ => ‘<?php the_title(); ?>’,'title’=>trim(strip_tags( $attachment->post_title )) ));?>
<?php elseif(catch_that_image()) : ?>
<img src=”<?php echo catch_that_image()?>” width=”225″ height=”136″ alt=”<?php the_title(); ?>”/>
<?php else : ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/random/<?php echo rand(1,16)?>.jpg” width=”225″ height=”136″ alt=”<?php the_title(); ?>” />
<?php endif;?></a></div>

上述代码中,设定的自定义字段的名字是image,如果你希望通过外链图片作为缩略图,请在编辑文章的时候添加一个名字为image的自定义字段,字段值为外链图片的链接即可。另外需要提请注意的是,本文设置的缩略图大小为(225,136),你可以通过修改代码中的相应数字任意调整缩略图大小,以便更好的适应你的主题布局。

为了使上述代码能够流畅的运行,还有几件事情需要做;

第一件事情是确保当前所用WordPress主题支持特色图像功能,查看一下主题的function文件中是否有add_theme_support(‘post-thumbnails’)这一语句,没有的话请添加上;

第二件事情是为了实现抓取正文中第一张图片做缩略图的功能,需要在当前主题的function文件中添加如下函数:

function catch_that_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(empty($first_img)){ //Defines a default image
$first_img =”0″;
}
return $first_img;
};

第三件事是在当前主题文件夹的images文件夹中新建一个名为random的文件夹,在里面放上若干jpg格式的图片即可,根据图片的数目相应修改rand函数后面的数字即可。

over。累死老汉,技术文章,大家多多支持。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
3月前
|
Rust 前端开发 JavaScript
Tauri 开发实践 — Tauri 日志记录功能开发
本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录,并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件,可以轻松实现多平台日志记录,包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后,日志记录功能将显著提升开发体验和程序稳定性。
161 1
Tauri 开发实践 — Tauri 日志记录功能开发
|
23天前
|
监控 安全 Linux
启用Linux防火墙日志记录和分析功能
为iptables启用日志记录对于监控进出流量至关重要
|
8月前
|
数据采集 分布式计算 监控
日志服务功能特性
日志服务功能特性
72 7
|
4月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
206 9
|
5月前
|
存储 监控 Serverless
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决
|
5月前
|
监控 Serverless 开发者
函数计算发布功能问题之查看函数的调用日志的问题如何解决
函数计算发布功能问题之查看函数的调用日志的问题如何解决
|
6月前
|
搜索推荐
wordpress网站添加一个临时维护功能
wordpress网站添加一个临时维护功能
58 3
|
6月前
|
Python
Python编程实战:利用闭包与装饰器优化日志记录功能
【7月更文挑战第7天】Python的闭包和装饰器简化了日志记录。通过定义如`log_decorator`的装饰器,可以在不修改原函数代码的情况下添加日志功能。当@log_decorator用于`add(x, y)`函数时,调用时自动记录日志。进一步,`timestamp_log_decorator`展示了如何创建特定功能的装饰器,如添加时间戳。这些技术减少了代码冗余,提高了代码的可维护性。
80 1
|
6月前
|
监控
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
|
7月前
|
PHP SEO
WordPress强大多功能主题模板The7 v9.16.0
The7可以与WPBakery Page Builder(原Visual Composer)和Ultimate Addons的完全无缝集成。它也与大多数流行的插件完全兼容,例如WooCommerce,WPML,Yoast SEO,All in One WP Migration,W3 Total Cache等。大多数用户均表示:The7是迄今为止与这些插件一起使用的最佳主题!
51 2

热门文章

最新文章