Chia sẽ đoạn code hiện thị tin tức giống dòng thời gian của Facebook
Hôm nay mình xin share đoạn function bạn có thể copy và dán vào function.php và sử dụng shortcode có thể hiện thị dạng bài viết theo giống timeline tin tức thời của facebook.
function display_facebook_style_posts($atts) {
// Lấy thuộc tính từ shortcode
$atts = shortcode_atts(array(
‘posts_per_page’ => 10, // Số bài viết hiển thị
), $atts);
// Truy vấn bài viết
$query = new WP_Query(array(
‘post_type’ => ‘post’,
‘posts_per_page’ => $atts[‘posts_per_page’],
));
// Bắt đầu HTML output
ob_start();
if ($query->have_posts()) {
echo ‘<div class=”sidebar-img”><div class=”top-face” data-aos=”fade-in”><div class=”scrol”>’;
echo ‘<div class=”iten itenviet”>’;
echo ‘<div class=”iten1 itenviet1″>’;
echo ‘<a title=”Viết bài ngay” href=”/dang-bai-viet”><i class=”fa-regular fa-pen-to-square”></i> Viết bài</a>’;
echo ‘</div></div>’;
while ($query->have_posts()) {
$query->the_post();
$author_id = get_the_author_meta(‘ID’);
//$author_name = get_the_author();
$author_url = get_author_posts_url($author_id);
?>
<div class=”iten”>
<div class=”iten1″>
<?php if (has_post_thumbnail()) { ?>
<a href=”<?php the_permalink(); ?>”>
<?php the_post_thumbnail(‘large’, array(‘class’ => ‘faceimage’)); ?>
</a>
<?php } ?>
<!–<div class=”author-avatar”>
<?php echo get_avatar(get_the_author_meta(‘ID’), 50); ?>
</div>
<div class=”post-meta”>
<span class=”author-name”><?php the_author(); ?></span>
<span class=”post-date”><?php echo get_the_date(); ?></span>
</div>
<div class=”post-footer”>
<a href=”<?php the_permalink(); ?>” class=”read-more”>Xem thêm</a>
</div>
–>
<div class=”top-left”>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<!– <div class=”post-excerpt”><?php the_excerpt(); ?></div> –>
</div>
<div class=”bottom-left1″>
<a href=”<?php echo esc_url($author_url); ?>”><?php echo get_avatar(get_the_author_meta(‘ID’), 30); ?><span style=”font-size:10px;”><?php the_author(); ?><br/><?php echo get_the_date(); ?></span></a>
</div>
</div>
</div>
<?php
}
echo ‘</div></div></div>’;?>
<style>
.top-face {
width: 100%;
margin-bottom: 13px;
}
* {
scrollbar-color: #ffffff00;
scrollbar-width: thin !important;
}
.iten {
padding: 0px 0px 8px 0px;
padding-right: 7px;
}
.iten1.itenviet1 {
background:green;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
position: relative;
}
.iten1 {
text-align: center;
height: 200px;
width: 130px;
border-radius: 8px;
border: 1px solid #fff;
overflow: hidden;
position: relative;
}
.iten1 {
height: 270px;
width: 179px;
}
.iten1.itenviet1:before {
content: ”;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 2px dashed #fff;
border-radius: 7px;
}
.iten1.itenviet1 a {
position: absolute;
z-index: 2;
}
.iten1 a {
color: #fff;
font-size: 17px;
text-decoration: none;
font-weight: bold;
}
.iten1.itenviet1 i {
display: flex
;
align-items: center;
justify-content: center;
font-size: 30px;
width: 55px;
height: 55px;
margin: auto;
margin-bottom: 15px;
background: #fcc;
border-radius: 100%;
color: #fff;
box-sizing: border-box;
}
.faceimage {
height: 270px;
}
.faceimage {
height: 270px;
width: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
transition: all .3s ease;
filter: brightness(0.7);
background: var(–menu);
}
.top-left {
position: absolute;
top: 8px;
padding: 10px;
line-height: 1.0;
left: 0;
text-align: center;
right: 0;
}
.bottom-left1 {
position: absolute;
bottom: 15px;
left: 16px;
line-height: 0px;
}
.bottom-left1 img {
border-radius: 100%;
background: #fff;
opacity: 0.8;
width: 30px;
height: 30px;
}
.scrol {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: hidden;
overflow-y: hidden;
border-radius: 6px;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;}
.sidebar-img{width:100%;}
@media screen and (max-width: 768px) {
.sidebar-img{width:100%;}
.scrol {
overflow-x: auto;
overflow-y: hidden;
}
}
</style>
<?php
} else {
echo ‘<p>Không có bài viết nào.</p>’;
}
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode(‘facebook_posts’, ‘display_facebook_style_posts’);
Dùng shortcode [facebook_posts] để hiển thị nha,
[gget url=”https://thetienich.com”/]
Theo dõi
Đăng nhập
0 Góp ý
Cũ nhất
