WordPress 1: Tài liệu và cách tìm theo nhu cầu

Bài này nằm trong loạt bài Wordpress Theme A-Z.

Loạt bài viết giới thiệu đến bạn quá trình tôi tạo nên theme WordPress cho Math2IT 3.0. Khởi điểm của tôi là chưa hề biết gì về WordPress.  Ở bài này, chúng ta sẽ liệt kê và “sưu tầm” tất cả các loại tài liệu cần cho quá trình thiết kế và lập trình nên một theme WordPress. Thêm vào đó là những chỉ dẫn để có thể “tự tìm tòi”.

Vì tôi viết loạt bài này bám sát cách tạo nên giao diện hiện tại của Math2IT 3.0 nên các chức năng cũng chỉ sẽ gói gọn trong phiên bản này. Do đó tôi sẽ mách bạn cách tìm và làm sao để áp dụng nếu như bạn có thêm nhu cầu nào đó khác.

Cần biết gì trước gì ?

  • Đã biết lập trình cơ bản (hiểu được các vòng lặp, các câu điều kiện,…). Trong trường hợp bạn còn chưa biết lập trình là gì, hãy đọc bài viết này của Math2IT.
  • Đã biết chút về HTML, CSS (lập trình thiết kế web). Trong trường hợp chưa biết, có thể dễ dàng tìm hiểu qua Google hoặc W3School.
  • Nếu biết trước PHP tí thì tốt, không cũng không sao.
  • Có khả năng đọc hiểu tiếng Anh cơ bản. Loạt bài viết sẽ trỏ tới rất nhiều nguồn tiếng Anh để đọc thêm.

Phần mềm cần?

Có thể có nhiều lựa chọn, ở đây tôi dùng những phần mềm và dịch vụ sau:

Danh sách các phần mềm cần trong loạt bài
  • Hệ điều hành: Windows / Linux / MacOS
  • Phần mềm gõ code: Sublime Text 3 (hoặc Visual Studio Code). Ưu điểm của cả hai là có rất nhiều tiện ích hỗ trợ giúp gõ code nhanh và tiện.
  • Framework:
    • Bootstrap 4.1, framework này sẽ giúp bạn tiết kiệm được rất nhiều thời gian trong thiết kế vì nó có sẵn rất nhiều thứ cho bạn dùng.
    • Compass framework: sử dụng để tự động cập nhật các file CSS. Tôi sẽ giải thích và nói rõ hơn sau.
    • GulpJS: cũng cùng mục đích như compass nhưng có tí chút khác biệt, tôi cũng sẽ giải thích rõ hơn sau.
  • PHP 7 & WordPress 5: WordPress 5 đi cùng với giao diện soạn thảo Gutenberg hoàn toàn mới và rất tiện lợi. Chúng ta sẽ viết giao diện trang web của chúng ta phù hợp với giao diện soạn thảo Gutenberg này.
  • FileZilla / WinSCP để quản lý file giữa server và localhost: trong trường hợp bạn đã ưng ý mọi chỉnh sửa và muốn “quăng” chúng lên trên remote host (tôi dùng cụm từ này để chỉ server online bạn dùng).
  • Trình LAMP: XAMPP (Win, Linux, Mac), WampServer (Windows), MAMP (MacOS). Tạo môi trường server ảo trên máy tính cá nhân để chạy thử nghiệm WP.

Tài liệu tham khảo

Thật ra khó có thể chỉ ra một trang hay một nơi duy nhất cho việc tham khảo về WordPress. Thông thường chúng ta sẽ tìm kiếm trên Google và các kết quả thường trả về những trang web chất lượng sau đây. Tôi nói trước để khi nào bạn tìm thấy kết quả tìm kiếm mà từ những trang này thì cứ chọn chúng mà tham khảo!

  1. WordPress Developer Resources (developer.wordpress.org) : nhiều lúc bạn sẽ thấy sự trùng lặp giữa trang này và trang codex.wordpress.org. Chúng là cùng một chủ nhưng cách trình bày là khác nhau. Ưu tiên chọn các kết quả tìm kiếm nào có liên quan đến trang developer thay vì trang codex.
  2. WordPress Development Stack Exchange: trang hỏi đáp quá nổi tiếng này có hẳn một chuyên mục dành cho WordPress.
  3. WPBeginner: là dân lập trình WordPress thì không thể không biết đến trang thủ thuật và hướng dẫn WordPress nổi tiếng này.

Tham khảo cho các cái khác,

  1. W3Schools Online Web Tutorials: dùng để tham khảo về HTML, CSS, PHP kèm theo những ví dụ rất dễ hiểu.
  2. Bootstrap 4.1 Documentation: do tôi dùng phiên bản 4.1 nên tôi dẫn đến trang tài liệu tham khảo của 4.1. Nếu bạn dùng các phiên bản mới hơn thì hãy tham khảo tài liệu tham khảo của phiên bản tương ứng cho chính xác!

Cách tìm theo nhu cầu & lưu ý

WordPress đã quá phổ biến, do đó gần như không có gì bạn thắc mắc mà bạn không thể tìm thấy câu trả lời trên mạng. Có chăng là bạn chưa biết cách tìm mà thôi!

  1. Thiết kế: Bootstrap hỗ trợ ta về mặt phương tiện, còn sáng tạo là ở các bạn. Tuy nhiên nếu bí quá không biết sáng tạo sao cho đẹp mà bạn có thấy vài nét nào đó ở các trang web khác đẹp. Bạn có thể “vai mượn” ý tưởng của họ bằng cách dùng chức năng Inspecter Element của trình duyệt (chuột phải chọn Inspecter…). Với chức năng này, bạn có thể thấy được cấu trúc HTML của một trang/một phần trang web cùng với các code CSS của chúng. Tôi không khuyến khích bạn copy “nguyên xi”, hãy chỉ nên “tham khảo” thôi. Và nếu bạn có tham khảo và mượn, đừng quên email hỏi ý kiến của chính tác giả!
  2. Hãy dùng keyword tiếng Anh! Các nguồn tham khảo ở phần trước 100% là tiếng Anh. Vì thế tôi khuyến khích bạn tìm câu trả lời bằng tiếng Anh. Ví dụ hãy hỏi “How to create a navigation bar in WordPress?” nếu bạn muốn tạo một menu cho theme của mình.
  3. Hạn chế tối đa việc dùng plugin! Plugins rất tiện lợi nhưng nó sẽ hạn chế khả năng kiểm soát của bạn. Chưa kể chúng không phải là của bạn. Chúng có thể khiến theme của bạn load chậm hơn nếu bạn tự viết,… Hãy tìm cách tự viết trước khi nghĩ tới sử dụng một plugin nào đó! Một điểm lưu ý là trang WPBeginner rất hay gợi ý dùng plugin thay vì hướng dẫn tự viết code, bạn nên cẩn trọng khi tham khảo trang này dù rằng bỏ qua mặt này thì trang vẫn rất chất lượng.
  4. Hoạt động trước – Thiết kế sau! Trong mọi trường hợp, hãy nhớ, bạn phải code (trên localhost) sao cho ý tưởng hoạt động trước khi bắt đầu “trang trí” cho nó. Việc trang trí bằng CSS và Bootstrap luôn dễ dàng và gần như đảm bảo 100% sẽ thành công. Riêng việc code WordPress và PHP mới dẫn đến thất bại thôi. Do đó, hãy làm cho nó chạy trước rồi hãy đẹp gì đẹp.
  5. Đừng than phiền là không biết PHP hay HTML hay CSS! Khi thiết kế một theme WP, bạn phải học về WP, tất nhiên! Nhưng bạn đừng quên rằng, bạn cũng cần phải tự học về PHP, HTML, CSS (thậm chí là JavaScript nữa). Còn gì tuyệt vời hơn khi bạn có mục tiêu để học tất cả các ngôn ngữ này cùng lúc và xem chúng ứng dụng thực tế ra sao? Tôi cũng vậy, tôi không biết trước cái gì quá nhiều cả, tôi làm nên Math2IT 3.0 cũng từ việc học tất cả các thứ kia, mỗi thứ một ít, song song!
  6. Phải biết Git & Github! Nếu chưa biết, hãy tự tìm tòi và học! Math2IT sẽ sớm có bài viết về nó, tuy nhiên tạm thời, hãy tự học lấy bạn nhé! Git sẽ giúp bạn tạo các phiên bản code khác nhau để “thử nghiệm”. Nếu lỡ có sai hoặc chỉnh sửa quá nhiều mà không thành công, bạn có thể “quay ngược thời gian” trở lại với phiên bản hoạt động gần nhất. Bất kỳ dự án code (lớn) nào đều cũng cần các phần mềm như Git. Hãy học về nó!

Hình dung!

Trước khi sang các kỳ sau để thiết kế, các bạn thử quan sát một lượt Math2IT và hình dung xem cái cơ bản nhất các bạn cần làm là gì để có thể thiết kế được như vậy? Dưới đây là một số gợi ý:

  1. Có mấy kiểu thể hiện danh sách bài viết?
  2. Có mấy kiểu thể hiện tựa bài viết?
  3. Có mấy kiểu bài viết?
  4. Có cái gì chỉ được thiết kế dùng 1 lần? Cái gì được thiết kế dùng đi dùng lại nhiều lần nhưng với dữ liệu khác?
  5. Trang có các chức năng gì?
  6. Độ cân bằng màu sắc? Kích cỡ chữ?

Hãy tự tìm cho mình câu trả lời, nghĩ càng đơn giản càng tốt. Chúng ta sẽ đi từng bước một để trả lời cho được hết những câu hỏi trên (và thêm những câu hỏi khác).