Nội dung

Code Hiển thị tin tức dạng box. 1 tin to và những tin nhỏ bên cạnh trong wordpress

1 năm trước, Code theme wordpress, Phát triển website, 96 Lượt xem

xin chào các bạn hôm nay netweb.vn sẽ hướng dẫn các bạn cách code code box tin tức 1 tin to và nhiều tin nhỏ như hình dưới, tiện mình đang làm dự án viết bài luôn 😀

Code box tin tức dạng 1 tin lớn nhiều tin nhỏ

giải thích, này mình dùm biến $i đếm chạy theo vòng lặp, cho $i =1, sau khi vào vòng lặp kiểm tra, nếu phần tử đầu tiên =1 xuất ra tin to, ngược lại, xuất ra các tin nhỏ, đơn giản vậy thôi, chúc các bạn thành công…

<?php
				        $the_press = new WP_Query(array('post_type' => 'post','posts_per_page' => 5,'cat' => 1, 'paged'=> get_query_var('paged') ));
				        // The Loop
				        $i=1;
				        while ($the_press->have_posts()) : $the_press->the_post();    
				         ?>	
						
						<?php if ($i == 1) { ?> 
//tin to

						<a href="<?php echo the_permalink(); ?>" class="_item_plubgin" style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>');">
							<div class="title_plubgin">
								<?php the_title(); ?>					
							</div>
							<div class="link_label"><span>Xem thêm</span><img src="<?php echo get_template_directory_uri(); ?>/img/next-white.png" alt=""></div>
						</a>


						<?php } else { ?>
//tin nho


				 	
                        <div class="_item_plubgin_sm">
						<a href="<?php echo the_permalink(); ?>" class="_left_sm" style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>');"></a>
						<div class="_right_sm">
							<div class="title_plubgin_sm">
								<?php the_title(); ?>						
							</div>
							<a href="<?php echo the_permalink(); ?>" class="link_label"><span>Xem thêm</span><img src="<?php echo get_template_directory_uri(); ?>/img/next-black.png" alt=""></a>
						</div>
						</div>
	
						<?php } ?>
						<?php $i++; ?>
						<?php endwhile; ?>         
						<?php wp_reset_postdata();?>

 

 

Bài viết mới cập nhập

  • Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    Cách thay đổi cổng SSH trên Linux Ubuntu 20.04

    2 ngày trước, 639 Lượt xem

    Cổng mặc định cho SSH trên hệ thống Linux là 22. Có một vài lý do khiến bạn có thể muốn thay đổi cổng này thành một số khác. Nếu nhiều máy…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)