Tùy chỉnh Author Box trong Genesis

Nguyễn Duy Nhân

11 years ago

Genesis – một WordPress FrameWork hiện đang được nhiều bạn chú ý bên cạnh Thesis cũng chính là theme framework mà hiện tại NhanWeb đang sử dụng. Tuy Genesis hỗ trợ rất nhiều hook để bạn có thể tự thay đổi, tùy chỉnh nhưng không phải ai cũng có đầy đủ kiến thức để làm việc với các Hook đó. Trong bài viết này, NhanWeb sẽ giúp bạn tìm hiểu và tùy chỉnh phần thông tin tác giả của bài viết trong Genesis (author box).

Để tùy chỉnh Genesis theo ý mình, tại giao diện của child theme, bạn tìm đến file functions.php. Đây là file bạn có thể bổ sung thêm các cấu hình chính cho giao diện của mình cũng như tùy chỉnh lại các giao diện mặc định của Genesis dễ dàng.

Tủy biến Author Box Genesis

Phụ mục

Toggle

1. Xóa Author box cũ

Để làm lại phần thông tin tác giả, trước tiên bạn nên xóa phần thông tin mặc định này của Genesis bằng cách bổ sung đoạn code sau:

[code lang=”php”] remove_action( ‘genesis_after_post’, ‘genesis_do_author_box_single’ );
[/code]

Nếu bạn muốn xóa cả phần thông tin tác giả trong trang thông tin tác giả, bạn cần xóa luôn Hook genesis_do_author_box_archive bằng đoạn mã sau.

[code lang=”php”] remove_action( ‘genesis_before_loop’, ‘genesis_do_author_box_archive’ );
[/code]

Như vậy, bạn đã loại hoàn toàn phần author box mặc định của Genesis.

Tiếp theo, chúng ta sẽ tiến hành tạo Author box mới theo ý của mình.

2. Tạo Author Box mới

Tương tự như việc xóa, việc thêm vào một Author Box mới cũng cần được khai báo. Ở trên chúng ta đã xóa, giờ chúng ta sẽ tạo lại.

[code lang=”php”] add_action( ‘genesis_before_comments’, ‘theme_author_box’ );
[/code]

Tương tự, để tạo Author Box ở trang tác giả chúng ta cũng có đoạn mã sau:
[code lang=”php”] add_action( ‘genesis_before_loop’, ‘theme_author_box_archive’ );
[/code]

Hãy để tôi giúp bạn giải thích những đoạn mã trên. Trước tiên, nếu bạn chưa biết gì hề Hook trong WordPress bạn nên đọc thêm bài viết này. Sau khi bạn hiểu về Hook, chúng ta có thể giải thích đoạn mã trên như sau: hệ thống Genesis sẽ tìm kiếm, tại những trang mà hook genesis_before_comments, genesis_before_loop được kích hoạt, chúng ta sẽ bổ sung thêm 1 action được khai báo thông qua hàm theme_author_box() hoặc theme_author_box_archive() để thực thi việc tạo ra Author Box mới.

3. Hàm tạo Author Box

Chúng ta hãy bắt đầu tạo một hàm tên theme_author_box() để định nghĩa lại Author Box mới, hãy bắt đầu như sau:
[code lang=”php”] function theme_author_box() {
}
[/code]

Tùy theo nhu cầu của bạn, bạn có thể tự thiết kế Author Box riêng, trong phần này tôi cố gắng sử dụng những hàm thông dụng để lấy thông tin. Bạn có thể theo đó tùy biến nếu muốn.

[code lang=”php”] $authinfo = "<div class=\"author-box\">\r\n";
$authinfo .= get_avatar(get_the_author_id() , 80);
$authinfo .= "<strong>About <a href=\"" . get_the_author_meta(‘url’) . "\" target=\"_blank\" title=\"" . get_the_author_meta(‘website_title’) . "\" rel=\"nofollow\">" . get_the_author_meta(‘display_name’) . "</a></strong>\r\n";
$authinfo .= "<p>" . get_the_author_meta(‘description’) . "</p>\r\n";[/code]

Bạn cũng có thể lấy thêm các custom field nếu thích:
[code lang=”php”] $facebook = get_the_author_meta(‘facebook’);
$linkedin = get_the_author_meta(‘linkedin’);
$twitter = get_the_author_meta(‘twitter’);
$gplus = get_the_author_meta(‘gplus’);
$flength = strlen($facebook);
$llength = strlen($linkedin);
$tlength = strlen($twitter);
$glength = strlen($gplus);
[/code]

Sau khi lấy custom field về bạn có thể tùy biến lại để tạo ra phần thông tin liên hệ tác giả:
[code lang=”php”] if ($flength > 1 || $glength > 1 || $llength > 1 || $tlength > 1) {
if (($flength <= 1 && $glength <= 1 && $llength <= 1) && $tlength > 1) {
$authinfo .= "<p id=\"authcontact\"><a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . $twitter . " on Twitter\">Follow " . get_the_author_meta(‘first_name’) . " on Twitter</a></p>\r\n";
} else {
$authinfo .= "<p id=\"authcontact\">Find " . get_the_author_meta(‘first_name’) . " on ";
if ($flength > 1) {
$authinfo .= " <a href=\"http://facebook.com/" . $facebook . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta(‘display_name’) . " on Facebook\">Facebook</a>";
}
if ($glength > 1) {
if ($flength > 1) {
$comma = ‘,’;
} else {
$comma = ”;
}
if ($llength > 1 || $tlength > 1) {
$and = ”;
} else {
$and = ‘ and’;
}
$authinfo .= $comma . $and . " <a href=\"http://plus.google.com/" . $gplus . "\" rel=\"me\" target=\"_blank\" title=\"" . get_the_author_meta(‘display_name’) . " on Google+\">Google+</a>";
}
if ($llength > 1) {
if ($flength > 1 || $glength > 1) {
$comma = ‘,’;
} else {
$comma = ”;
}
if ($tlength > 1) {
$and = ”;
} else {
$and = ‘ and’;
}
$authinfo .= $comma . $and . " <a href=\"http://www.linkedin.com/in/" . $linkedin . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta(‘display_name’) . " on LinkedIn\">LinkedIn</a>";
}
if ($tlength > 1) {
$authinfo .= ", and <a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta(‘display_name’) . " on Twitter\">Twitter</a>";
}
[/code]

Còn một số hàm có sẵn của WordPress bạn có thể tận dụng; Ví dụ, bạn chỉ muốn Author Box hiển thị ở một số vị trí nào đó thôi, bạn có thể thiết lập như sau:
[code lang=”php”] if ( is_single() ) {
echo $authinfo;
}
[/code]

Ngoài ra bạn cũng có thể sử dụng các hàm khác như is_author(), is_page()….

4. Mã nguồn đầy đủ

Để giúp các bạn có cái nhìn trực quan hơn, NhanWeb xin đăng tải lại đoạn code đã viết và giải thích ở trên để bạn tham khảo:

[code lang=”php”] remove_action(‘genesis_after_post’, ‘genesis_do_author_box_single’);
add_action(‘genesis_before_comments’, ‘theme_author_box’);

remove_action( ‘genesis_before_loop’, ‘genesis_do_author_box_archive’ );
add_action( ‘genesis_before_loop’, ‘theme_author_box_archive’ );

Như vậy là bạn đã thực hiện các công việc như xóa Author Box mặc định của Genesis, tạo một AuthorBox mới hoàn toàn theo ý của mình và gắn nó vào action hook tương ứng để nó có thể hoạt động được. Bài viết đến đây là hết, chúc các bạn thực hiện thành công và nhớ để lại comment nhé.