Genesis如何将社交媒体图标添加到作者框

Genesis如何将社交媒体图标添加到作者框

Genesis如何将社交媒体图标添加到作者框

  Genesis 带有一个基本的作者框集成,布局非常简单。如果你想修改它以显示社交媒体图标,可以在一段编码的帮助下完成。

Genesis如何将社交媒体图标添加到作者框
Genesis如何将社交媒体图标添加到作者框

  如果你在WordPress建站中使用Genesis Framework主题,会注意到Genesis 中的作者框非常简单。在这篇博文中,我们晓得博客将为你介绍Genesis如何将社交媒体图标添加到作者框。

  推荐:怎么安装Genesis Framework主题框架

  注意:本教程使用的是Genesis Sample子主题来实现的。(推荐:什么是WordPress子主题?)

用于修改作者框的可用过滤器

  Genesis 中的 Author Box 有 3 个不同的组成部分 – Author Gravatar、Title、Description。您可以使用其中任何一种来根据需要修改输出。

Genesis主题作者框
Genesis如何将社交媒体图标添加到作者框

  Genesis 允许您修改其组件的方式是为您提供钩子和过滤器。以下是可用于修改 Genesis 中作者框的过滤器列表。

  • genesis_author_box_gravatar_size – 默认的 gravatar 大小为 70 像素。您可以使用此过滤器来更改它。
  • genesis_author_box_title – 此过滤器将允许您修改作者框的标题。这个过滤器只修改标题文本,
  • genesis_author_box – 此过滤器允许修改作者框的完整输出,因此可以使用此过滤器完成任何重大改造。

如何在 Genesis 框架中使用过滤器

  可以创建一个函数并将其附加到过滤器,以便它可以更改内置函数的输出。以下是此过滤器的应用方式:

$output = apply_filters( 'genesis_author_box', $output, $context, $pattern, $gravatar, $title, $description );

  这意味着函数将接收 6 个参数,需要在最终输出中返回一个变量。以下是每个参数的含义:

  • $output – 将为 Author Box 打印的完整 HTML。这是您在更改后需要返回的 HTML 输出。
  • $context – 当前上下文。您可以使用它来将上下文元素放在作者框中。
  • $pattern – 此模式定义作者框的输出格式。
  • $gravatar – 作者的 Gravatar。gravatar 的默认大小为 70 像素。如果你想改变它,你可以使用 genesis_author_box_gravatar_size 过滤器。
  • $title – 作者框的标题。这只是文本,如果您需要格式化,则需要使用 $pattern 来格式化标题。
  • $description – 作者描述。您可以在用户配置文件部分更改它。

  推荐: 如何从Genesis Framework主题文章帖子信息中删除作者

如何添加我们的过滤器

  您将使用 add_filter 调用来附加您的过滤器方法。

add_filter('genesis_author_box', 'custom_author_box', 10, 6);

  下面是每个参数的说明:

  • genesis_author_box – 您要使用的过滤器名称,在本例中为 genesis_autho_box
  • custom_author_box – 您要为此过滤器调用的函数名称。您可以根据自己的意愿更改它并为其命名。
  • 10 – 此功能的优先级。此优先级将决定附加功能的顺序,它们将按优先级顺序运行,默认值为 10。
  • 6 – 要接收的参数数量。默认为 1,并且您只会收到 $output 参数。

作者框自定义功能

  让我们为作者创建社交按钮并将其附加到作者框。这是一个示例代码,它将创建类似于 Metro 主题中显示的社交图标。

/**
 * Author Box With Social Icons
 *
 * This function will add social icons to author box in genesis. Add this to your function.php
 *
 * @author  MetaBlogue
 * @license GPL-2.0+
 * @link    https://metablogue.com/genesis-add-social-media-icons-author-box/
 */
add_filter( 'genesis_author_box','custom_author_box', 10, 6);
function custom_author_box($output, $context, $pattern, $gravatar, $title, $description) {
  
  //Create Social Buttons
  $google_plus   = get_the_author_meta( 'googleplus' );
  $twitter   = "https://twitter.com/" . get_the_author_meta( 'twitter' );
  $facebook   = get_the_author_meta( 'facebook' );
  $youtube   = get_the_author_meta( 'youtube' );
  $social_buttons = '';
  if ($google_plus) {
     $social_buttons .= '<a class="social-buttons" title="My Google +" rel="nofollow noopener" href="' . esc_url($google_plus) . '" target="_blank">Google+</a>'; }
  if ($twitter) {
     $social_buttons .= '<a class="social-buttons" title="Twitter" rel="nofollow noopener" href="' . esc_url($twitter) . '" target="_blank">Twitter</a>'; }
  if ($facebook) {
     $social_buttons .= '<a class="social-buttons" title="Facebook" rel="nofollow noopener" href="' . esc_url($facebook) . '" target="_blank">Facebook</a>'; }
  if ($youtube) {
     $social_buttons .= '<a class="social-buttons" title="YouTube" rel="nofollow noopener" href="' . esc_url($youtube) . '" target="_blank">YouTube</a>'; }
	
  //Title formatting is moved to $pattern and we need to recreate it now
  $heading_element = 'h1';
  if ( 'single' === $context && ! genesis_get_seo_option( 'semantic_headings' ) ) {
  	$heading_element = 'h4';
  } elseif ( genesis_a11y( 'headings' ) || get_the_author_meta( 'headline', (int) get_query_var( 'author' ) ) ) {
	$heading_element = 'h4';
  }
  
  //Change the gravtar size to 120 px
  $gravatar_size = apply_filters( 'genesis_author_box_gravatar_size', 120, $context );
  $gravatar      = get_avatar( get_the_author_meta( 'email' ), $gravatar_size );
  
  /* The author box markup, contextual - recreate with Social Icons */
  $pattern  = sprintf( '<section %s>', genesis_attr( 'author-box' ) );
  $pattern .= '%s<' . $heading_element . ' class="author-box-title">%s</' . $heading_element . '>';
  $pattern .= '<div class="author-box-content" itemprop="description">%s';
  if ($social_buttons)
    $pattern .= '<hr />%s';
  $pattern .= '</div></section>';
    
  if ($social_buttons) {
	  return sprintf( $pattern, $gravatar, $title, $description, $social_buttons );
  } else {
	  return sprintf( $pattern, $gravatar, $title, $description);	
  }
}

  这段代码从作者个人资料创建社交图标链接,将 gravatar 大小增加到 120 像素,并更改模式以添加社交按钮,以防万一。您可以在用户配置文件部分添加可用的媒体配置文件。

  推荐:Easy WP SMTP插件教程设置WordPress网站发送电子邮件

CSS 更改

  现在我们需要更改 CSS 以使其看起来更好。可以复制 CSS 并将其粘贴到 Style.css 文件中。推荐:如何将自定义CSS添加到WordPress网站

.author-box {
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border: 1px solid #b3b3b3;
}

.author-box .avatar  {                 
border-radius: 50% 50% 50% 50%;       
}

a.social-buttons {
	background-color: #333;
	border-right: 1px solid #fff;
	color: #fff;
	float: left;
	font-size: 10px;
	font-size: 1rem;
	overflow: hidden;
	padding: 8px 0;
	padding: 0.8rem 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 25%;
}

a.social-buttons.last {
	border: none;
}

a.social-buttons:hover {
	background-color: #f96e5b;
}

  这将更改社交按钮的布局,使作者的gravatar 图像圆形而不是方形,并为作者框添加阴影。还可以使用 CSS 标签 .author-box、.author-box-title 和 .author-box-content 来更改作者框的布局。

Genesis将社交媒体图标添加到作者框效果
Genesis如何将社交媒体图标添加到作者框

总结

  以上是晓得博客为你介绍的Genesis如何将社交媒体图标添加到作者框的全部内容,希望这篇文章能让了解如何修改 Genesis Framework 中的作者框。如果还有什么问题,可以评论区留言探讨。

  推荐:Genesis Framework主题建站教程

给文章评分

ThemeForest 模板套件
可视化创建WordPress网站
siteground主机

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top