Bootstrap新闻:图像修改

时间:2018-10-21 作者:Gabriel Stanford-Reisinger

我想改进我网站的设计(https://pixelbay.net/). 我想添加的一个特性是,主类别显示在特色图像的角落,而不是每次我想发布时都通过Gimp自己修改图像。我基本上想要一些类似于CoverNews主题(或Bootstrap News特色部分)的内容,但我想继续使用Bootstrap News主题。

我该如何管理这样的东西,是否有插件,或者这只能通过HTML/CSS完成?如果是那样的话,我会搜索什么来了解如何添加此功能?

1 个回复
SO网友:Pim

您必须通过PHP在图像顶部添加类别。

首先找到呈现页面的PHP模板。这可能是archive.php 有关概述。对于单篇文章,这通常是single.php, 或content-single-post.php. 这取决于你的主题。

然后找到文章缩略图的呈现位置,并添加一些HTML标记和正确的CSS样式,以便可以将文本放置在图像的顶部。然后添加用于打印类别的php代码。例如:

HTML:

<div class="post-thumbnail">
  <?php the_post_thumbnail(); ?>
  <span class="image-overlay"><?php the_category(); ?></span>
</div>
CSS:

.post-thumbnail {
  position: relative;
}

.image-overlay {
  position absolute;
  top: 10px
  right: 10px;
}
TheWordPress Codex 是学习如何在WordPress中设置主题的好地方。

结束