Tạo giao diện Responsive cho theme WordPress

Từ Tết Âm lịch đến giờ lu bu, hứa với Thạch Phạm và anh em sẽ cố gắng viết bài mà đến nay mới thực hiện. Thôi thì bù lại cho các bạn một tut  vô cùng hấp dẫn nhưng cũng không quá phức tạp này nhé.

lightbox[7522]“>huong dan responsive Tạo giao diện Responsive cho theme WordPress

Như các bạn đã biết, xu hướng ở Việt Nam bây giờ là nhà nhà dùng smartphone, người người dùng smartphone, thậm chí những gia đình có điều kiện thì bọn nhóc 7-10 đều cầm Ipad trên tay rồi (nghĩ lại tủi thân cho mình ngày xưa lớp 10 mới biết cái máy tính là gì). Việc lướt web bằng các thiết bị di động ngày càng phổ biến, bằng chứng là Thạch Phạm đã có lần trao đồi với mình  tỉ lệ khách truy cập blog bạn ấy thông qua thiết bị di động chiếm khoảng gần 20%  mà thực tế mình cũng kiểm tra trên Google Analytics thì khách truy cập website http://dulichcamthai.com của mình bằng Ipad và smartphone ngày càng tăng nhanh (chiếm 12%, xem hình minh họa).lightbox[7522]“>

 

Mặc dù, đa số các template hiện nay đều tích hợp sẵn chức năng này, nếu bạn đang dùng MD3 của Thesis 2.0 thì cũng đã có sẵn. Nhưng nếu bạn đã thiết kế một website hoàn chỉnh và lâu rồi thì mình nghĩ tut này rất cần cho bạn (chắc bác Văn Mỹ nghe rục rịch đây). Thực tế mình dùng Thesis 2.0 nhưng xài theme Legendary miễn phí (vì lúc đó Thạch chưa share cho mình), xài rồi đến lúc Thạch share MD3 chẳng muốn thay đổi vì mình đã custom rất nhiều, giờ thì nó cũng không khác gì MD3 lắm phải ko.

Vì thế, mình đã ngâm cứu để biến child theme Legendary của Thesis 2.0 “củ chuối” mà mình đang dùng trong website Du lịch Cam Thái thích hợp với mọi thiết bị di động, mà người ta thường gọi là  Responsive Design.

Hướng dẫn tạo giao diện Responsive cho theme WordPress

Bước 1: Backup giao diện trước khi làm

Đây là bước quan trọng và cơ bản nhất, đó là backup lại giao diện bạn đang sử dụng. Đối với các giao diện wordpress thông thường thì cũng đơn giản phải không. Mình sẽ không hướng dẫn phần này, nếu bạn nào sử dụng Thesis 2.0 thì tham khảo  Cách sao chép giao diện của Thesis 2.0 (Mục Manager) của Thạch Phạm nhé

Bước 2: Vẽ lại giao diện trên các thiết bị di động.

Thông thường bạn chỉ cần vẽ 2 kích thước cơ bản là trên Ipad và Iphone thì ok. Các thiết bị khác sẽ thiết kế tương tự. Mình xin liệt kê các thông số kích thước màn hình để các bạn dễ hình dung nhé.

  • iPhone 320×480 (iPhone 3+4 đứng)
  • iPhone 480×320 (iPhone 3+4 ngang)
  • iPhone 320×568 (iPhone 5 đứng)
  • iPhone 568×320 (iPhone 5 ngang)
  • Android 240×320 (Crappy Android đứng)
  • Android 320×240 (Crappy Android ngang
  • Android 380X685 (Android (Samsung Galaxy) đứng)
  • Android 685X380 (Android (Samsung Galaxy) ngang)
  • iPad 768×1024 (iPad đứng)
  • iPad 1024×768 (iPad ngang)
  • Kindle 600×1024 (Kindle đứng)
  • Kindle 1024×600 (Kindle ngang)

Bạn có thể sử dụng các phần mềm thiết kế như Photoshop, AI, Corel,…. để design lại giao diện của mình. Nhưng nếu bạn ko rành về thiết kế thì sao? Mặc dù biết sử dụng các phần mềm thiết kế, nhưng mình hay dùng plugin Firebug của Firefox hoặc R-Click –> Inspect Element trong Chrome , thu nhỏ khung trình duyệt lại và custom trực tiếp sẽ nhanh hơn bằng cách xóa các phần tử không cần thiết và chỉnh sửa CSS trực tiếp. Tuy nhiên, cách này đòi hỏi bạn phải rành CSS một chút.

Tóm lại, nếu bạn bỏ qua hoặc làm qua loa ở bước này thì sẽ rất cực cho bạn khi thực hiện các bước tiếp theo. Nếu cảm thấy khó quá, bạn có thể dùng Paint vẽ lại, song, cần phải hình dung cho được cấu trúc giao diện với màn hình nhỏ hơn như thế nào.

Mình xin tóm tắt quá trình thực hiện thực tế trên website của mình ở bước này, các bạn xem hình minh họa nhé, mình chỉ làm demo ở Ipad và Iphone 4 các bạn nhé

1. Ipad ngang, thông thường sẽ giống như laptop ở kích thước 1024×768 nên mình giữ nguyên

2. Ipad đứng, kích thước 768 x 1024

Trong website của mình, được bố cục có 3 phần chính: header, main và footer.  Phần header gần như là 100% như cũ, mình sẽ nói phần Menu sau nhé. Phần main thì chia thành main-left (chiếm khoảng 65%) và main-right (chiếm khoảng 35%), như vậy với kích thước  chiều ngang thông thường là 1000px giảm xuống còn 768px, mình sẽ cho phần main-left là 100%, phần main-right nhảy xuống dưới. Trong phần main-right có các block từ trên xuống từng cái một thì mình sẽ cho nó mỗi hàng thành 2 cái. Phần footer của mình chia thành 3 cột nhỏ, mình sẽ giữ nguyên phần này.

3. Iphone 4 ngang, kích thước 320 x 480

Tương tư như vậy, mình đưa logo và hotline thành 2 hàng, cắt bỏ các phẩn không quá cần thiết và đưa tất cả thành 1 cột.

Mô tả hơi khó hình dung phải không. Các bạn xem hình minh họa nhé

tut responsive s Tạo giao diện Responsive cho theme WordPress

Demo http://dulichcamthai.com

Bước 3: Mọi thứ đã sẵn sàng, bắt đầu code anh em nhé !

1. Một số dòng Iphone cần chèn đoạn code nhận dạng thiết bị di động, để nó sẽ tự động chuyển đúng text size và scale theo màn hình.

Các bạn mở file style.css (file css chính của theme) chèn vào

1
2
3
4
5
html {
-webkit-text-size-adjust: none;
}

2. Tiếp tục chèn đoạn code sau trước khi đóng thẻ <head>, thường nó sẽ nằm trong file header.php hoặc với Thesis thì các bạn có thể cho vào Head Script

1
<meta name="viewport" content="width=device-width; initial-scale=1.0">

3. Có một số trình duyệt như IE 8 không nhận dạng được HTML5 nên chúng ta phải xài đoạn javascript sau để khắc phục lỗi này, vẫn chèn vào trước thẻ </head>  các bạn nhé

1
2
3
4
<!--[if lt IE 9]>
 <![endif]-->

4. Thông thường, hình ảnh trên web rất lớn, trung bình có thể lên tới hơn 1000px, và nếu duyệt bằng điện thoại mà chờ load các hình này chắc xỉu lun, nên chúng ta sẽ dùng javascritpt sau để “tối ưu lại” điểm yếu này

4.1 Tạo một file javascript bất kỳ, ở đây mình đặt là responsive-images.js  trong thư mục chứa theme với nội dung như sau:

1
2
3
4
5
6
jQuery(document).ready( function ($) {
         $('img').each( function () {
                    $(this).removeAttr( 'width' );
                    $(this).removeAttr( 'height' );
         });
 });

Lưu ý: Nên lên Google tham khảo cách nhúng file .js vào html.

 4.2 Đặt dòng code này vào functions.php trong theme của bạn, nhớ sửa lại đúng tên file bạn đã đặt.

1
2
3
4
add_action( 'wp_enqueue_scripts' 'tutsresponsive_enqueue' );
 function tutsresponsive_enqueue() {
 wp_enqueue_script( 'responsive-images', get_theme_directory_uri() . '/<strong>responsive-images.js</strong>', array( 'jquery' ) );
 }

4.3 Tiếp tục chèn vào styles.css đoạn code sau

1
2
3
4
5
img {
 max-width: 100%;
 height: auto;
 width: auto9; /* ie8 */
 }

OK, xem như phần hình ảnh đã xong. Nhưng nếu bạn thấy phức tạp quá trong phần này hoặc thực hiện không thành công thì bạn có thể sử dụng Plugin  WP Fluid Images  hoàn toàn miễn phí cho dễ

Phù, hút điếu thuốc cái đã !  beauty Tạo giao diện Responsive cho theme WordPress nhâm nhi tí cafe  coffe cup Tạo giao diện Responsive cho theme WordPress

5. Đây là phần khó nuốt nhất, nên anh em tập trung kỹ nhé

Mình tiếp tục lấy trang Du lịch Cam Thái làm ví dụ, các bạn xem kỹ cấu trúc trong theme của các bạn mà áp dụng theo nha.

Như ở bước 2, mình đã vẽ bố cục layout trên Ipad và Iphone, nên việc của chúng ta là phải sắp xếp lại theo thứ tự như thế trong code. Bản chất của responsive này là sử dụng css để bố cục lại thôi, nên các bước dưới đây các bạn có thể chèn trực tiếp vào phần cuối trong style.css trong theme của bạn hoặc bạn có thể tạo 1 file css riêng tùy thích.

Để tạo sự khác nhau trong phần class của các thẻ DIV đối với từng trình duyệt trên css-tricks.com đã phân tích như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screenand (-webkit-min-device-pixel-ratio : 1.5),
only screenand (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Trình duyệt thì nhiều nhưng căn bản chỉ cần phù hợp với Ipad và Iphone là sẽ chuẩn thôi. Mình thì sử dụng đơn giản hơn 1 chút
1
2
3
4
5
6
7
8
9
10
</div>
/** Responsive by Mr Quoc - http://dulichcamthai.com **/
@media screen and (max-width: 1080px) {
 /* code here for Ipad */
 }
 /* Iphone */
 @media screen and (max-width: 479px) {
 /* code here for Iphone */
 }

Mình nói thêm 1 chút, đoạn code trên là để phân biệt kích thước chiều ngang của trình duyệt nên để code cho thiết bị nào thì bạn thêm code css cho thiết bị đó, giữa 2 dấu {  }. Các bạn tìm các thẻ DIV chính cấu hình nên giao diện, sau đó viết CSS lại cho từng thẻ đó rồi chèn vào là ok

Trên Du lịch Cam Thái, các thẻ DIV theo bố cục ở trên mình phải chỉnh sửa lại cho phù hợp với Ipad  và như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 Responsive by Mr Quoc - http://dulichcamthai.com
**/
 @media screen and (max-width: 1080px) {
.header_inner , #content_box { width:98%; }
 .columns-2 > .c1 { width:100%; }
 .columns-2 > .c2 { width:100%; float:left; }
 #thesis-google-cse-2, #tag_cloud-2, #smart-youtube-2 {display:none;}
 .widget { width: 48%; float: left; }
 #ttplus_top_form {display:none!important}
 #footer_inner {margin:0;padding:0;width: 100%;}
 .footer_widgets .fw1, .footer_widgets .fw2, .footer_widgets .fw3
 {
 width: 31%;
 margin: 0 5px;
 }
 .footer_widgets .fw1 .widget, .footer_widgets .fw2 .widget, .footer_widgets .fw3 .widget
 {
 width:98%
 }
 .footer_widgets .stripe {display:none }
 .footer_widgets .widget_title {
 font-size: 16px;
 }
 .footer_widgets li {
 margin-bottom: 5px;
 border-bottom: 1px solid #555;}
 .widget li a {
 line-height:14px;
 }
 #footer_inner .footer_text ul li {
 width:100%;
 margin-bottom: 10px;
 }
 }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
 @media screen and (max-width: 479px) {
 .header_inner , #content_box , #logo , .cat-box.column2, .list-box li.first-news, .list-box li ,.widget {
 width:100%!important;
}
 #site_title , #ei-slider, .footer_widgets {display:none;}
 #hotline {float:left;width:100%;padding:0;margin:0}
 #logo {background:url(images/dulichcamthai-logo-small.png)no-repeat;}
 #hotline {padding-left: 10px;margin-bottom: 10px;}
 li.first-news p, .breadcrumb , .post_tags, .ta_author_info.ta_box, .comments_intro, #commentform, #related_posts .related-item .post-thumbnail{display:none}
 .post_image {width:100%;height:auto;}
 #price_detail {float:left!important;margin-left:0!important}
 #info_detail {padding-left:10px;}
 #related_posts .related-item {height:auto!important;width:100%!important;margin:0 0px 5px 0;padding:0;border-bottom:1px solid #ccc}
 }

Đến đây chắc bà con hoa mắt rồi, nhìn thì hơi phức tạp nhưng mình sẽ tổng hợp lại 1 số css cơ bản để các bạn dễ code nhé

  • Nếu bạn muốn ẩn 1 thẻ DIV bất kỳ bạn dùng: display:none; 
  • Nếu muốn 1 cột thành 2 cột thì giảm độ width cho mỗi cột xuống 45% và chèn thêm float:left; vào, nó sẽ tự canh trái cho bạn
  • Nếu muốn nhiều cột thành 1 cột thì cứ width thành 98% bạn nhé.
  • Đa số mình chỉ chỉnh: margin:0padding:0; mà thôi

Các bạn cứ nhớ nguyên tắc là, các class bạn chèn trong phần này sẽ được ưu tiên khi dùng trong trình duyệt di động. Ví dụ mặc định phần ID của logo mình là

1
#logo {background:url(images/dulichcamthai-logo.png) no-repeat;}

Như thế logo sẽ quá to, mình sửa lại là

1
#logo {background:url(images/dulichcamthai-logo-small.png) no-repeat;}

Lúc này, trên Iphone nó sẽ dùng đoạn code thứ 2 của mình. Đến đây các bạn đã hiều vấn đề rồi phải không.

Bước 6: Phần menu

Để giải quyết vấn đề này, đơn giản bạn sử dụng Plugin Responsive Select Menu là xong, mình cũng đang dùng Plugin này. Thật ra, vẫn còn nhiều dạng khác nhưng mình xin phép trình bày ở 1 bài viết khác các bạn nhé.

Bước 7: Test, test và test…. 

Trong lúc thực hiện bạn nên tắt chức năng cache nếu bạn đang xài để dễ dàng hơn. Mình xin giới thiệu các bạn công cụ để các bạn dễ test hơn, bạn có thể truy cập http://responsivetools.com/ nhập địa chỉ web mình vào và test thôi. Hoặc nếu bạn đang xài Firefox thì có thể sử dụng Addons Fire Break để kiểm tra.

QUÀ TẶNG

Có lẽ phần này hấp dẫn nhất để bù lại  một thời gian căng thẳng đầu óc của anh em đây. Thật ra quà tặng cũng rất đơn giản, đó là  mình sẽ Custom Responsive WordPress theme  hoàn toàn miễn phí cho 3 bạn đăng ký, và mình sẽ nhờ Thạch Phạm chọn ngẫu nhiên 3 người may mắn để nhận phần quà này. Tuy  nhiên có 1 số điều kiện nho nhỏ như sau nhé

  • 1. Like ngay bài viết này
  • 2. Truy cập http://dulichcamthai.com và Like Facebook Fan page giúp mình nhé (nếu mua tour thì càng tốt big smile Tạo giao diện Responsive cho theme WordPress  )
  • 3. Đăng ký theo comment bên dưới
  • 4. Thời gian đăng ký 3 ngày kể từ ngày bài viết được đăng lên

Lưu ý:

  • Chỉ áp dụng cho các bạn dùng wordpress thôi nhé, các mã nguồn khác mình xin từ chối vì một số lý do.
  • Khi custom, các bạn phải gửi theme gốc các bạn đang xài và một số file cần thiết, hoặc tốt nhất là cho mình truy cập FTP , nếu các bạn tin tưởng, để mình viết code thêm các bạn nhé.
  • Quy trình làm việc như sau: Mình sẽ design lại web các bạn trên 2 giao diện Ipad và Iphone tương tự như phần hướng dẫn ở trên, nếu các bạn ok thì mình sẽ bắt đầu code, thời gian trong vòng 3 ngày cho 1 giao diện (vì ban ngày mình còn đi làm nữa), bạn nào được chọn trước sẽ ưu tiên làm trước.

NẾU BẠN KHÔNG MAY MẮN THÌ SAO???

Nếu bạn không nằm trong số 3 người may mắn trên thì bạn cũng đừng buồn, mình sẽ tiếp tục support các bạn theo comment bên dưới.

Và nếu bạn muốn có được tính năng trên trong web của mình có thể đặt dịch vụ custom responsive wordpress theme với mình nhé. Chi phí là 500k/ 1 theme gọi là tiền cafe nha các bạn. Để đăng ký dùng dịch vụ các bạn gửi email về thông qua trang liên hệ nhé.

Chúc các bạn thành công và mong được xem thành quả của các bạn, ai làm xong thì comment để mọi người học hỏi nha !! big smile Tạo giao diện Responsive cho theme WordPress

Thủ thuật wordpress : Xoá nhanh comment spam

Harry có một blog về thời trang bán ao so mi nu .Đợt này nhiều comment spam quá xoá tay không nổi.Lên tới 2k comment spam rồi mà cứ ngồi xoá bằng tay thì mệt quá.mới có hơn 1 ngày mà tới 2k comments với những blog mà cả tháng không vào chắc nhiều lắm.Vậy có giải pháp nào để xoá tất cả những comment spam ra khỏi blog mà không dùng plugin không? vì cứ một tí dùng plugin thì website nặng lắm.

114 Thủ thuật wordpress : Xoá nhanh comment spam

Sau đây Harry chia sẻ cách để mọi người xoá nhanh comment spam bằng mấy dòng lệnh mysql.

B1.Đầu tiên bạn login vào hosting.(chắc chắn admin website thì  có tài khoản này rồi.^_^)

B2.Mở myphpadmin lên và chọn database của website của mình.

B3 : Click vào tab SQL và điền dòng lệnh sau :

- Nếu bạn muốn xoá nhanh tất cả comment ở mục Pending :

delete from wp_comments WHERE comment_approved =’0′;

- Nếu bạn muốn xoá nhanh tất cả comment ở trong trạng thái Approved

delete from wp_comments WHERE comment_approved =’1′;

- Còn trường hợp muốn xoá tất cả comment (cái này thì ít khi dùng tới)

delete from wp_comments;

Các bạn chú ý trong câu lệnh trên cái prefix wp_, nếu bạn nào không sử dụng prefix mặc định là wp_ thì các bạn phải edit theo prefix mà bạn sử dụng.

Sau khi thực hiện xong thì đừng quên cài đặt plugin chống comment spam cho wordpress.

10 tính năng thú vị trên Internet Explorer 10

Được biết đến với khả năng nhanh, uyển chuyển, hỗ trợ hoàn toàn cho cảm ứng, Internet Explorer 10 là trình duyệt được đề xuất cho người sử dụng dù là doanh nghiệp hay cá nhân. Dưới đây, chúng tôi sẽ giới thiệu với các bạn một số tính năng thú vị của Internet Explorer 10.

1. Nhanh và uyển chuyển

Internet Explorer 10 là trình duyệt nhanh nhất hiện thời. Nghiên cứu của 2 phòng thí nghiệm New Relic và Strangeloop Networks đã chỉ ra tốc độ thực sự đột phá của IE10 theo bảng dưới đây:

IE101 10 tính năng thú vị trên Internet Explorer 10

IE102 10 tính năng thú vị trên Internet Explorer 10

2. Toàn màn hình

IE103 10 tính năng thú vị trên Internet Explorer 10

IE10 đưa tới người dùng trải nghiệm thực sự về thế giới web. Các thanh điều khiển chỉ hiện ra khi người dùng thực sự cần điều khiển. Những lúc chỉ cần trang web, phần điều khiển này biến mất trong “yên lặng”.

3. Flip Ahead

IE104 10 tính năng thú vị trên Internet Explorer 10

Với tính năng Flip Ahead, IE10 tạo ra “Next” khác biệt. Chỉ cần quẹt nhẹ là người dùng đã có thể sang trang kế tiếp, hoặc xem bài kế tiếp, ảnh kế tiếp nhờ “Flip Ahead”. Thử cùng Bing hoặc YouTube tìm kiếm trên IE10 để trải nghiệm Flip Ahead (thiết lập tại IE settings) và dùng tay quẹt forward hoặc backward để trải nghiệm kết quả.

4. Pinning

IE105 10 tính năng thú vị trên Internet Explorer 10

IE106 10 tính năng thú vị trên Internet Explorer 10

IE10 giúp người dùng gắn các trang yêu thích lên màn hình Start như một ứng dụng. Chỉ cần chọn nút “Pin to Start” để tạo một “ô vuông động” trên màn hình lớn. Hãy thử cùng Facebook, Twitter, hoặc CNN hay bất kỳ trang nào bạn thích để xem IE10 đưa cập nhật của trang tới bạn một cách sống động.

5. Snapping – Treo 2 màn hình trên cùng 1 cửa sổ

IE10 giúp việc “đa nhiệm” trở nên dễ dàng khi cho người dùng gắn 1 màn hình IE10 trên một cạnh của màn hình và ứng dụng khác như Mail, Xbox Music hoặc Microsoft Office – mở song song trên cạnh kia của màn hình. Đây là một ví dụ tiêu biểu của việc trình duyệt làm việc đồng bộ với mọi ứng dụng khác trên nền tảng hệ điều hành Windows, đặc biệt là Windows 8.

IE107 10 tính năng thú vị trên Internet Explorer 10

IE108 10 tính năng thú vị trên Internet Explorer 10

6. An toàn

IE109 10 tính năng thú vị trên Internet Explorer 10

Internet Explorer 10 tiếp tục đứng hàng đầu trong đội ngũ trình duyệt về việc bảo vệ mã độc và giả mạo. Internet Explorer 10 đưa ra công nghệ cải tiến SmartScreen Filter so với phiên bản trình duyệt cũ. Theo nghiên cứu của NSS Labs mới đây, IE10 đã khóa lượng mã độc nhiều hơn 40% so với Chrome 21, hơn 23 lần so với Firefox 15 và Safari 5.

7. Chỉ 1 chạm để chia sẻ

IE1010 10 tính năng thú vị trên Internet Explorer 10

Thanh Windows charms kết hợp nhuần nhuyễn với IE10 để giúp người dùng chia sẻ thông tin. Đơn giản là quẹt khẽ trên màn hình, và bạn có thể gửi thông tin duyệt web theo bất kỳ cách gì bạn muốn: email, mạng xã hội…

8. Hộp one Box

Công nghệ này được xây dựng trên nền tảng đã biết của bản Internet Explorer trước đó. Thanh one Box giúp nhanh chóng tìm kiếm và định vị trang tìm kiếm. one box giúp người dùng có thể nhanh chóng đến các trang yêu thích, trang được gắn trên thanh tác vụ (pin) và các trang hay truy cập trên Internet Explorer 10.

IE1011 10 tính năng thú vị trên Internet Explorer 10

IE1012 10 tính năng thú vị trên Internet Explorer 10

9. Chơi game trên trình duyệt

Internet Explorer đã hợp tác với các công ty phát triển game để đưa những games bom tấn chơi miễn phí trên web. Tiêu biểu là các games Contre Jour, Atari Arcade và Cut The Rope có trải nghiệm tuyệt vời trên trình duyệt IE10 nhờ vào khả năng tận dụng phần cứng tuyệt vời của trình duyệt này. Khi chơi trên nền tảng trình duyệt IE10, người dùng có được những trải nghiệm đồ họa mượt mà, phong phú như chơi trên ứng dụng tại máy tính của người sử dụng vậy.

IE1013 10 tính năng thú vị trên Internet Explorer 10

10. Đảm bảo độ an toàn riêng tư

Hỗ trợ Do Not Track là tính năng sáng giá của Internet Explorer 10. Khi tính năng Do Not Track được kích hoạt, Internet Explorer sẽ gửi thông điệp Do Not Track tới các trang mà người dùng viếng thăm và những trang web này sẽ bị cấm thu thập các tin tức cá nhân của người dùng.

Do Not Track dễ dàng kích hoạt chỉ nhờ 1 nháy chuột trong Internet Explorer 10. Tương tự như các phiên bản IE trước đó, Internet Explorer 10 hỗ trợ InPrivate Browsing và Tracking Protection để đảm bảo sự riêng tư của người dùng được bảo vệ.

Trình duyệt IE10 của Microsoft có sẵn trên máy tính cài Windows 8, nhưng Windows 7 có thể cài đặt tại đây.

Cơ bản nâng cao thứ hạng web

SEO: Từ đầu tiên, nhiều người quan tâm nhất và cũng hay bị lầm lẫn nhất là SEO. SEO là từ viết tắt của Search Engine Optimization – dịch nôm na là tối ưu hóa website cho việc nâng thứ hạng webtrên các cỗ máy tìm kiếm. Với khái niệm này, rất nhiều người làm kinh doanh trực tuyến thường đánh đồng SEO chính là Quảng bá website. Sự thật không phải vậy. SEO chỉ là một trong những công đoạn cơ bản và bắt buộc trong cả quá trình quảng bá một website trên hệ thống tìm kiếm. Để SEO một website, các webmaster thường phải sử dụng một số công cụ như phần mềm chuyên dụng hay các công cụ có sẵn trên Net để đo chỉ số Title, Keywords, Description, Body text, H1, H2,…H7, Các thẻ Alt, thẻ Images, Thẻ Robots, Refresh, Topic,…. và vô số những thông số kỹ thuật khác. Nguyên tắc chính của việc SEO một website là phải làm mọi cách để từng trang web và cả website chạy nhanh hơn, ít lỗi kỹ thuật hơn, mã nguồn trong sáng hơn, ít script hơn và đặc biệt: Không có các lỗi bị hệ thống tìm kiếm cho là kỹ thuật Cloaking – kỹ thuật đánh lừa các cỗ máy tìm kiếm. (Xin tham khảo bài: Các tiểu xảo trong quảng bá website).

SES – Search Engine Submission: Đăng ký website vào các cỗ máy tìm kiếm. Thuật ngữ này cũng rất được quan tâm vì đây là cách đơn giản và nhanh nhất giúp một website mới ra đời có thể được liệt kê trong danh bạ của các cỗ máy tìm kiếm. Các webmaster dạng này thường sử dụng một phần mềm chuyên về SES như AddWeb Promoter, Hello Search Engines, Dynamic Submission,… để đăng ký website vào hàng loạt cỗ máy tìm kiếm. Nhiều webmaster rất tự hào với những phần mềm dạng này khi cho rằng mình đã đăng ký website của mình (và cả của khách hàng) vào hàng ngàn – thậm chí hàng triệu “cỗ máy tìm kiếm” chỉ bằng một vài lần nhấn chuột – và phần mềm sẽ làm thay toàn bộ. Sự thật có đơn giản như thế? Hãy lấy Google, Yahoo và MSN làm ví dụ: Để đăng ký vào 3 cỗ máy này, bạn bắt buộc phải làm động tác: nhập mã số an toàn (đối với Google và MSN) hoặc đăng nhập tài khoản (nếu đăng ký vào Yahoo). Đây là việc chỉ con người mới làm được – không có một phần mềm nào đủ khả năng làm thay.
Chưa hết, hiện 3 cỗ máy này đang chiếm thị phần tìm kiếm áp đảo với chỉ số: Google + Yahoo + MSN chiếm xấp xỉ 85% chỉ số tìm kiếm toàn thế giới. Ngoài ra, các Search Engine khác như AOL (sử dụng kết quả của Google), Altavista, Alltheweb, Inktomi (sử dụng kết quả của Yahoo), Ask/Teoma, Lycos, HotBot và Dogpile chiếm khoảng 14,5% thị phần còn lại. Như vậy hàng “ngàn”, hàng “triệu” “cỗ máy tìm kiếm” còn lại chỉ chiếm thị phần xấp xỉ 0,5% ! (Tham khảo: Đăng ký website vào Google, Yahoo, MSN và Ask/Jeeves). Đăng ký thủ công là cách làm đúng và cần thiết nhất để website của bạn sớm được nhận diện trên hệ thống tìm kiếm. Về cách đăng ký, xin vui lòng tham khảo bài viết: Đăng ký website vào Google, Yahoo, MSN và Ask/Jeeves.
SEM: Search Engine Marketing. Đây mới chính là cái mà các nhà quản trị website và người kinh doanh online nhắm đến. SEM chính là tổng hợp của tất cả các công đoạn nêu trên, gồm: tối ưu hóa website, đăng ký website vào hệ thống tìm kiếm và các thư mục internet, đặt liên kết với các site khác (trong đó bao gồm cả việc mua liên kết bằng cách đặt logo, banner quảng cáo) và nhiều việc làm khác nữa nhằm giúp website trở nên thân thiện hơn với các cỗ máy tìm kiếm để thứ hạng các từ khóa trong website ngày càng được cải thiện, website có nhiều người truy cập hơn.
Keywords: Từ khóa – những từ mà webmaster hoặc chủ nhân trang web cho là quan trọng đối với website của mình. Thường, mỗi website được chọn ra những từ đơn hay cụm từ nhau làm từ khóa. Ví dụ, trang web về du lịch thì các từ vietnam travel, vietnam tours, …; website về giải trí thì các từ: âm nhạc, phim ảnh, giải trí, am nhac, ca sy, nguoi mau, thoi trang,… thường được chọn làm từ khóa. Thời gian trước, từ khóa là vấn đề sống còn đối với một trang web. Nhưng nay với giải thuật mới từ các cỗ máy tìm kiếm thì từ khóa chỉ đóng vai trò thứ yếu.
Link Back – Link popularity: Mức độ phổ biến liên kết. Một website được đánh giá cao tại Google hay Yahoo khi nó có nhiều liên kết từ các website khác đến. Tuy nhiên, không phải cứ có nhiều liên kết là tốt vì nhiều liên kết hoàn toàn vô nghĩa vì nếu bạn liên kết đến một website bị liệt vào black list (danh sách đen vì đã sử dụng công nghệ spamming) hoặc một trang web quá ít người truy cập hay không đúng chủ đề thì lợi bất cập hại. Website của bạn có thể bị đánh giá là “cùng hội cùng thuyền” với các website kia và như thế, nguy cơ website của bạn bị rớt hạng là rất lớn.
Ranking, PageRank: Với ranking, thì Alexa đang chiếm uy tín tuyệt đối vì tính chính xác và độ tin cậy. Một website có thứ hạng Alexa ranking cao đồng nghĩa với việc website đó được nhiều người biết đến, nhiều người truy cập và nó cũng dễ dàng được tìm thấy với vị trí cao trên hệ thống tìm kiếm. PageRank là một công cụ đo đếm số link back của một website bất kỳ. nếu website của bạn có PageRank cao thì cũng đồng nghĩa với việc website được truy cập nhiều hơn nhờ người truy cập bấm trực tiếp vào link (hay banner, logo) để đến website của bạn và hệ thống tìm kiếm cũng ưu ái với bạn hơn.
Search Engine: Là các cỗ máy tìm kiếm như Google, Yahoo, Msn,… Những cỗ máy tìm kiếm này sử dụng một phần mềm gọi là Robot, hay Spider, hay Bot hoặc Crawler để tự động index và lập chỉ mục tất cả các website trên đường chúng “bò” qua. Sau đó, những thông tin này được gửi về Data Center của cỗ máy tìm kiếm để xử lý, sàng lọc, phân loại và đưa vào lưu trữ. Khi một người dùng internet cần tìm một nội dung, họ sẽ đánh từ khóa và nhiệm vụ của cỗ máy tìm kiếm là lục tìm trên danh bạ của nó các kết quả liên quan (đã lập chỉ mục trước đó). Công việc này được tiến hành hoàn toàn tự động và có thứ tự ưu tiên khác nhau cho từng site khác nhau. Các site tốt, giàu nội dung (như các trang báo điện tử, các blog lớn, các diễn đàn đông thành viên) sẽ được index thường xuyên hơn. Chính vì vậy, kết quả tìm kiếm thường tươi mới đối với những site lớn.
Internet Directory: Đây là các thư mục internet giống như kiểu Trang Vàng của Việt Nam. Những thư mục này chứa đựng rất nhiều website theo từng danh mục, từng chủ đề các nhau. Khác với các Cỗ máy tìm kiếm – các thư mục internet không hoạt động tự động mà thường do người quản trị cập nhật thông tin thông qua bản đăng ký của các chủ website gửi đến. Nếu website của bạn có mặt tại nhiều thư mục internet thì ranking, pagerank và cả vị trí trên các search engine cũng cao hơn.

Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

Gần đây Harry nhận được email của một anh hỏi về hướng dẫn trỏ tên miền về blogger.Harry cũng đã viết một bài hướng dẫn về cách trỏ tên miền cho blogspot rồi nhưng có vẻ hơi khó hiểu.Hôm nay Harry sẽ viết lại cách chi tiết hơn để chắc chắn 100% ai cũng có thể trỏ tên miền về blogger được.

Công việc chuẩn bị :

- Đầu tiên chắc chắn bạn phải có 1 tên miền và tài khoản dns của nhà cung cấp.(cái này bạn là người sở hưu tên miền mới có được).

- một blogger cần trỏ về.nếu chưa có thì bạn sẽ tạo ngay bây giờ đi nhé.

Các bước trỏ tên miền về blogger :

B1.Login vào tài khoản dns và điền các thông số như sau ở đây Harry đang chọn dns của digipower.

Bạn add các record như sau :

1 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogspot

Bạn chú ý điền các record như sau :

DNS record chọn là A tên là : domain của bạn ở đây harry chọn là 2thoitrang.net và giá trị là dải ip của google :

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

CNAME Bạn điền 2 dòng sau

tên : www giá trị ghs.google.com

tên :4JB6FAUMTQZ4 giá trị gv-GPHEWXEHTE7DBB.dv.googlehosted.com.

B2. Bạn login vào blogger và chọn cài đặt

2 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogger

Bạn click vào thêm tên miền tùy chỉnh

3 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogspot

bạn chọn chuyển sang cài đặt nâng cao. và gõ tên miền vào.chú ý bạn phải gõ www nhé sau đó nhấn lưu.

4 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogspot

Đến bước này bắt đầu mới xuất hiện lỗi.Một số domain thì blogger sẽ xác nhận thành công luôn còn đa số sẽ xuất hiện lỗi:

Chúng tôi đã không thể xác minh thẩm quyền của bạn cho miền này. Lỗi 12

5 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogger

Bạn click vào nút tại đây như hình nhé.

huong dan tro ten mien ve blogspot 6 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogspot

Bạn chọn nhà cung cấp là khác sau đó sẽ có hướng dẫn xuất hiện :

Thêm một bản ghi txt cho domain 2thoitrang.net với giá trị :google-site-verification=Tjoa3qCknYLa3-I-PVSPFKkdfPFRJF8BcdICWomGLf0

ghi chú giá trị này tùy thuộc vào từng domain nhé.bạn copy dòng này

và quay trở lại dns bạn thêm 1 giá trị txt là 2thoitrang.net với giá trị vừa rồi.Trong hình đầu tiên bạn đã nhìn thấy harry đã thêm rồi đấy.sau đó nhấn nút xác minh.Nếu vẫn xuất hiện lỗi thì bạn click vào Thêm bản ghi CNAME và điền giá trị CNAME của google hướng dẫn.Sau đó quay trở lại xác minh.

Đến đây thì gần như không còn lỗi nữa.Nếu vẫn xảy ra lỗi thì bạn chờ cập nhật dns đã vì sẽ có khoảng thời gian phải đợi.

Bước tiếp theo bạn vào cài đặt và chọn chỉnh sửa :

7 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogspot

Bạn tích vào Chuyển hướng 2thoitrang.net đến http://www.2thoitrang.net.

8 Hướng dẫn các trỏ tên miền về blogger – Cách dns tên miền về blogspot

hướng dẫn trỏ tên miền về blogger

Và cuối cùng thì kiểm tra lại thành quả xem domain của bạn đã được trỏ về blogger chưa nhé.

Chắc chắn nếu làm đúng như hướng dẫn trên thì 100% bạn sẽ chuyển được tên miền về blogspot. bạn có thể xem demo của harry tại : 2thoitrang.net

Bây giờ thì bạn có thể xây dựng themes và nội dung cho blog của bạn rồi.Bạn có thể sử dụng phần mềm Mass blogger Poster để quản lý tốt  các blogspot nhé.

Bạn có thắc mắc gì vui lòng comment taị đây nhé.và đừng quên ủng hộ harry qua topic +1 giúp nhé. :thoi trang tre 2013

 

Tags : trỏ tên miền về blogspot , tro ten mien ve blogspot , tro ten mien ve blogger , trỏ tên miền về blogger , hướng dẫn trỏ tên miền về blogger , hướng dẫn trỏ tên miền vế blogspot

Phân trang bài viết để tăng pageview

Mình nghĩ các bạn cũng có những lúc đăng một bài viết rất dài vì nội dung bài viết bắt buộc phải dài như thế hoặc là bạn muốn độc giả hiểu sâu hơn về chủ đề bạn đang viết. Đó cũng là một điểm tốt vì đôi khi chiều dài có thể nói lên bài viết bạn có chiều sâu như thế nào, nhưng có một vấn đề  không thể tránh khỏi được đó là gây ra tâm lý ngán đọc cho các độc giả của bạn, bản thân mình khi đăng các bài viết dài thì hầu như không có comment nào thật sự tập trung vào chủ đề đó (vì họ có đọc hết nổi đâu). Vậy tại sao chúng ta lại không chia nhỏ bài viết ra làm nhiều phần nhỉ? cũng khá có lý vì nếu chia bài viết ra làm nhiều phần ngắn thì không chỉ tăng thêm phần hứng thú cho người đọc mà còn giúp bạn tăng pageview đáng kể nữa, từ đó tỷ lệ bounce rate cũng giảm đi rất nhiều, mà pageview nhiều, bounce rate thấp thì cũng có nghĩa là website bạn sẽ được Google ưu áp khi xếp hạng hơn.

 

Nếu bạn cần một ví dụ thực tế, thì hãy thử suy nghĩ theo ví dụ sau. Bạn đăng một bài viết “Giới thiệu 10 blog hay nhất Việt Nam“, trong bài đó bạn chia nhỏ bài viết ra làm 10 trang khác nhau và bạn dành mỗi trang để giới thiệu chi tiết một blog. Wow, nội dung vừa chuyên sâu, mà bạn càng có khả năng kiếm thêm được nhiều pageview nữa, trọn vẹn cả đôi đường.
Rất vui mừng là bạn có thể làm việc này dễ dàng trong WordPress chèn một thẻ rất ngắn như sau vào đoạn muốn ngắt (chèn ở khung soạn thảo HTML):

<!--nextpage-->

Sau khi chèn đoạn này vào chỗ cần ngắt, bạn sẽ thấy cuối bài viết sẽ hiển thị phân trang như thế này:

nextpage wordpress Phân trang bài viết để tăng pageviewBài viết bạn càng có nhiều thẻ nextpage thì càng có nhiều trang. Nhưng nếu sau khi bạn chèn thẻ nextpage rồi mà trong bài viết của bạn vẫn chưa hiển thị thì bạn cần chèn 1 đoạn code ngắn trong theme (file single.php hoặc content-single.php) để có thể hiển thị nó

<?php wp_link_pages() ?>

Nhưng bạn có thể thấy rằng mặc định các đoạn link phân trang này không được nổi bật cho lắm, nó có thể làm cho người đọc khó nhìn thấy và càng khó hơn nếu bạn có sử dụng 1 số plugin tự chèn nội dung vào cuối bài viết như plugin tạo bài viết liên quan, GD Star Rating..v.v…Vì vậy chúng ta sẽ cần phải sử dụng CSS để trang trí nó thêm đẹp mắt và nổi bật hơn.

Mặc định các đoạn link phân trang này đều không có class riêng trong cấu trúc HTML, như vậy nếu bạn muốn sử dụng CSS riêng cho nó thì cần phải gán cho nó một class nhất định. Bạn thử chèn đoạn code sau vào file single.php hoặc content-single.php nhé

<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div

Bạn thấy đó, bây giờ các đoạn link phân trang đã có một class mang tên pagelink, bây giờ chúng ta sẽ tiến hành thêm style cho nó bằng CSS là nó sẽ nổi bật ngay thôi. Các bạn tham khảo một đoạn CSS mẫu sau đây:

.page-link {
clear:both;
display:block;
margin:001.625em;
}
.page-link a {
background:#eee;
color:#373737;
margin:0;
padding:2px 3px;
text-decoration:none;
}
.page-link a:hover {
background:#888;
color:#fff;
font-weight:bold;
}
.page-link span {
margin-right:6px;
}

Oki, bây giờ các link phân trang của bạn đã đẹp và nổi bật hơn. Bạn có thể dùng các kiến thức CSS của mình để làm đẹp nó hơn nhé. Chúc các bạn có những bài viết thú vị nhờ áp dụng tính năng này big smile Phân trang bài viết để tăng pageview .

Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Vậy là cuối cùng  cũng đến thời điểm mình giới thiệu serie này, phải nói là đây là một serie hướng dẫn WordPress mà mình đã ấp ủ khá lâu rồi nhưng do chưa có cơ hội và đủ kinh nghiệm để giới thiệu sớm đến mọi người. Nhưng bây giờ thì điều đó đã được thực hiện, đã sẵn sàng giới thiệu đến mọi người một serie hướng dẫn mang tên Tự thiết kế theme WordPress với 960 Grid từ đầu tới cuối, miễn sao bạn có thể tự làm một theme đơn giản như ảnh dưới.

13 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Trong bài này mình sẽ chưa vội đưa các bạn vào nội dung hướng dẫn ngay mà mình sẽ nói qua một số điều cũng như cho mọi người biết những gì chúng ta cần chuẩn bị.

 

Giới thiệu 960 Grid và vì sao nên dùng?

Trước khi đọc thì bạn nên tải bộ 960 Grid System về máy trước cái đã rồi cất nó ở một nơi nào đó trước đi và nên xem qua 2 bài dưới đây để hiểu thêm về 960 Grid.

960 Grid là một CSS Framework hỗ trợ bạn chia layout website nhanh chóng với độ rộng chuẩn là 960px (có thể chỉnh hơn tại đây). 960 Grid hỗ trợ nhiều nhất là layout dạng lưới với 24 cột và tối thiểu là 12 cột. Thường thì chúng ta sẽ sử dụng loại 12 cột để làm một giao diện website đơn giản, nhưng nếu bạn muốn có nhiều cột hơn để tinh chỉnh theme nâng cao thì có thể sử dụng loại 16 hay 24 cột.

Ban đầu bạn có thể hơi lạ lẫm khi làm việc với CSS Framework nhưng thực ra cũng dễ dùng lắm và bạn sẽ nhanh chóng quen thôi nếu bạn đã có kiến thức về CSS, ít nhất là sau tut này bạn sẽ hiểu được cách dùng ^^. Ở đây mình xin nói qua về việc áp dụng 960 Grid lên theme mà chúng ta sẽ làm.

2 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Toàn bộ theme chúng ta sẽ sử dụng 12 cột với tổng chiều rộng là 960px, trong đó có 20px lề biên. Nghĩa là nội dung toàn bộ website của chúng ta sẽ có kích thước 940px.

  • Phần header chia ra làm 2 khung. Khung hiển thị logo sẽ có 5 cột và khung hiển thị menu là 8 cột.
  • Phần menu dưới header chỉ 1 khung và dĩ nhiên, khung đó có luôn 12 cột.
  • Phần nội dung chia làm 2 khung. 8 cột cho phần hiển thị nội dung bài viết bên trái và 4 cột hiển thị sidebar bên phải.
  • Phần Footer Widget chia làm 3 khung và mỗi khung có 4 cột.

Bạn thấy không, do chúng ta sử dụng loại 12 cột nên tất cả các thành phần ở trong theme luôn có tổng là 12 cột. Và mỗi phần như vậy mình sẽ luôn có một thẻ div để tạo khung 12 cột cho nó. Nếu bạn vẫn chưa hiểu lắm về các cột trong theme chúng ta sắp sửa làm thì có thể xem ảnh này, mỗi cột màu đỏ mình tính là 1 cột.

Lý do mà trong bài cơ bản này mà lại sử dụng một thứ đáng lẽ không nên dùng ở bước cơ bản là vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian để thiết kế website do việc phân chia các cột sẵn, chỉ việc lấy ra và sử dụng thôi thay vì phải đặt kích thước cho mỗi thành phần rồi float trái, float phải khá phiền phức, nhưng nếu bạn là người mới thì đừng nên lạm dụng quá. Nếu bạn sử dụng cái này quen rồi thì việc thiết kế website sẽ trở nên nhẹ nhõm đi rất nhiều, giúp bạn tập trung nhiều hơn vào WordPress thay vì các thành phần này.

Kiến thức nền tảng

Như bài Học gì để thiết kế theme WordPress mình đã chỉ ra rõ những gì cần học nếu muốn tự làm theme WordPress. Thực ra nếu bạn theo dõi series này thì sẽ không cần trang bị nhiều đến như vậy đâu nhưng ít nhất bạn cũng nên chuẩn bị các kiến thức cơ bản nhất như:

  • Cách sử dụng WordPress căn bản như Posts, Pages, Widget,….Xem thêm bộ video hướng dẫn WordPress của mình.
  • Kiến thức HTML cơ bản, có thể phân biệt giữa ID và Class, thành thạo một số tag thông dụng như div, a, p, ul ol li,….
  • CSS căn bản đủ dùng, trong series này sẽ không có nhiều khái niệm phức tạp nhưng ít nhất bạn cũng biết float, background, color, margin, padding và quan trọng là cách sử dụng vùng chọn (Selector).
  • PHP căn bản, đủ để hiểu được đâu là hàm, biến, mảng, giá trị và những toán tử cơ bản.

Chỉ vậy thôi, liệt kê ra thấy nhiều nhưng mình nghĩ là những ai đang ở đây thì đã biết hết rồi cả đấy. Không tin ư, cứ theo dõi thì biết.

Công cụ cần chuẩn bị

Khi tiến hành thiết kế theme WordPress hoặc theo dõi serie này thì bạn nên cài đặt sẵn một số công cụ sau vào máy.

  • Một IDE hoặc Editor cần thiết như Notepad++, phpDesigner, Aptana Studio, CodeLobster. Ở đây mình sẽ sử dụng CodeLobster, vì sao thì đọc ở đây.
  • Một phần mềm tạo localhost dưới máy tính để cài WordPress như XAMPP, WAMPP, InstantWP, DesktopServer. Mình khuyến khích bạn nên dùng DesktopServer hoặc InstantWP cho gọn.
  • Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome. Nên dùng luôn cả 2.
  • 1 ly cà phê kèm thêm gói thuốc (nếu bạn hút thuốc).  beauty Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Nếu bạn đã chuẩn bị đủ và sẵn sàng rồi thì bây giờ bắt tay vào được rồi đấy.

Cấu trúc một theme WordPress đơn giản

Thông thường thì một theme WordPress thông thường sẽ có các file sau.

  • style.css – Khai báo thông tin theme như tên tác giả, tên theme và các code CSS có trong theme.
  • index.php – Hiển thị nội dung của trang chủ.
  • header.php – Hiển thị phần header của theme.
  • single.php – Thiết lập cấu trúc một trang hiển thị nội dung bài viết (Post)
  • footer.php – Hiển thị phần chân trang của theme.
  • archive.php – Thiết lập cấu trúc hiển thị danh sách bài viết trong category, tag, archive.
  • page.php – Thiết lập cấu trúc hiển thị nội dung của một Page.
  • sidebar.php – Thiết lập cấu trúc hiển thị sidebar của theme.
  • functions.php – Là nơi lưu trữ các functions mà chúng ta sẽ sử dụng trong theme.
  • screenshot.png – ảnh đại diện cho theme, ảnh này phải mang tên là screenshot và bắt buộc phải là định dạng .png.

Nó có thể có thêm nhiều file khác nữa tùy thuộc vào từng nhu cầu, nhưng mình sẽ nói ở một phần khác nên ở đây chúng ta chỉ làm quen với cấu trúc đơn giản thôi. Rồi, đọc thì là vậy nhưng ngay bây giờ chúng ta sẽ tiến hành tạo tự tạo các file này và viết code cho nó. Bạn nên gõ lại code nhé chứ đừng copy vì mục đích mình viết ra đây là giúp bạn nhớ được các code.

Tạo thư mục và file cần thiết

Bây giờ bạn vào thư mục wp-content/themes tạo một thư mục mới với tên bất kỳ. Ở đây mình đặt tên thư mục này là thachpham.

32 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Và trong thư mục này bạn nên tạo thêm các file và thư mục sau (có thể để trống):

42 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bạn nên nhớ là file screenshot.png có thể là ảnh bất kỳ nhé, miễn sao bạn phải đặt ảnh đó tên là screenshot.png. Tiếp theo đó, bạn copy file text.css960.css của 960 Grid System trong thư mục 960 Grid/code/css vào thư mục style trong theme của mình.

Bây giờ bạn mở file style.css lên và viết đoạn CSS sau vào.

1
2
3
4
5
6
7
8
/*
Theme Name: TP Theme
Description: Theme WordPress đơn giản.
Author: Thạch Phạm
Version: 1.0
*/

Đoạn trên là thành phần bắt buộc phải có trong mỗi theme, mục đích là khai báo các thông tin cần thiết của theme, dĩ nhiên bạn có thể sửa thành tên và link website của mình. Bây giờ lưu lại và vào Appearance -> Theme sẽ thấy ảnh và tên theme mà bạn vừa tạo.

32 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bạn thích thì cứ nhấp Activate để kích hoạt theme lên, nhưng nó sẽ chưa hiển thị gì đâu vì bạn đã làm gì đâu mà.  ah Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bây giờ bạn viết thêm đoạn code này vào file style.css để đưa tất cả thuộc tính của CSS về giá trị bằng 0 hết để có thể hiển thị giống nhau trên cùng một trình duyệt, người ta hay gọi bước này là Reset CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@media screen {html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
body {font:12px/2 "Helvetica Neue",Helvetica,Arial,sans-serif;}
a {text-decoration:none;}
ol, ul {
 list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}
.zoomer:active {top:0;}
article,aside,figure,footer,hgroup,menu,nav,section {display:block;}
.group:after {visibility: hidden; display:block; font-size:0; content: ""; clear:both; height:0;}
}/*--End Reset Screen--*/

Rồi. Tới đây coi như kết thúc khâu chuẩn bị mà bạn nên làm trước tiên khi tiến hành thực hiện một dự án theme WordPress bất kỳ. Nhưng khoan, bài có vẻ hơi dài rồi nên mình tạm kết thúc phần 1 tại đây nhé và mình sẽ viết tiếp phần 2 vào 1, 2 ngày nữa thôi. Lý do là mình dành thời gian cho những ai chưa quen với 960 Grid có thời gian tìm hiểu thêm về nó để sang các phần tiếp theo chúng ta sẽ dễ dàng làm việc hơn.