Generatepress主题钩子Hook创建作者介绍框

江小编

3 年前

使用Generatepress主题Hook创建作者介绍框，如果你的英文站是使用的GeneratePress主题，那么可以方便的使用Generatepress主题Hook创建作者介绍框，然后设置作者介绍框在每一篇文章或者页面的底部显示，这样就会让你的关注者更加的了解你这个站长。

对于开始做英文站的站长来说，阅读或者借鉴英文国家人士的博客网站，你会学习到非常多的内容，当然你也可以考虑加入Wealthy Affiliate成为高级会员后会在社区学习到更多的通过英文niche网站来赚钱的方法。通过经常混迹于英文博客网站或者社区，如果你留意博客主的文章，会在底部发现类似这样的作者介绍框。

那么本文就告诉你，使用Generatepress主题Hook创建作者介绍框。

Generatepress主题钩子创建作者介绍框

在前面的一些关于GeneratePress 主题介绍的文章中，我们详细的分享了这个主题，它是非常棒的一款轻量级，性能高的主题，这个 Code Life 英文博客站就是使用的GeneratePress 主题来建立的。所以我们就可以利用 Generatepress 提供的钩子（Hook）功能来创建一个作者介绍框，并将它Hook到每一篇文章或者页面里面（即钩在文章或者页面）。

利用GeneratePress主题，您可以在网站的任何位置添加元素，包括页眉、内容部分、内容后、页脚等，这也就是Hook的作用。接下来我们就按照下面的步骤来创建作者介绍框吧。

付费插件推荐

WordPress广告位置插：Ad Inserter Pro
产品Review评论插件：WP Review Pro
短链接插件：Pretty Links
自动购物网站插件：alidropship
SEO关键字工具：Long Tail Pro 和 Secockpit
WordPress网站SEO插件：RankMath
轻量级的块布局插件：GenerateBlocks

付费主题推荐

添加Element元素

下面的代码就是作者框的页面代码。

这里提供了一段作者框介绍代码，我对此进行了调整，因此默认情况下链接会在新选项卡中打开。我喜欢在我的简历框中添加一个指向 Twitter 的链接。代码片段在下方提供。

<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div>
	<h5 class="author-title"><?php printf( get_the_author_meta( 'display_name') );?></h5>
	<div class="author-summary">
		<p class="author-description"><?php echo links_add_target(get_the_author_meta( 'description' )); ?></p>
	</div>
</div>

您需要选中“Execute PHP（执行 PHP）”框，对于钩子（Hook），请使用 after_content. 你可以把它放在任何你想要的地方。然后在显示规则下，您可以选择只希望它显示在您的博客文章中。

设置显示规则

上图中将代码粘贴进去后，并且勾选【Execute PHP (执行PHP)】后，需要点击Display Rules设置显示规则，这里分别有3个设置项（左边的Location【设置位置】、Exclude【排除】、Users【用户】），你可以灵活的设置，下图中设置的是所有贴子（文章）才会显示作者介绍框。

完成之后，需要微调样式，让作者介绍框更多的美观。

添加作者介绍框样式

您还需要一点 CSS 来设置作者简介框的样式。您可以简单地将其放在 WordPress 定制器中的附加 CSS 下。

.author-description {
    margin-bottom:5px;
}
.author-box {
    padding: 4%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
	background-color: #fafafa;
}
.author-box a {
    border-bottom: 2px solid rgba(45, 130, 230, 0.4);
}
.author-box .avatar {
    width: 40px;
    border-radius: 100%;
    margin-right: 20px;
}
h5.author-title {
    margin-bottom: 0.5em;
	  font-size:1.5em;
}

这是作者框的外观。当然，您可以自定义 CSS 以匹配您网站的外观。最后我们看到的效果如下图所示：

写在最后

通过简单的几个步骤，我们就为整个网站所有的文章添加作者介绍框，你是否喜欢这篇WordPress作者介绍框教程呢？你还可以发挥使用，例如设置广告位，联盟披露内容等等，需要对整个网站全局产生影响的内容，我们都可以通过Generatepress主题提供的Hook（钩子）来完成。

我必须说实话， GeneratePress是一个很棒的主题，非常的轻量，意味着代码精简，性能出众，是众多WordPress 主题中加载速度最快之一，但出于多种原因，我仍然更喜欢在我的网站上使用GeneratePress，另外再配合generateblocks这个插件，可以布局出非常漂亮的网站，例如你可以在WordPress网站安装GenerateBlocks插件来实现一个推荐框，如下图所示，有助于提高转化率。