如何在 GeneratePress 主题中添加作者框。 [2021]

您知道您可以在 Generatepress 主题中添加作者框而无需安装额外的插件吗？

因此，为了帮助博客作者，我准备了一份详细指南，介绍如何使用 Generatepress 主题的元素功能添加作者框。

我知道你们很多人问为什么不在 WordPress 中添加一个作者框插件，让工作更简单。 因为安装额外的插件可能会影响您的网站速度。 最好使用一些自定义 HTML 和 CSS 代码来使用原生 Generatepress 元素功能生成作者框。

注意：只有在 WordPress 网站上安装了 Generatepress 高级插件时，才能使用此技巧。

为什么您的网站上需要作者框？

在博客文章末尾添加作者框有助于您的读者和搜索引擎（如 Google、Bing）了解文章背后的人。

它在读者和作者之间建立了良好的关系和信任，也有助于在互联网社区中建立权威。

你知道EAT 算法吗？ 要在 Google 中排名靠前，您需要通过建立其专业知识、权威和可信度来创建品牌——这正是 EAT 所代表的。 Author Box 是实现这一目标的第一步。

在 generatePress 主题中添加作者框的步骤。

在您的 Generatepress 主题中添加作者框之前，您需要在 WordPress 中进行一些基本设置。

1.添加个人资料照片和作者描述

转到WordPress 仪表板并单击用户部分。 现在单击用户名下方的编辑按钮。

现在向下滚动，您将看到一个名为“关于您自己”的选项。 在“传记信息”中写下您的作者描述并在其下方设置您的个人资料图片。

注意：您还可以使用一个简单的技巧在“作者”框中添加指向“关于我们”页面的链接。 在传记信息中以这种格式粘贴链接。

<a href="https://key2blogging.co/about-us/">关于我们页面</a>

这样， 您可以轻松地在作者框中添加带有链接的锚文本 生成新闻主题。

如果您尚未添加 Gravatar，则可以通过单击以下链接来完成此操作，如此处所示。

它会将您重定向到Gravatar 网站，您必须使用 WordPress 中提到的电子邮件地址创建一个帐户，然后在那里上传您的个人资料图片。 它会自动将个人资料照片提取到您的 WordPress 帐户。

2.激活元素模块

要激活元素模块，请转到外观 > GeneratePress > 元素 > 激活

如果您已经这样做了，那么您可以跳到第三步。

3.创建一个新的钩子元素

现在单击外观部分，您将看到一个名为“元素”的选项，单击它。 现在单击“添加新元素”并选择Hook 。

4、设置标题为“作者框”，粘贴HTML代码

您必须将标题设置为作者框并将以下 HTML 代码粘贴到代码编辑器中。

复制下面的代码

<div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. Setup Hook 设置

粘贴代码后，您必须设置 Hook 设置。 在 Hook 选项中选择“ generate after content ”，然后单击“ Execute PHP ”并将优先级设置为“ 20 ”。

6.设置显示规则

现在单击设置右侧的显示规则。 现在在位置选择“所有单数”并在排除选项卡中选择“首页”。

现在您已经完成了 Hook 设置。 所以，点击发布按钮。

7.添加CSS代码

现在您必须使用 CSS 代码设计您的作者框。 因此，要做到这一点，请转到外观>>自定义>>附加 CSS并粘贴以下代码，然后点击发布按钮。

复制 CSS 代码：

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

恭喜，您已成功在 Generatepress 主题中添加了作者框，无需任何插件。

视频指南：

注意：如果您使用的是 Generatepress 主题的免费版本，那么您必须使用插件添加作者框。

结论

现在我们已经介绍了在 WordPress 的 Generatepress 主题中添加作者框的分步过程。 如果您有任何疑问，请在评论部分询问我，或在Twitter 上联系我。

如果您喜欢本指南，请与您的博客社区分享并感谢您的努力。 谢谢你。

另请阅读：Blogger 的 10 个有用的 chrome 扩展