Cách tạo featured image, content slider cho wordpress

Với một website thì thanh trược, slider show các hình ảnh, tin tức nổi bật … làm cho site sinh động hơn, thu hút hơn hiển nhiên blog bạn cũng muốn như vậy, phải có gì đó động đậy thì nó mới hấp dẫn đúng không nào, hôm này mình chia sẻ cách tạo featured slider trong wordpress.

Trước hơn hết bạn cần chuẩn bị một ít kiến thức về HTML – CSSJavaScrip – jQuery, sau đó tìm hiểu thêm vài custom truy vấn trong WordPress để dễ dàng hơn trong lúc làm việc.

Bạn vào đây: demo các mẫu slider, trong đó mình có một số mẫu slider cũng khá đẹp cho các bạn tham khảo, mình sẽ lấy một trong số đó để làm slider cho blog của mình.

Content featured slider

Content featured slider

Tạo content featured cho wordpress

Chúng ta cần có các thống nhất, featured slider thông thường sẽ nằm ở trang chủ nghĩa là trong wordpress thì là file index.php tất nhiên là bạn đặt ở đâu là tùy bạn, mình là nhà thiết kế mà.

Featured sẽ có một hình lớn và một hình nhỏ bên cạch (mình lấy mẫu featured slider trang index5.html để sử dụng bạn download ở dưới), sẽ có hoặc không mô tả bên trong slider, ở mỗi item của slider sẽ là link trỏ đến bài viết nào đó tiêu biểu. Do đó trong bài viết sẽ có mục hiển thị hai hình ảnh, một lớn một nhỏ tương tự như hình trên.

Trước tiên bạn download slider về máy tính, mở ra xem các file trong đó là gì và tiến hành các công việc kế típ, bạn vào thư mục gốc theme tạo thư mục js(để chứa các file javascript và jQuery), thư mục css (chứa các file css), thư mục include khi trước mình đã tạo (chứa các file thiết kế theme cho theme).

File cần cho featured trong theme wordpress

File cần cho featured trong theme wordpress

Bạn mở thư mục js lên copy tất cả các file trong js của slider mới down về vào đó, trong thư mục css cũng vậy.

Đầu tiên bạn cần include các file js và css vào trong theme của mình, bạn mở file header.php lên trong thẻ head bạn gõ các dòng HTML như sau:

<!--

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/slider.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/script.js"></script>
<script type="text/javascript">
	 $(document).ready( function(){	
			$('#lofslidecontent45').lofJSidernews( { interval:5000,
													easing:'easeInOutQuad',
													duration:1200,
													auto:true } );						
		});

</script>

-->

Công việc này mình đã từng là ở các bài trước, bạn chú ý đường dẫn cho đúng nha, có các hàm dành riêng cho wordpress bạn nào chưa bít thì tham khảo hàm wordpress cơ bản. Bạn có thể tùy chỉnh nhanh chậm ở các số trong thẻ script trên, sửa đổi và test thử thấy kết quả (sau khi làm xong) hehe.

Tiếp đến bạn vào thư mục includes tạo file slider.php trong file đó bạn gõ đoạn code sau vào:

<!--
<div id="lofslidecontent45" class="container_12 lof-slidecontent">
<div class="preload"><div></div></div>

// MAIN CONTENT
  <div class="lof-main-outer">
  	<ul class="lof-main-wapper">
	<?php $my_query = new WP_Query('showposts=4&cat=1');
		while ($my_query->have_posts()) : $my_query->the_post();
		?>
  		<li>
			<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID,'slider',true)?>&a=t&w=600&h=300" border="0" />      
        </li> 
	<?php endwhile; ?>  	
      </ul>  	
</div>

//NAVIGATOR
	<div class="lof-navigator-outer">
  		<ul class="lof-navigator">
		<?php $my_query = new WP_Query('showposts=4&cat=1');
                while ($my_query->have_posts()) : $my_query->the_post();?>
            <li>
            	<div>
					<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID,'thumb',true)?>&a=t&w=60&h=60" border="0" />      
                
                	<h3><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                  	<span class="slider_post"></span><?php esc_html_e('Bài đăng','bcdonline'); ?> <?php esc_html_e('bởi','bcdonline');?> <?php the_author_posts_link(); ?> <br />
					<?php esc_html_e('Ngày đăng','bcdonline'); ?> <?php the_time('j/n/20y'); ?>
                </div>    
            </li>
        <?php endwhile; ?>        		
        </ul>
	</div>
</div>
-->

Trên đoạn code trên bạn dễ dàng nhìn thấy giao diện featured slider chúng ta có hai phần, một chứa các hình lớn gọi là MAIN CONTENT, phần chứa các hình nhỏ gọi là NAVIGATOR.

Bạn để ý đoạn truy vấn:

     WP_Query('showposts=4&cat=1')

Cho bít số lượng slider và ở thể loại nào. Tức là tạo thời sẽ quản lý và hiển thị trên featured slider nằm trong một thể loại nào đó thôi. Ví dụ như: thể loại slider trong wordpress(tùy vào ý đồ của chúng ta thôi, lát nữa sẽ làm rõ hợn nha).

Ở hai phần trên, trong mỗi li của từng phần đều có chứa một hình và trong trường hợp này là có sử dụng timthumb trong wordpress. ở trên hình lớn với kích thước 600×300, ở dưới hình nhỏ với kích thước 60×60.

Ở phần navi ngoài link tiêu đề ra chúng ta có thêm các thuộc tính như: người đăng bài viết, ngày đăng bài.. để cho phong phú hơn cho featured của mình, nếu bạn muốn có thể không hiển thị hay cho hiển thị thông tin khác như: nằm ở categories nào, tag nào thuộc chủ đề nào …

Bạn chú ý đến chỉ số trong mỗi hình để lát nữa khi viết bài bạn khai báo ID cho custom field cho chính xác. Trong trường hợp mình đang xét là hình lớn là: slider và hình nhỏ là: thumb.

Viết bài hiển thị trên Featured

Sau khi hoàn thành các phần trên bạn sẽ vào bài viết, điều bấy giờ là viết như thế nào để hiển thị trên Featured slider được. Bạn vào new một bài mới nhập tiêu đề xong điều típ đến là bạn chọn vào categories slider để nó hiển thị trên thanh trược.

Chọn categories slider trong wordpress

Chọn categories slider trong wordpress

Sau đó bạn viết bài bình thường đến lúc update hình, phải chuẩn bị 2 hình với các kích thước trên vào tiến hành add vào custom field như hình:

Upload hình cho featured slider images trong wordpress

Upload hình cho featured slider images trong wordpress

Công việc đến đây gần như là hoàn thành rồi, bây giờ bạn chỉ cần định dạng css cho featured của mình thôi. Bạn chạy lên thử sẽ thấy sự khác biệt. hii

Đây là một kết quả nhỏ khi mình đã style rồi.

Demo kết quả featured slider images trong wordpress

Demo kết quả featured slider images trong wordpress

Kết luận: Trong bài có vài lưu ý đến các bạn, khi chọn mẫu content featured để sử dụng cho wordpress nên chọn nội dung lặp kiểu tag UL LI để dễ dàng sử dụng, tối ưu cho SEO…

Do bài làm demo nên đơn giản, sau phát triển lên admin option trong wp-admin của wordpress bạn sẽ chọn thể loại hiển thị, nhập số slider qui định hiển thị chứ k can bắt ng dùng can thiệp vào code như trên được.

Lúc này bạn đã có thể chỉnh sửa tốc độ ở các con số trong head mà tôi nói ở trên. Chúc các bạn thành công nha!

VN:F [1.9.22_1171]
Rating: 9.2/10 (13 votes cast)
Cách tạo featured image, content slider cho wordpress, 9.2 out of 10 based on 13 ratings
Share This