Nói về thủ thuật SEO website thì rất rộng và cần thời gian lâu dài. Trong đó một số thành phần quan trọng của website cần phải được thiết lập chỉn chu ngay từ đầu. Có thể kể đến như mô tả, tiêu đề trang, tiêu đề bài viết, từ khóa, tag,…
Trong phạm vi bài viết này chúng ta sẽ tìm hiểu cách hiển thị tag vào vị trí bất kỳ cho website. Tag không chỉ dùng để SEO mà còn để tạo trãi nghiệm người dùng tốt cho website.
1. Chèn tag cloud vào vị trí bất kỳ
Hầu hết các themes của wordpress sẽ cho phép ta chèn tag (còn gọi là mây thẻ hay tag cloud) vào sidebar, footer bằng một widgets. Đơn giản chỉ cần vào phần Admin, chọn widget > chọn Tag cloud widget và chèn vào các sidebar là xong.
Tuy nhiên để tùy chỉnh theo phong cách riêng, với vị trí tùy thích, kích thước và màu sắc mang bản sắc riêng. Chúng ta cần code một chút.
Dưới đây là một hàm chèn tag bạn có thể dán vào vị trí bất kỳ trên trang web. Nơi mà bạn muốn hiển thị các tag. Các file có thể thử là index.php, content.php, single.php hoặc footer.php… Đó là những vị trí chúng tay có thể chèn vào tùy theo thiết kế của bạn.
<div class="tagcloud-main tagcloud">
<?php wp_tag_cloud( array(
'smallest' => 12,
'largest' => 22,
'unit' => 'px',
'number' => 40,
'orderby' => 'name',
'order' => 'ASC',
'taxonomy' => 'post_tag'
) ); ?>
</div>Trong hàm này chúng ta lưu ý một số thông số:
‘smallest’ => 12, là cỡ chữ nhỏ nhất của tag
‘largest’ => 22, cỡ chữ lớn nhất của tag
‘unit’ => ‘px’, đơn vị sử dụng cho chữ là px
‘number’ => 40, số lượng tag sẽ được hiển thị
‘orderby’ => ‘name’, sắp xếp theo tên của tag
‘order’ => ‘ASC’, tăng dần từ a tới ớ. DESC sẽ là ngược lại.
‘taxonomy’ => ‘post_tag’, loại dữ liệu cần hiển thị là tag. Nếu bạn thay ‘post_tag’ bằng ‘category’ sẽ hiển thị các chuyên mục thay vì hiện tag.
Hàm như trên sẽ tạo ra cỡ chữ to nhỏ khác nhau dao động từ 12px đến 22px cho mây tag. Nếu muốn cỡ chữ bằng nhau có thể chỉnh hai biến smallest và largest giống nhau. Hoặc có thể xóa luôn 2 dòng đó đi và sử dụng CSS bên dưới để định cỡ chữ hoặc font chữ.
2. Tạo CSS hiển thị cho tag
Để làm đẹp cho phần hiển thị, chúng ta cũng cần viết một ít CSS để tô điểm. Mở file style.css và tạo thêm CSS. Dưới đây là code mẫu giống như canxem đang sử dụng. Bạn chỉ cần copy và paste vào file style nếu thích.
.tagcloud-main {
margin: 0 auto;
width: auto;
padding:30px 0;
background: #555;
}
.tagcloud a{
display:block;
float:left;
padding:5px;
margin-right:5px;
margin-bottom:10px;
color:#fff;
font-weight:bold;
line-height: 20px;
text-decoration:none;
font-size: 18px;
}
.tagcloud a:hover{
color:#00aa00;
text-decoration:none;
}Mình thì muốn hiển thị ở cuối trang nên chèn hàm trên vào footer.php và kết quả như hình:
3. Vô hiệu hóa inline style của tag cloud
Có một nhược điểm của cách làm này là nó sẽ tạo ra định dạng inline style cho trang web. Khi bạn check SEO với các trang web đánh giá SEO sẽ báo lỗi này. Inline style là cách viết CSS trực tiếp vào vị trí muốn hiển thị trên trang mà không thông qua một class trong file style.css. Mà đây là điều mà SEO không được đánh giá cao.
Do đó chúng ta cần loại bỏ nó đi. Dùng đoạn code bên dưới dán vào file functions.php của themes đang sử dụng. Đoạn code sẽ làm ẩn đi inline style trong phần tag cloud mà ko làm ảnh hưởng tới hiển thị tag.
/Remove Tag-Clouds inline style
add_filter('wp_generate_tag_cloud', 'remove_tagcloud_inline_style',10,1);
function remove_tagcloud_inline_style($input){
return preg_replace('/ style=("|\')(.*?)("|\')/','',$input);
//return preg_replace("/style='font-size:.+pt;'/", '', $input);
}Rất đơn giản thôi phải không nào. Chỉ cần copy paste vài thứ và điều chỉnh một chút CSS là chúng ta sẽ có ngay một mây tag nhìn đẹp đẽ và chuyên nghiệp hơn rồi. Chúc các bạn thành công.
