nhim175/how-to-learn-wordpress.md

## how-to-learn-wordpress.md

      
    Raw
  

              how-to-learn-wordpress.md
            
          
    Hướng dẫn tự học Wordpress

Day 1

Mục tiêu

Hiểu các khái niệm cơ bản của Wordpress
Công việc


Setup XAMPP
Download bản cài wordpress từ wordpress.org về
Giải nén vào thư mục htdocs của XAMPP, đổi tên folder thành demo-wordpress hay cái gì đó cũng được
Tạo 1 database mới trong PHPMyAdmin có tên demo-wordpress (charset utf8mb4)
Mở localhost/demo-wordpress (nếu chỗ này tắc thì pm a)
Cài đặt wordpress từ trang đó (tắc chỗ nào hỏi a)
Mở trang chủ và trang admin (/wp-admin)
Tìm hiểu trang admin về các khái niệm: Post, Page, Category, Theme, Plugin, Shortcode, Menu

Bài tập

Chụp lại screenshot và giải thích cách làm ở mỗi bài tập, lưu vào 1 file google doc
Bài tập 1:

Tạo 1 page Contact
Thêm page Contact vào top menu
Thử cài đặt một Contact form plugin nào đó và tạo 1 form contact bất kì
Nhúng form contact đó vào page Contact vừa tạo
Thử submit xem có nhận được mail không

Bài tập 2:

Cài đặt 1 theme miễn phí nào đó
Đổi logo, đổi title page

Day 2

Mục tiêu

Học cách sử dụng một page builder plugin nào đó.
Page builder là công cụ giúp xây dựng giao diện bằng cách kéo thả. Lợi ích:

Giúp giảm bớt thời gian code
Giúp khách hàng có thể thay đổi content trên trang dễ dàng

Công việc


Tìm hiểu các Page builder plugin

Bài tập


Cài một Theme nào đó mình thích (có xài bootstrap càng tốt)
Thử cài một vài plugin page builder và build một vài page dùng các công cụ đó
Viết lại document giải thích cách sử dụng của công cụ đó làm sao cho người chưa dùng bao giờ có thể nắm được và làm theo một cách dễ dàng (document này sẽ được pass lại cho các đàn em)

Day 3

Mục tiêu

Hiểu "child theme" là gì và biết cách tạo một child theme.
Công việc


Đọc tài liệu về child theme: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Bài tập

Trả lời các câu hỏi:

Vì sao không nên edit trực tiếp các file trong parent theme
Các bước tối thiểu để có thể tạo và cài đặt được 1 child theme

Thực hành:

Tạo 1 child theme từ một trong số các theme mặc định khi cài đặt wordpress (twenty...)
Thêm nút scroll to top ở góc dưới bên phải màn hình (nên sử dụng thư viện javascript để học cách require css, js vào theme và hiểu cách sử dụng functions.php)

Day 4

Mục tiêu

Hiểu khái niệm "post type" trong wordpress và áp dụng tạo một custom post type dành cho movie để làm một web xem phim.
Công việc


Tự google tìm hiểu xem custom post type trong Wordpress là gì và ứng dụng của nó
Tìm hiểu cách setup một custom post type mới (sử dụng code)
Tìm hiểu cách dùng Custom Post Type plugin để có thể tạo post type mới bằng giao diện admin (không sử dụng code)

Bài tập

Trả lời các câu hỏi:

Post type là gì?
Các post type mặc định trong wordpress
Các bước để setup một custom post type mới (sử dụng code)

Thực hành:

Tạo một post type mới cho movie (sử dụng code)
Mỗi movie có title, description, cover, trailer_url (youtube), year (năm công chiếu)
Vào admin tạo dữ liệu cho vài movie mình thích

Gợi ý:

Tham khảo: https://generatewp.com/post-type/

Day 5

Mục tiêu

Hiểu cách viết một template cho page bằng nhiều cách khác nhau. Từ đó biết cách tạo page hiển thị danh sách cách video đã thêm ở Day 4
Công việc


Đọc về page template: https://developer.wordpress.org/themes/template-files-section/page-template-files/
Đọc kĩ phần Page Templates within the Template Hierarchy để hiểu về cách mà wordpress tìm kiếm file template trong source code để sử dụng render một page

Bài tập

Trả lời các câu hỏi:

Slug của một page/post là gì?
Có bao nhiêu cách để tạo một template cho một page?

Thực hành:

Tạo một page có slug là videos
Tạo template cho page này sử dụng slug: page-videos.php, hiển thị danh sách các video đã nhập (bonus nếu có phân trang và grid layout dùng bootstrap)
Tạo một template tương tự như trên nhưng có thể dùng đi dùng lại cho nhiều page (check link)

Day 6

Mục tiêu

Hiểu cách tạo và sử dụng Shortcode. Ví dụ shortcode: [gallery id="123" size="medium"] (giống như HTML với các attribute tạo bởi key-value)
Công việc


Đọc tài liệu về Shortcode: https://codex.wordpress.org/Shortcode_API

Bài tập

Bài 1:

Tạo một shortcode google-map có thể nhận vào 2 attribute lat và lng
Thêm vào một page bất kì [google-map lat="xxx" lng="xxx"] (lat, lng tự chọn trên google map)

Bài 2:

Tạo một shortcode code để highlight syntax cho code
Thêm vào một page bất kì đoạn code bên dưới
Gợi ý: Sử dụng các thư viện code highlight của javascript

[code]
function run() {
}
[/code]

ngày sau sẽ bắt đầu cài Theme
ngày sau nữa học 1 vài plugin thông dụng
ngày sau nữa học cách viết theme
ngày sau nữa học cách viết plugin
ngày sua nữa học cách deploy lên server
ngày sau nữa học cách dùng docker để deploy