Bạn có nhiều tác giả viết bài trong blog WordPress của mình không? Nếu có, thì bạn nên thêm một hộp tác giả vào chủ đề của blog thay vì thêm dòng tác giả theo cách thủ công trong mỗi bài viết. WordPress cho phép nhiều tùy chỉnh mà bạn có thể nhanh chóng viết mã một hộp tác giả đơn giản cho chủ đề blog của bạn.

Trước khi chúng ta đi xa hơn, chúng ta hãy xem xét một số ví dụ:

1. Smashing Magazine Tác giả Box

Đây là cách hộp tác giả tìm trong Blog thiết kế nổi tiếng của Smashing Magazine. Byline của một bài viết cho thấy tên của tác giả, hình ảnh hồ sơ, mô tả, URL blog và liên kết đến tài khoản Twitter của tác giả.

2. Hộp tác giả ProBlogDesign

Hộp tác giả tại Problogdesign trông rất ấn tượng. Tác giả Gravatar và mô tả được hiển thị ở cột bên trái trong khi cột bên phải hiển thị các nút đánh dấu trang xã hội.

Tạo một hộp tác giả cho chủ đề blog của bạn

1. Đầu tiên, hãy cho tất cả các tác giả cập nhật hồ sơ tác giả của họ từ “Liên kết hồ sơ” được cung cấp trong khu vực quản trị WordPress. Tác giả phải điền tên, họ và thêm tiểu sử tùy chỉnh vào trường mô tả. Bạn cũng nên thêm liên kết của trang web của tác giả vào trường tương ứng như được hiển thị bên dưới:

Đây là những thông số cơ bản mà chúng tôi sẽ hiển thị trong phần byline tác giả. Chúng tôi sẽ thêm các thông số khác sau này (nếu được yêu cầu.)

2. Để hiển thị hộp tác giả, hãy mở tệp single.php của bạn và tạo một div HTML duy nhất trong đó hộp tác giả sẽ được đính kèm. Ví dụ

Div này được tạo ra để chúng ta có thể thêm các quy tắc CSS và tạo kiểu cho phần phù hợp. Bạn có thể đặt mã này ở nơi bạn muốn dòng ghi đè tác giả hiển thị.
3. Bây giờ bạn cần phải quyết định các yếu tố mà bạn muốn hiển thị trong phần byline tác giả là gì. Một số tham số và mã tương ứng của chúng được đưa ra dưới đây:
1. Tên của tác giả:
Nếu bạn chỉ muốn hiển thị tên của tác giả, hãy sử dụng
2. Họ của tác giả:
Để hiển thị họ của tác giả, sử dụng
3. Hiển thị cả tên và họ:
Thật dễ dàng để kết hợp cả hai mã trên và hiển thị tên đầy đủ của tác giả. Để hiển thị tên đầy đủ, hãy sử dụng
4. Hiển thị tên tác giả với một liên kết đến trang web của mình :
Bạn có thể hiển thị tên đầy đủ của tác giả và đồng thời liên kết tên với trang web của tác giả. Sử dụng
5. Tác giả Mô tả:
Để hiển thị mô tả tiểu sử tác giả, hãy sử dụng
6. Liên kết trang web của tác giả hiển thị:
Để hiển thị URL của trang web của tác giả, hãy sử dụng
Tất cả các mã trên có thể được tùy chỉnh cho phù hợp với phong cách của bạn. Bạn có thể tiếp tục kèm theo các mã ở trên trong các thẻ HTML như hình dưới đây:
7. Tác giả Gravatar:
Để hiển thị sử dụng Gravatar của tác giả
Số "80" được sử dụng trong mã trên là viết tắt của kích thước của hình ảnh. Bạn có thể tùy chỉnh nó hơn nữa mà phụ thuộc vào cách lớn hoặc nhỏ như thế nào bạn muốn hình đại diện được hiển thị.
Tôi nghĩ rằng bạn đang nhận được ý tưởng làm thế nào để tùy chỉnh các mã, mà hoàn toàn phụ thuộc vào cách bạn muốn phần trông như thế nào.
8. Địa chỉ email của tác giả:
Để hiển thị địa chỉ email của tác giả, hãy sử dụng
9. Liên kết với tài khoản Twitter:
Điều này là một chút khó khăn, bởi vì WordPress không có bất kỳ lĩnh vực để hiển thị URL của hồ sơ Twitter theo mặc định. Tuy nhiên, có một cách giải quyết thông minh có thể được sử dụng để hiển thị bất kỳ liên kết hoặc văn bản tùy chỉnh nào do tác giả cung cấp.
Yêu cầu các tác giả của blog của bạn thêm liên kết tài khoản Twitter của họ vào trường AIM trong “Tiểu sử” trong khu vực quản trị WordPress.
Bây giờ quay lại tệp single.php và chèn
để hiển thị liên kết hồ sơ trên Twitter. Một lần nữa, nó hoàn toàn phụ thuộc vào cách bạn tùy chỉnh giao diện và đầu ra. Đây là một mã ví dụ:
Style The Author Section sử dụng CSS 
Khi công việc mã hóa kết thúc, đã đến lúc làm đẹp phần và căn chỉnh các mục đúng cách. Đây là một mã css ví dụ
 // chứa hộp chú thích // phần còn lại của mã // tác giả kết thúc 
Cấu trúc trên có thể được minh họa bằng sơ đồ sau
Trong cấu trúc CSS ở trên, chúng tôi đang tạo ba thẻ div. Thẻ div bên ngoài sẽ chứa hai thẻ div bên trong được đặt tên tương ứng là "trái" và "phải". Div “Trái” sẽ chứa tác giả gravatar trong khi div bên phải sẽ chứa tên tác giả, tiểu sử và liên kết tiểu sử Twitter. Chúng tôi sẽ căn chỉnh div “trái” sang trái và div “phải” sang phải. Đây là toàn bộ mã và CSS mà bạn cần sử dụng
Mã số
Bao gồm mã sau trong tệp single.php của bạn nơi bạn muốn phần thông tin tác giả xuất hiện:
Được viết bởi

CSS
Bao gồm mã sau trong biểu định kiểu CSS
 .authorbox {width: 590px; height: 140px; background: #CCC; font-family: verdana; font-size: 13px; background-color: #FAFAFA; border: 1px solid # F0F0F0;} .left {float: left; chiều rộng: 100px; chiều cao: 100px; lề: 25px;} .right {float: left; margin-top: 25px; width: 425px;} 
Lưu ý: Bạn nên thay đổi tên lớp bằng cách so sánh với các lớp hiện có của chủ đề của bạn để tránh xung đột.
Và đây là đầu ra của các mã trên
Điều đó kết thúc hướng dẫn. Bạn đã tạo một phần Thông tin tác giả trong chủ đề WordPress của mình chưa? Hãy nghe suy nghĩ và ý tưởng của bạn trong phần bình luận.