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

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

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

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

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

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

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

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

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

付费插件推荐

添加Element元素

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

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

这里提供了一段作者框介绍代码,我对此进行了调整,因此默认情况下链接会在新选项卡中打开。我喜欢在我的简历框中添加一个指向 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【用户】),你可以灵活的设置,下图中设置的是所有贴子(文章)才会显示作者介绍框。

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

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

添加作者介绍框样式

您还需要一点 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 以匹配您网站的外观。最后我们看到的效果如下图所示:

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

写在最后

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

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

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

WordPress主题相关阅读

  1. 最值得推荐的6个WordPress利基网站主题
  2. 国外最流行WordPress主题
  3. Avada主题建站流程全攻略
  4. 如何选择Amazon联盟网站WordPress主题
  5. 最好WordPress中文主题推荐
  6. 教你轻松挑选WordPress网站主题,把握这8个要点就可以了

加入电报群

【江湖人士】(jhrs.com)原创文章,作者:江小编,如若转载,请注明出处:https://jhrs.com/2021/43140.html

扫码加入电报群,让你获得国外网赚一手信息。

文章标题:Generatepress主题钩子Hook创建作者介绍框

(1)
江小编的头像江小编
上一篇 2021-08-08 17:51
下一篇 2021-08-08 22:06

热门推荐

Leave a Reply

Sending

国外老牌便宜域名服务商Namecheap注册com域名大优惠,抢到就赚到,优惠码:NEWCOM698
$5.98/年
直达官网