Tìm hiểu phần menu tab bài mới, bài xem nhiều, bài ngẫu nhiên

06/01/2013 08:55 2928

Như thường lệ chào mừng bạn quay trở lại với dự án Ebook hướng dẫn thiết kế theme wordpress, tôi xin nhắc lại bạn rằng nếu bạn cùng đi với tôi đến cuối dự án này, bạn sẽ làm chủ được cách tự tạo cho mình một theme với phong cách riêng không phụ thuộc vào việc mua theme và thuê người thiết kế, vừa tốt kém đôi lúc lại không như ý muốn

Bài hôm nay tôi và bạn sẽ cùng nhau đi tìm hiểu phần tab, bạn xem qua hình bên dưới

Để làm tab này bạn cần phải tạo một list ul, li, a để chứa menu bài mới, bài xem nhiều, bài ngẫu nhiên, và 3 div để chứa 3 nội dung tương ứng với menu

Phần html:

<div class="widget-right">
<ul>
	<li><a href="#new">Bài mới</a></li>
	<li><a href="#popular">Bài xem nhiều</a></li>
	<li><a href="#radom">Bài ngẫu nhiên</a></li>
</ul>
<div id="popular">
<div class="one-title">

<img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" />

<a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a>

</div>
<div class="one-title">

<img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" />

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>
<div class="one-title">

<img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" />

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>
<div class="one-title">

<img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" />

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>
<div class="one-title">

<img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" />

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>
<div class="one-title">

<img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" />

<a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a>

</div>
</div>
<div id="new">
<div class="one-title">

<img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" />

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>
<div class="one-title">

<img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" />

<a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a>

</div>
<div class="one-title">

<img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" />

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>
<div class="one-title">

<img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" />

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>
<div class="one-title">

<img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" />

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>
<div class="one-title">

<img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" />

<a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a>

</div>
</div>
<div id="radom">
<div class="one-title">

<img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" />

<a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a>

</div>
<div class="one-title">

<img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" />

<a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a>

</div>
<div class="one-title">

<img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" />

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>
<div>

<img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" />

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>
<div class="one-title">

<img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" />

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>
<div class="one-title">

<img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" />

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<ul>

<li><a href="#popular">Bài xem nhiều</a></li>

<li><a href="#radom">Bài ngẫu nhiên</a></li>

</ul>

</div>

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>

</div>

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>

</div>

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>

</div>

</div>

</div>

<a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a>

</div>

<div>

<a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a>

</div>

<a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a>

</div>

<a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a>

</div>

Phần css:

/* Tab */

.tabvn{list-style:none}

.tabvn li{float:left;display:block;cursor:pointer;padding: 0 15px 5px 0px; margin-bottom:5px; text-transform:uppercase;color:#999;font-size:11px;font-weight:bold; ;}

.tabvn li a{color: #0060A6; border-bottom:1px solid #0060b5}

.tabvn li a:hover{color: #0060A6; border-bottom:1px solid #ff6600}

.tabvn .active{position:relative;color: #0060A6; border-bottom:1px solid #ff6600}

/* Tab */

.tabvn{list-style:none}

.tabvn li{float:left;display:block;cursor:pointer;padding: 0 15px 5px 0px; margin-bottom:5px; text-transform:uppercase;color:#999;font-size:11px;font-weight:bold; ;}

.tabvn li a{color: #0060A6; border-bottom:1px solid #0060b5}

.tabvn li a:hover{color: #0060A6; border-bottom:1px solid #ff6600}

.tabvn .active{position:relative;color: #0060A6; border-bottom:1px solid #ff6600}

Phần jquery:

// JavaScript Document

$(document).ready(function() {

$('.tab_content:not(:first)').hide();

$('.tabvn li a').click(function(){

$('.tabvn li a').removeClass('active');

$(this).addClass('active');

$('.tab_content').hide();

var activeTab = $(this).attr('href');

$(activeTab).fadeIn();

return false;

});

});

// JavaScript Document

$(document).ready(function() {

$('.tab_content:not(:first)').hide();

$('.tabvn li a').click(function(){

$('.tabvn li a').removeClass('active');

$(this).addClass('active');

$('.tab_content').hide();

var activeTab = $(this).attr('href');

$(activeTab).fadeIn();

return false;

});

Phần luận:hôm nay tôi sẽ nói về jquery cho phần này, để làm được tab này bạn phải hình dung trong đầu của mình kịch bản của jquery:

1.Khi trang vừa tải xong chúng ta cần hiển thị tab bài mới và hai tab còn lại sẽ ẩn đi( nếu không jquery vào bạn sẽ 3 div chứa ba nội dung tương ứng với menu sẽ xuất hiện theo thứ tự từ trên xuống dưới, người dùng sẽ thấy tất cả 3 nội dung này), đồng thời tab bài mới sẽ có một gạch đỏ ở dưới

2.Khi người dùng muốn chuyển tab, xem bài xem nhiều, bài ngẫu nhiên thì chuyển nội dung tương ứng, đồng thời bôi đỏ ở menu của tab

Trên đây là kịch bạn, sau đây thôi sẽ đi giải thích từng dòng code:

$(document).ready(function() {

//các lệnh con

}):Khi đối tượng document đã sẵn sàng ( khi trang html đã tải xong), document ở đây sẽ là các thành phần như div, ul, li, a.. thì sẽ thực hiện các lệnh nằm trong dấu{}

$(‘.tab_content:not(:first)’).hide() : ẩn tất cả các div có chứa class tab_content trừ div đầu tiên

$(‘.tabvn li a’).click(function(){

//các lệnh con

}) : khi người dùng click để chuyển nội dung thì thực hiện các lệnh con nằm trong này

$(‘.tabvn li a’).removeClass(‘active’) : xóa tất cả class active nằm trong thẻ a(thẻ liên kết)

$(this).addClass(‘active’) : đông thời thêm vào class active cho thẻ a vừa được click ($(this) tượng trưng cho đối tượng hiện tại

$(‘.tab_content’).hide() : ẩn tất cả nội dung của div chứa class tab_content

var activeTab = $(this).attr(‘href’) : tạo một biến để lấy thuộc tính #new, #popular, #random

$(activeTab).fadeIn() : lấy giá trị của biến activeTab để thực hiện lệnh fadeIn (chuyển nội dung)

return false: nếu không có lệnh này thì người dùng sẽ có cảm giác bị dựt, không mượt

Trên đây là tất cả những gì cần nắm cho bài tab của chúng ta, hi vọng sẽ giúp ích được bạn

Tạm biệt và hẹn gặp lại ở phần tiếp theo

Tìm hiểu phần menu tab bài mới, bài xem nhiều, bài ngẫu nhiên

có thể bạn cần xem:

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)

Custom header và custom background- tạo tùy biến logo nền banner của header và tùy biến nền body

Import mã css, js vào head của admin bằng wp_enqueue_style và wp_enqueue_script

Tìm hiểu function add_action trong wordpress