zoukankan      html  css  js  c++  java
  • 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。累死老汉,技术文章,大家多多支持。

  • 相关阅读:
    在 centos 下禁止 root 通过 ssh 远程登录
    在 sql server 中开启审核日志
    设置 centos 系统,使用终端连接的空闲等待时间(超时断开)
    谷歌地图文字渲染原理
    WebGL 水波及焦散(刻蚀)的渲染总结
    【Mybatis】获取sql
    git如何查看最新的远程分支
    绑定点击事件,当点击事件里依赖异步返回结果则阻止冒泡失效
    一个非常好用的生成目录树的npm包
    Spring Boot入门系列(二十一)如何优雅的设计 Restful API 接口版本号,实现 API 版本控制!
  • 原文地址:https://www.cnblogs.com/meetrice/p/2733303.html
Copyright © 2011-2022 走看看