random news ticker (ok)
PreviousChange number of products displayed per page (ok)NextTùy chỉnh the_posts_pagination category categories (ok)
Last updated
Last updated
function getpostblogs() {
ob_start();
global $post;
$index = 1;
$args = ['numberposts' => 8];
$custom_posts = get_posts($args);
$data = '';
$data .= '<div class="row">';
foreach ($custom_posts as $post): setup_postdata($post);
$attachment_id = $post->ID;
$image_full = wp_get_attachment_image_src( get_post_thumbnail_id(),'full');
$image_thubnail = wp_get_attachment_image_src( get_post_thumbnail_id(),'thubnail');
$linkimage1 = $image_full[0];
$linkimage2 = $image_thubnail[0];
$linkp = get_permalink();
if ($index == 1) {
$data .= '<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 row9">';
$data .= '<div class="leftnews">';
$data .= '<a class="one" href="' . $linkp . '"><img class="lazyload" data-src="'.$linkimage1.'" alt="Image Attributes"></a>';
$data .= '<a class="two" href="' . $linkp . '"><h3>' . get_the_title() . '</h3></a>';
$data .= '</div>';
$data .= '</div>';
$data .= '<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 row3">';
$data .= '<ul id="nt-example1">';
} else {
$data .= '<li class="postmany">';
$data .= '<a class="flex" href="' . $linkp . '"><img class="lazyload" data-src="'.$linkimage2.'" alt="Image Attributes"><h3>' . get_the_title() . '</h3></a>';
$data .= '</li>';
if ($index == 8) {
$data .= '</ul>';
$data .= '</div>';
}
}
$index++;
endforeach;
wp_reset_postdata();
$data .= '</div>';
$data .= ob_get_contents();
ob_end_clean();
return $data;
}
add_shortcode('shortcodeposts', 'getpostblogs');
<div class="container titleh2">
<h2>BÀI VIẾT MỚI NHẤT</h2>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php echo do_shortcode('[shortcodeposts]'); ?>
</div>
</div>
</div>
.leftnews {
padding-top: 15px;
position: relative;
&:after {
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: calc(100% - 15px);
top: 15px;
left: 0;
}
>a {
display: block;
&.two {
position: absolute;
z-index: 1;
color: #ffffff;
@include translate50;
}
>img {
width: 100%;
height: 450px;
@include objectfit;
}
}
h3 {
font-size: 30px;
}
}
#nt-example1 {
padding-top: 15px;
a.flex {
text-decoration: none;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed;
@include flexbox;
>img {
height: 90px;
width: 90px;
margin-right: 10px;
@include objectfit;
}
>h3 {
@include flexgrow;
font-size: 16px;
text-align: left;
@include para4;
}
}
}
.row9 {
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
border-left: 1px solid #ececec;
}
.row3 {
border: 1px solid #ececec;
}