Bài hôm nay mình sẽ chỉ bạn làm hiển thị thông tin bài đăng blog wordpress trong theme flatsome nhé .
Đôi lúc chúng ta cần show các thông tin bên dưới tựa đề bài đăng như người đăng bài , ngày đăng bài , ngày update , lượt xem , số lần comment ..
Hiện thị thông tin bài đăng blog wordpress trong theme flatsome
Nói là theme Flatsome nhưng cũng có thể áp dụng cho tất cả các theme nhé , tuy nhiên vị trí có thể khác chút nhé
ok bắt đầu nào , xem qua sau khi show chúng ta sẽ có những gì và như thế nào, Mời bạn xem qua hình sau khi mình show 1 số thông tin trong bài đăng nhé
Thường thì chúng ta hay có những thông tin meta như sau:
- Người đăng ( mình lấy mặc định của blog chỉ thay class để css lại thôi )
- Ngày đăng ( cũng lấy mặc định của blog )
- Chuyên mục đăng
- Số bình luận
ngoài ra 1 số bạn còn thích thêm
- Hiển ngày update bài ( sửa bài )
- Lượt xem
- ….
Cách làm Hiện thị thông tin bài đăng blog wordpress
Note : khuyến khích làm trên child theme nhé
Tìm đến đường dẫn bên dưới :
Flatsome Child: entry-title.php (template-parts/posts/partials/entry-title.php)
tìm đến đoạn code :
|
1 2 3 4 5 |
<?php if ( is_single() ) { echo '<h1 class="entry-title">' . get_the_title() . '</h1>'; } else { echo '<h2 class="entry-title"><a href="' . get_the_permalink() . '" rel="bookmark" class="plain">' . get_the_title() . '</a></h2>'; } ?> |
Thêm code này vào bên dưới
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="large-12 col-thongtin"> <div class="nguoidang"> <?php the_author(); ?> </div> <div class="ngaydang"> <?php echo get_the_time('d/m/y', get_the_ID()); ?> </div> <div class="chuyenmuc"> <?php echo get_the_category_list( __( ', ', 'flatsome' ) ) ?> </div> <div class="binhluan"> <?php echo get_comments_number(); ?> </div> </div> |
xem hình
Note :
trong hình tớ bỏ 2 đoạn ( đầu + cuối bằng dấu
- Đoạn đầu hiện thị chuyên mục blog
- đoạn cuối là code mặc định của blog – do minh thêm bên trên nên có thể xóa hoặc ẩn nó đi
Ngoài những mục ở trên ta còn có thể thêm :
- Lượt xem ( nhớ đọc bài này trước nhé Code đếm lượt truy cập không dùng plugin trong wordpress )
|
1 2 3 |
<div class="luot-xem"> Lượt xem : <?php echo getPostViews(get_the_ID()); ?> </div> |
Tags bài viết
|
1 2 3 |
<div class="tags" > <?php the_tags( 'Tags: ',' ','<br />' ); ?> </div> |
Sau khi Add code bên trên xong tạm thời là nó sẽ hiện thị nhưng chưa đẹp cần css sau mới đẹp được nhé
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*Mô tả dưới tựa đề bài viết - Flatsome.xyz*/ .large-12.col-thongtin { display: flex; } .nguoidang, .ngaydang, .chuyenmuc { margin-right: 18px; } .binhluan:before,.nguoidang:before,.ngaydang:before, .chuyenmuc:before { font-family: 'FontAwesome'; padding-right: 7px; } .nguoidang:before { content: "\f4ff"; } .ngaydang:before { content: "\f017"; } .chuyenmuc:before { content: "\f07c"; } .binhluan:before { content: "\f086"; } |
Đê ICON hiện thị bạn cần cài Hướng dẫn sử dụng Font Awesome 5 bản miễn phí nhé
OK vậy là xong rồi nhé ,
Ngoài ra bạn cần yêu cầu show gì cứ báo mình nhé , Chúc bạn thành công
Nguồn: flatsome.xyz
