Thủ thuật WordPress: Làm Đẹp comment WordPress

Comment WordPress đóng một vai trò quan trọng trong việc xây dựng website.Vì thông qua cổng comment thì độc giả có thể chia sẽ suy nghĩ , bình luận và góp ý cho Webmaster điều chỉnh trong bài viết của mình.Chính vì thế mà Harry cũng rất muốn sau mỗi bài viết các bạn để lại comment bình luận cho các bài viết Harry đã biên tập.Đó cũng chính là nguồn động viên lớn nhất và góp phần xây dựng Blog Học WordPress ngày càng tốt hơn.Có nhiều cách để độc giả comment  bài viết của mình.Phần lớn thì nội dung phải hay khiến độc giả có những suy nghĩ về bài viết.Nhưng một phần không quan trọng đó là Form Comment phải hấp dẫn đẹp.Harry sẽ style lại form comment của học Wordpress theo bài viết này,

Bạn copy đoạn code sau vào file style.css trong thư mục themes nhé.

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

Tuỳ chỉnh CSS, bạn hoàn toàn có thể thay đổi giao diện của form comment wordpress. Bây giờ ta tuỳ chỉnh lại khi click vào từng text-field thì nó sẽ sáng lên giống hình.

24 Thủ thuật WordPress: Làm Đẹp comment WordPress

Copy đoạn css sau :

#respond {
background: #ececec;
padding:0 5px 0 5px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

Bây giờ ta tuỳ chỉnh font chữ cho hai ô tên và url

#author {
font-family: Lobster, “Lobster 1.4″, “Droid Sans”, Arial;
font-size: 16px;
color:#1d1d1d;
letter-spacing:.1em;
}

#url {
color: #21759b;
font-family: “Luicida Console”, “Courier New”, “Courier”, monospace;
}

32 Thủ thuật WordPress: Làm Đẹp comment WordPress

Làm đẹp nút gửi bình luận:

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
}

#submit:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
background: -moz-linear-gradient(top, #003366, #006ad4)
}

 

42 Thủ thuật WordPress: Làm Đẹp comment WordPress

Như vậy bạn đã style xong form comment wordpress rồi nhé.chúc bạn thành công

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

Hướng dẫn kích hoạt Module Rewrite trong Apache

Một vấn đề hay thường gặp cho những bạn thiết kế website wordpress đó là khi cài đặt website ở localhost mà vẫn không rewrite url được.Cứ bật Permalinks lên để write url thì bài viết của bạn xuất hiện lỗi 404 không tìm thấy bài viết.Bài viết này Harry sẽ hướng dẫn bạn kích hoạt Module Rewritetrong Apache.

Để khắc phục lỗi trên bạn phải bật modul rewrite trong apache của WAMPP , XAMPP hoặc MAMP.bằng cách click vào biểu tượng ở thanh taskbar chọn Apache » Apache Module và tìm tớiModule rewrite_module nhấp vào đó để bật lên nhé.

11 Hướng dẫn kích hoạt Module Rewrite trong Apache

kích hoạt module rewrite

25 Hướng dẫn kích hoạt Module Rewrite trong Apache

Module rewrite đã được bật

Sau đó bạn có thể tuỳ chỉnh Permalinks của mình.

Ngoài ra bạn có thể tìm tới file httpd.confi của Apache và tìm dòng

# LoadModule rewrite_module modules / mod_rewrite.so

Sau đó bỏ dấu # ở phía trước được như thế này

LoadModule rewrite_module modules / mod_rewrite.so

Và khởi động lại WAPP của mình nhé.Nếu bạn nào chưa cài WAPP thì xem hướng dẫn cài đăt WAPPnhé.

Tối ưu hóa thẻ meta Description trong theme WordPress

Không nhỡ rõ mình đã đọc ở đâu một câu rất hay, meta Keyword không quan trọng bằng meta Description và meta Title trong việc SEO. Tuy nhiên, với hầu hết các theme của WordPress, thẻ meta Description (Desc) không được hiển thị tại vị trị tốt nhất. Và ngay cả khi mọi người sử dụng Plugin All in one Seo, vị trí của thẻ Desc vẫn không được cải thiện là bao.

meta description se 400x278 Tối ưu hóa thẻ meta Description trong theme WordPressTối ưu hóa thẻ meta description

Chúng ta cùng thử phân tích 1 ví dụ nhé:

Code của Nhanweb.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nguyen Duy Nhan – Blog học tập, chia sẻ kiến thức lập trình và quản trị website, kiếm tiền qua mạng</title>
<meta name="description" content="Blog học tập, chia sẻ kiến thức lập trình và quản trị website, kiếm tiền qua mạng" />
thẻ Title và thẻ Description được đẩy lên đầu nhằm giúp các Bot tìm kiếm dễ dàng đọc và nhanh chóng index site cũng như các bài viết mới.

Code của as247.vui360.com/blog/ (Không phải site mình nhá)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>.:As*** - As247:.</title><link rel="alternate" type="application/rss+xml" title="RSS 2.0 - all posts" href="http://as247.vui360.com/blog/feed/" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0 - all comments" href="http://as247.vui360.com/blog/comments/feed/" /><link rel="pingback" href="http://as247.vui360.com/blog/xmlrpc.php" /><!-- style START --><link rel="stylesheet" href="/ http://as247.vui360.com/blog/wp-content/themes/as247/style.css" type="text/css" media="screen" /><!--[if IE 6]><link rel="stylesheet" href="http://as247.vui360.com/blog/wp-content/themes/as247/ie6.css" type="text/css" media="screen" /><![endif]--><!-- style END --><!-- script START --><script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/themes/as247/js/menu.js"></script><script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/themes/as247/js/util.js"></script><!-- script END --><link rel='stylesheet' id='NextGEN-css'  href='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='shutter-css'  href='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.2' type='text/css' media='screen' />
    <link rel='stylesheet' id='sociable-front-css-css'  href='http://as247.vui360.com/blog/wp-content/plugins/sociable/sociable.css?ver=3.1.3' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-downloadmanager-css'  href='http://as247.vui360.com/blog/wp-content/plugins/wp-downloadmanager/download-css.css?ver=1.50' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-pagenavi-css'  href='http://as247.vui360.com/blog/wp-content/themes/as247/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/l10n.js?ver=20101110'></script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-content/plugins/collapsing-links/collapsFunctions.js?ver=1.7'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var shutterSettings = {
    	msgLoading: "L O A D I N G",
    	msgClose: "Click to Close",
    	imageCount: "1"
    };
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.2'></script>

<script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/swfobject.js?ver=2.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://as247.vui360.com/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://as247.vui360.com/blog/wp-includes/wlwmanifest.xml" />
<link rel='index' title='.:As*** – As247:.' href='http://as247.vui360.com/blog/' />
<meta name="generator" content="WordPress 3.1.3" />
<script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/tw-sack.js?ver=1.6.1'></script>
	<script type="text/javascript">
	// ajax_login_widget settings
	var alw_timeout = 0;
	var alw_redirectOnLogin = '';

	// constants
	var alw_base_uri = 'http://as247.vui360.com/blog';
	var alw_success = '1';
	var alw_failure = '0';

	</script>
	<script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/plugins/ajax-login-widget/ajax_login_widget.js"></script>

<!-- All in One SEO Pack 1.6.13.3 by Michael Torbert of Semper Fi Web Design[321,360] -->
<meta name="Description" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">

<meta name="keywords" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

<link rel="canonical" href="http://as247.vui360.com/blog/" />

<!-- /all in one seo pack -->

Blog này sử dụng plugin như hầu hết chúng ta vẫn dùng, tuy nhiên, thẻ Desc lại nằm tại vị trí quá tệ.

Vậy sử dụng cách nào để giải quyết? Mình sẽ giới thiệu 1 cách để các bạn có thể khắc phục nhược điểm trên. Đó là tạo Meta Desc thông qua excerpt trong bài viết

Bạn chèn vào vị trí bạn muốn đặt thẻ Desc trong header.php như sau:

<?php
if (is_singular()):
global $post;
setup_postdata($post);
?>
<meta name=”description” content=”<?php the_excerpt_rss(); ?>” />
<?php endif; ?>

Lúc này, content=”<?php the_excerpt_rss(); ?>” sẽ truy vấn giá trị bạn nhập trong ô excerpt trong bài viết để làm Description.

Bạn có thể tích hợp thêm 1 số tính năng đơn giản như tự động cắt tại 160 kí tự nhằm tăng thêm tính hiệu quả cho thẻ.

Facebook sẽ kiếm tiền nhờ màn hình điện thoại của bạn

Lượng người dùng truy cập từ di động tăng nhanh khiến màn hình điện thoại trở thành nơi màu mỡ để Facebook khai thác quảng cáo. Facebook muốn làm cho người dùng thích những nội dung quảng cáo đó thay vì bị ức chế.

fb o 1 Facebook sẽ kiếm tiền nhờ màn hình điện thoại của bạn

Theo công ty nghiên cứu thị trường comScore, vào tháng 3 năm nay, trung bình người dùng Facebook trên điện thoại di động ở Mỹ truy cập vào mạng xã hội này hơn 7 giờ. Mark Zuckerberg, CEO Facebook, cho biết ưu tiên hàng đầu trong năm nay của Facebook là đưa trải nghiệm tốt hơn về Facebook lên di động, kèm với đó là quảng cáo, đồng thời tiếp tục tích hợp các ứng dụng trực tuyến vào nền tảng Facebook.Số người dùng điện thoại thông minh để lướt web, tiêu tốn thời gian và những trang như Facebook đang nhiều hơn bao giờ hết và sẽ tiếp tục tăng. Vấn đề đặt ra là Facebook sẽ khai thác điều đó để kiếm tiền như thế nào. Các chuyên gia cho rằng Facebook đã có kế hoạch về mô hình quảng cáo trên di động để có thể thu về lợi nhuận nhiều hơn.

Đa số người dùng sẽ không thích quảng cáo trên thiết bị di động, nhưng nếu quảng cáo đó liên quan đến lợi ích thiết thân thì họ sẽ chú ý. Thực ra, rất nhiều hoạt động của người dùng diễn ra trên thiết bị di động cũng đang được các nhà phát triển ứng dụng và các nhà sản xuất thiết bị theo dõi để biết người dùng ưa thích gì, thường đi đi đâu và tiêu tiền như thế nào. Dữ liệu này sẽ giúp họ cải thiện sản phẩm và đưa ra kế hoạch tiếp thị phù hợp.

Chắc hẳn, Facebook cũng cần có những dữ liệu tương tự như vậy về người dùng. Dữ liệu này sẽ giúp các mẫu quảng cáo xuất hiện trên thiết bị di động ngày càng phù hợp hơn và thời gian với nhu cầu của chủ thiết bị, và thời điểm xuất hiện quảng cáo cũng có thể ăn nhập hơn. Chẳng hạn, quảng cáo có thể xuất hiện lúc người dùng vừa dừng chân ngay trước một khu mua sắm nào đó.

Zuckerberg cho biết Facebook chỉ mới bắt đầu phát triển ứng dụng di động riêng của hãng, và đang cần thu thập nhiều dữ liệu hơn, như về vị trí người dùng, những người bạn nào của họ bấm “like” một sản phẩm nhất định nào đó trong những quảng cáo trên di động. Đó là cách tốt để quảng cáo hướng đến đúng đối tượng người dùng có nhu cầu.

Với những cố gắng này, có thể rồi đây người dùng sẽ hứng thú với những quảng cáo xuất hiện trên thiết bị di động của họ, đã được tùy biến theo mỗi cá nhân, về những sản phẩm mà họ hoặc bạn bè của họ quan tâm. Nhưng cũng có thể những quảng cáo này sẽ làm phiền họ trong lúc đang muốn vui vẻ với bạn bè trên mạng xã hội.  Điều đó vẫn còn là ẩn số.

Hướng dẫn cài đặt theme wordpress

Mình nghĩ đọc xong bài viết hướng dẫn cài đặt plugin cho wordpress, các bạn đã làm quen được với wordpress rồi, nên bài viết này mình sẽ ít sử dụng hình ảnh, chỉ hướng dẫn theo từng bước, các bạn làm theo là được D Hướng dẫn cài đặt theme wordpress

ĐỂ XEM DANH SÁCH THEME HIỆN CÓ:

Menu bên trái -> Appearance -> Themes

ĐỂ CÀI ĐẶT THEME MỚI:

có 2 cách:

  1. Tìm kiếm và cài đặt từ thư viện của wordpress.org (như cài đặt plugin mà mình đã hướng dẫn lần trước)
  2. Upload theme lên từ máy tính

Khoan bàn về các bước thực hiện, mình muốn chia sẽ với các bạn về cách tìm theme, ví dụ các bạn làm website tin tức bằng wordpress, mà không biết tìm theme, hãy để google giúp bạn. Vào google.com.vn, gõ “tổng hợp theme wordpress làm site tin tức”

hoặc tham khảo ở các trang chuyên bán theme như: themeforest.net, vào mục NEWS (tin tức). Tìm cho mình 1 theme ưng ý… và rồi tiếp bước 2 nè…

bước 2 của tìm kiếm theme %5E%5E Hướng dẫn cài đặt theme wordpress Khỏi phải bàn về chuyện bản quyền, người Việt Nam mình chuyên dùng software hàng lậu, hàng crack, hàng null, nên chuyện dùng theme lậu cũng là bình thường. Một người thu nhập hàng tháng 1tr500 ngàn đồng (tương đương 75 USD) thì tiền éo đâu mà mua cái theme ngang ngữa chừng đó tiền lương 1 tháng? (1 theme đẹp thường có giá từ 50 đến 100 USD).

Mình sẽ hướng dẫn các bạn tìm theme “lậu” này.

Một số trang chuyên share theme như:

Có người nói sử dụng theme null rất nguy hiểm, vì có thể bị chèn mã độc vào, và bị phá website bất kì lúc nào – DẸP MẸ NÓ ĐÊ – mềnh éo có tiền thì mềnh sài hàng null, hàng crack. Và mình tin chắc rằng 100% các bạn đang đọc bài viết này sẽ không ngại chuyện đó, vì các bạn là newbie, là người mới tìm hiểu về wordpress, nhu cầu xây dựng trang web để tập tành, chứ không phải là 1 website công ty to lớn…

Nhưng khoan đã, cái đó là mình phản bác lại những người chê theme null, theme crack, chứ mình đâu có nói những theme được share này cùi bắp như bọn họ nói??? Theme này có 2 loại, 1 là được null thật sự, chuyện chèn mã độc thì 50/50, hên xui D Hướng dẫn cài đặt theme wordpress 2 là theme được 1 nhóm người sử dụng wordpress, hoặc 1 cá nhân nào đó mua, sau đó đem share lại trên blog / website cá nhân, nhầm thu hút khách truy cập – loại 2 này yên tâm, không bị kiện cáo, mã độc gì đâu.

à ừm tới đâu rồi nhỉ? lan man ngoài đề quá…

Cách tìm theme nè:

lại google: “theme wordpress tin tức đẹp, tổng hợp theme wordpress tin tức,…”

muốn tìm các theme free thì: “theme wordpress tin tức miễn phí,…”

Còn nếu đã biết tên theme rồi thì tìm theo version (phiên bản) của nó: “Sahifa wordpress theme version 3.0.2″

trong đó sahifa là tên theme, đây là 1 theme rất đẹp về website tin tức. Các bạn có thể download tại đây: http://yeuwordpress.com/theme-wordpress/sahifa-version-3-0-2-wordpress-theme.html

Viral Marketing

 Viral Marketing

Viral Marketing – Marketing lan truyền

Giống như cách thức lan truyền của một con virus. Hình thức quảng cáo này bắt đầu từ giả thuyết một khách hàng luôn kể cho người khác nghe về sản phẩm hoặc dich vụ của bạn mà khách hàng cảm thấy hài lòng khi sử dụng.

Viral Marketing mô tả chiến thuật khuyến khích một cá nhân nào đó lan truyền một nội dung tiếp thị, quảng cáo đến những người khác, tạo ra một tiềm năng phát triển theo hàm mũ sự lan truyền và ảnh hưởng của một thông điệp như những con vi rút.

Các chiến dịch như vậy đã lợi dụng vào sự nhân rộng nhanh chóng để làm bùng nổ một thông điệp đến hàng ngàn, hàng triệu lần.

Nhưng để tạo ra một chiến dịch Viral Marketing có hiệu quả thì thật sự không dễ chút nào, bạn cần phải làm cho “virus” của mình là duy nhất, lôi cuốn, nó phải mang tính cá nhân và được truyền đi bằng sự cộng tác “đôi bên cùng có lợi”…

Theo kết quả thống kê của một công trình nghiên cứu thì chỉ có:

– 18% quảng cáo trên ti vi tạo ra một tỉ lệ hoàn vốn đầu tư khả quan.

– 84% các chiến dịch B2B mang lại mức doanh thu ngày càng thấp.

– 100% việc đầu tư thêm vào quảng cáo chỉ để tạo ra thêm 1% – 2% doanh thu.

– 14% người tiêu dùng tin vào quảng cáo.

– Và 69% người tiêu dùng thích công nghệ ngăn chặn quảng cáo

Từ các số liệu “biết nói” này đã cho chúng ta nhận thấy rằng: Tiếp thị và quảng cáo truyền thống ngày càng trở nên lộn xôn, không đáng tin cậy; kém hiệu quả, chi phí cao hơn mà tỉ lệ hoàn vốn đầu tư lại thấp. Một triết lí đơn giản là: “…bất kì một chiến lược Marketing tốn tiền bac nào mà không tạo ra tiền cho bạn đều là một chiến dịch Marketing phí tiền bạc…” (Kirk Cheyfitz, CEO, Story Worldwide); và kèm theo đó các nhà nghiên cứu cũng đã phát hiện ra một điều thú vị: trung bình thì một người có: 11 – 12 mối quan hệ mật thiết, khoảng 150 mối quan hệ xã hội, và từ 500 đến 1500 các quan hệ lỏng lẻo khác… Chính vì vậy, mà các nhà kinh tế đã tìm ra một “giải pháp” mới cho ngành tiếp thị hiện nay và nó đã dần dần khẳng định được sức mạnh của mình – “Sức mạnh của Word Of Mouth Marketing”.

 Viral Marketing

 

Lợi thế InterBrand Media trong việc thực hiện Viral Marketing:

– Hoạch định rõ ràng thông điệp, chủ đề, người truyền tin… trước khi thực hiện.

– Có số lượng lớn dữ liệu đến vài triệu khách hàng

– Đội ngũ cộng tác viên am hiểu thế giới Online để đẩy nhanh thông điệp quảng cáo

– Bằng việc quảng cáo 2.0 trên sẽ giúp sản phẩm, thông điệp của bạn nhanh chóng đi vào thị trường với chi phí rẻ và hiệu quả… trong một chiến lược Marketing hiện đại.

Thêm top menu đẹp cho Thesis 2

Trong bài hướng dẫn Thesis 2 này mình sẽ hướng dẫn các bạn cách làm đẹp top menu cho Thesis 2 giống như hình phía dưới. Cực kỳ dễ làm và ai cũng có thể làm được.

top menu thesis2 Thêm top menu đẹp cho Thesis 2

 

Chèn CSS vào Custom CSS

Các bạn vào Thesis -> Skin Editor -> mở tab CSS -> mở tab Custom CSS rồi chèn đoạn CSS dưới đây vào

ul.dark_menu{
 list-style:none;
 padding:0;
 font-family:Arial;
 font-size:14px;
 line-height:14px;
 float:right}
 ul.dark_menu:after{
 content:"";
 clear:both;
 display:block;
 overflow:hidden;
 visibility:hidden;
 width:0;
 height:0}
 ul.dark_menu li{
 float:left;
 margin:0 0 0 10px;
 position:relative}
 ul.dark_menu li:first-child{
 margin:0}
 ul.dark_menu li a, ul.dark_menu li a:link{
 color:#fff;
 text-decoration:none;
 display:block;
 padding:10px 26px;
 text-shadow:0 1px 0 #4b433e;
 background:#362f2c;
 background:-moz-linear-gradient(top,#362f2c 0%,#282321 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#362f2c),color-stop(100%,#282321));
 background:-webkit-linear-gradient(top,#362f2c 0%,#282321 100%);
 background icon surprised Thêm top menu đẹp cho Thesis 2 -linear-gradient(top,#362f2c 0%,#282321 100%);
 background:-ms-linear-gradient(top,#362f2c 0%,#282321 100%);
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c',endColorstr='#282321',GradientType=0 );
 background:linear-gradient(top,#362f2c 0%,#282321 100%);
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:inset 0 1px 0 #564b46,
 0 1px 1px #181514;
 -moz-box-shadow:inset 0 1px 0 #564b46,
 0 1px 1px #181514;
 box-shadow:inset 0 1px 0 #564b46,
 0 1px 1px #181514;
 -webkit-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 -ms-transition:all 1s ease;
 transition:all 1s ease}
 ul.dark_menu li a:hover{
 text-shadow:0 1px 1px #000;
 background:#282321;
 background:-moz-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#282321),color-stop(99%,#362f2c),color-stop(100%,#362f2c));
 background:-webkit-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
 background icon surprised Thêm top menu đẹp cho Thesis 2 -linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
 background:-ms-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321',endColorstr='#362f2c',GradientType=0 );
 background:linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
 -webkit-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 -ms-transition:all 1s ease;
 transition:all 1s ease}
 ul.dark_menu li a.selected, ul.dark_menu li a:active{
 color:#73635e;
 background:#282321;
 text-shadow:0 1px 1px #000;
 -webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 -moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 -webkit-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 -ms-transition:all 1s ease;
 transition:all 1s ease}
 ul.dark_menu li ul{
 display:none}
 ul.dark_menu li ul:before{
 content:"";
 position:absolute;
 display:block;
 z-index:1500;
 left:0;
 top:-10px;
 height:10px;
 width:100%}
 ul.dark_menu li:hover ul{
 position:absolute;
 display:block;
 z-index:1000;
 left:0;
 top:44px;
 padding:5px 0;
 list-style:none;
 background:#282321;
 -webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 -moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),
 0 1px 0 #5e524f;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px}
 ul.dark_menu li ul li{
 float:none;
 margin:0 10px
 border-bottom:1px solid #191614;
 border-top:1px solid #3a3230}
 ul.dark_menu li ul li:first-child{
 margin:0 10px;
 border-top:0 none}
 ul.dark_menu li ul li:last-child{
 border-bottom:0 none}
 ul.dark_menu li ul li a, ul.dark_menu li ul li a:link{
 display:block;
 background:transparent none;
 padding:10px 20px 10px 5px;
 white-space:nowrap;
 text-shadow:0 1px 2px #000;
 -webkit-box-shadow:0 0 0 rgba(0,0,0,0);
 -moz-box-shadow:0 0 0 rgba(0,0,0,0);
 box-shadow:0 0 0 rgba(0,0,0,0);
 -webkit-border-radius:0px;
 -moz-border-radius:0px;
 border-radius:0px}
 ul.dark_menu li ul li a:hover{
 text-decoration:underline;
 background:#2a2523}

Sau đó nhấn vào nút Save CSS để lưu lại.

Bước 2 – Thêm box Top Menu cho Thesis 2

Ở bước này bạn không cần cài thêm box gì cả mà sẽ sử dụng các box có sẵn trong Thesis 2, bao gồm box Container và box WP Nav Menu. Các bạn xem video để rõ hơn cách thêm box Menu vào skin

Sau khi thêm box xong nhớ nhấn nút Save Template và tận hưởng kết quả

Thủ Thuật WordPress: Cách Thêm Link cho Widget Title WordPress

(Thu Thuat  WordPress) – Hầu hết các Themes WordPress không thể thiết lập link cho tiêu đề widget. Nhưng bạn muốn thêm link cho widget Title vậy bạn phải là sao.Bài viết này Học Wordpress sẽ giúp bạn custom link trong widget.Để hiểu rõ hơn bài viết này đang nói vấn đề gì thì bạn vui lòng nhìn hình sau.

11 Thủ Thuật WordPress: Cách Thêm Link cho Widget Title WordPress

 

Bạn nhìn sẽ thấy bình thường nếu ta thêm 1 widget thì ở tiêu đề widget sẽ không có link.Điều chúng ta cần là làm sao để xuất hiện custom link

21 Thủ Thuật WordPress: Cách Thêm Link cho Widget Title WordPress

Đơn giản chỉ cần cài plugin Widget Title Links bạn sẽ tuỳ chỉnh đơn như ý muốn.

 

Hook là gì ? Cách sử dụng hook

Hook là gì ? Nếu bạn sử dụng WordPress có lẽ bạn sẽ được nghe đến nó. Bạn còn được nghe đến nó nhiều hơn nếu bạn sử dụng các theme chuyên dụng như Genesis hoặc Thesis. Trong bài viết này mình muốn giới thiệu với các bạn về bộ Hook của Genesis.

Hook để làm gì ?

Hook là một công cụ được viết để bạn bổ sung code vào theme của WordPress một cách dễ dàng và nhanh chóng mà không làm thay đổi những mặc định trong theme. Nói cách khác, Hook là chìa khóa giúp bạn custom theme WordPress được dễ dàng hơn.

Sử dụng Hook

Đây là phần quan trọng vì nó giúp bạn có thể điều khiển các Hook dễ dàng và tùy chỉnh theo ý mình. Việc nắm rõ cách sử dụng, tên các Hook có thể giúp bạn dễ dàng tùy biến nội dung theo ý mình., Vì vậy các bạn hãy chú ý nhé

Bước 1: tạo một file nội dung.
Bạn tạo một file php bất kì rồi đưa một vài nội dung cần hiển thị ở bên ngoài theme vào. Ví dụ ở đây, tôi tạo file bottom-widgets.php.

Bước 2: CSS và HTML.

Đây là bước làm đẹp cho nội dung trước khi đưa trang này lên thông qua Hook. Bạn sử dụng CSS để định dạng và căn chỉnh cho hợp lý.

Bước 3: Tạo hàm cho phép gọi file bottom-widgets.php. Hàm bạn tạo được đặt trong functions.php nằm trong child theme của bạn. Đây là đoạn code của mình:

function include_bottom_widgets() {
    require(CHILD_DIR.'/bottom-widgets.php');
}

Nếu nội dung của bạn cần là một đoạn text ngắn, hoặc bạn có thể lập trình bằng PHP bạn có thể code trực tiếp tất cả trong hàm này. Việc thực thi bước 1, bước 2 vì tôi muốn các mã lập trình sáng sủa hơn và dễ tìm thấy hơn bằng cách chia nhỏ ra.

Bước 4: gọi Hook tương ứng

Bạn có thể đặt đoạn code sau vào phía trên đoạn code ở bước 3 để gọi Hook và truyền hàm tương ứng vào Hook này:

add_action('genesis_before_footer', 'include_bottom_widgets');

Ở đây NhanWeb gọi Hook genesis_before_footer và gọi hàm include_bottom_widgets đã viết ở bước 3 để thực thi tại vị trí trước vị trí footer.

Đoạn code đẹp và hoàn chỉnh cho bước 3 và 4 là

add_action('genesis_before_footer', 'include_bottom_widgets');
function _include_bottom_widgets() {
    require(CHILD_DIR.'/bottom-widgets.php');
}

Danh sách các Hook bạn có thể sử dụng

Ở trên mình đã giới thiệu cách sử dụng Hook rồi, sau đây mình xin giới thiệu các bạn danh sách các Hook của Genesis để bạn có thể sử dụng. Bạn muốn sử dụng Hook nào thì gọi tương ứng như đã nói ở trên và đặt vào functions.php trong child theme nhé.