如何使用Astra自定义布局创建特色帖子网格

如何使用Astra自定义布局创建特色帖子网格

如何使用Astra自定义布局创建特色帖子网格

  当访问流行的博客时,您可以看到大多数博客的顶部都有一些热门文章。它有助于快速吸引读者对这些文章的注意力,从而提高点击率并降低跳出率。

如何使用Astra自定义布局创建特色帖子网格

  受此启发,我正在寻找一种方法在我的 WordPress 博客上做到这一点,通过编写一些自定义 PHP、HTML 和 CSS 代码来手动完成此操作。由于我在该网站上使用Astra Pro 主题,因此该过程变得更容易一些。可以使用 Astra 主题内的自定义布局模块从 WordPress 仪表板本身添加代码,而不是将代码添加到主题文件中。本文晓得博客为你介绍如何使用Astra自定义布局创建特色帖子网格

  推荐:Astra主题功能特点

先决条件

  • 为帖子设置的精选图像
  • Astra Pro /Code Snippets插件
  • 一些 HTML、CSS 和 PHP 知识

  为了使布局看起来如我上面所示,您必须在要突出显示的帖子上设置特色图像。如果没有这一点,设计可能会显得不完整。需要订阅 Astra pro 才能激活自定义布局功能。之后,您应该安装 Pro 插件插件来访问这些额外的功能。

  或者如果您使用其他主题,则可以使用代码片段插件从 WordPress 仪表板添加相同的代码,而无需编辑主题文件。

创建特色帖子自定义布局步骤

  高级模块允许您设计自定义部分并将其显示在网站的各个位置。自定义 404 页面就是一个示例。该编辑器允许视觉编辑和代码编辑。您还可以使用 Elementor页面构建器来设计布局。但在这里,我们将通过编写一些代码来完成。

激活Astra自定义布局模块

  从 Astra 主题的选项页面激活该模块。激活后,您将在左侧看到一个新的菜单项。单击它以添加新布局。(Astra自定义布局模块现在是Site Builder页面构建器)

激活Astra自定义布局模块
添加 PHP 代码
添加 PHP 代码

  给布局赋予标题后,切换编辑器模式编写代码。它可以包含 PHP 和 HTML 输入。

<?php
	
	$args = array(
		'numberposts' => 4,
		'post__in' => [4324, 4329, 4378, 1],
		'orderby' => 'post__in'
	);

	$ft_posts = get_posts($args);

?>

<section class="featured-posts">
		<?php foreach($ft_posts as $p) : ?>
		<article class="ft-post">
			<div class="ft-post-image">
				<a href="<?php echo get_the_permalink($p->ID) ?>"><?php echo get_the_post_thumbnail($p->ID) ?></a>
			</div>
			<div class="ft-post-details">
				<header class="ft-post-title">
					<h2>
						<a href="<?php echo get_the_permalink($p->ID) ?>"><?php echo $p->post_title; ?></a>
					</h2>
				</header>
				<div class="ft-post-meta">
					<span class="ft-post-date"><?php echo get_the_date('', $p->ID); ?></span>
				</div>
			</div>
		</article>
		<?php endforeach; ?>
</section>

  我们使用该函数get_posts()(内置的 WordPress 函数)从 WordPress 数据库中检索四个帖子。该函数可以接收一个参数——指定条件的变量数组。我们上面使用的其他三个 WordPress 函数是:

  • get_the_permalink()– 根据帖子 ID 检索帖子的永久链接
  • get_the_post_thumbnail()– 获取帖子的缩略图
  • get_the_date()– 获取发布日期

  在post__in密钥内,提供您想要显示为特色的帖子的 ID。稍后,当您想要更改帖子时,您必须更改 ID 密钥。另外,由于我们希望帖子的顺序与数组中给定的顺序相同post__in,因此将orderby键设置为post__in。否则,默认情况下,WordPress 按发布日期的顺序对帖子数组进行排序。

  推荐:[最新版]Swift Performance性能插件WordPress优化插件

  添加到动作挂钩Hooks,这就是我们在设置部分所做的。由于我们要在博客页面顶部显示布局,因此必须选择“挂钩”选项。

  • 使用before content挂钩。
  • 选择显示布局的页面,我们将选择博客/帖子页面选项。它将显示博客存档页面上的布局,同时将其隐藏在各个帖子和页面中。
  • 用户角色,我们想向所有用户展示它。所以选择全部

  推荐:Astra主题Container Layout容器布局

添加 CSS 规则

  现在,如果我们访问该网站,布局将显示为无样式。所以,我们必须添加一些CSS规则来使其美观。为此,我们将使用 WordPress 定制器,当我们在左侧窗格中编写代码时,它会在右侧显示实时预览。

使用Astra自定义布局创建特色帖子网格效果

  因此,单击“额外 CSS”选项并添加用于设置布局样式的代码。

.featured-posts {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8,1fr);
	height: 70vh;
	grid-column-gap: 2px;
	grid-row-gap: 2px;
}

article.ft-post {
	overflow: hidden;
	padding: 0 !important;
	width: initial !important;
	position: relative;
	background: transparent;
}

article.ft-post:first-child {
	grid-column: 1 / 4;
	grid-row: 1 / end;
}

article.ft-post:nth-child(2) {
	grid-column: 4 / end;
	grid-row: 1 / 6;
}

article.ft-post:nth-child(3) {
	grid-column: 4 / 6;
	grid-row: 6 / end;
}

article.ft-post:nth-child(4) {
	grid-column: 6 / end;
	grid-row: 6 / end;
}

.ft-post-image a {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}
.ft-post-details {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 10% 5% 5% 5%;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8));
}
.ft-post-title a,
.ft-post-meta {
	color: #fff;
}
.ft-post-image {
	margin: 0 !important;
}
.ft-post-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	transition: all .3s ease;
}
.ft-post-meta {
	margin: 10px 0;
	font-size: .8em;
}

article.ft-post:nth-child(3) .ft-post-title h2 a,
article.ft-post:nth-child(4) .ft-post-title h2 a{
	font-size: 18px;
}
.ft-post-title h2,
.ft-post-title h2 a { 
	line-height: 1;
}

article.ft-post:hover .ft-post-image a img {
	transform: scale(1.1);
}

@media screen and (max-width: 1024px) {
	article.ft-post:first-child {
	grid-column: 1 / 5;
	grid-row: 1 / 5;
}

article.ft-post:nth-child(2) {
	grid-column: 5 / end;
	grid-row: 1 / 5;
}

article.ft-post:nth-child(3) {
	grid-column: 1 / 5;
	grid-row: 5 / end;
}

article.ft-post:nth-child(4) {
	grid-column: 5 / end;
	grid-row: 5 / end;
}
}

@media screen and (max-width: 600px) {
	article.ft-post:first-child {
	grid-column: 1 / end;
	grid-row: 1 / 3;
}

article.ft-post:nth-child(2) {
	grid-column: 1 / end;
	grid-row: 3 / 5;
}

article.ft-post:nth-child(3) {
	grid-column: 1 / end;
	grid-row: 5 / 7;
}

article.ft-post:nth-child(4) {
	grid-column: 1 / end;
	grid-row: 7 / end;
}
	.featured-posts {
		height: 90vh;
	}
	.ft-post-title h2 a {
		font-size: 15px;
	}
	.ft-post-meta {
		display: none;
	}
}



  在所有设备预览上验证外观后,单击发布按钮以使编辑生效。

  推荐:如何从WordPress中删除Additional CSS额外CSS

总结

  以上是晓得博客为你介绍的如何使用Astra自定义布局创建特色帖子网格的全部内容,虽然并非所有博客都需要特色帖子,但它对新闻、旅行和摄影等特定领域有帮助,上面看到的只是实现这一目标的一种方法,如果您了解PHP、HTML 和 CSS,就可以按照您想要的任何方式进行设计,或者使用Astra Spectra插件来实现。

  推荐:怎么生成获取Google Translate API Key翻译网站

  推荐:Astra主题建站教程


滚动至顶部