Sử dụng thẻ Menus trong WordPress như thế nào?

WordPress cung cấp một chức năng Menus rất hay nhưng Mialui thấy rất ít người biết sử dụng. Chức năng này sử dụng rất đơn giản, chỉ đơn thuần là sắp xếp các Pages, categories nhưng nó lại tạo cho blog/web của bạn một phong cách rất chuyên nghiệp.

Trước tiên, chức năng thẻ Menus là tạo cho blog/web của bạn một menu thư mục dạng cây giống như các tờ báo Việt Nam hay làm. Ở đấy bạn có thể sắp xếp tất cả các thư mục cha/con theo ý của các bạn. Ví dụ như khi bạn đưa con trỏ tới mục “Thể thao” thì lập tức nó hiển thị các thư mục con trong đó như “bóng đá, cầu lông, tennis,..”

Và quan trọng là hầu như các themes miễn phí của WordPress điều hỗ trợ chức năng này, tuy nhiên cũng có một số ít themes không hỗ trợ thẻ Menus.

Vậy thì làm cách nào? Xem hình

Đăng nhập vào phần quản trị (drasboard), tìm cột bên tay trái nhấp vào thẻ Menus bên dưới

 Sử dụng thẻ Menus trong WordPress như thế nào?
 Sử dụng thẻ Menus trong WordPress như thế nào?
Nếu như theme không có hỗ trợ Menus, thì phía dưới chữ Menus sẽ có thông báo, cũng tùy theo theme có hỗ trợ 1 hay 2 Menu. Ở đây Mialui chọn theme Enterprise thực hành có hỗ trợ 2 Menu. Gõ từ “Main” vào để tạo Menu 1, gõ xong nhớ nhấp Create Menu.
 Sử dụng thẻ Menus trong WordPress như thế nào?
Trên cột Pages, Categories bạn chọn xem tất cả, bấm vào chọn tất cả, xong bấm “Add to Menu”. Nhớ là bạn phải tạo categories, pages trước nhé. Xong rồi hình sẽ như thế này
 Sử dụng thẻ Menus trong WordPress như thế nào?
Bây giờ mình chỉ việc di chuyển từng thẻ theo vị trí mong muốn, thư mục nào cha, thư mục nào con, đặt thư mục nào trước, thư mục nào sau. Nhớ sắp xếp rồi thì bấm Save Menu nhé.
 Sử dụng thẻ Menus trong WordPress như thế nào?
Sắp xếp cây thư mục, bạn muốn thay chữ “Home” = “Trang chủ” thì nhấp vào mũi tên sát bên chữ Custom nhé.
 Sử dụng thẻ Menus trong WordPress như thế nào?
Như thế này đây.
 Sử dụng thẻ Menus trong WordPress như thế nào?
Sau đấy chọn từ “Main” ở vị trí Primary Menu rồi nhấp Lưu lại. Thế là xong.
Nếu bạn muốn làm thêm cái Menu thứ 2 thì các bước cũng tương tư như vậy. Xem hình
 Sử dụng thẻ Menus trong WordPress như thế nào?
Gõ từ “Sub” vào rồi nhấp  Create Menu.
 Sử dụng thẻ Menus trong WordPress như thế nào?
Cũng Add to Menu như vậy
 Sử dụng thẻ Menus trong WordPress như thế nào?
Chọn từ Sub lưu lại nhé. Trong ô Primary Menu hay Secondary Menu lúc này sẽ có ba vị trí: Main, Sub, ô trống. bạn hãy thử chọn từng cái sẽ biết tác dụng của nó.
Còn đây là thành quả đạt được.
 Sử dụng thẻ Menus trong WordPress như thế nào?
 Sử dụng thẻ Menus trong WordPress như thế nào?

Chúc các bạn thành công.

Posted in internet marketing, khóa học thiết kế website giá rẻ, Khóa học thiết kế website tại Hà Nội bằng wordpress, Tạo wordpress themes | Tagged , , | Leave a comment

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 Rewrite trong 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ới Modulerewrite_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é.

Posted in internet marketing, khóa học thiết kế website giá rẻ, Khóa học thiết kế website tại Hà Nội bằng wordpress | Tagged , , | Leave a comment

Thủ Thuật WordPress : Cách chèn nhạc vào blog WordPress không dùng plugin.

Thủ Thuật WordPress) – Nhiều lúc bạn muốn chèn nhạc vào bài viết của mình nhưng loay hoay mãi chẳng biết làm sao.Trong wordpress thì không thấy có chức năng chèn nhạc vào bài viết.Vậy phải là thế nào để chèn được nhạc vào bài viết ? có nhiều plugin cho phép chèn nhạc vào bài viết.Nhưng bài này Harry sẽ chỉ cho các bạn không dùng plugin mà vẫn chèn được nhạc vào bài viết wordpress.

chen nhac vao bai viet wordpress Thủ Thuật WordPress : Cách chèn nhạc vào blog WordPress không dùng plugin.

Trước tiên bạn phải upload nhạc của mình lên các trang chia sẽ.Làm sao để có link-bai-hat.mp3 là được.Có nhiều trang nhé bạn có thể dùng : Soundcloud. Với trang này thì bạn phải đăng kí rồi up nhạc lên ( các bước bạn tự nghiên cứu nhé.Nó cũng dễ làm ^_^)

C1. Sau khi bạn upload xong thì nó sẽ tạo ra đoạn mã embed để chúng ta chèn vào bài viết của mình.Với cách này thì bạn mất công phải download , rồi up load lên.Cũng mất nhiều thời gian quá.:D

C2. Với bạn đã có link .mp3 sẵn.Bài này Harry sẽ dùng link này

http://qns.vn/Upload/Chuongtrinh/QnS%201140%20(24.03.2013)_upload%20by%20quick_vocam.mp3

Đây là link quick and snow show 1140 harry dùng idm bắt được.

Ở trình soạn thảo bài viết bạn chuyển sang dạng Text để chèn đoạn mã sau dưới dạng html nơi mà bạn muốn xuất hiện

<audio width=”300″ height=”32″ style=”font-size: 13px; line-height: 19px;” preload=”auto” autoplay=”autoplay” controls=”controls” src=”http://qns.vn/Upload/Chuongtrinh/QnS%201140%20(24.03.2013)_upload%20by%20quick_vocam.mp3″>
</audio>

Bạn để ý trong đoạn mã trên có các thông số :

– preload=”auto” : bạn có muốn load lại khi nghe hết bài hay không.

– autoplay=”autoplay” :  Khi link được mở thì bài hát tự động play bạn không cần phải nhấn nút.

– src=”link.mp3″ : thay link bài hát của bạn.

Và bây giờ nhấn public nào . Nghe thử bài hát của Harry dùng cho bài viết này ở dưới nhé.Bạn nào chưa làm được thì comment tại đây luôn nhé.Cách nà cũng áp dụng với các blog mã nguồn khác bạn nhé.

Posted in Học wordpress giá rẻ, internet marketing, khóa học thiết kế website giá rẻ | Tagged , , | Leave a comment

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 Rewrite trong 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ới Module 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 WAPP nhé.

Posted in Học wordpress giá rẻ, Khóa học thiết kế website tại Hà Nội bằng wordpress, lớp học thiết kế website tại Hà Nội | Tagged , , | Leave a comment

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é.

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). 

 

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

Posted in Học wordpress giá rẻ, internet marketing, Khóa học thiết kế website tại Hà Nội bằng wordpress | Tagged , , | Leave a comment

Phân quyền User trong WordPress

Ở một website động nào cũng có user ít nhất là admin quản lý web, blog. WordPress cũng thế, trong đây hỗ trợ cho bạn các cấp độ quyền hạn user khác nhau tùy vào mục đích sử dụng mà bạn cấp cho user ở cấp độ nhất định.

Bạn là một dân viết blog, nếu blog bạn phát triển có người muốn làm cộng tác viên viết bài với bạn hiển nhiên là không thể cấp cho họ quyền admin tương đương với mình vì họ có thể cấu hình lại hệ thống blog của bạn, vậy bạn cần tìm hiểu các cấp độ và quyền hạn của user trong wordpress để có sự lựa chọn đúng đắn trong trường hợp này.

phan quyen user trong wordpress  Phân quyền User trong WordPress

Trong phân quyền trong wordpress bao gồm năm cấp độ user là: administrator, editor, author, contributor, subscriber ở mỗi cấp độ có một phạm vi tác động đến blog wordpress khác nhau, user cấp độ trên sẽ có tất cả các quyền của user cấp độ dưới và hiển nhiên cấp độ trên bạn hạn chế quyền nào thì cấp ở dưới cũng thế.

Phân quyền trong WordPress

1. Administrator: Có sức ảnh hưởng cao nhất, tác động đến toàn bộ hệ thống và can thiệp vào hoạt động của các user khác, có quyền tạo user, cài đặt kích hoạt plugin, cấu hình toàn bộ trang web WordPress.

2. Editor: Chỉ dưới quyền admin, được phép sửa các bài viết trên blog wordpress, có thể kiểm duyệt bài viết, cho phép public bài viết, update mục links … Tuy nhiên không có quyền cấu hình hệ thống, không tạo đươc người dùng mới và không chỉnh sửa thông User khác.

3. Author: Có thể soạn bài, đăng bài, edit bài của chính mình và quản lý comment thuộc phạm vi bài viết của mình public.

4.Contributor: Cộng tác viên, user có thể viết bài góp ý tuy nhiên k được public phải chờ xét duyệt, cấp độ này hay được tạo cho các bạn mới thử viết blog.

5. Subscriber: Cấp độ này có quyền gần như khách truy cập, không thể đăng bài, chỉ có comment khi đăng nhập vào hệ thống và chỉnh sửa thông tin của chính mình, thường cấp độ này sẽ được cấp sau khi đăng kí.

Cac cap quyen user trong wordpress  Phân quyền User trong WordPress

Kết luận: Bài viết về vấn đề đơn giản tuy nhiên ở một số trường hợp thì nó rất quan trọng. Nếu vô tình không hỉu rõ cấp quyền user “vu vơ” thì hư bột hư đường hết có khi phải ôm hận. hehe… Chúc mọi người thành công!

Theo BCD

Posted in Học wordpress giá rẻ, khóa học thiết kế website giá rẻ, Khóa học thiết kế website tại Hà Nội bằng wordpress | Leave a comment

Theme tin tức đẹp Bangkok Press V1.1.1 – Responsive

Hôm này Harry chia sẻ một themes đẹp cho website tin tức.Bangkok Pressstheme được tạo bởi ThemeForest tích hợp sẵn Responsive tương thích với các thiết bị di động , máy tính bảng.Themes này hỗ trợ seo tốt đặc biệt cho các bạn làm website tin tức.Nó custom chi tiết không cần biết code cũng có thể tuỳ chỉnh được giao diện.

112 Theme tin tức đẹp Bangkok Press V1.1.1 – Responsive

themes đẹp cho website tin tức

Các bạn có thể xem Demo ở đây xem những gì Harry nói nhé. => Demo tại đây

Chỉ cần css nhỏ nữa sẽ làm theme tin tức rất tuyệt.Tải về và trải nghiệm nào.

1
http://www.mediafire.com/?adrowbo8zrexfro

pass giải nén : hocwordpress.com

Chi tiết Themes tin tức đẹp Bangkock press 

  • .pot file for localization available
  • SEO Optimized
  • Unlimited Color
  • 6 Footer Layouts
  • 10+ Blog styles
  • 450+ Fonts Available
  • Drag Drop Page Builder
  • Drag Drop Slider Manager
  • Built-in Translator
  • Built-in Shortcodes
  • Font Uploader
  • Logo Uploader
  • Background Uploader
  • 15 Pre-Defined Background Patterns
  • 4 Custom Post Types
    • Portfolio
    • Gallery
    • Testimonial
    • Price Table
  • Thumbnail Options
    • Static Image
    • Slider
    • Video
  • Price Table
  • Social Share for Posts
  • Social Link on Header
  • Video Tutorial for Setting Up as Demo Site

Hướng dẫn cài đặt themes bangkock Press

Themes đã kèm file hướng dẫn ở thư mục document.Bạn nào có thắc mắc về themes vui lòng comment tại đây nhé.

Posted in Khóa học thiết kế website tại Hà Nội bằng wordpress | Leave a comment