Tối ưu hóa kích thước hình ảnh trên WordPress

Tối ưu hóa hình ảnh trên trang web là một nhiệm vụ khó khăn vì hình ảnh là phần nặng và chiếm nhiều tài nguyên của hosting nhất. Có nhiều cách giúp tối ưu như giảm số lượng hình ảnh sử dụng, nén hình ảnh, sprites hoặc svg. Nhưng có một điều mà nhiều site sử dụng WordPress gặp phải là không xác định chính xác kích thước hình ảnh cần sử dụng.

Một điều mà dân SEO hay nhắc đến khi muốn SEO thành công một website là phải có nội dung và dung lượng nhẹ. Nhưng nếu bài viết mà chỉ toàn chữ thì nhìn rất chán. Bạn có một bức ảnh 3000px và bạn sẽ không muốn người dùng phải load file ảnh đó chỉ để xem trong nội dung bài viết của bạn với chiều rộng 600px.

WordPress xử lý hình ảnh như thế nào?

Khi bạn thêm một hình ảnh vào bài viết thì mặc định wordpress sẽ tạo ra 3 ảnh với kích thước do bạn định tại Setting >> Media với 3 kích thước chuẩn là thumbnail, medium, large. Khi bạn muốn sử dụng hình ảnh với kích thước medium thì thay vì phải load bức ảnh gốc, WordPress chỉ lấy file ảnh với kích thước medium của bức ảnh gốc.

Điều này giúp bạn giảm được băng thông trên máy chủ và thời gian xử lý trên máy của khách. Đây là điều hiển nhiên vì ảnh kích thước 600 × 400 chắc chắn sẽ load nhanh hơn 1200 × 800. Nhưng bạn cũng sẽ tốn dung lượng lưu trữ vì sẽ có nhiều file được tạo ra hơn.

Nếu bạn để hình ảnh gốc và thu nhỏ ảnh lại thì trình duyệt sẽ phải tốn tài nguyên để tính toán hiển thị hình ảnh phù hợp.Điều này tốn thời gian nếu website của bạn có nhiều hình ảnh.

Kích thước ảnh cho từng vị trí thích hợp

Ở phần hình ảnh chúng ta cần chú ý đến là ảnh chèn trong bài viết và ảnh đại diện (featured image). Với hình ảnh trong bài viết thì bạn chỉ cần chọn kích thước ảnh sao cho phù hợp với chiều rộng của phần hiển thị nội dung. Và cũng không quan trọng chuyện 2 ảnh có kích thước chênh lệch nhau vài chục px. Chúng ta sẽ chủ yếu tập trung vào ảnh đại diện. Vì ảnh đại diện sẽ được sử dụng nhiều nơi nên kích thước của ảnh cũng quan trọng hơn.

Một ví dụ cụ thể như khi hiển thị danh sách bài viết liên quan bạn có thể dùng kích thước 178×178. Với những thêm có hình ảnh nằm dưới tiêu đề bạn có thể sử dụng ảnh kích thước 1200×600.

Nếu bạn lưu nhiều ảnh với những kích thước khác nhau thì có thể dễ dàng truy cập vào từng kích thước cụ thể để chèn vào bài viết. Có câu hỏi đặt ra là ngoài 3 kích thước chuẩn của WordPress bạn muốn thêm những kích thước ảnh khác thì làm sao? Rất may là WordPress có hổ trợ chức năng này.

Tạo thêm kích thước ảnh thumbnail

Muốn thêm kích thước ảnh mới bạn có thể sử dụng function add_image_size() để thêm những kích thước hình ảnh mà website bạn cần. Bạn chỉ cần thêm đoạn code bên dưới vào file functions.php trong theme bạn sử dụng hoặc trong plugin.

Trong đó:

  • $name : tên của kích thước ảnh bạn muốn tạo.
  • $width : chiều rộng của ảnh. Set 9999 để chiều rộng dựa vào $height.
  • $height: chiều cao của ảnh
  • $crop:
    • false – tính theo tỉ lệ của ảnh gốc (ảnh đầy đủ nhưng kích thước không chuẩn)
    • true – cắt hình ảnh đúng với kích thước qui định (có thể mất vài chi tiết)
    • array – bạn sẽ đưa vào vị trí muốn cắt theo trục tọa độ (x_crop_position, y_crop_position)

Ví dụ minh họa:

Khi bạn thêm đoạn này vào theme hay plugin thì khi bạn thêm hình ảnh WordPress sẽ tự động tạo ra những ảnh với kích thước bạn đã qui định.

Cách sử dụng kích thước ảnh

Bạn có thể sử dụng function the_post_thumbnail() để lấy kích thước ảnh phù hợp với vị trí mà bạn mong muốn. Đây là hàm giúp lấy ảnh đại diện của bài viết. Bạn chỉ cần truyền vào tên kích thước ảnh mà bạn đã định nghĩa phía trên.

Với dòng code trên bạn sẽ lấy ảnh đại diện với kích thước 178×178 để sử dụng. Cách làm tương tự với kích thước ảnh khác.

Regenerating Thumbnails

Khi bạn thêm kích thước ảnh mới thì chỉ những ảnh nào được thêm vào sau mới có kích thước mới, còn những ảnh trước đó thì không. Vậy làm sao để tạo lại ảnh đại diện của ảnh củ với kích thước mới. Bạn có thể sử dụng plugin Regenerate Thumbnails. Plugin này có tác dụng giúp bạn tạo lại những ảnh cũ với kích thước ảnh mới. Ví dụ bạn thêm ảnh example.jpg thì sau khi sử dụng plugin trên bạn sẽ có những file ảnh kèm theo như example-178×178.jpg. Như vậy là đã xong bạn có thể sử dụng ảnh bình thường.

Responsive Images

Một vấn đề nữa là hình ảnh trong nội dung bài viết. Ví dụ bạn có một ảnh 600px ở bài viết với giao diện desktop thì quá đẹp nhưng ở giao diện mobile thì ảnh 600px lại quá to. Làm sao để hiển thị hình ảnh tùy vào chiều rộng của màn hình điện thoại. Nhiều bạn sẽ sử dụng cách dùng thuộc tính CSS max-width:100%. Đây cũng là một cách nhưng thật sự chưa tối ưu. Như mình đã nói ở trên nếu chúng ta thu nhỏ ảnh lại thì trình duyệt sẽ cần thời gian để tính toán lại kích thước hình ảnh. Ảnh càng lớn mà thu lại quá nhỏ sẽ càng tốn nhiều thời gian tính toán cũng như thời gian tải về.

Với vấn đề này mình xin giời thiệu đến các bạn plugin hammy. Đây là plugin dự trên chiều rộng của màn hình hiển thị sẽ tính toán bằng javascript để load ảnh với kích thước phù hợp.

Kết luận

Có rất nhiều cách để bạn có thể tối ưu hình ảnh trên website của mình. Nếu sử dụng kết hợp sẽ mang lại hiệu quả cao hơn. Nếu bạn có cách nào giúp tối ưu hình ảnh WordPress xin đừng ngại ngừng mà hãy bình luận bên dưới để mình có thể bổ sung thêm vào bài viết này.

Cách sửa lổi required field entry-title,Update,hCard WordPress

Nếu bạn có sử dụng Google Structured Data Testing Tools đôi lúc bạn sẽ gặp phải lổi này:
Error: Missing required field “entry-title”.
Error: Missing required field “updated”.
Error: Missing required hCard “author”.
Đây là lổi do thiếu một số thành phần của định dạng dữ liệu HatomEntry.Vậy nếu bị lổi này thì có ảnh hưởng gì đến Website của bạn không ? Đến lúc này bản thân mình cũng chưa biết nó có ảnh hưởng gì đến SEO hay không nhưng nếu Website bạn đang dính lổi này thì sẽ xuất hiện trong Google Master Tool và theo mình thì nên fix thì sẽ tốt hơn.
Wordpress sẽ tự sinh ra một thẻ hentry nếu bạn sử dụng đoạn code dưới đây:

Và đây là kết quả khi thêm:

Nhiều bạn sẽ nói rằng sao không xóa hàm post_class đi để không còn lỗi nữa.Đây cũng là một cách nhưng nó cũng có nhiều trở ngại vì một số trường hợp cần những class này ví dụ bài viết của bạn sẽ hiển thị khác khi có thumbnail thì chúng ta cần thêm class css has-post-thumbnail.

Các thẻ cần thiết của hAtom

Đầu tiên là thẻ Hentry

Đây là thẻ cần thiết vì nếu không có thì Google Structured Data Testing Tools sẽ không báo lỗi.Bạn cần kiểm tra xem trang web của mình có class này chưa bằng cách view source rồi search từ “hentry”.

Tiếp đến là thẻ Entry-title :

Bạn cần thêm class entry-title và tiêu đề bà viết ở single.php

Updated dành cho vị trí hiển thị thời gian viết bài hoặc thời gian sửa bài gần đây nhất

Với tác giả bạn cần thêm class author và vcard như đoạn code dưới đây:

Bây giờ là đến nội dung bài viết, chúng ta cần 1 thẻ entry-content

Cách sửa lổi required field entry-title,Update,hCard WordPress

Để sứa lổi này bạn có thể vào code của theme và thêm các class như hướng dẩn phía trên.Nhưng nếu bạn không hiểu rõ cấu trúc theme của wordpress hoặc bạn không biết về php, html thì bạn có thể dùng đoạn code dưới đây.Đoạn code này  sẽ giúp bạn fix được lỗi mà không cần đụng nhiều đến code.

Bạn cần thêm đoạn code này vào dưới cùng trong file functions.php.Và chúng ta cùng kiểm tra kết quả nào:

sua loi hatom trong wordpress
Với đoạn code này thì trong nội dung bài viết sẽ xuất hiện thêm một đoạn với tiêu đề, thời gian upadte và tác giả bạn có thể trang trí bằng css để hiển thị đẹp hơn hoặc bạn có thể ẩn luôn để không ảnh hưởng đến cấu trúc của site bạn

Trên đây là bài viết hướng dẩn bạn sửa lổi thiếu hatom trên WordPress.Nếu bạn có thắc mắc hay có cách hay hơn mong bạn sẽ góp ý cho mình bằng cách bình luận phía dưới.Chúc các bạn thành công !

Giải quyết vấn đề “Remove query strings from static resources”

Remove query strings from static resource

Đôi lúc bạn sẽ gặp phải trường hợp báo query string giống như vầy đối với những file javascript hay css ?ver= 2.3.7  vậy nếu thêm chuổi query như thế có ảnh hưởng gì không ? Nếu như thêm chuổi query như vậy thì không lưu cache lại được.Nếu bạn có sử dụng  http://gtmetrix.com/ thì nó sẽ báo cho bạn Remove query strings from static resources 

Continue reading “Giải quyết vấn đề “Remove query strings from static resources””

[WordPress] Rewrite URL với Timthumb tối ưu SEO hình ảnh

Như các bạn đã biết timthumb là một thư viện resize hình ảnh nhỏ gọn , sử dụng đơn giản nên có nhiều theme dành cho wordpress sữ dụng nó.Nhưng vì URL của nó không thân thiện cho lắm dạng như vầy http://nqdung.info/wp-content/themes/nqd-bootstrap/timthumb.php?src=http://nqdung.info/wp-content/uploads/2013/04/Java_training.png&w=70&h=70&q=70 nó không được đẹp và cũng không thân thiện với Search Engine nên các bạn cảm thấy ngại khi dùng Timthumb vào các dự án của mình phải không ? Nhưng đừng lo,hôm nay mình sẽ giới thiệu cho các bạn cách để có đường dẩn thân thiện cho dang như vầy  http://nqdung.info/media/resize/70×70/r/nqdung.info/wp-content/uploads/2013/04/Java_training.png ngắn gọn hơn và nhìn dễ chịu hơn rồi.Nào bây giờ chúng ta cùng thực hiện nhé ! Continue reading “[WordPress] Rewrite URL với Timthumb tối ưu SEO hình ảnh”

[Thủ thuật] Giới thiệu về Open Graph, cách sử dụng và khắc phục khi lổi

Có lẽ các bạn đã nghe đến từ này nhiều rồi.Đây là một giao thức giúp cho các mạng xã hội sẽ lấy được nhiều thông tin hơn để hiển thị cho người dùng xem ví dụ :

facebook

 

Khi mình post một link lên facebook thì face sẽ có cái ô preview này với các thông tin như tiêu đề,hình ảnh,mô tả…Nếu website của mình ko có các thẻ Open Graph thì sao ? Không sao cả,vì lúc đó nó vẩn lấy được nhưng không theo ý của mình thôi  🙁 Continue reading “[Thủ thuật] Giới thiệu về Open Graph, cách sử dụng và khắc phục khi lổi”

[WordPress] Tối ưu hóa kết quả tìm kiếm trong WordPress

WordPress đã xây dựng tính năng tìm kiếm cho chúng ta .Nhưng tính năng tìm kiếm của WordPress là tìm tất cả mọi thứ có thể và hiển thị kết quả không như ta mong muốn.Sau đây mình sẽ hướng dẩn các bạn một số đoạn code đơn giản giúp hoàn thiện chức năng tìm kiếm hơn

Chuyển hướng đến bài viết nếu chỉ có một kết quả

Khi bạn tìm kiếm thì kết quả trả về sẽ được hiển thị bằng file search.php theo cấu trúc mà bạn định sẳn trong file này.Nhưng nếu chỉ có 1 kết quả thì sao ? Nó vẩn hiện bình thường như những kết quả tìm kiếm thông thường.Nhưng nếu bạn muốn điều hướng người dùng đến kết quả tìm kiếm này luôn thì sao ?( Chứ hiện 1 cái ra cũng như không ) Đoạn code sau đây sẽ giúp bạn làm được điều đó: Continue reading “[WordPress] Tối ưu hóa kết quả tìm kiếm trong WordPress”

[WordPress] Học gì để thiết kế theme WordPress? Và học thế nào?

Các bạn nhìn tiêu đề xem, đã bao giờ bạn tự hỏi một câu như vậy chưa? Đã bao giờ bạn muốn ước ao làm sao đó để mình có khả năng tự thiết kế cho mình một theme WordPress riêng hoặc xa hơn nữa là đi chia sẻ cho cộng đồng. Không phải là tất cả nhưng mình nghĩ là đã có khá nhiều người đã từng nghĩ như vậy (trong đó có mình). Thật sự nói thẳng ra thì bây giờ mình không phải là một chuyên gia về thiết kế theme mà đặc biệt là WordPress, nhưng mình đã và đang tìm ra hướng học để có thể tự thiết kế theme WordPress nói riêng hoặc develop một giao diện cho bất kỳ CMS nào, và sau một thời gian dài học theo hướng đó thì mình cảm nhận được mình đã tiến bộ hơn xưa rất nhiều, mình nghĩ đó là một hướng học đúng.

Vì vậy trong bài này, sẽ không có gì khác hơn ngoài việc chia sẻ hướng học cho những bạn nào muốn trở thành một Web Designer nói chung và WordPress Designer nói riêng, mình nghĩ là cái vòng luẩn quẩn ở suy nghĩ “nên học gì trước“, “phải học gì đây?“,…nên kết thúc ngay tại bài viết này. Lưu ý là mình sẽ không nói qua công dụng của từng thứ vì bạn có thể tìm hiểu sâu hơn về nó trên Google.

Học gì để thiết kế theme WordPress

Học tiếng Anh

Hè, có thể là nó hơi thừa khi nhắc ra ở đây nhưng theo mình quan sát thì vẫn có nhiều người muốn trở thành một Web Designer giỏi hay trở thành Master bất cứ lĩnh vực nào trong Công nghệ thông tin nhưng khổ nỗi vẫn không chịu học tiếng Anh. Với tư cách là một thằng đã từng xem thường tiếng Anh và rất ngu tiếng Anh quả quyết với bạn rằng, trong thế kỷ 21 này nếu không có tiếng Anh phòng thân thì coi như mất đi 30% cơ hội trong cuộc đời rồi. Mà nếu bạn làm việc và chôn thân vào những nghề IT thế này thì tiếng Anh có thể chiếm 50% nguyên nhân để làm bạn thành công hơn. Nói thật với mọi người, trước đây mình đọc rất nhiều tài liệu tiếng Việt nhưng đọc suốt 2 năm trời chả tiếp thu gì được nhiều, nhìn các bài tut trên Tutplus hay Lynda bằng tiếng Anh thấy mà thèm, từ đó tự nhủ với lòng rằng phải học tiếng Anh thật tốt. Sau một thời gian ngắn học tiếng Anh, mình bắt đầu tập đọc tài liệu tiếng Anh và kết quả là bạn chỉ cần xem xong một khóa học nào đó bằng tiếng Anh là cảm thấy kiến thức mình khác ngay so với lúc mình đọc tài liệu tiếng Việt. Mà chúng ta đều biết rằng, thuật ngữ IT mà dịch thành tiếng Việt thì chuối đừng hỏi.

Có vốn tiếng Anh rồi bạn có thể làm được khá nhiều việc, nào là tìm tài liệu, nào là hỏi trên các diễn đàn quốc tế, nào là chém gió với thằng hỗ trợ kỹ thuật hosting nước ngoài,……Cơ mà đừng quên tiếng Việt nhé, không thì blog mình ế đấy.  :sosad:

HTML – XHTML

Học gì để thiết kế theme WordPressĐây là một thứ bắt buộc mà bạn phải nắm thật vững trước khi học thêm bất cứ ngôn ngữ thiết kế website nào. HTML giống như là bộ xương, là những gì cốt lõi nhất trên cơ thể người vậy. Mình nghĩ những ai ở đây cũng đã đều biết qua HTML và nắm thật vững nó, nhưng nếu những ai chưa vững HTML thì nên ôn và luyện tập lại cái này đến khi nào bạn có thể tự lên một layout website đơn giản nhất.

Theo kinh nghiệm của mình là khi học HTML, có một số phần chúng ta có thể ít sử dụng mà cũng có phần chúng ta sử dụng rất thường xuyên. Theo như mình quan sát thì những phần mà bạn sẽ sử dụng nhiều nhất đó là 

 và thuộc tính 

. Đặc biệt nhất là

, bạn sẽ phải sử dụng nó nhiều có thể còn nhiều hơn ăn cơm nữa đó.

CSS

Đã học HTML thì bạn sẽ không thể nào thiếu CSS, nếu HTML là bộ xương hay cơ thể người thì CSS chính là quần áo khoác lên cơ thể chúng ta mỗi ngày, hiển nhiên chẳng ai trần như nhộng đi ra đường bao giờ đúng không (trừ khi…). Thường thì mình học CSS cùng lúc với HTML luôn để có thể lên style, màu sắc và định dạng cho nó.

Học CSS cũng giống như ăn cơm, học thì rất nhanh nhưng chúng ta cần luyện tập và trau dồi kỹ năng thường xuyên vì với CSS3 bạn có thể thỏa sức sáng tạo, đó là lý do mà có một số blog chuyên về CSS như CSS-Trick hay izWeb đều thường xuyên ra các tutorial CSS.

Javascript

Cái này không quan trọng như CSS hay HTML nhưng cũng là một ngôn ngữ lập trình mà bạn nên nắm qua nếu bạn muốn làm Web Designer, còn Web Developer thì gần như là bắt buộc rồi để có thể xử lý các tình huống phức tạp trên website. Nhưng tin mình đi, nếu có điều kiện thì hãy cố gắng trau dồi và tập luyện Javascript lên đến mức “đủ dùng” vì nhiều trường hợp bạn sẽ phải cần đến nó rất nhiều. Ví dụ cụ thể nhất là nếu bạn muốn sử dụng tốt AJAX, jQuery, Slick Grid,….thì bạn phải thông thạo Javascript.

jQuery & AJAX

2 cái này khá là quan trọng trong thời buổi hiện nay vì jQuery đã thật sự rất phổ biến rồi, AJAX cũng từng có một thời phổ biến nhưng hiện nay thì hơi ít thấy nhưng nó không có nghĩa là không quan trọng. Thường thì dù bạn làm việc với các project lớn hay đi xin việc thì họ cũng yêu cầu bạn phải nắm vững jQuery và AJAX.

PHP và MySQL

Học gì để thiết kế theme WordPress

Mình cho nó vào chung ở đây nghĩa là bạn phải học qua 2 ngôn ngữ này luôn chứ không phải chỉ học PHP ứng dụng với MySQL để làm website động. Tầm quan trọng của PHP thì có lẽ mình đã không cần nói rồi, ở thời đại web 2.0 như hiện nay thì không có kiến thức PHP thì cũng giống như bạn đang đi lùi thời đại vậy.

Đừng nghĩ rằng WordPress đã có sẵn hết thì không cần học PHP, hãy xem lại bài custom post type của mình và bạn sẽ thấy nó thật khó hiểu như thế nào nếu không có kiến thức về PHP, hoặc bạn không thể làm WordPress khác hơn ngoài một trang blog thông thường nếu không biết PHP để ứng dụng các hàm có trong WordPress. Nói tóm lại, bạn cần nên học PHP và MySQL thật vững chắc, học tới thành siêu nhân thì thôi.

WordPress Documentation/Wordpress Codex

Để làm gì nhỉ? Là để bạn có thể làm việc tốt với WordPress như hiểu và sử dụng các hàm – loop có sẵn trong WordPress. WordPress Documentation là một thư viện rất đồ sộ mà bạn có thể tìm thấy tất tần tật những kiến thức từ cơ bản đến nâng cao mà bạn cần nắm rõ về WordPress. Thực ra mình biết đó là nhiều người hiện nay không quan tâm đến cái documentation này vì cứ dùng tới đâu là hiểu tới đó, nhưng nếu bạn có ý định muốn nắm vững WordPress trên một trình độ cao hơn để design hoặc develop thì bạn cần nên đọc qua nó, hoặc tốt nhất là xem nó như là một sổ tay và bạn nên mở ra khi cần.

Xem WordPress Codex ⇨

Photoshop – Illustrator – Flash

Nếu bạn đã từng biết qua về Web Design thì có thể biết rằng cả 3 thứ này là một trong những kiến thức mà với bất cứ một web designer nào cũng cần trang bị. Bạn không thể lên một layout bằng giấy và sau đó là lên màu tùy hứng được, hoặc bạn không thể làm mất đi sự chuyên nghiệp khi thiết kế logo, icon mà không thông qua Illustrator.

Theo kinh nghiệm của mình là bạn nên học Photoshop càng sớm càng tốt, học trước HTML cũng được.

Flash thì có vẻ ít quan trọng hơn nhưng muốn ăn được tiền thiên hạ bằng nghề Web Design thì cũng phải “master” cái này.

Kiến thức thiết kế cơ bản

Cách lên bố cục, cách phối màu, cách thiết kế theo chuẩn UXD, Typography,…đó đều là những kiến thức bắt buộc nếu bạn muốn theme bạn làm ra có thể thu hút người dùng hoặc ít nhất là coi sao cho được. Thực ra cái này một thời mình đã lầm tưởng và bỏ qua nó, đến bây giờ thì rất hối hận và mình đang cố gắng cày cuốc mỗi ngày để nâng cao các kiến thức chung về thiết kế. Vì nếu có nó, đầu óc bạn mới trở nên nhạy bén với thiết kế và từ đó có thể nảy ra các ý tưởng theme WordPress điên rồ hoặc tuyệt vời.

SEO

Thường thì các designer chỉ cần kiến thức SEO Onpage là đủ vì từ đó bạn mới có thể ra hướng thiết kế làm sao cho giao diện của mình có thể đạt chuẩn SEO hoặc ít nhất cũng sắp xếp như thế nào để bot dễ dàng crawl các nội dung bên trong.

Vậy học như thế nào? Học ở đâu

Cách học code/design hiệu quả

Trước tiên thì bàn về học code trước cái đã, như anh Demon Warlock ở izweb đã nói rằng học thông qua video luôn dễ tiếp thu hơn đọc sách, phân chia màn hình ra 2 khu vực, 1 bên là phần mềm Editor, 1 bên là video và xem tới đâu gõ tới đó. Mình hoàn toàn đồng ý với cách học này mà chứng minh cụ thể nhất là mình đây, từ lúc trước tới giờ mình luôn học bằng video chứ ít khi nào đọc ebook lắm vì đọc ebook có thể bạn không có nhiều cảm hứng như xem video, mà lại dễ gây mệt mỏi và nhàm chán nữa.

Học code cũng là cả một quá trình luyện tập thường xuyên chứ không phải một sớm một chiều, học code thì cũng đồng nghĩa với việc bạn luyện tập tư duy lập trình. Vì vậy để cải thiện được 2 cái này tốt thì tuyệt đối không bao giờ copy/paste các code khi học mà nên tự gõ bằng tay. Nó sẽ giúp bạn nhớ được các câu lệnh, cú pháp một cách nhanh nhất mà quan trọng nhất là khi có lỗi thì còn biết mình lỗi ở đâu để mà sửa.

Ngoài việc học trên các giáo trình thì bạn cũng đừng quên các cộng đồng hay các blog/website chuyên về mảng này để đọc các tutorial lẻ và làm theo. Hoặc hơn thế nữa là giao lưu, hỏi đáp cũng những người có cùng chuyên môn, đừng bao giờ tự học rồi tự thẩm du nhé, không tốt đâu.  :roll:

Học design như thế nào?

Thực ra thì design ngoài các kiến thức cơ bản thì quan trọng nhất là bạn phải siêng và có đầu óc sáng tạo tí. Sáng tạo cũng có thể là do bẩm sinh mà có nhưng bạn có thể hoàn toàn luyện tập, thề đấy. Hãy thu thập những website chuyên về đồ họa và nhìn ngắm các tác phẩm của người ta mỗi ngày, sau đó là tự phân tích màu sắc/bố cục mà họ sử dụng để có thể nâng cao khả năng cảm thụ thiết kế. Từ lúc đó bạn mới có thể tự nảy ra các ý tưởng thiết kế cho riêng mình.

Học ở đâu?

À há, đây là vấn đề quan trọng nhất nè. Chọn nơi học đúng là một việc vô cùng quan trọng khi học bất cứ cái gì, ít nhất là đối với kinh nghiệm của mình.

Trước khi đi vào vấn đề học thì mình xin chia sẻ với bạn một tips, đó là nên bỏ tiền để học mặc dù có rất nhiều tài liệu miễn phí rất tốt có thể tham khảo. Nhưng đây là yếu tố tâm lý, nếu bạn bỏ tiền ra với con số vài trăm hay vài triệu thì thái độ học nó sẽ khác nếu như học miễn phí, bạn sẽ học với tinh thần có trách nhiệm hơn và học từng chút cho đáng với đồng tiền mình bỏ ra. Mặc dù mình cũng nghèo nhưng mình cam kết với bạn rằng trả tiền để học chưa bao giờ là phí phạm cả, kiến thức là vô giá. Dưới đây là một số nguồn học của mình

w3school

W3School

Là một nơi để bạn bắt đầu khá tốt, dù là HTML, CSS, Javascript hay PHP thì mình khuyên bạn là nên đọc các tài liệu cơ bản ở đây trước vì tính dễ hiểu kèm ví dụ minh họa cụ thể.

opera-web-dev

Opera Web Standards Curriculum

Là một kho tài liệu về HTML và Javascript từ cơ bản đến “đủ xài” rất tốt và dễ hiệu, nhiều khi mình quên kiến thức cũng đã phải mò lại vào đây để xem lại.

Học gì để thiết kế theme WordPress

Lynda.com

Kho tài liệu video nổi tiếng này thì không cần phải nói quá nhiều nữa rồi, hãy nhắm một chủ đề muốn học trước và sau đó là nạp tiền vào. Rồi bạn sẽ thấy đồng tiền của mình có giá trị như thế nào. Có một chuyện khá buồn cười của mình ở đây đó là mình chỉ dám subscribe mỗi tháng chứ không có nhiều tiền mua mỗi năm, thế là khi nào cần học là lại gạt hết công việc trong 1 tháng và bắt đầu học ngay khi subscribe để không phải phí tiền, vì giá không phải là rẻ.  :sosad:

Học gì để thiết kế theme WordPress

Udemy.com

Đây là một nguồn học mà mình vừa mới biết tới đây thôi và hiện nay cũng đang bám càng vào 3 course ở trên đó. Ưu điểm ở đây là các bài học sẽ được gom vào từng phần cụ thể, nhưng nhược điểm là bạn phải trả tiền cho mỗi khóa học chứ không phải đóng tiền là muốn học cái gì cũng được.

teamtreehouse-course

TeamTreeHouse

Cũng là một trang học thông qua các video như Lynda nhưng nó tập trung vào sâu hơn Web Development và Web Design. Ngoài các bài học chi tiết, dễ hiểu thì bạn sẽ còn nhận được các bài tập rất thú vị nữa.

dvd-psd2html-izwebzBộ DVD PSD2HTML & WordPress của IzWebz

Đây là một bộ DVD tiếng Việt khá hay và mình khuyến khích bạn nên sở hữu nó ngay nếu muốn thiết kế theme WordPress. Trong DVD này bạn sẽ học được cách cắt layout từ file Photoshop ra định dạng HTML chuẩn W3C và cuối cùng là tích hợp vào WordPress.

Bộ DVD PHP MySQL & IzCMS của IzWebz

Học gì để thiết kế theme WordPress

Như mình đã nói ở trên, bạn phải nắm rõ PHP nếu muốn dùng tốt WordPress. Và nếu bạn là người mới bắt đầu, ngại tiếng Anh thì có thể xem bộ DVD này, rất dễ hiểu và bạn có thể nắm rõ các kiến thức PHP cần thiết để có thể tự tạo một trang web động, tất nhiên là các kiến thức đó bạn có thể áp dụng vào trong WordPress. Đây là một bộ DVD không bao giờ thừa nếu bạn muốn trở thành Web Designer hoặc Web Developer.

QHOnline.Info

Đây là một website tiếng Việt chứa các bài giảng PHP từ cơ bản đến nâng cao mà mình cảm thấy đầy đủ nhất hiện nay. Sẽ thật phí nếu bạn bỏ qua website này nếu như bạn muốn học PHP hay trở thành chuyên viên PHP.

Bạn học theo cách nào?

Tất cả những gì mình chia sẻ ở trên đều là kinh nghiệm và những cách học riêng của mình và đối với mình nó rất phù hợp, dễ tiếp thu mà không còn phải quanh quẩn trong vòng xoáy câu hỏi “nên bắt đầu từ đâu?” nữa. Nhưng mình không chắc chắn đó có phải là những tài liệu tốt hay cách học tốt nhất hay không, vì vậy nếu bạn có cách học thiết kế theme WordPress hay hơn, có hiệu quả hơn thì hãy chia sẻ cùng mình và mọi người nhé.

Nguồn  Thạch Phạm Blog