the_post_thumbnail()函数用于获取文章的特色图像缩略图。如果文章没有添加特色图像功能,可以查看add_theme_support()函数文章学习。
语法结构
the_post_thumbnail( string|array $size = 'post-thumbnail', string|array $attr = '' )
参数
$size(string|array) 图片大小,可以是以下几个关键字:thumbnail, medium, large, full。或者通过函数 add_image_size()函数定义尺寸的关键字。或者自定义宽和高的大小,比如:(32,32)。默认值是 ‘post-thumbnail’。
$attr(string|array)属性/值的一个数组,比如设置默认的class属性
实例
直接使用
if(has_post_thumbnail()){
the_post_thumbnail();
}
自定义缩略图的大小
if(has_post_thumbnail()){
the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图
}
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是如果有多处代码则修改起来麻烦
预置尺寸
用到此方法请先看下面的函数介绍
add_image_size()函数是设置 WordPress 中上传图片缩略图大小的一个函数
语法结构
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
参数
$name,要设置的缩略图名称,可接受thumbnail, medium, large, full等
$width, 设定的最大宽度
$height, 设定的最大高度
$crop,是否切割,如果设置为true则按照图片剪裁自定义的高度和宽度对图片进行剪裁,100%得到预设的图片尺寸,不会压缩图片的宽高比,但是会在原图的基础上进行裁剪,同时不能控制图片剪裁的起始点。false按照图片的原始长宽比进行剪裁,不会缺失图片的内容
TIPS
实例
比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码
if ( function_exists( 'add_image_size' ) ){
add_image_size( 'category-thumb', 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小
add_image_size( 'homepage-thumb', 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小
}
在首页调用
the_post_thumbnail(‘homepage-thumb’); //显示220*180的缩略图
在分类页面调用
the_post_thumbnail(‘category-thumb’); //显示200*180的缩略图
the_post_thumbnail函数输出的html结构
<img width="150" height="150" src="/uploads/img/" class="attachment-thumbnail wp-post-image" alt="" title="screenshot" />
由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?可以给缩略图添加一个属性,如
the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));
输出的html结构为
<img width="150" height="150" src="/uploads/img/"
class="homepage-thumb wp-post-image" alt="" title="screenshot" />
感兴趣的朋友可以多多测试不同的方式,这篇文章就写到这里。
1 WordPress如何制作超级菜单模板?
Mega Menu是一个可以个性化的超级导航栏,可以添加图片、视频等丰富的元素。 如果卖家网站页面多、产品多、品类多,可以升级卖家普通菜单,使用超级菜单Mega Menu。
我们可以用Elementor 编辑器的 ElementsKit 插件。
以上就是关于Mega Menu使用的相关内容,希望对你有所帮助。
希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress如何制作超级菜单模板?使用Mega Menu插件》,对您有帮助。
1 1)哪里出问题?
在线升级到WordPress最新版本登录后台时,出现提示:
解决方案如下:;
大多数出现此现象的用户,都启用了object缓存,或Memcached缓存。
wp-content文件夹中有一个object-cache.php文件,这是导致你无法登录缓存的主要原因。
第 1 步:删除或重命名object-cache.php文件
object-cache.php.bak
第 2 步:登录后台
然后再次登录后台,就不会出现无限循环。
这类问题通常是由WordPress建站程序的缓存引起的:
希望我们网站( https://www.wordpressx.com/ ) 分享的《解决无需升级,您的WordPress数据库已经是最新的了!》,对您有帮助。
1 第一步、小工具注册
自定义菜单功能和侧边栏小工具,是WordPress主题中比较有特色的功能.
我们在之前的建站教程里,分享了如何给WordPress主题添加自定义菜单。
本文介绍一下制作主题的时候,如何添加自定义小工具功能。
和给主题一样添加自定义菜单一样,自定义添加小工具Widgets只需3个步骤。
要使用小工具,先要进行注册,打开WordPress主题下面的 functions.php 文件,
在functions.php文件里面,添加如下代码:
<?php //侧边栏小工具 if ( function_exists('register_sidebar') ) { register_sidebar( array( 'name' => __( 'Top Sidebar' ), 'id' => 'top-sidebar', 'description' => __( 'The top sidebar' ), 'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) ); } ?>
修改functions.php里的li、h2标签,使之对应sidebar.php里的标签:
‘before_widget’ 和 ‘after_widget’ 的li和模块h2标题,按实际情况修改代码。
(也可能不用修改)
'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '<h2>', 'after_title' => '</h2>',
以上代码注册了一个名为“top-sidebar”的小工具区域:
登录WordPress后台仪表盘,依次进入 外观 → 小工具。
如果能看到下图中右边的Top Sidebar 小工具区域,说明注册成功了 ▼
小工具注册之后就可以在主题模板文件中调用了,把下面的代码放到sidebar.php文件中就可以调用了。
1)在sidebar.php文件中,最大的li或div标签下方,插入 ▼
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>
2)在sidebar.php文件中,最大的</li>或</div>上方,添加 ▼
<?php endif; ?>
1)小工具注册好了,显示位置也在主题文件中定义好了。
2)保存之后,刷新前台页面。
能看到上图,说明我们的小工具已经制作完成,并如常运行了。
重复第一步和第二步,就能让你的WordPress主题,支持不同位置中的widget小工具了。
假设你需要将一个小工具添加到主题的头部、侧边栏、和底部。
1)首先,你需要将以下代码复制到functions.php文件中 ▼
if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Header', 'id' => 'header', 'description' => 'This is the widgetized header.', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); register_sidebar(array( 'name' => 'Sidebar', 'id' => 'sidebar', 'description' => 'This is the widgetized sidebar.', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); register_sidebar(array( 'name' => 'Footer', 'id' => 'footer', 'description' => 'This is the widgetized footer.', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); }
2)接下来,将以下代码分别添加到header.php、sidebar.php和footer.php文件中。
header.php ▼
<div id="widgetized-header"> <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?> <div> <p><strong>Widgetized Header</strong></p> <p>This panel is active and ready for you to add some widgets via the WP Admin</p> </div> <?php endif; ?> </div>
sidebar.php ▼
<div id="widgetized-sidebar"> <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?> <div> <p><strong>Widgetized Sidebar</strong></p> <p>This panel is active and ready for you to add some widgets via the WP Admin</p> </div> <?php endif; ?> </div>
footer.php ▼
<div id="widgetized-footer"> <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?> <div> <p><strong>Widgetized Footer</strong></p> <p>This panel is active and ready for you to add some widgets via the WP Admin</p> </div> <?php endif; ?> </div>
到此成功!
接下来,继续分享WordPress使用小工具widget的技巧。
高效管理自定义widget小工具:
1)向主题添加widget小工具后,你可以创建一个单独的文件,并将其命名为widgets.php
。
2)将代码添加到functions.php文件中:
if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);
3)将所有在第1步添加的自定义widgets小工具代码,保存到widgets.php文件里。
此方法可确保所有widgets小工具顺畅加载,并在所有支持widgets小工具的WordPress版本上运行。
这样,你就可以更高效率地管理的WordPress主题文件。
希望我们网站( https://www.wordpressx.com/ ) 分享的《如何添加WordPress小工具?主题集成Widgets区域》,对您有帮助。