[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 1

Như đã hứa thì hôm nay mình sẽ hướng dẩn các bạn cách viết 1 theme bằng bootstrap.Nếu các bạn chưa biết Bootstrap là gì thì có thể xem ở bài viết  Giới thiệu và hướng dẫn cách sử dụng Bootstrap 

Mình sẽ hướng dẩn các bạn làm theme giống như theme mà nqdung.info đang sử dụng.

nqdung

Mình cũng xin nói sơ lại về Twiter Bootstrap 1 chút xíu  😀 Tương tự như  960 Grid System, Bootstrap cũng chia độ rộng của màn hình hiển thị của trình duyệt thành 12 cột (Bao nhiêu cột thì tùy bạn,bạn hoàn toàn có thể custom lại nó)

– Tại sao lại sử dụng Bootstrap và các CSS Framework khác

Twitter-Bootstrap-Tutorials

Nếu bạn đã quen với việc sử dụng các CSS Framework thì bạn sẽ thấy tốc độ design 1 trang web sẽ giảm đáng kể.Việc sử dụng  CSS Framework giúp chúng ta tránh việc lặp đi lặp lại các thao tác như reset các thẻ,style button…

Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn  các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây.

Lúc đầu mới làm quen các bạn sẽ hơi khó khăn trong việc custom lại bootstrap 1 chút nhưng dùng nhiều sẽ quen và có khi còn “ghiền”  ấy chứ :byebye:

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

Làm theme cho WP không quá khó như các bạn nghĩ đâu,chúng ta chỉ cần 1 số kiến thức cơ bản như :

  1. HTML/CSS cơ bản
  2. PHP cơ bản : cách viết hàm,sử dụng mảng…
  3. Cách sử dụng WordPress căn bản như Posts, Pages, Widget

Không quá khó đúng không ? Nào chúng ta cùng đến bước tiếp theo.

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

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

  • Một IDE hoặc Editor cần thiết như Notepad++, phpDesigner, Aptana Studio, CodeLobster.
  • Một phần mềm tạo localhost dưới máy tính để cài WordPress như XAMPP, WAMPP,InstantWP, DesktopServer. Mình thì dùng ZendServer.
  • Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome.Mình khuyên dùng Firefox + Firebug…

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

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

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

Có thể có nhiều hơn nhưng cơ bản thì cần bao nhiêu đây thôi…Giời thì chúng ta bắt đầu thôi.Trước tiên là cài đặt các bước cơ bản cái đã  :brick:

Đầu tiên thì chúng ta sẽ tìm hiểu 1 chút về theme của wordpress.Tất cả các theme của WordPress đều nằm trong /wp-content/theme

theme 1

 

 

 

 

 

 

Sau đó chúng ta tiến hành tải và copy các thư mục của bootstrap vào thư mục theme của chúng ta ở đây là thư mục nqdung.info.Đồng thời chúng ta cũng tiến hành tạo ra các file liệt kê phía trên và đây là kết quả của chúng ta:

 

theme 2

Giờ thì chúng ta cần làm thêm 1 số thao tác nữa:

Thêm đoạn này vào đầu file style.css:

Đoạn trên có nhiệm vụ là khai báo tên theme,tác giả,phiên bản….Chúng ta có thể vào Appearance -> Theme  để kiểm tra xem nhé

theme 3

Giờ thì chúng ta có thể active theme lên rồi ! kakak  😀

Chúng ta thêm đoạn CSS này vào file style.css đây là đoạn css canh lề của wordpress thôi..

Cơ bản là đã xong rồi đó ! Chúng ta sẽ tiếp tục thực hiện các công đoạn còn lại vào bài viết tiếp theo nhé !

Bài viết của mình có 1 số là copy từ Thachpham.com vì nó giống nhau và vì Thạch viết hay hơn nên copy qua luôn :keke: :byebye:

Những gì chúng ta có được sau bài này

Link tải

[WordPress] Đếm tổng số Posts, Pages, Categories, Tags, Comments cho WordPress Themes

wp-codesnippets

Đôi lúc  chúng ta cần lấy tổng số bài viết hay tổng số page,chuyên mục, tag,hay commnet của trang web để làm thống kê hay gì đó  😀

Bài viết này mình viết để làm tiền đề cho việc làm theme wordpress dùng bootstrap mà sắp tới mình sẽ thực hiện.

Lấy tổng số bài viết

Lấy tổng số pages

Lấy tổng số categories

Lấy số  Tags

Lấy tổng số comments

Giờ chúng ta tổng kết lại kết quả nhé !

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

[WordPress Theme] 12 Theme đẹp từ WooThemes cho wordpress tháng 5/2013

Hôm nay nhận được 1 email của WPMU thông báo 1 số thứ nhưng mình chú ý nhất là dòng 120 Free Themes From Premium Developers.Nên giờ ngồi đây viết 1 bài tổng hợp cho các bạn đây  😀

Vì có đển 120 theme nên mình sẽ chia thành nhiều phần và phần đầu tiên là Woo Theme gồm có 12 theme và chúng ta bắt đầu thôi,đều là theme premium nhé mọi người :
Continue reading “[WordPress Theme] 12 Theme đẹp từ WooThemes cho wordpress tháng 5/2013”

[WordPress Template] Share template IzMobileBlue dành cho wapmaster

Với phong trao làm wap đang nở rộ thì 1 nhu cầu tất yếu là mã nguồn phù hợp là điều hết sức hợp lý.Có rất nhiều mã nguồn dùng làm wap như JohnCms,Xtgem, WMP,… nhưng hầu hết các mã nguồn đó đều bắt bạn phải tự tay làm hơi nhiều,nếu được chia sẽ thì nhiều khi chúng ta lại nhận được 1 số thứ không mong muốn (ở đời là vậy mà ai lại cho free bao giờ 🙁 ).Mình thấy WordPress mà 1 mã nguồn thích hợp để các bạn thực hiện điều này vì :

  1. WordPress có cộng đồng người sử dụng lớn.
  2. Code đơn giản , code dể hiểu..
  3. Số lượng plugin lớn.(Plugin hổ trợ SEO mạnh)
  4. Template nhiều và đẹp (free có mà fee cũng có)

Do đó hôm nay mình sẽ chia sẽ theme này cho các bạn có ý định làm wap.Một điều chú ý là theme này có thể làm theme mobile cho các trang web có sử dụng WPtouch hay Mobile Domain (nhưng phải sửa lại chút đỉnh).

Đây là một theme mình đã làm cho wap http://izplay.net.Không dám nói là SEO chuẩn nhưng cũng tạm được (do kinh nghiệm SEO còn kém quá :sosad: )

izmobileBlue

Các chức năng của template này là:

  • Giao diện đơn giản, code cũng đơn giản các bạn có thể sửa lại cho phù hợp với sở thích của mình
  • Theme có tông màu xanh da trời
  • Hổ trợ SEO Breakcrum 
  • Hổ trợ bộ IzBox Widget với các widget cơ bản như: 
    • IzBox Content : Lấy bài viết theo từng chuyên mục
    • IzBox Content Lastest : Lấy bài viết mới nhất
    • IzBox Content Link : Hiển thị tất cả các liên kết (bản wordpress 3.5 trở lên phải cài plugin Link Manager)
    • IzBox Content Random : Hiển thi bài viết ngẩu nhiên
    • IzBox Content Same Category : Hiển thị bài viết cùng chuyên mục
    • IzBox Content Search : Hiển thị khung tìm kiếm
    • IzBox Content Top App : Hiển thị những bài viết có check vào ứng dụng hot có lượt view cao nhất (Cần có plugin WP-Postview)
    • IzBox Content Top Game : Hiển thị những bài viết có check vào ứng dụng hot có lượt view cao nhất (Cần có plugin WP-Postview)
    • IzBox Content Ads : Hiện thị code HTML dùng làm quảng cáo
    • IzBox Content Footer : Hiển thị code HTML nhưng không có tiêu đề dùng để hiện bộ đếm
  • …..

Mình cũng muốn giới thiệu Quốc Dũng Blog đến mọi người nên những ai cần cứ comment để lại email mình sẽ gữi nhé !

Sắp tới mình sẽ viết 1 series về làm tempate cho WordPress bằng Bootstrap.Các bạn nào muốn tự làm tempate cho web của mình thì ghé qua xem nhé  :byebye: nó cũng không khác gì mấy đâu

P/S: Nếu các bạn thấy theme này đẹp và có ý định làm 1 template riên theo ý của mình thì các bạn cứ liên hệ với mình.Mình sẽ làm với giá ưu đãi.

 

[dropshadowbox align=”center” effect=”curled” width=”250px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]Link tải[/dropshadowbox]

 

[WordPress Plugin] Hướng dẩn cách sử dụng WP Robot và ứng dụng để kiếm tiền

wp-robot-review-autoblog-plugin1

WP Robot là 1 trong những WordPress Plugin có thể nói là nổi tiếng nhất trong các Plugin về xây dựng nội dung. Với WP Robot, bạn có thể lấy nội dung từ cực nhiều nguồn khác nhau, điển hình là bạn có thể 1 xây dựng 1 trang lấy tin tự động từ các trang web như dantri, vnexpress… bằng WP Robot. Với những chức năng như thế, cá nhân mình thấy cái giá $129 lifetime mà WP Robot đưa ra là không hề đắt. Tuy nhiên, ở bài viết ngày hôm nay mình sẽ không đề cập tới việc xây dựng 1 trang lấy tin tự động, mà mình sẽ nói tới việc sử dụng WP Robot để lấy thông tin sản phẩm từ Amazon sao cho hiệu quả nhất, từ đó bạn hoàn toàn có thể xây dựng 1 trang web kiếm tiền trên mạng qua Amazon theo phương châm tự-động-hóa :sogood:

Đầu tiên thì cần làm gì nhỉ ? Đây là 1 plugin trả phí raasrt hay và hiệu quả giá của nó hiện giờ là $129 cho bản Full

Bạn có thể đặt mua bằng link dưới đây:

Mua plugin WP Robot với giá $129 để làm autoblog hiệu quả
Link mua tai đây

Cài đặt thông số cho WP Robot

Mình sẽ không hướng dẫn cách cài đặt WP Robot, vì cách cài WP Robot cũng như bất kì Plugin nào khác. Ở phần này mình sẽ hướng dẫn mọi người những thông số trong phần Option của WP Robot.

1. Phần General

wp robot 1

  1. Enable Simple Mode: Khi bạn tick vào phần này, lúc bạn tạo Campaigns sẽ không có phần chỉnh sửa template theo ý muốn nữa, mà thay vào đó bạn chỉ có thể chọn template có sẵn mà bạn đã tạo trong phần Template mà thôi.
  2. New Post Status: Nếu bạn muốn để Publish bài viết mỗi khi lấy bài về, hãy chọn Published, còn không hãy chọn Draft. Phần này tất nhiên là mình để Publish
  3. Reset Post Counter: Đưa lượt đếm số bài viết đã lấy về 0 sau mỗi 50, 75, 100… bài. Mình chọn “no” để dễ quản lý số bài viết trên mỗi Campaigns.
  4. Enable Help Tooltips: Nếu Enable, bạn sẽ có những cái dấu hỏi ở bên phải giúp bạn hiểu được chức năng của từng phần, như trên hình
  5. Enable Old Duplicate Check: Kiểm tra bài viết có bị Duplicate không. Chỉ phù hợp với WP Robot 2 trở về trước.
  6. Randomize Post Times: Ngẫu nhiên thời gian post trong mỗi Campaign. Không cần thiết với Amazon.
  7. Randomize Number of Comments: Ngẫu nhiên số lượng comment trong mỗi bài viết. Tick cũng được, không tick cũng được.
  8. Cloak Affiliate Link: Ẩn Affiliate link, giúp tăng tỷ lệ khách hàng click vào link của bạn. Tuy nhiên bạn không nên sử dụng chức năng này nếu bạn kiếm tiền trên mạng với Amazon, vì điều này vi phạm T.O.S của Amazon
  9. Automatically create Tags: Tự động tạo Tag cho mỗi bài viết. Nên tick, sẽ rất tốt cho SEO mặc dù Tag của Amazon tạo không được chuẩn cho lắm.
  10. Save Images from Server: Tự động lưu ảnh về server. Theo mình biết thì chức năng này cũng không được Amazon cho phép.
  11. Exclude from Tags: Không sử dụng những Tags sau nếu bạn sử dụng chức năng Automatically create Tags.
  12. Global Exclude Keywords: Không sử dụng những Keyword trong phần này tại bất kỳ Campaigns nào
  13. Author: Tự động post bài dưới danh nghĩa tác giả nào?
  14. Open Links: Mở link trong bài viết ở trang mới hay trang cũ?
  15. Use Proxies: Sử dụng Proxy để lấy bài viết.

2. Amazon Options

cai-dat-wp-robot-cho-amazon-options

  1. Amazon Affiliate ID: Bạn nhập Tag Affiliate ID của mình ở đây. Nó là cái ID có kèm đuôi -20 ở bên tay phải của trang Affiliate Amazon của bạn đó
  2. API Key + Secret Access Key: Cái này bạn có thể vào link này, chọn phần Access Identifiers để lấy API Key và Secret Access Key.
  3. Skip Products If: Phần này chọn No Description or No Thumbnail, có nghĩa là bạn sẽ bỏ qua sản phẩm nếu sản phẩm đó không có Description hoặc không có ảnh sản phẩm.
  4. Amazon Description Length: Số ký tự tối đa bạn muốn lấy trong phần Description. Phần này mình chủ trương đưa càng ít thông tin cho độc giả càng tốt, vì thế mình chọn 250 Characters.
  5. Amazon Website: Nguồn từ trang web nào của Amazon. Mình làm Affiliate cho Amazon.com, vì thế mình sẽ chọn Amazon.com.
  6. Post Shortcode: Sử dụng Shortcode của WP Robot cho bài viết của Amazon. Phần này tùy từng theme lựa chọn. Ví dụ như theme KnightZon mà mình hay sử dụng thì không tick vào phần này.

Viết Templates cho Amazon Module

Đây là phần mà mình nghĩ là quan trọng nhất trong WP Robot. Nó ảnh hưởng trực tiếp đến kết quả SEO của bạn, cũng như tỷ lệ conversion từ nội dung bài viết. Sau đây là 1 mẫu Template mà mình sử dụng :

 

Mới nhìn thì khá là rắc rối đúng không  Nhìn kĩ thì mọi người sẽ thấy 1 số tag quan trọng như sau:

  1. {thumbnail}: Lấy ảnh Thumbnail từ Amazon chèn vào bài viết
  2. {title}: Tiêu đề của sản phẩm
  3. {url}: Link tới trang sản phẩm, tất nhiên là có kèm Tag Affiliate ID của bạn
  4. {features}: Lấy Features của sản phẩm
  5. {listprice}: Lấy List Price từ Amazon
  6. {price-updating}: Lấy giá Price đã được cập nhật ở Amazon
  7. {rating}: Rating của sản phẩm
  8. {reviewsnum}: Số lượng review về sản phẩm
  9. {reviews-url}: Link tới trang Review của sản phẩm.
  10. {buynow}: Hình Buy Now được lấy từ Amazon

Ngoài ra còn 1 vài tag nữa, mọi người có thể tự tìm hiểu công dụng của nó qua 1 vài bài post thử

Khởi tạo Campaigns

cai-dat-wp-robot-cho-amazon-create-campaigns

Phần Create Campaigns được thiết kế rất dễ hiểu và không có gì gọi là rườm rà rắc rối cả  Cụ thể như sau :

  1. Keywords: Mọi người có thể điền Keyword về sản phẩm ở đây
    Tips: Có thể điền ASIN của sản phẩm vào đây để lấy từng sản phẩm.
  2. Categories: Chọn Categories cho Keyword tại đây
  3. Post Title và Post Content bạn có thể làm tương tự trong phần Templates.

Hướng dẫn lấy nhiều sản phẩm tự động bằng WP Robot

Nếu bạn đã từng thử lấy sản phẩm bằng WP Robot, bạn sẽ nhận ra là sẽ rất khó để lấy vài nghìn sản phẩm, nếu không muốn nói là vài chục nghìn  Trong khi nếu muốn có thật nhiều traffic cho trang, chúng ta không còn cách nào khác là tăng số lượng sản phẩm lên thật nhiều để Google index toàn bộ, từ đó kiếm traffic từ những từ khóa dài dạng long tail keyword. Sau đây là giải pháp của việc post sản phẩm bằng WP Robot:

  1. Tạo 1 Campaigns về sản phẩm theo ý bạn. Có thể sử dụng ASIN bằng cách sử dụng trang http://asingrabber.com/
  2. Download Imacros Addon dành cho Firefox
  3. Tạo 1 Imacro bằng cách Record.
  4. Chỉnh sửa Imacro đó, thay toàn bộ code trong đó bằng code sau đây (Thay thế domain.com bằng tên domain của bạn.
  5. Ở phần Repeat Macro, chọn số lượng sản phẩm bạn muốn post vào phần Max. Trường hợp sử dụng ASIN thì thì có thể thay bằng số lượng ASIN bạn có
  6. Click vào “Play (Loop)
  7. Bằng cách này, bạn có thể post nhiều sản phẩm 1 cách tự động mà không lo bị dính lỗi Request nhiều Query trong 1 giây

Tips khi sử dụng WP Robot để kiếm tiền trên mạng với Amazon

  1. Với cách này, bạn có thể lấy được rất nhiều sản phẩm từ Amazon, tuy nhiên nhược điểm là trang web của bạn sẽ bị Google giết 1 cách thảm thương chỉ sau vài ngày, có thể là vài tuần, kể từ khi bắt đầu có Traffic. Vì thế hãy xây dựng website theo kiểu đại trà, lúc đó Google giết site này ta lại có site khác mọc lên. Bạn có biết chuyện về quái vật Hydra không?
  2. Nếu bị quá tải server, bạn có thể tăng phần WAIT SECONDS=1 lên thành 2 hoặc 3, 4…
  3. Hãy sử dụng những theme đẹp, dạng shop, điều này giúp tăng tỷ lệ Conversion Rate của bạn lên.
  4. Nên tạo nhiều Campaigns, mỗi Campaigns 1 category riêng biệt.
  5. Mỗi trang web nên lấy ít nhất 5000 sản phẩm

Lời kết

Hi vọng qua bài viết này các bạn sẽ thấy được tiềm năng của plugin WP Robot trong việc autoblog để tăng backlink hay kiếm tiền.Với $129 bạn sẽ thấy hiệu quả mà nó mang lại cho việc viết blog cũng như kinh doanh bằng wordpress của bạn

 

[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