WordPress 3.1.1 là bản cập nhật bảo mật có nghĩa là nó là một bản cập nhật bắt buộc cho tất cả các quản trị web những người chạy công chúng tự lưu trữ trên blog WordPress. Các bài viết trên blog rằng công bố phiên bản mới của WordPress được đề cập ba vấn đề an ninh đã được cố định trong phiên bản này.
Thông tin về các lỗi được fix trong phiên bản này, các bạn có thể xem tại: http://codex.wordpress.org/Version_3.1.1
Thông báo về việc cập nhật phiên bản 3.1.1 từ WordPress.Org http://wordpress.org/news/2011/04/wordpress-3-1-1/
Ngay bây giờ bạn có thể cập nhật lên phiên bản mới nhất của WordPress thông qua thanh tác vụ Updates trong Control Panel hoặc tải về từ trang chủ WordPress: http://wordpress.org/download/
Theo: VNWebmaster
Từ khi mạng xã hội phát triển và chiếm số lượng lớn người sử dụng internet trên toàn cầu, thì việc quảng bá các thông tin và website trên các phương tiện mạng xã hội là một việc làm không thể thiếu cho mỗi người sở hữu website. Từ đó các webmaster chúng ta cũng không bao giờ quên một việc rất quan trọng đó là tích hợp các nút chia sẻ bài viết, like, +1, tweet lên blog sao cho đẹp mắt và nằm ở vị trí dễ nhìn thấy nhất để người khác có thể nhấp vào, từ đó bạn sẽ được cơ hội quảng bá miễn phí nếu như nội dung của bạn đáng để chia sẻ. Mỗi mạng xã hội hiện nay đều có một thư viện API và các nút chia sẻ bằng Javascript để các webmaster có thể tận dụng nó, cách chèn thì cũng không có gì là khó với chỉ 2 thao tác “copy & paste”. Thế nhưng nếu chúng ta muốn nó hiển thị đẹp mắt, gọn gàng như các nút mạng xã hội trong blog mình thì cũng không mấy dễ dàng gì, đặc biệt là những ai chưa có kinh nghiệm sử dụng CSS và Javascript. Nhưng trong WordPress thì ngược lại, những người có thể sử dụng một plugin hỗ trợ và nó có thể tự động chèn các nút của các mạng xã hội nổi tiếng như Facebook, Google Plus, Twitter, Digg..v.v…vào blog với đủ kiểu cọ rất hoành tráng.
Để tiết kiệm thời gian cho những người mới sử dụng WordPress trong việc tìm kiếm plugin như thế này, mình xin giới thiệu một số plugin giúp chèn các nút like, chia sẻ, +1, tweet…vào blog dễ dàng nhưng tốt nhất.
Active Share OrangeSoda
Đây là plugin mới đang được các trang công nghệ lớn sử dụng. Chức năng của nó là sẽ hiển thị một cửa sổ màu đen khi bạn rê chuột đến phần comment trong bài viết nhằm nhắc nhở độc giả bấm like hoặc share.
Digg Digg
Là một plugin liên quan tới việc chèn nút mạng xã hội được nhiều người sử dụng nhất, Digg Digg sẽ dễ lấy lòng bạn với tính năng tạo các nút chia sẻ lên các mạng xã hội dạng trượt rất đẹp mắt và cũng rất “dễ ăn click”. Tới thời điểm viết bài này thì Digg Digg hỗ trợ hiển thị tới 21 mạng xã hội khác nhau như Facebook, Twitter, Google Plus, Reddit, Topsy……và đặc biệt nhất là có hỗ trợ hiệu ứng lazyload, tức là nếu bạn chèn các nút này phía dưới bài viết thì khi nào người dùng kéo trang xuống phía dưới thì các file javascript của các nút này mới được kích hoạt, giúp tiết kiệm thời gian tải trang rất đáng kể. Nhưng nó không chỉ hỗ trợ chèn nút dạng trượt không thôi đâu, mà nó cũng hỗ trợ chèn các nút bình thường vào trong bài viết rất tốt đó nghen.
WP Socializer
Nếu như bạn không thích chỉ chèn mỗi một thanh chứa các nút chia sẻ theo dạng trượt như Digg Digg thì hãy thử xem qua plugin này. Không chỉ hỗ trợ chèn các nút dạng trượt, mà nó còn hỗ trợ chèn các nút mạng xã hội theo dạng hình ảnh ở đầu và cuối bài viết, kèm theo các widget rất có ích như Facebook Fanpage, Google Plus Badget.
Shareaholic
Dành cho những ai thích thẩm mỹ, Shareaholic có chức năng chèn các nút mạng xã hội vào blog đẹp mắt với 3 kiểu hiển thị là Sexy Bookmarks, Top Bar và Classic Bookmarks. Bạn cũng có thể kích hoạt cùng lúc 3 kiểu hiển thị này nhưng nếu làm như vậy thì blog bạn sẽ trở nên chậm chạp một chút, nhưng bù lại thì sẽ khá là đẹp.
Nhưng ngoài ra, plugin này còn có 2 chức năng đặc biệt khác đó là Recomendations (hiển thị các bài viết liên quan, hỗ trợ hiển thị ảnh thumbnail) và Social Analytics (thống kê về lượt chia sẻ lên mạng xã hội bằng Google Analytics) rất hay và cũng rất đáng dùng.
Socialize
Đôi khi có quá nhiều người chọn kiểu hiển thị các nút mạng xã hội thông dụng như dạng trượt, đầu và cuối bài viết sẽ gây nhàm chán cho người dùng và họ không cần để ý đến các khu vực đó nữa. Vì vậy chúng ta nên cần có một giải pháp chèn khác và cụ thể là chúng ta quất ngay giữa bài luôn.
Lời kết
Còn có rất nhiều plugin khác để làm những công việc này nhưng nhìn chung các chức năng của nó cũng không có gì khác nhau nên bài này mình chỉ giới thiệu 4 plugin nổi bật nhất, nếu bạn muốn biết thêm các plugin khác nữa thì có thể tham khảo 1 vài cái tên sau.
Nguồn: http://nguyennhumy.com/
Đây là plugin popup subcribe, dùng để thu thập email độc giả qua hình thức Freebies, Download free,..
Tương thích với các dịch vụ Autorespond như : Aweber, Mailchimp (FREE ), Getrespond,…
Giao diện quản lý rất đơn giản, các mẫu được xây dựng sẵn, chỉ cần thay đổi nội dung, hình ảnh, hỗ trợ HTML nên tha hồ sáng tạo khu vực giới thiệu sản phẩm miễn phí . Có nhiều độ hiển thị để không gây phiền toán :
Hiển thị 1 lần ( theo cookie )
Chỉ popup lightbox ngoài trang chủ 1 lần…
I) ĐƯA BIỂU TƯỢNG YAHOO VÀO WEB
Không một chatter (người tán gẫu trên mạng) Việt Nam nào mà không biết đến trình tin nhắn tức thờiYahoo! Messenger. Vậy làm thế nào để người đọc blog của bạn có thể biết bạn đang online mà tán gẫu hay đơn giản là để họ nhắn cho bạn vài dòng offline? Hãy chèn đoạn code sau đây vào vị trí bạn muốn hiển thị biểu tượng.
<a href=”ymsgr:sendIM?YahooID“><img border=”0″ src=”http://opi.yahoo.com/online?u=YahooID&m=g&t=ImageNo&l=us”></a>
Ở đây chúng ta lưu ý YahooID là nickname của bạn tại Yahoo. Ví dụ nickname của tôi là dv2n. ImageNo là một trong số: 0, 1, 2 tương ứng lần lượt với các hình bên dưới từ trên xuống mà bạn chọn.
II) ĐƯA BIỂU TƯỢNG SKYPE VÀO WEB
Việc đầu tiên bạn cần làm là cho phép hiển thị trạng thái trực tuyến trên web. Để thực hiện bạn đăng nhập Skype, chọn thực đơn Tools -> Options -> Privacy và đánh dấu chọn Allow my status to be shown on the web.
Chèn biểu tượng Skype vào website
Bước 1: Nhập Skype Name (Tên mà bạn dùng để đăng nhập trên Skype).
Bước 2: Lựa chọn biểu tượng hoặc click vào link này để tạo biểu tượng.
Bước 3: Xem hiển thị trước.
Hiệu ứng jQuery là một cách hữu ích để làm website của bạn thêm nổi bật. Hôm nay, mình sẽ hướng dẫn các bạn làm một hiệu ứng jQuery Sliding . Hiệu ứng này rất hữu ích cho ai muốn làm một portfolio online.
Để chuẩn bị cho bài hướng dẫn này, các bạn chuẩn bị 1 vài tấm ảnh kích thước 300x200px.
Cấu trúc HTML
|
1
2
3
4
|
<div id=”top”>
<img src=”/images/1.jpg” />
<img src=”/images/top.jpg” />
</div>
|
Chúng ta sẽ làm 6 hiệu ứng là top, bottom, left, right, bottom-left, bottom-right tương đương với 6 id trong mã HTML. Và id này sẽ được khai báo trong phần jQuery.
Mã CSS
.thumb p{
font-size:12px;
color:#FFFFFF;
padding:5px;
text-align:justify;}
.thumb img {
display:block; }
.top {
position:absolute;
top:0;
left:0;}
.last {
margin-right:0; }
|
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
|
.thumb {
width:300px;
margin:0 30px 30px 0;
overflow:hidden;
float:left;
position:relative;
height:200px;
background-color:#000;
cursor:pointer;}
.thumb p{
font-size:12px;
color:#FFFFFF;
padding:5px;
text-align:justify;}
.thumb img {
display:block; }
.top {
position:absolute;
top:0;
left:0;}
.last {
margin-right:0; }
|
jQuery
Đưa 2 đoạn script và đặt trong thẻ <head>
|
1
2
|
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script src=”/js/sliding.js”></script>
|
Và chúng ta bắt đầu xây dựng file sliding.js
Cấu trúc chung
|
1
2
3
4
5
|
$(‘Khai báo hiệu ứng’).hover(function() {
$(‘img.top’, $(this)).stop().animate({‘hướng sliding’: ‘kích thước sliding’},’Thời gian sliding’);
},function() {
$(‘img.top’, $(this)).stop().animate({’0′: ’0′}, 500);
});
|
$(‘img.top’, $(this)).stop().animate({top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
});
$(‘#left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});
$(‘#bottom-left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});
$(‘#bottom’).hover(function() {
$(‘img.top’, $(this)).stop().animate({top: ‘-200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
});
$(‘#right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});
$(‘#bottom-right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});
});
|
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
|
$(function() {
$(‘#top’).hover(function() {
$(‘img.top’, $(this)).stop().animate({top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
});
$(‘#left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});
$(‘#bottom-left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});
$(‘#bottom’).hover(function() {
$(‘img.top’, $(this)).stop().animate({top: ‘-200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
});
$(‘#right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});
$(‘#bottom-right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});
});
|
WordPress là phần mềm mã nguồn mở được cung cấp miễn phí, sử dụng ngôn ngữ lập trình PHP và hệ cơ sở dữ liệu MySQL. Do đó, nó thích hợp cho ai muốn đặt blog trên chính website sử dụng tên miền của riêng mình. Tuy nhiên, nếu không có tên miền riêng và chịu được một vài hình ảnh quảng cáo đôi khi xuất hiện, bạn vẫn có thể dùng chung với nhà cung cấp Automattic Production tại địa chỉ http://wordpress.com tương tự các nhà cung cấp khác.
1.Hình thức xây dựng blog WordPress
- Sử dụng dịch vụ viết blog có sẵn của trang wordpress.com
- Bạn cũng có thể download bộ nguồn của nó về và up lên host để sử dụng theo ý muốn của bạn,bạn có thể chỉnh sửa code(PHP) và giao diện(CSS) theo ý thích.
2.Tìm hiểu thêm về WordPress.
- Bạn có thể xem thông tin chi tiết hơn tại wordpress.com đây cũng là trang cung cấp dịch vụ blog có sẵn
- Bạn là một newbie và chưa biết nhiều về wordpress hãy tham khảo những bài viết tại seolanlinh về WordPress
3.Tại sao lại chọn WordPress?
- Theo kinh nghiệm xài blog của mình thì WordPress là 1 blog (1 mã nguồn mở) tuyệt vời. Bạn muốn làm 1 blog cá nhân, 1 trang web nhỏ, 1 trang tạp chí, 1 trang tin tức, 1 trang về film…và hơn thế nữa, WordPress đều có khả năng đáp ứng được hết vì nó khá linh động, đó là nhờ khả năng tuỳ biến giao diện (themes), bạn thay đổi theme sao cho phù hợp với nội dung của web là được.
- Bên cạnh đó WordPress có điểm rất hay đó là cho phép sử dụng các plugin đi kèm (rất nhiều và có nhiều cái rất hay…) và thông thường đều là free hết.
Lightbox là một dạng cải tiến từ popup. Nó giống Popup là nó cũng bật ra (pop up), “đè” lên phần còn lại của trang web. Y2Graphic tổng hợp 12 plugin về Lightbox nên dùng khi thiết kế web. Bạn không nên bỏ qua bài viết này vì nó hữu ích cho dự án của bạn. Hãy khám quá.
Facebox
Fancy box
Fancy zoom
Greybox
Werkstette
Lightbox 2
Lightview
Litebox
Shadowbox
Thicbox
Trong suốt quá trình học để trở thành một lập trình viên hiện nay ở các trường đại học thì có một giai đoạn khá quan trọng là học thiết kế web. Hay ít nhất bạn cũng đã mày mò tự học làm web vì đam mê.
Bạn cũng là một người trong số đó và đang mù mờ về các kiến thức website? Sau đây tôi xin nói qua về quá trình học thiết kế web của tôi chia sẽ cùng các bạn hi vọng sẽ giúp ích được cho nhiều người.
Quy trình tự học đối với tôi hay các bạn cũng sẽ rất đơn giản chứ nó không phức tạp như những gì bạn nghĩ đâu nhé. Mình sẽ đưa dạy các bạn theo hướng ” rip website“.
* Đầu tiên các bạn phải hiểu định nghĩa thế nào là “ rip website” chứ nhỉ: Rip web có nghĩa là tạo ra một bản sao của một trang web bất kỳ trên mạng ( tương tự với rip web là clone web)
* Các công cụ để thực hiện:
– Addons firebug của firefox
– Notepad++ ( chắc các bạn không lạ gì rồi nhỉ ^^)
– MeasureIt ( công cụ đo đạc kích thước cũng trong addons firefox )
* Bắt đầu học làm web nào:D. Ở bài viết này mình sẽ hướng dẫn các bạn làm 1 trang web tĩnh nhé:
– Có nhiều cách để lấy các file của 1 trang web về ví dụ như:
+ Dùng tool thì lấy về được toàn bộ file nhưng nhiều lúc đường link sai làm cho việc hiển thì không chuẩn dẫn đến lại phải mò mẫm sửa link ( với những người mới làm thì đây là 1 cực hình 
) )
+ Dùng các trình duyệt view sucore và coppy về, hay dùng firebug lấy về
và còn rất nhiều cách khác nữa nhưng ở đây mình sẽ dạy các bạn cách cày cuốc bằng firebug và save từ file 1 về cho nó nhớ lâu nhé.
– Đầu tiên các bạn chọn site mà các bạn muốn rip nhé.
+ bắt đầu view sucore và coppy toàn bộ 1 về và mở notepad++ lên paste vào nhé. cuối cùng save lại nhé. Đừng quên save không lại phí công coppy đó:)). Lưu lại thành 1 file ví dụ như index.php. ok và giờ chúng ta đã có trang chủ rồi nhé
+ Làm tương tự để ta lấy trang con và trang chi tiết nhé.
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é.
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é
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 fileheader.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]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![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 đã ! 
nhâm nhi tí cafe 
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 screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */@mediaonly screenand (-webkit-min-device-pixel-ratio : 1.5),only screenand (min-device-pixel-ratio : 1.5) {/* Styles */} |
|
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 5px0;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:0 và padding: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
) - 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 !!
Có thể nói wordpress là mã nguồn mở phổ biến nhất, cộng đồng lớn mạnh, vì vậy nhiều người nghĩ chọn themes wordpress cho website đơn giản, chỉ cần đẹp, nhưng bạn hãy suy nghĩ khi đọc lại các điều duới đây.
WordPress có rất nhiều theme miễn phí, việc thay giao diện cho WordPress rất dễ dàng, chỉ cần vài thao tác đơn giản bạn đã có thể thay cho mình một giao diện mới, tuy nhiên bạn có nên thay đổi giao diện nhiều lần, và chọn 1 giao diện hay xu hướng giao diện cho website như thế nào không?
Cách để chọn cho mình một theme wordoress phù hợp
Giao diện là thứ đập vào mắt khách đầu tiên khi truy cập vào website, blog của bạn, vậy nên ấn tượng ban đầu đôi khi sẽ quyết định được người đọc có tiếp tục đọc và đọc nhiều trên website bạn.
Tuy nhiên việc chọn themes cho wordpress cũng không cần màu mè hay chọn các giao diện phức tạp, đầu tiên hãy chú ý vào chức năng của nó, chức năng đó có phục vụ nhu cầu của mình hay không.
Chúng ta cùng đi vào hướng lựa chọn chi tiết hơn sau đây:
1. Chủ đề của blog?
Nếu blog chỉ là một phần website của bạn thì giao diện của blog càng giống giao diện website càng tốt. Một blog giải trí thì có thể chọn các blog đầy màu sắc và thật ấn tượng.
2. Giao diện kiếm tiền
Nếu có thì bạn hãy chọn sử dụng những theme được tối ưu hóa cho việc đặt các loại quảng cáo như Google Adsense, tuy nhiên, nói như thế không có nghĩa là dùng các theme khác thì không thể đặt quảng cáo, giao diện kiếm tiền sẽ có lợi thế hơn về hướng quảng cáo.
Nên sử dụng các theme có 3 cột vì như thế sẽ có nhiều không gian để đặt quảng cáo.
3. Trình độ code, css
Một số theme được thiết kế đơn giản chỉ đòi hỏi bạn biết sơ về HTML, PHP, CSS, khi bạn muốn tùy biến, vì thế, nếu bạn là người mới chưa biết thì chọn những themes hỗ trợ đầy đủ chức năng trước, sau đó bạn hãy học thêm css, code html đơn giản để tùy biến giao diện website.
4. Kiểm tra kỹ lưỡng:
Không nên chỉ xem qua demo, thấy đẹp thì quyết định dùng ngay, hãy cố gắng kiến phiên bản cũ hoặc bản share trên mạng để cài đặt và test trước khi quyết định dùng chúng.
5. Tương thích tốt với các plugin
Giao diện bạn sẽ dùng có tương thích tốt với các plugin hay không, thực tế thì có nhiều theme khi cài plugin lên sẽ xảy ra tình trạng xung đột plugin với website, plugin với plugin gây lỗi trầm trọng website.
Khóa học wordpress | khoa hoc wordpress 