wordpress教程之自带缩略图功能

首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图:

如果没有说明你还没有激活这功能。我们需要在你主题functions.php里面加一段代码。

<?php
add_theme_support( ‘post-thumbnails‘ ); //激活文章和页面的缩略图功能。
//如果你想分别激活它们,可以使用下面的代码:
add_theme_support( ‘post-thumbnails‘, array( ‘post‘ ) ); // 激活文章缩略图功能
add_theme_support( ‘post-thumbnails‘, array( ‘page‘ ) ); // 激活页面缩略图功能
?>

这样你的缩略图功能就激活了,然后我们添加图片或者直接点击设置特色图片的时候,你会发现多了一个设置如图。

我们单击作为特色图像,这样你就可以将这个图片作为特色图片显示了。

做好之后我们就要对它进行调用然后在前台显示出来,代码是:

<?php
the_post_thumbnail();
//需要将这段代码放在你的主循环中比如:
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<?php endwhile; ?>
?>

这样缩略图就可以显示了。这个基本的方法掌握好之后,下面是一些它的其他使用方法。

1.自定义缩略图的大小(放在主题functions.php里面add_theme_support()的下面)

<?php set_post_thumbnail_size( $width, $height, $crop ); ?>

//$width 是图片的宽度,可以直接填数字

//$height 是图片的高度,也可以直接填数字

//$crop 是否进行裁剪,默认是false不裁剪,如果填写true 你的图片将会裁剪成你设置的大小。

不过set_post_thumbnail_size()笔者在用的时候不起作用,不知道大家有没有试过。试过后如果可以使用的记得和笔者说下哈。

我这边使用的是直接规定缩略图大小(直接在主循环里面输出)

<?php
the_post_thumbnail(‘thumbnail‘);       // 缩略图(最大默认 宽150px高150px)
the_post_thumbnail(‘medium‘);          // 中等大小(最大默认 宽300px 高300px)
the_post_thumbnail(‘large‘);           // 大图 (最后默认宽1024px高1024px)
the_post_thumbnail(‘full‘);            // 原图
the_post_thumbnail( array(100,100) );  // 自己定义宽高
?>

这里需要多讲一下,设置默认缩略图大小是在wordpress后台 设置->媒体 里面。

2.判断文章是否含有缩略图

<?php
has_post_thumbnail();
//用法是,通过if如果进行判断
if ( has_post_thumbnail() )
{
    //显示缩略图
}
else
{
    //没有缩略图( 这里可以放一张默认的图片 )
}
?>

3.创建新的缩略图大小(放在主题functions.php文件add_theme_support()下面)

我们看到上面设置的图片大小都是等比例缩小的。不管你怎么设置它都是按比列来进行缩小的。如果想设置宽高不等的。便可以使用下面这个函数。

<?php
 add_image_size( $name, $width, $height, $crop );
//这里的第一个参数$name是新创建缩略图的名称,其他的参数和上面说的是一样的
//使用方法
add_image_size(‘home-thumb‘,‘200‘,‘120‘);
?>

然后我们在显示的时候只需要在填上新的缩略图名称如:the_post_thumbnail(‘home-thumb‘);这样就可以显示了。

4.获取缩略图ID号

<?php  get_post_thumbnail_id();  ?>  //放在主循环中
时间: 2024-11-05 11:56:54

wordpress教程之自带缩略图功能的相关文章

Elastic Image Slider 带缩略图功能的幻灯

今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放选项. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery

wordpress后台启用自带的图片缩略功能

1.开启自带缩略图功能 在function.php添加 add_theme_support('post-thumbnails'); 字面意思:添加主题支持,括号内为字段名 2.如何调用这个字段 <?php the_post_thumbnail(); ?> 3.设置缩略图的大小: 在function.php中刚刚插入的add_theme_support( 'post-thumbnails' ); 后面添加 set_post_thumbnail_size( 50, 50, true ); 50 5

wordpress 缩略图功能函数 the_post_thumbnail

很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起.但是目前位置没有一个标准的方法去实现日志缩略图,很多主题是使用 WordPress 自定义字段来实现日志缩略图功能,这样的设置比较复杂,虽然我在制作的很多 WordPress 项目中都是用这个方法,并且设置了直接上传缩略图的方法,但是还是略显麻烦. 从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口

Unity网络多玩家游戏开发教程第1章Unity自带网络功能

Unity网络多玩家游戏开发教程第1章Unity自带网络功能 Unity拥有大量的第三方插件,专门提供了对网络功能的支持.但是,大部分开发者第一次接触到的还是Unity自带的网络功能,也就是大家经常说到的Unity Networking API.这些API是借助于组件NetworkView发挥作用的,而它可以简化开发者大量的网络功能编码任务.本文选自<Unity网络多玩家游戏开发教程(大学霸内部资料)> NetworkView组件 在Unity中,NetworkView组件用于处理游戏在网络上

PowerDNS简单教程(2):功能篇

目录: PowerDNS简单教程(1):安装篇 PowerDNS简单教程(2):功能篇(本篇) PowerDNS简单教程(3):管理篇 PowerDNS简单教程(4):优化篇 安装完PowerDNS之后,它就已经在运行了.可通过 ps -ef |grep pdns看到pdns 的进程——通常 pdns是有两个进程在运行的. 通过apt安装的PowerDNS,主要使用的文件在如下目录中: /etc/default/pdns /init.d/pdns /powerdns/pdns.conf /usr

自定义属性作业——带缩略图的轮播切换——JS学习笔记2015-5-31(第44天)

今天看着老师的教程,学习完了自定义属性的章节,同时完成了带缩略图的轮播切换: 收获:1.在写HTML结构的时候发现空格符或者换行符对样式的影响,比如<li></li><li></li>之间如果有空格或者间距会产生间隙:因为现代浏览器基本上都可以解析出来: 2.绝对定位下的水平和垂直居中问题以及复习了解决方案: 3.在这个作业中,应用到了this,自定义属性,for循环,点击事件,动态获取组元素,数组等多种基础知识,可见基础的重要性: 4.收获完成作业时候的那

基于jQuery右侧带缩略图导航的焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画. 在线预览   源码下载 实现的代码. html代码: <div id="example5" class="slider-pro"> <div class="sp-slides"> <div cl

杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站

我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个是怎样实现的呢?其实很简单,下面我就将核心文件和代码分享给大家. 第一步:添加语录功能的核心文件. 在网站的根目录里面添加一个yulu的文件夹,里面含有index.php和yulu.txt两个文件.其中index.php里面是核心代码,yulu.txt是要显示的经典语录,一条占用一行. 文末免费给出了所

Discuz完整手动迁移教程(不使用备份功能)

Discuz迁移是一件较为麻烦的事情 网上大多的迁移教程都是利用备份功能进行操作的,其实这种操作并不能保证迁移后完全正常工作 本文将介绍直接转移数据库和文件的迁移方法 导出数据库 迁移的首要部分就是导出数据库 不论你是VPS.独立服务器还是虚拟主机一般都有phpmyadmin管理工具 进入phpmyadmin,选择discuz安装到的数据库,并导出数据表 按照同样的方法,到新主机的数据库再导入即可 转移程序文件 转移程序文件没有特别的要求 只需要打包后重新上传到新虚拟主机即可 修改配置文件 1.