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

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

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

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

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

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

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

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

　　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 Framework 中的作者框。如果还有什么问题，可以评论区留言探讨。

　　推荐：Genesis Framework主题建站教程