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

4 năm trước, Code theme wordpress, Phát triển website, 418 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

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    11 tháng trước, 345 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    1 năm trước, 233 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

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)