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

如何通过WP_Query将帖子缩略图和标题放入两个容器中?

通过WP_Query将帖子缩略图和标题放入两个容器中,可以使用以下步骤来实现:

  1. 首先,创建一个WP_Query对象来获取需要的帖子。可以通过指定相关参数,如文章类型、分类、标签等来筛选需要的帖子。
  2. 使用循环来遍历查询结果中的每个帖子。可以使用while循环来遍历所有帖子,通过调用$query->have_posts()$query->the_post()
  3. 在循环中,可以使用the_title()函数来获取当前帖子的标题,并将其放入一个容器中,可以使用HTML标签来定义容器的样式。
  4. 示例代码:
  5. 示例代码:
  6. 使用get_the_post_thumbnail()函数来获取当前帖子的缩略图,并将其放入另一个容器中,同样可以使用HTML标签来定义容器的样式。
  7. 示例代码:
  8. 示例代码:
  9. 在循环结束后,记得使用wp_reset_postdata()来重置WP_Query的状态,以免影响到后续的查询。

完整示例代码如下:

代码语言:txt
复制
<?php
$query = new WP_Query( array(
   'post_type' => 'post',  // 文章类型为post
   'posts_per_page' => 5,  // 每页显示5篇文章
) );

if ( $query->have_posts() ) {
   while ( $query->have_posts() ) {
      $query->the_post();
      ?>
      <div class="post-title">
         <?php the_title(); ?>
      </div>
      <div class="post-thumbnail">
         <?php echo get_the_post_thumbnail(); ?>
      </div>
      <?php
   }
   wp_reset_postdata();
} else {
   // 如果没有匹配的帖子
   echo "没有找到相关帖子。";
}
?>

上述代码会获取5篇文章,并将每篇文章的标题和缩略图放入各自的容器中。在实际应用中,可以根据需要修改容器的样式和布局。

这里推荐腾讯云相关产品:腾讯云对象存储(COS),该产品提供了高性能、低成本的对象存储服务,适用于存储和处理大规模非结构化数据,如图片、视频、音频等。您可以使用腾讯云COS来存储和管理帖子的缩略图。了解更多关于腾讯云COS的信息,请访问:腾讯云对象存储(COS)

希望以上答案能够满足您的需求,如果还有其他问题,请随时提问。

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

相关·内容

优化WordPress性能的高级指南

这可能会导致不一致,特别是如果我们在代码中使用查询相关的过滤器,因为你在页面不期望的帖子可能会被该函数返回。 使用WP_Query类 在我看来,这是从数据库检索帖子的最佳方式。...添加这两个参数禁用这些功能并加快查询速度: $query = new WP_Query( array( 'ignore_sticky_posts' => true, 'no_found_rows'...虽然这种灵活性是一个强大的功能,但应谨慎使用,因为参数化可能会转化为复杂的表连接昂贵的数据库操作。 在下一节,我们概述一种在不影响性能的情况下仍然实现类似功能的优雅方式。...最后,我们一个重型数据库查询(使用WP_Query元键)更改为简单直接的查询(调用get_post()),这是一个更好更有效的方法。...我们只关注插件应该如何运行,而不是如何处理该功能,或者如何以有效的方式进行操作。 从上面可以看出,在WordPress中表现不佳的根本原因是不好的(bad)的低效率的代码。

7.1K20

WordPress 文章查询教程6:如何使用排序相关的参数

在 WordPress ,使用 WP_Query 进行文章查询是最常见的操作,学习好这方面的操作, WordPress 开发基本就学会了一半。...「WordPress果酱」通过一系列教程讲解如何使用 WP_Query 进行 WordPress 文章查询。...第六讲关于排序相关的参数,排序相关的参数就是 order orderby 两个参数,但是值比较多比较多: 首先是 order 参数,数据类型为:(string | array),用于指定 “orderby...,第三是否有任何搜索词出现在标题中,第四是否完整的句子出现在内容。...( $args ); 如果要通过两个自定义字段来排序,比如先通过 city 升序 然后 province 降序,这时候就需要通过「命名的 meta 查询」(named meta queries)来组合并链接

1.5K30
  • Display Posts : 按条件显示WordPress文章的最强插件

    WP_Query是wordpress提供的一个类,它支持的参数方法非常丰富,通过各种给组合查询参数,几乎所有的文章查询都可以通过这个类实现。...比如 用 jQuery Bootstrap 在 WordPress 添加进度条 这里介绍的用法 也可以通过在主题文件中使用函数do_shortcode() 。...用来控制查询结果的展示信息,如标题缩略图、摘要等等 Markup parameters allow you to change the underlying HTML markup, including...显示结果可以按照多种条件进行排序,比如想按照标题升序排列,可以加入两个参数 order=”ASC” orderby=”title” 代码显示结果如下: ?...还可以综合使用目录tag两种分类发其他的操作符来进行复杂的查询,详见这里 自定义显示形式 这也属于高级用法之一了,默认是使用Html的无序列表ul,你可以通过参数 wrapper="ol" 来改成有序列表

    3.5K10

    WordPress 首页文章如何使用分类过滤?

    如果懂代码,WordPress 的 WP_Query 支持 category__in category__not_in 这两个参数,使用 pee_get_posts hook 处理一下就好了。...WordPress果酱」知识星球福利插件基于 WPJAM Basic 开发,加入「WordPress果酱」知识星球,即可下载: 插件 简介 抓取公众号图文 一键抓取公众号文章到 WordPress 博客 支持一键文章图片下载到...一键设置 WordPress 所有页面的页面标题 登录优化 一键优化 WordPress 登录注册界面,并支持第三方账号登录绑定 内容模板 通过短代码在内容插入一段共用的内容模板,并且支持表格。...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 文章或评论的外部链接加上安全提示的中间页。...站点选项 查看管理所有非 WordPress 系统自动生成的站点选项。 如果你觉得某个选项无用,可以直接删除它。 后台论坛 WordPress 后台论坛,支持创建帖子,分组,消息。

    1.7K20

    Jump Start Bootstrap 第3章

    页面组件的示例包括页面标题、显示重要信息的突出面板、嵌套的注释部分、图像缩略图链接列表。这些都是很受欢迎的组件,但从头开发需要很长一段时间。...在本节,我们重点讨论如何使用Bootstrap推荐创建可重用的HTML组件标记类。让我们从页眉开始。... 生成一个媒体对象,你需要创建一个包含media类的标签;然后你需要放入两个必要的部件:媒体本身(这里是一张图片)media-body...接下来,我们创建另一个div,它将之前的是同一级的。我们将给这个元素提供两个类:“collapse””navbar-collapse”。...为了复选框和它旁边的文本的正确对齐,您应该将它们都封装在一个用于复选框的div;在这种情况下,您还应该输入元素放入标签元素,这样就可以正确地映射到相应的输入元素。

    13.9K20

    WordPress 文章查询教程10:如何使用权限和缓存参数

    在 WordPress ,使用 WP_Query 进行文章查询是最常见的操作,学习好这方面的操作, WordPress 开发基本就学会了一半。...「WordPress果酱」通过一系列教程讲解如何使用 WP_Query 进行 WordPress 文章查询。...=> 'readable', ); $query = new WP_Query( $args ); 缓存参数 用于设置停用获取到的文章存到缓存,对应的参数有三个: cache_results (boolean...' => false ); $query = new WP_Query( $args ); 显示50篇文章,但是 post term 信息不加入缓存: $args = array( 'posts_per_page...,添加到缓存是才是正确的做法,但是在一些特定的情况下可能很有用,比如需要获取一组文章的标题链接,而无需其他的信息,也不需要 post meta post term 的数据,通过这几个参数的设置,可以不执行额外的

    43030

    CVE-2022-21661:通过 WORDPRESS SQL 注入暴露数据库信息

    今年 10 月,我们收到了来自 GiaoHangTietKiem JSC 的 ngocnb khuyenn 的报告,涉及 WordPress 的 SQL 注入漏洞。...该博客涵盖了该错误的根本原因,并着眼于 WordPress 团队如何选择解决它。...插件主题使用此对象来创建他们的自定义帖子显示。  当插件使用易受攻击的类时,就会出现该漏洞。一个这样的插件是Elementor Custom Skin 。...后来在get_posts方法,这个查询是通过$wpdb->get_col()方法执行的,这里出现了SQL注入条件。...同样, Contact Form 7的文件上传漏洞插件也被检测为被趋势科技传感器利用。在这种情况下,错误通过插件暴露,但存在于 WordPress 本身

    4.2K10

    微信小程序之图片选择、预览与上传

    例如下图所示的应用界面,这是一个比较典型的创建帖子或问答等内容的表单,用户可以填写标题正文,并从自己的手机相册中选择3张图片(或直接通过摄像头拍摄),且当点击缩略图时,可以全屏预览查看这些图片: ?...像这样一个带图片上传预览功能的表单,在移动app是比较常见的。那么在微信小程序如何来实现呢?且看我们一步步来构建这样的功能。...标题正文输入框 对于这个表单,我们首先来创建上部的2个输入区域:标题正文输入区。...其实它是一个通过对象深层比较,Page的data对象的数据进行批量、按需更新到视图层WXML的一个功能。...APIwx.uploadFile进行上传,并返回上传后的图片地址备用; 接着标题、正文、以及刚才的图片地址一并通过调用后端创建问题的API,保存到数据库

    6.2K60

    WordPress 6.1 提高 WP_Query 查询性能,真正实现站点 0 SQL

    我之前也通过各种方式实现了0SQL,其中应用到了 Autumn Pro 免费的 Sweet 主题上,现在官方实现了 WP_Query 数据库查询缓存,对 WordPress 整个性能提升肯定有显著的帮助...WP_Query 实现数据库查询缓存是有一套自己的实现机制,所以对于插件主题开发者来说,如果要对文章进行操作的话,最好使用 WordPress 提供的文章操作函数。...比如使用 wp_insert_post 函数文章添加到数据库,这些函数会自动去清理缓存,这样下次使用 WP_Query 获取文章时候,就能获取是包含了新增的或者更新之后的数据。...如何禁用缓存 值得注意的是,在默认情况下,WP_Query 的所有数据库查询都将被缓存,如果想不缓存,只需将 cache_results 参数设置为 false 即可: $query = new WP_Query...get_page_by_title 直接使用 WP_Query get_page_by_title 函数在 6.1 版本也改用 WP_Query 来获取数据,之前,该函数直接使用 SQL 查询来实现通过标题获取页面

    68320

    wordpress 学习笔记 (二)

    作者的名称 Author URI:作者的网址 Description: 主题的简介 Version: 1.0 版本信息 主题默认能够识别的文件名 名称 模板名称 详细说明 screenshot.png 缩略图...php print($wp_query); ?...默认查询的总结 默认查询: $wp_query -> posts -> post 被查询对象:(wp_query查询出来的) get_queried_object() get_queried_object_id...② $parents 字符串值,默认为空 指定父分类的显示方式,可选值如下: 空值:不输出父分类; multiple:父分类子分类都是单独的链接,但处于同一个li元素; single:不输出父分类链接...get_the_category( int $id = false ) 函数参数: $id 整数型,默认值:当前文章的ID 指定文章的ID,返回该文章所属分类的信息。 函数使用示例 <?

    94020

    动手练一练,用 CSS Checkbox Hack 技术制作一个响应式图片幻灯

    大家好,今天我们一起学习下如何从零开始创建一个具有缩略图功能的响应式图片幻灯。....thumb-list 两个容器,放置内容元素。...3.2、.thumb-list 容器包含一组图片缩略图,与大图对应,用于切换大图。...每个缩略图占据父容器的三分之一,如下图所示: 在这里,为了图片标题放置在图片之上,我们用的不是传统的CSS定位,这里我们应用了CSS Grid技巧。...每次点击缩略图,相应的箭头圆圈都会处于活动状态: 相应的幻灯片大图可见 对应的圆圈背景变成白色 缩略图对应的文字标题将会显示 箭头导航将会更新对应相关 上个图片/ 下个图片 的链接 基于以上需求最终完成的

    1.3K10

    动手练一练,用 CSS Checkbox Hack 技术制作一个响应式图片幻灯

    大家好,今天我们一起学习下如何从零开始创建一个具有缩略图功能的响应式幻灯片。....thumb-list 两个容器,放置内容元素 3.1、.featured-wrapper 元素包含3个列表: 1、一个大图列表,一次只能显示一个图片 2、一组箭头列表,用于大图切换 3、一组圆圈列表,...3.2、.thumb-list 容器包含一组图片缩略图,与大图对应,用于切换大图。...每个缩略图占据父容器的三分之一,如下图所示: 在这里,为了图片标题放置在图片之上,我们用的不是传统的CSS定位,这里我们应用了CSS Grid技巧。...每次点击缩略图,相应的箭头圆圈都会处于活动状态: 相应的幻灯片大图可见 对应的圆圈北京变成白色 缩略图对应的文字标题将会出现 箭头导航将会更新对应相关图片的链接 基于以上需求最终完成的CSS代码如下:

    1.1K10

    WordPress 文章查询教程11:如何使用搜索评论相关参数

    在 WordPress ,使用 WP_Query 进行文章查询是最常见的操作,学习好这方面的操作, WordPress 开发基本就学会了一半。...「WordPress果酱」通过一系列教程讲解如何使用 WP_Query 进行 WordPress 文章查询。...第11讲关于搜索评论的参数: 搜索参数 搜索参数可以根据关键字搜索获取文章。 s (string) – 搜索关键词。...$query = new WP_Query( array( 's' => 'keyword' ) ); 在搜索关键词前面加上连字符排除与关键词匹配的文章,例如 "pillow -sofa" 返回包含...comment_count (Array) – 如果该参数为数组,则其必须有两个参数: value – 用于比较的评论数。 compare – 比较方式,可以是:'=', '!

    87220

    分析Facebook上的视频广告的三种思路

    想了解在Facebook中视频如何为你服务吗? 想在FB上制定合理的视频投放决策,就要先弄清楚你的粉丝是怎么看视频的。 这篇文章将会告诉你分析FB上的视频广告的三种思路。 ?...然而,两个平台的数据本身也是有差异的,FB帖子的表现高于当时的平均水平约50%,而YouTube帖子仅仅比平均水平高10%。...FB原生视频(左边)的缩略图比从YouTube分享过来的视频大 FB原生视频(左边)的缩略图比从YouTube分享过来的视频大,也更有视觉冲击力,缩略图大小的差异影响用户注意力视频播放行为。...所以,如果发布视频帖,并且帖子包含“行动号召”信息,请确保你把“行动号召”放在视频开头,或者把这个信息放在文本。 接着,我们来分析参与度。...我们要通过密切观察视频在FB上的表现,来最大化视频贴的效果。

    2.5K91

    研究上千张数据图表后 我学到12条可视化的秘密准则 | 附资源

    图片可作为帖子缩略图 ▼ Priceonomics的人们经常这么做,并且我认为这是一个非常好的思路。这是一件很简单的事情,而且它能够吸引对数据可视化好奇的读者。...他们实际上更喜欢在中西部的州定居,并且诸如这种有趣的事实会获得更多的分享观看。而且这些信息全部只来自于一幅帖子缩略图图表作为帖子缩略图,使这篇文章更容易在社交媒体传播。...副标题清晰地阐述了只有超过5英尺2英寸的人计入图表,而不是仅仅假设1900年时所有国家的人初始身高都是5英尺2英寸。因此,他们通过标题清晰准确地描述了数据集,而非让读者误读信息。...这两个标题很相似,作者采用对比色进行处理,意图就很明确,不会混淆了。 12....图片可作为帖子缩略图 4. 图表标题双保险 5. 囊括文章的所有数据 6. 慎用地图 7. 图表应突出重点 8. 节省空间显示法:横向放置条形数据 9.

    88840

    WordPress 文章查询教程1:如何使用分类,标签或其他分类模式参数

    在 WordPress ,使用 WP_Query 进行文章查询是最常见的操作,学习好这方面的操作, WordPress 开发基本就学会了一半。...「WordPress果酱」通过一系列教程讲解如何使用 WP_Query 进行 WordPress 文章查询。...第一讲,把 WP_Query 最常用的分类,标签分类模的所有相关的参数讲解一下,例子也是来自官方文档,学完之后,你可以在 WordPress 进行非常复杂的多重筛选。...三、真正的王炸:tax_query tax_query 参数是 WordPress 3.1 版本引进的,WordPress 非常复杂的多重筛选就是使用它实现的,我们通过几个例子讲解怎么实现。...比如:获取在 quotes 分类或者同时有 quote 文章格式和在 wisdom 分类的文章: $query = new WP_Query(array( 'post_type' => 'post

    1.4K40

    使用docker快速搭建xssPlatform测试平台实践

    一、背景 笔者之前给一些开发团队多次做Web安全开发培训,为了让培训的学员能够理解XSS原理XSS的危害,xssPlatform进行了更新,之前一直放在GitHub;发现关注的人越来越多,很多人在安装的过程遇到问题不知道怎么处理...四、xssPlatform搭建 在安装完MySQL服务之后,便可以安装xssPlatform系统了,笔者已经所需PHPnginx环境封装好了,因此只需下载镜像运行即可 4.1 运行容器 在运行容器时候需要考虑两个问题...,通过浏览器访问http://xss.localhost:8888/不能打开,原因是因为容器里的nginx服务PHP服务都还未启动,启动的命令参考如下所示: docker exec xssPlatform_test...,下面将在此系统发表一个帖子,并在帖子标题中插入XSS Platform预备好的攻击代码,如下图所示 ?...点击发表按钮,便帖子发布成功,此时假定自己为受害者,访问了此帖子列表,在列表中会读取帖子标题帖子标签别浏览器执行便不会显示出来,如下图所示 ?

    2K20
    领券