Genesis Framework là một chủ đề yêu thích của tôi. Trên itidea.org chúng tôi đã xuất bản hơn hơn 60 thủ thuật và các mẹo tuỳ chỉnh chủ đề Genesis Child. Một cách cách hay nhất để tôi thực hiện điều đó là giúp cho website của mình trở lên đẹp hơn bao giờ hết. Và những hướng dẫn của tôi sẽ tập trung nhiều vào thiết kế, đơn giản và đẹp mắt. Nếu bạn là một FAN của Genesis Framework thì chắc có lẽ bạn cũng như vậy.
Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho các bạn cách tùy chỉnh và loại bỏ Comma giữa mục thể loại và các tag cho theme Genesis WordPress của bạn.
Hãy xem dưới đây Categories and Tags trên trang web của itidea.org
Thêm chức năng icon vào chuyên mục và tag genesis
Đầu tiên chúng ta cần làm là dùng một đoạn mã để sửa đổi các giá trị Meta của Genesis Post.
Sao chép toàn bộ mã code bên dưới dán vào files functions.php
add_filter('genesis_post_meta', 'crunchify_post_meta');
function crunchify_post_meta($post_meta)
{
if (!is_page() && !is_home() && !is_front_page() && !is_archive() && !is_search()) {
$post_meta = '[post_categories before="" sep=""] [post_tags before="" sep=""]';
return $post_meta;
}
}
Do trang web của itidea lỗi shourtcode nên các bạn qua đây để copy toàn bộ code nhé COPY CODE TRÊN
Lưu ý: Chỉ cần thêm sep=”” vào post_categories và post_tags móc Genesis và nó sẽ bỏ qua bỏ qua Comma (,) sau khi các thẻ tiếp cận và các thể loại.
Ngoài ra, nếu bạn muốn thay đổi các kiểu chữ mặc định của genesis, bạn cũng có thể xoá Filed Under text và vì vậy chúng ta cũng đang sử dụng các before=”” thêm text bạn muốn nó hiển thị thành before=”Chuyên mục”.
Thêm biểu tượng icon đẹp hơn cho chuyên mục và tag
Cuối cùng sẽ có một số mã CSS để hiển thị icon cho phù hợp với giao diện của bạn
p.entry-meta {
font-size: 13px !important;
font-size: 1.3rem !important;
margin-bottom: 0;
}
.entry-header .entry-meta {
margin-bottom: 24px;
margin-left: 45px;
color: #b11f24;
}
.entry-footer .entry-meta {
border-top: 2px solid #f5f5f5;
padding-top: 24px;
}
.entry-footer {
font-size: 15px;
}
.entry-categories,
.entry-tags {
display: block;
float: right;
padding-bottom: 20px;
}
.entry-footer .entry-categories,.entry-footer .entry-tags{
float:left;
}
.entry-categories a,.entry-tags a{
color: #222;
background: #eee;
border-radius: 20px;
padding: 4px 10px;
}
.entry-categories a:hover,.entry-tags a:hover{
color: #b11f24;
}
.entry-categories a:before,.entry-tags a:before {
font-family: fontawesome;
content: '\f02c';
color: #b11f24;
margin-right: 5px;
vertical-align: top;
}
.entry-tags a:before {
font-family: fontawesome;
content: '\f02c';
color: #4285f4;
margin-right: 5px;
vertical-align: top;
}
Và đó là những gì bạn nên làm, hãy quay trở lại trang web ngay bây giờ và bạn sẽ thấy kết quá như mong muốn của mình.
Hãy để lại ý kiến của bạn dưới khung comments!
