[Thủ Thuật Flatsome] Thêm thông tin bài đăng trong Flatsome

[Thủ Thuật Flatsome] Thêm thông tin bài đăng trong Flatsome - Ví dụ như show các thông tin bên dưới tựa đề bài đăng như người đăng, ngày đăng, lượt xem , số comment ..và đây là hướng dẫn để bạn làm điều đó.

Bước 1: Sao chép theme entry-title.php trong Flatsome

Đầu tiên bạn cần copy file flatsome/template-parts/posts/partials/entry-title.php đến thư mục flatsome-child/template-parts/posts/partials/entry-title.php.

Bước 2: Thay đoạn Snippet hiển thị thông tin trong Flatsome

<?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>';
}
?>
<!-- Start - Thêm thông tin cho bài đăng tại đây -->
<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 class="tags" >
		<?php the_tags( 'Tags: ',' ','<br />' ); ?>
	</div>
</div>
<!-- End - Thêm thông tin cho bài đăng tại đây -->

Chú ý: các dấu đóng thẻ php để tránh lỗi.

Bước 3: Thêm Style cho thông tin trong Child-Flatsome

Mở file style.css trong theme child-flatsome và thêm đoạn code bên dưới

/*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";
}