Cách thêm thông tin tác giả sau mỗi bài viết wordpress

[Thủ thuật WordPress] Cách thêm thông tin tác giả sau mỗi bài viết wordpress – Bạn đang dùng mã nguồn wordpress và bạn đang sử dụng theme nào? để xây dựng trang web cá nhân của mình. Nói đến theme cho của mã nguồn wordpress có rất là nhiều theme để bạn có thể lựa chọn và hầu hết các theme đều hỗ trợ chức năng hiển thị thông tin tác giả sau mỗi bài viết. Tuy nhiên “đời không như là mơ” cũng có một số theme sẽ không có phần thông tin tác giả sau mỗi bài viết. Và bạn muốn hiển thị thông tin tác giả sau mỗi bài viết để trang web của bạn mang tính chuyên nghiệp cao hơn vậy phải làm sao?

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách chuyển hướng liên kết cũ thành liên kết mới trong WordPress giúp bạn có thể dễ dàng chuyển hướng liên kết cũ thành liên kết mà không làm mất thứ hạng trang Web tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách thêm thông tin tác giả sau mỗi bài viết wordpress đơn giản nhất.

Cách thêm thông tin tác giả sau mỗi bài viết wordpress

Có thể nói phần thông tin tác giả bài viết rất quan trọng nó thể hiện thông tin cần thiết để độc giả có thể liên hệ sau mỗi bài viết như mình đã nói có một số theme không tích hợp phần giới thiệu tác giả sau mỗi bài viết và mình đã dành ra một buổi để tìm hiểu và mình đã tạo được phần thông tin tác giả sau mỗi bài viết như mẫu các bạn thấy bên dưới đây, hôm nay blog thủ thuật sẽ hướng dẫn các bạn thêm thông tin tác giả sau mỗi bài viết wordpress với các bước sau đây!

Để tạo được mẫu giới thiệu tác giả sau mỗi bài viết như trên bạn làm theo các bước sau đây. Đầu tiên bạn cần vào Menu Giao diện > kích chọn sửa. Bạn nhìn sang cột Menu bên phải và chọn vào file Functions.php.

Sau đó bạn copy đoạn code sau đây và dán vào file Functions.php trước thẻ đóng ?> là được.

function modify_contact_methods($profile_fields) {
    // Them thong tin 3 mang xa hoi lon nhat
    if(!isset($profile_fields['twitter'])) {
        $profile_fields['twitter'] = 'Twitter Username';
    }
    if(!isset($profile_fields['facebook'])) {
        $profile_fields['facebook'] = 'Facebook URL';
    }
    if(!isset($profile_fields['gplus'])) {
        $profile_fields['gplus'] = 'Google+ URL';
    }     
    // Xoa thong tin khong can thiet
    if(isset($contactmethods['aim'])) {
        unset($contactmethods['aim']);
    }
    if(isset($contactmethods['jabber'])) {
        unset($contactmethods['jabber']);
    }
    if(isset($contactmethods['yim'])) {
        unset($contactmethods['yim']);
    }
    return $profile_fields;
}
add_filter('user_contactmethods', 'modify_contact_methods');

Thêm thông tin tác giả sau bài viết

Sau khi dán xong bạn nhớ Cập nhật tập tin. Tiếp tục bạn nhìn sang Menu bên phải và chọn vào file Single.php hoặc Content.php tùy theme nha các bạn như mình mình sẽ chọn file Single.php.

Sau đó bạn dán đoạn code sau đây vào file Single.php vào vị trí cần xuất hiện (bạn nên để nó ở sau mỗi bài viết).

<!-- Tac gia -->
<div class="author-wrap">
    <div class="author-gravatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 120 ); ?></div>
    <div class="author-info">
        <div class="vcard author author-title">
            <span class="fn"><a target="_blank" class="ext-link" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm website của <?php the_author_meta('user_login'); ?>" rel="author external nofollow"><?php the_author_meta('display_name'); ?></a></span></div>
        <div class="author-description"><?php the_author_meta('description'); ?></div>
        <ul><li class="first">
                <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Bài viết của thuan's Blog"><img src="https://huuthuan.net/wp-content/uploads/llogo.png" height="80" width="220"></a></li>
            <li><a target="_blank" class="ext-link" rel="external nofollow" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm trang chủ của thuan's Blog"><img src="https://huuthuan.net/z-js/Blo.png" height="42" width="42"></a></li>
            <li><a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'facebook' ); ?>" title="Theo dõi thuan's Blog trên Facebook" rel="external nofollow"><img src="https://huuthuan.net/z-js/fa.png" height="42" width="42"></a></li>
            <li><a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'gplus' ); ?>" title="Theo dõi thuan's Blog trên Goolge Plus" rel="external nofollow"><img src="https://huuthuan.net/z-js/go.png" height="42" width="42"></a></li>
            <li><a rel="external" title="Theo dõi thuan's Blog trên Twitter" href="http://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>"><img src="https://huuthuan.net/z-js/twi.png" height="42" width="42"></a></li>
        </ul>
    </div>
</div>

Đây là đoạn code của mình đã thiết kế lại bạn có thể thay đổi theo mục đích của mình. Sau khi chỉnh sửa xong bạn nhớ Cập nhật lại nhé.

Vậy là xong rồi đấy bây giờ bạn ra chọn vào một bài viết nào đó để xem thử kết quả nhé. Tuy nhiên nó xấu lắm phải không các bạn và để “lột xác” bạn cần làm một thao tác sau đây.

Tiếp tục bạn nhìn sang cột Menu bên phải và chọn file Style.css.

Tùy chỉnh CSS

Sau đó bạn copy đoạn code sau đây và dán vào file Style.css vào dưới cùng là được.

/* tac gia
-------------------------------------------------------------- */
.author-wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C6C6C6;
    display: block;
    margin: 10px 0 30px;
    overflow: hidden;
    padding: 10px;
}
.author-gravatar {
    border-radius: 50px;
    float: left;
    height: 60px;
    line-height: 1;
    margin: 0;
    width: 60px;
}
.author-gravatar img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    height: 60px;
    padding: 2px;
    width: 60px;
}
.author-info {
    float: right;
    width: 86%;
}
.author-title {
    color: #F6F20C;
    display: block;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    margin: 0 0 10px;
}
.author-title a {
    color: #B0D4F2;
    font-size: 1.375rem;
    font-weight: 700;
}
.author-description {
    display: block;
}
.author-description p {
    margin: 0;
}
.author-wrap ul {
    list-style: none outside none;
    margin: 8px 0 0;
    overflow: hidden;
    padding: 0;
}
.author-wrap ul li {
    border-left: 1px solid #DFD5B5;
    display: inline-block;
    margin: 0;
    padding: 0 5px 0 7px;
}
.author-wrap ul li:first-child {
    border: medium none;
    padding: 0 0 0 1px;
}
.author-wrap ul li a {
    color: #4183C4;
    font-size: 16px;
}
.author-wrap ul li a:hover {
    color: #1B93DF;
    text-decoration: none;
}

Sau khi dán vào xong bạn tiến hành cập nhật. Và bây giờ bạn ra ngoài trang chủ và chọn vào một bài viết nào đó bạn sẽ thấy thông tin tác giả hiện rất chuyên nghiệp, quá đơn giản để thêm thông tin tác giả sau mỗi bài viết wordpress phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!