Tổng hợp code tùy chỉnh Author box Genesis Framework

Bài viết này mình sẽ chia sẻ cho các bạn tất cả các đoạn code cơ bản giúp tùy chỉnh Author box Genesis Framework. Thêm giá trị mạng xã hội cho author box nhằm làm cho blog của bạn chuyên nghiệp hơn.

Tổng hợp code tùy chỉnh Author box Genesis Framework cơ bản

Các code dưới đây bạn chỉ việc thêm vào file Fuction.php trong thư mục theme con (child theme)

# Tổng hợp các đoạn code cơ bản

Phần này thì hầu như bạn đi blog nào cũng có bởi nó được chia sẻ trong hướng dẫn của Studiopress.

• Thêm Author Box trên Archive Page

//* them author box vao archive page add_filter( 'get_the_author_genesis_author_box_archive', '__return_true' );

• Thêm Author Box trên các bài viết riêng lẻ

//*  them author box vao single post
add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

• Tùy chỉnh phần tiêu đề trước tên tác giả

//* sua tieu de tac gia
add_filter( 'genesis_author_box_title', 'bg_custom_author_box__title' );
function bg_custom_author_box__title() {
return '<h1>Về tác giả</h1>'; }

• Tùy chỉnh kích thước ảnh đại diện Gravatar

//* chinh sua kich thuoc gravatar
add_filter( 'genesis_author_box_gravatar_size', 'bg_author_box_gravatar' );
function bg_author_box_gravatar( $size ) {
return '96';
}

• Xóa author box trên Archive Page

//* xoa author box archive page
remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive', 15 );

• Loại bỏ author box trên bài viết

//* xoa author box tren single post
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );

Ngoài ra bạn cũng có thể tự chỉnh sửa để tạo ra phần author box của chính bạn.

# Thêm giá trị Social cho author box Genesis Framework chi tiết

Trước hết bạn phải khởi tạo giá trị author box cho tất cả cả bài viết của bạn với code sau

add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

Bật author box lên cho blog

Sau đó bạn tiến hành thêm các giá trị thông tin mạng xã hội của bạn vào.

Thêm bộ lọc thông tin cho genesis quản lý thông tin mạng xã hội của bạn bằng code sau:

//Change Default Method Contacts in User Profile
function themeprefix_modify_user_contact_methods( $user_contact ){

  /* Them mxh */
  $user_contact['pinterest'] = __( 'Pinterest URL' );
  $user_contact['linkedin'] = __( 'LinkedIn URL' );  

  /* xoa gia tri author box cu */
  unset($user_contact['aim']);
  unset($user_contact['jabber']);
  unset($user_contact['yim']);

  return $user_contact;
}

add_filter( 'user_contactmethods', 'themeprefix_modify_user_contact_methods' );


//Load Fontawesome
function themeprefix_fontawesome_styles() {
	wp_register_style( 'fontawesome' , '//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css', '' , '4.4.0', 'all' );
	wp_enqueue_style( 'fontawesome' );
}

add_action( 'wp_enqueue_scripts', 'themeprefix_fontawesome_styles' ); 


//tao moi Author Box
function themeprefix_alt_author_box() {
    if( is_single( '' ) ) {
//author box code
			?>
	   		<div class="author-box"><?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?> 
                <div class="about-author"><h4>About <?php echo get_the_author(); ?></h4><p><?php echo get_the_author_meta( 'description' ); ?> 
            </div>
            <div class="all-posts"><a href="<?php echo get_author_posts_url(  get_the_author_meta( 'ID' )); ?>">View all posts by <?php echo  get_the_author(); ?></a></div>

                <ul class="social-links">
	                
                <?php if ( get_the_author_meta( 'facebook' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'facebook' ); ?>"><i class="fa fa-facebook"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'twitter' ) != '' ): ?>
                    <li><a href="https://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>"><i class="fa fa-twitter"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'googleplus' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'googleplus' ); ?>"><i class="fa fa-google-plus"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'github' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'github' ); ?>"><i class="fa fa-github"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'user_email' ) != '' ): ?>
                    <li><a href="mailto:<?php echo get_the_author_meta( 'user_email' ); ?>"><i class="fa fa-envelope-o"></i></a></li>
                <?php endif; ?>
                
                <?php  if ( get_the_author_meta( 'user_url' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'user_url' ); ?>"><i class="fa fa-laptop"></i> </a></li>
                <?php endif; ?>
                
                </ul>
         </div>
    <?php 
    }
}
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
add_action( 'genesis_entry_footer', 'themeprefix_alt_author_box', 10 );

Và chúng ta trang điểm 1 ít cho phần author box với 1 đoạn code thêm vào css nhé:

/* For FontAwesome Icon Stylin */
.social-links {
    overflow:auto;
    margin-top:10px;
}
 
.social-links li {
    list-style-type: none;
    float: left;
}
 
.social-links a {
    border-bottom: none;
}
 
.social-links i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    padding-top: 15%;
    transition-property: opacity;
    transition-delay: 0.3s;
    transition-duration: .5s;
}
 
.social-links i:hover {
    opacity:.7;   
}

Vậy là xong bạn đã có 1 khung author box dễ thương với thông tin mạng xã hội bạn cần. Còn rất nhiều cách tùy chỉnh khá hay khác mà bạn có thể tìm trên mạng.