Cách tạo kiểu thẻ trong WordPress

WordPress cho phép bạn sắp xếp nội dung của bạn thành các nguyên tắc phân loại. Theo mặc định, nó đi kèm với các thể loại và nhãn. Mặc dù các danh mục có thể được sử dụng để sắp xếp nội dung của bạn thành các phần khác nhau, các thẻ có thể được sử dụng để sắp xếp nội dung theo các chủ đề cụ thể hơn. Bạn có thể hiển thị các thẻ được sử dụng trên trang web của mình trong đám mây thẻ hoặc ở định dạng danh sách. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thiết kế thẻ WordPress.

Hiển thị tất cả các thẻ có số lượng bài đăng WordPress

Một số trang web phổ biến hiển thị các thẻ phổ biến nhất của họ dưới dạng chủ đề trên trang tệp của họ hoặc trong khu vực chân trang. Đây là cách bạn có thể hiển thị tất cả các thẻ bài đăng của mình, với số lượng bài đăng và không sử dụng đám mây thẻ.

Điều đầu tiên cần làm là sao chép và dán mã này vào tệp tin.php của chủ đề hoặc plugin dành riêng cho trang web.

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= 'term_id) .'">'. $tag->name . ''. $tag->count .'' . "n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

Mã này chỉ đơn giản hiển thị tất cả các thẻ của bạn với số bài đăng của bạn bên cạnh chúng. Tuy nhiên, để hiển thị nó trên trang tệp hoặc widget của bạn, bạn cần sử dụng mã ngắn này:

[wpbtags]

Sử dụng mã này sẽ chỉ hiển thị các liên kết thẻ và số bài đăng bên cạnh chúng. Nó sẽ không làm cho cô ấy trông xinh đẹp. Hãy thêm một số CSS để làm cho nó đẹp. Sao chép và dán CSS này vào biểu định kiểu của chủ đề.

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;

}
.taglink  { 
padding:2px;
}

.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}

.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

Hãy thoải mái sửa đổi CSS cho phù hợp với nhu cầu của bạn. Đây là những gì nó trông giống như trên trang web demo của chúng tôi:

Hiển thị thẻ đếm bài trong WordPress

Thẻ kiểu trong thông tin meta bài

Một số chủ đề WordPress hiển thị rất tốt các thẻ bên dưới thông tin siêu dữ liệu bài đăng với ngày đăng, tác giả và các metalinks khác. Tuy nhiên, một số chủ đề có thể không thiết kế chúng, hoặc bạn có thể muốn thiết kế chúng khác nhau.

Hãy xem cách chúng tôi có thể thiết kế các liên kết thẻ bên dưới bài đăng WordPress.

Trước tiên, bạn phải tìm ra lớp CSS được sử dụng bởi chủ đề WordPress của bạn để hiển thị các thẻ. Để làm điều đó, nhấp chuột phải vào nhãn và chọn kiểm tra mục từ menu trình duyệt.

Điều này sẽ phân chia màn hình trình duyệt để hiển thị hộp công cụ của nhà phát triển bên dưới trang web. Trong hộp công cụ dành cho nhà phát triển, bạn có thể thấy lớp CSS được sử dụng bởi chủ đề WordPress của bạn để hiển thị các thẻ.

Tìm lớp css được sử dụng bởi chủ đề cho các thẻ

Trong ảnh chụp màn hình ở trên, bạn có thể thấy chủ đề sử dụng các thuật ngữ cho lớp CSS. Bây giờ chúng tôi sẽ sử dụng lớp này trong chủ đề của chúng tôi hoặc trong biểu định kiểu của chủ đề con để ghi đè lên chủ đề CSS mặc định.

.terms a, .terms a:visited, .terms a:active { 
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

Hãy thoải mái sửa đổi CSS để phù hợp với màu sắc của chủ đề của bạn. Đây là những gì các nhãn trông giống như trên trang web demo của chúng tôi:

Phong cách CSS đã thay đổi cho các thẻ trong bài viết WordPress

Bạn có thể nhận thấy sự khác biệt giữa hai ảnh chụp màn hình ngoài các thay đổi CSS, chúng tôi cũng đã thay đổi các thẻ thành Tagged và xóa dấu phẩy giữa các thẻ. Làm thế nào mà chúng ta làm điều này?

Chúng tôi sửa đổi the_tags (); thẻ mẫu trong tệp single.php của chúng tôi như thế này:

Nếu bạn muốn giới hạn tổng số nhãn được hiển thị để nói 5 Hoặc một cái gì đó khác, hãy xem bài viết này về cách hiển thị số lượng thẻ hạn chế sau khi đăng

Chúng tôi hy vọng bài viết này đã giúp bạn thiết kế các thẻ WordPress. Hãy thử nghiệm với CSS cho đến khi bạn nhận được kết quả mong muốn.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để biết thêm hướng dẫn bằng video WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Google+ và Twitter.