Hướng dẫn thêm hồ sơ mạng xã hội vào author box genesis framework.

Bài viết này tôi sẽ hướng dẫn các bạn cách làm thế nào để thêm hồ sơ mạng xã hội vào author box genesis framework.

Giống như ảnh chụp màn hình bên dưới.

Quá trình thực hiện.

1. Xóa bỏ một số chức năng không dùng đến trong author box và thêm chức năng mới.
2. Xóa hộp tác giả cũ và thêm hộp tác giả mới, lấy link từ hồ sơ mạng xã hội gắn vào author box như đã đề cập ở trên.
3. Thêm CSS vào style.css để tạo giao diện cho author box đẹp hơn.

Hướng dẫn thêm hồ sơ mạng xã hội vào author box genesis framework.

Bước 1: Thêm mã sau vào functions.php trong thư mục child theme của Genesis.

function change_contact_info($contactmethods) {
 unset($contactmethods['aim']);
 unset($contactmethods['yim']);
 unset($contactmethods['jabber']);
 $contactmethods['website_title'] = 'Website Title';
 $contactmethods['twitter'] = 'Twitter';
 $contactmethods['facebook'] = 'Facebook';
 $contactmethods['linkedin'] = 'Linked In';
 $contactmethods['gplus'] = 'Google +';
 return $contactmethods;
 }
 add_filter('user_contactmethods','change_contact_info',10,1);

Vào chỉnh sửa hồ sơ và thêm các trường mới (facebook, google+, trwite…) trong admin cpanel.

Bước 2: Thêm Author box mới.

Chú ý: Việc làm này sẽ xóa bỏ box author cũ và thêm những tính năng mới trong bài viết.

#Thê hồ sơ mạng xã hội vào author box genesis
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8);
add_action('genesis_after_entry', 'theme_author_box', 8);

function theme_author_box() {
 $authinfo = "<div class=\"postauthor\">\r\n";
 $authinfo .= get_avatar(get_the_author_id() , 100);
 $authinfo .= "<h4>". get_the_author_meta('display_name') ."</h4>\r\n";
 $authinfo .= "<p>" . get_the_author_meta('description') . "</p>\r\n";
 $authinfo .= "</div>\r\n";
 $facebook = get_the_author_meta('facebook');
 $twitter = get_the_author_meta('twitter');
 $gplus = get_the_author_meta('gplus');
 $blog_title = get_the_author_meta('blog_title');

$flength = strlen($facebook);
$tlength = strlen($twitter);
$glength = strlen($gplus);
$llength = strlen($blog_title);
 
 $authsocial = "<div class=\"postauthor-bottom\"> <p><span>Connect With Me :</span>\r\n"; 
if ($flength > 1) {
 $authsocial .= "<a class=\"author-fb\" href=\"http://facebook.com/" . $facebook . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Facebook\">Facebook</a>";
}

if ($glength > 1) { 
 $authsocial .="<a class=\"author-gplus\" href=\"" . $gplus . "\" rel=\"me\" target=\"_blank\" title=\"" . get_the_author_meta('display_name') . " on Google+\">Google+</a>";
}

if ($tlength > 1) { 
 $authsocial .= "<a class=\"author-twitter\" href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Twitter\">Twitter</a>";
}

if ($llength > 1) { 
 $authsocial .= "<a class=\"author-blog\" href=\"" . $blog_title . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " Personal Blog\">Personal Blog</a>";
}

$authsocial .= "</p>\r\n";

$authsocial .= "</div>\r\n";
 
 if ( is_single() ) {
 echo $authinfo;
 echo $authsocial;
 }
}

Bước 3: Upload icon mạng xã hội.

Tải xuống file author-icons.zip, và upload vào thư mục images.

Bước 4: Thêm đoạn mã CSS sau vào files style.css.

.postauthor {
 margin-top: 15px;
 border: 1px solid #e2eef7;
 overflow: hidden;
 padding: 0;
 background-color: #f5f8fa;
 }

.postauthor img {
 display: block;
 float: left;
 height: 100px;
 margin-right: 15px;
 width: 100px;
 }

.postauthor h4 {
 color: #333333;
 font-size: 16px;
 margin-bottom: 0px;
 margin-left: 105px;
 padding: 10px 0 8px;
 }

.postauthor p {
 color: #000;
 font-size: 15px;
 line-height: 27px;
 margin-bottom: 0;
 }

.postauthor-bottom {
 padding: 10px 20px 0 20px;
 border-bottom:1px solid #ddd;
 overflow: hidden;
 }

.postauthor-bottom span {
 font-weight: bold;
 font-size: 14px;
 margin: 0 10px 0 0;
 }

.postauthor-bottom .author-fb {
 background: url("images/author-fb.png") no-repeat scroll left center transparent;
 color: #47619F;
 font-size: 14px;
 padding: 0 0 0 25px;
 margin: 0 10px 0 0;
 }

.postauthor-bottom .author-twitter {
 background: url("images/author-twitter.png") no-repeat scroll left center transparent;
 color: #0099FF;
 font-size: 14px;
 padding: 0 0 0 25px;
 margin: 0 10px 0 0;
 }

.postauthor-bottom .author-gplus {
 background: url("images/author-gplus.png") no-repeat scroll left center transparent;
 color: #D03B3B;
 font-size: 14px;
 padding: 0 0 0 25px;
 margin: 0 10px 0 0;
 }

.postauthor-bottom .author-blog {
 background: url("images/author-blog.png") no-repeat scroll left center transparent;
 color: #21759b;
 font-size: 14px;
 padding: 0 0 0 25px;
 }

Lưu lại kết quả: