首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在wordpress中使用背景图片中的post缩略图url?

在WordPress中使用背景图片中的文章缩略图URL,您可以按照以下步骤进行操作:

  1. 首先,确保您已经在WordPress中启用了文章缩略图功能。可以通过在主题的functions.php文件中添加以下代码来启用缩略图功能:
代码语言:txt
复制
add_theme_support('post-thumbnails');
  1. 在WordPress后台编辑文章时,确保为每篇文章设置了特色图片(缩略图)。您可以在文章编辑页面的右侧找到“特色图片”选项,并上传或选择一张图片作为缩略图。
  2. 在需要使用背景图片的地方,您可以使用以下代码来获取文章缩略图的URL:
代码语言:txt
复制
<?php
// 获取当前文章的缩略图URL
$thumbnail_url = get_the_post_thumbnail_url();
?>

<div style="background-image: url('<?php echo $thumbnail_url; ?>');">
    <!-- 在这里添加您的内容 -->
</div>

上述代码中,get_the_post_thumbnail_url()函数用于获取当前文章的缩略图URL,并将其作为背景图片的URL。

  1. 将上述代码插入到您希望使用背景图片的地方,例如WordPress主题的模板文件中的相应位置。

这样,您就可以在WordPress中使用背景图片中的文章缩略图URL了。

请注意,以上答案中没有提及具体的腾讯云产品和产品介绍链接地址,因为问题与云计算品牌商无关。如需了解腾讯云的相关产品和服务,建议您访问腾讯云官方网站或咨询腾讯云的客服人员。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WPJAM Basic 功能详细介绍:CDN 和缩略图开发接口

这些接口都是使用标准 WordPress filter 和 action hook 模式写,只要你熟悉 WordPress 插件开发,你会非常容易用上这些接口,今天就给大家介绍下这些接口和一些应用实例...,当然你觉得插件还应该提供哪些接口,也可以和我说: 文章缩略图接口 如果你使用 WPJAM Basic 插件 wpjam_post_thumbnail() 这个函数来显示日志缩略图的话,默认获取缩略图顺序是...:特色图片 > 第一张图片 如果开启的话,如果你缩略图由于历史遗留原因是使用自定义字段来设置,你可以使用 wpjam_post_thumbnail_url 这个接口来使得这个函数能够用上你缩略图...; }, 10, 2); 默认缩略图接口 我们在 CDN 加速设置界面,可以设置默认缩略图,如果我们想更方便地定制默认缩略图,比如类似我爱水煮鱼博默认缩略图是四张图片中随机选择一张,可以使用 wpjam_default_thumbnail_url...本地静态文件资源替换成阿里云等 CDN 资源,如果你想对 WordPress 输出 HTML 进一步处理,比如把输出 HTML 123.com 域名替换成 abc.com,可以使用 wpjam_html_replace

41320
  • 一文详解 WordPress 文章特色图片或缩略图功能

    WordPress 2.9 之前,WordPress 没有提供一个标准方法去实现文章缩略图,很多主题都是使用 WordPress 自定义字段来实现文章缩略图功能,这样设置比较复杂。...开启文章缩略图功能 要使用文章缩略图功能,首先需要通过函数 add_theme_support() 来开启,具体是在当前 WordPress 主题 functions.php 文件添加以下代码: add_theme_support...ID 是存在 meta_key 为 _thumbnail_id ,但是我们只需要使用下面简单函数就可以获取文章缩略图 ID: $image_id = get_post_thumbnail_id...(); get_the_post_thumbnail_url():获取文章缩略图链接 获取到文章缩略图链接 ID 之后,我们可以使用 wp_get_attachment_image_url 函数获取图链接...,但是 WordPress 已经提供了现成函数一步到位: $thumbnail_url = get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail

    1.5K10

    WPJAM Basic 内置缩略图函数

    缩略图处理是 WordPress 最重要工作之一,WPJAM Basic 内置一批专门用来处理缩略图函数,如果你是主题开发者,了解这些函数,会有很大帮助,可以显著地加快你开发效率。...wpjam_get_thumbnail wpjam_get_thumbnail($img_url, $size); 这个是 WPJAM 所有缩略图函数基础,如果使用了第三方云存储服务,它会将图片域名替换成第三方云存储使用域名...,这个和 WordPress 自带 get_post_thumbnail_url 有区别的,重点是根据后台设置,在未设置文章缩略图情况下,该函数会获取第一张图片作为缩略图,或者使用默认缩略图。...如果选择了「无需修改主题,程序自动使用 WPJAM 缩略图设置」,那么 WordPress 自带 get_post_thumbnail_url 在未设置缩略图情况下也能够获取缩略图,获取规则是一样...() 这个函数和 WordPress 自带 has_post_thumbnail 区别,和上面 wpjam_get_post_thumbnail_url 和 get_post_thumbnail_url

    26610

    WordPress自动设置文章缩略图

    经常会在网站首页调用文章时候,需要有图片一起展示,wordpress本身有缩略图功能,可以通过has_post_thumbnail来判断是否有缩略图, the_post_thumbnail来调用。...但是wordpress缩略图需要手动设置,并不能自动获取文章内图片来作为缩略图,通过以下方法完成缩略图自动设置。...自动设置缩略图逻辑: 如果设置缩略图,则调用缩略图; 如果没有设置缩略图,则调用文章内第一张图片为缩略图; 如果文章内也没有图片,那么则使用默认图片为缩略图。...'/imgages/thumb.jpg'; //具体路径根据自己调整 } } } 将以上文件添加到functions.php文件内,在需要使用缩略图地方,使用函数 dm_the_thumbnail...()即可完成缩略图URL调用。

    1K30

    WordPress Hack 技巧

    你可以利用这两个选项来使用不同目录甚至你空间中子域名来保存文件。 这样提供了两个好处:你图片 URL 变短了,另外你 WordPress 文件夹大小也可以保持很小而且易于管理。...你可以在 wp-config.php 文件添加下面代码屏蔽日志修订功能: define('WP_POST_REVISIONS', false); Tip 5: 禁止评论 HTML 代码 WordPress...评论框其实是一个基本 HTML 编辑器,留言者可以使用一些基本 HTML 标签,:,,,等等用来强调一些特定词语或者添加一个链接,如果你不喜欢,你可以在主题 functions.php...Tip 8:关闭 WordPress 缩略图功能(替代方法) 当你上传一张图片到 WordPress 时候,它会创建两张额外缩略图,我不知道怎么在 WordPress 阻止缩略图生成,但是如果你是用...只使用 FTP 模式来发布图片,这会自动阻止缩略图生成,因为 FTP 上传图片是另外一种工作方式。

    36210

    WordPress相关日志插件增加自动缩略图功能

    WordPress 相关日志插件:WordPress Related Posts,这个也是由水煮鱼制作插件,其中有一项功能可以通过自定义字段显示缩略图,对于一个新博客而言,可以慢慢添加,但是对于一个已经有几百上千日志...,如果确实需要相关日志只显示图片而不需要使用标题类型,这个时候你去自定字段一个个修改,耗时不说,累都累死了。...修改主要作用是在大量文章需要设置自定义字段来达到相关日志显示缩略图时,可以使用我修改过代码,为设置您每篇文章第一张图片规律性替换,比如规律性替换.jpg 为 _s.jpg 不仅适用于flickr...,一些大型网站也是比较适合,wordpress自带图片库也可以适用,但是具体怎么替换后缀名需要你自己手动修改下代码。...$img_url . '" />'; 以上你可以设置图片显示格式,有漂亮格式教我。

    46320

    WordPress主题开发,从入门到精通。

    ( 'post-thumbnails' ,[array( 'post' )]); 启用指定类型文章缩略图功能,不指定第二个参数时默认为全部文章启用缩略图功能; post-formats:文章形式。...,输出缩略图(img元素) update_post_thumbnail_cache get_the_post_thumbnail,缩略图(img元素) get_the_post_thumbnail_url...,缩略图URL the_post_thumbnail_url,输出缩略图URL get_the_post_thumbnail_caption,缩略图文件标题 the_post_thumbnail_caption...esc_url() – 在输出 URL 时,使用此函数,包括在src和href属性 URL。 esc_js() – 对内联 JavaScript 使用此函数。...相对于使用 echo 输出数据,我们应该更多使用 WordPress 本地化能力, _e() 或 __() 15.简码 add_shortcode() remove_shortcode() shortcode_exists

    10.6K40

    WordPress 高级缩略图插件:WPJAM Thumbnail

    很多人问我爱水煮鱼首页缩略图是如何实现,这事我最近写一个 WordPress 插件:WPJAM Thumbnail。...我们知道 WordPress 默认就有特色图片功能,我们可以在撰写文章时候设置一个缩略图,然后使用 wp_post_thumbnail 函数调用它,但是这个功能使用起来比较麻烦,因为需要每篇文章都要设置特色图片...有没有办法让 WordPress 缩略图功能用起来更方便呢?这个就是 WPJAM Thumbnail 这个插件所要做事情。...所以这个插件也提供了丰富函数接口让你面对各种情况: wpjam_has_post_thumbnail(): 判断当前文章是否有缩略图,必须在主循环里面使用。...wpjam_get_post_thumbnail_url(post=null, size='thumbnail',

    1.4K30

    对C7V5主题修改记录及本站使用自定义代码等

    本篇文章主要记录了我对本博正在使用主题-C7V5 进行一些修改,方便给有需要的人参考,也为了日后升级主题时做一个参考。其中在 functions.php 添加代码几乎都不是原创。...在你模板 functions.php 中加入以下代码并保存,就可以实现中文文件名称在上传过程自动重命名了。...当上传文件就会以“年月日时分秒+千位毫秒整数”格式重命名文件了,“2017091611151935.jpg” //wordpress 上传文件重命名 function git_upload_filter...缩略图自动裁剪功能 //彻底禁止 WordPress 缩略图 add_filter( 'add_image_size', create_function( '', 'return 1;' ) ); 将默认主题标题分隔符...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:对C7V5主题修改记录及本站使用自定义代码等

    77750

    WordPress开启Nginx缩略图功能,七牛从此陌路

    CDN 及集成七牛缩略图方法 浅谈网站使用七牛云存储之后 robots.txt 该如何设置?...昨天一回到家,立马进入折腾状态,学习 Nginx 缩略图和缓存功能,几经折腾终于将这 2 个实用功能应用到了我这个 WordPress 博客,博客图片从此和七牛陌路。...Ps:分享前先简单说一说实时生成缩略图好处。肯定有朋友会疑问,WordPress 不是已经有缩略图裁剪功能了吗?而且很多主题也加入了自定义尺寸缩略图裁剪功能,为什么还要多此一举呢?...不过最近发现使用 URL 形式①,然后再开启云加速,所有缩略图都会 415 报错!! 所以,对于 URL 形式选择,我个人建议是: A....如果不用云加速,请使用形式①,因为用参数缩略图不知道会不会搞晕搜索引擎蜘蛛呢; B. 如果使用云加速,请使用形式②,避免大量 415 错误!

    1.3K50

    WordPress发布更新文章、提交审核评论自动清理腾讯云CDN缓存

    目前张戈博客同时使用了腾讯云、VeryCloud 以及七牛 CDN,其中腾讯云负责电信线路流量,VeryCloud 负责默认线路流量,而七牛主要是用于缩略图展示,你觉得这样做有什么好处?...一、兵分三路 本来博客自身就有 PHP 缩略图功能,不过腾讯云缓存后,这个带参数缩略图经常出 50x 等问题,所以只好弃用。...腾讯云负责电信线路原因只有一个:其实没鸟用安全认证(也就是 QQ 聊天绿色钩钩),这里简单分享下吧: 不使用腾讯云主机也能获得安全认证方法: 很简单,使用腾讯云 CDN 即可,道理也挺简单,安全认证它检测就是你网站是否解析到了腾讯服务器...PHP 代码添加到 WordPress 主题 functions.php 函数模板文件当中即可!...好了,本文分享到此告一段落,正在使用腾讯云 CDN 或打算做腾讯云安全认证将要使用腾讯云 CDN 朋友可以尝试下,非常方便!

    1.9K100

    百度熊掌号如何实现搜索结果出图

    WordPress 百度熊掌号自动推送插件安装使用教程 百度熊掌号 API 资源 php 主动推送提交教程 下面说一下百度熊掌号搜索结果出图怎么操作。 ?...对于落地页及图片质量符合要求资源,将在搜索结果展现一图、三图样式。...;图片中不能是纯文字,不允许为广告图、色情图、纯色图、令人不适图片;图片中不得出现二维码、联系电话、微信号等受益方式;图片水印只可添加熊掌号名称,且不可居于显著位置,不可大面积覆盖图片;图片格式为 JPG...、GIF、PNG 静态图片,默认以 JPG 展示缩略图。...”: “‘.get_the_time(‘Y-m-d\TH:i:s’).'” } ‘;} //获取文章图 last update 2018/01/22 function fanly_post_imgs

    95550

    My Eyes Are Up Here:自动侦测脸部生成缩略图 WordPress 插件

    WordPress 默认是自动从中间裁图来生成缩略图,如果图片中的人脸在边上时候,就会把图片中最重要部分裁掉,如果全身照则更尴尬,有时裁剪之后剩下是脖子和手臂。...My Eyes Are Up Here(我眼睛在这里 ) 这个插件就是为了解决这个问题,它通过整合一个可以侦测图片中人脸 jQuery 插件来实现。...当完成添加热点之后,点击“完成”按钮就可以重新裁剪缩略图了,重新生成缩略图就是根据指定的人脸位置来裁剪, 当检测到多个热点或面,该插件将尝试裁剪图像,包括尽可能多热点在缩略图越好。...否则,它会裁剪围绕热点中心。 如果你主题大量使用功能图像以人类为对象,这个插件将帮助你避开脸部所需作物,避免可怕胯下击球。我眼睛是在这里被人们在互联创建/它。...您可以从WordPress.org免费下载或查看GitHub上项目。 如果多个人脸被侦测到,插件就会尽量在裁剪片中尽量包含多的人脸,否则它会围绕这些热点中心裁剪。

    50520

    WPJAM Basic 详细介绍:一键设置和应用 WordPress 缩略图

    WordPress 默认缩略图设置是比较复杂,如果需要某种特定尺寸缩略图,是需要事先通过 set_post_thumbnail_size 函数进行预先定义,WordPress 才会在图片上传时候...缩略图设置 这个就是 WPJAM Basic 插件「缩略图设置」功能由来,所以 WPJAM Basic 缩略图功能最好需要结合「CDN加速」功能一起使用。...首先是选择怎么应用 WPJAM Basic 缩略图设置到 WordPress 站点中,这里提供了两个选项: 第一个是需要手工修改主题代码,使用WPJAM Basic 提供缩略图函数来修改主题使用默认...另外一个会自自动应用,但是前提是主题要写得比较标准,比如 WordPress 官方出主题,那么可以选择该选项,什么都不用动,程序会自动使用下面的设置缩略图选项。...,可以定义获取文章缩略图顺序,文章第一张图所示,我首先定义从标签缩略图中获取,如果没有,再从第一张图片,最后从分类缩略图中获取,最后最后,你猜到了就是默认缩略图

    46730
    领券