Bài 1: Hướng dẫn cài đặt wordpress bằng Laragon

Xin chào các bạn, để bắt đầu series hướng dẫn lập trình WordPress, mình sẽ hướng dẫn cài đặt WordPress bằng Laragon siêu đơn giản, chi tiết. Video bao gồm 3 phần chính:

1. Hướng dẫn cài đặt Laragon để thiết lập website WordPress
2. Tạo page và thiết lập trang chủ cho website
3. Thiết lập URL cho thân thiện SEO

Link dowload Laragon

Link Github

Bài 2: Cấu trúc thư mục theme WordPress

Link WordPress Document

Link nội dung bài giảng

Link Github

Bài 3: Nhúng css và javascript cho theme WordPress – enqueue style script

• Bài này chúng ta sẽ được tìm hiểu cách nhúng css và javascript của bootstrap vào theme WordPress.

Link nội dung của bài giảng

Link tài liệu của WordPress

Link Github

Bài 4: Hướng dẫn sử dụng hàm get_template_part và tạo template trong WordPress

Ở bài này, mình sẽ hướng dẫn cho các bạn cách ứng dụng hàm get_template_part trong WordPress, cũng như cách khởi tạo template trong WordPress. Nội dung bao gồm 3 phần chính:

1. Tìm hiểu và sử dụng hàm get_teamplate_part
2. Tạo template và thêm template vào 1 trang bất kì 3.
3. Sử dụng hàm get_header và get_footer trong WordPress

• Bước 1: Tạo 1 thư mục có tên là includes -> sau đó tạo file tên là section-content.php
• Bước 2: Trong file front-page.php, sử dụng hàm get_tempate_part(“path”,”param”) để in nội dung content ra trang

• • Cách tạo template trong WordPress
    Bước 1: Tạo 1 file template bất kỳ tên là template-contactus.php
    Bước 2: Khai báo tên của Template Name trong file

Link Github

Document vòng lặp for

Document hàm get_footer

Document hàm get_header

Bài 5:

Phần 1: Hướng dẫn tạo menu WordPress nhanh chóng bằng Wp-Bootstrap-Navwalker 

Ở video này, các bạn sẽ được học cách code menu đơn giản nhất bằng thư viện bootstrap navwalker. Video gồm 3 phần chính: 

1. Nhúng thư viện bootstrap navwalker vào trong dự án WordPress.
2. Khởi tạo location cho menu và in menu ra ngoài trang chủ.
3. Sử dụng hàm get_template_part() để tối ưu code.

Github của thư viện Wp-Bootstrap-NavWalker

Hướng dẫn tạo menu WordPress dễ dàng và nhanh chóng – Thư viện navwalker

• Code khởi tạo vị trí menu – menu chính + menu mobile
•  Display menu ra vị trí muốn thể hiện của website

Phần 2: Viết code cho trang archive và post(single.php) trong WordPress

Bài này mình sẽ hướng dẫn các bạn cách để code giao diện archive page và trang bài viết chi tiết bằng boostrap. Cũng như cách nhúng file custom css vào dự án mình để style css cho trang bài viết chi tiết (single.php). Hy vọng bài viết này sẽ giúp các bạn hiểu được trang archive và post page là gì?. Cũng như cách chỉnh sửa giao diện theo yêu cầu thực tế.

• Archive Page + Post Page
• Archive Page => trang chuyên mục
  • Bài 1 : Táo => trái cây
  • Bài 2: Dưa hấu => trái cây
  • Bài 3: Chuối => trái cây

Link Github bài 5

Hướng dẫn up source lên Github

Phần 3: Phân trang và lập trình trang single post trong WordPress 

Trong video này, mình sẽ hướng dẫn các bạn những hàm trong WordPress để hiển thị nội dung cho bài viết, cũng như phân trang chi trang Archive như: :

• Ngày tạo bài viết
• Tên Tác giả
• Chuyên mục bài viết

Hy vọng các bạn sẽ có được kiến thức tổng thể về các hàm trong WordPress để có thể phát triển cho dự án thực tế riêng mình.

Archive page và Post (Phần 3): Làm phân trang bằng WordPress

get_the_author_meta() để lấy ra thông tin tác giả

get_the_date() lấy ra ngày tạo bài viết

get_the_tags() lấy ra các tag của bài viết 

foreach(tags as $tag) {
      get_tag_link($tag->term_id) để lấy link tag
      $tag->name để lấy ra name của tag

}

get_the_category() lấy ra tất cả mảng các chuyên mục bài viết 

get_category_link(); để lấy ra link của category đó 


Link về get_author_meta() : https://developer.wordpress.org/reference/functions/get_the_author_meta/

format date với PHP: https://www.php.net/manual/en/datetime.formats.date.php

paginate_links(): https://developer.wordpress.org/reference/functions/paginate_links/

Link Github

Phần cuối: Xử lý hình ảnh cho trang bài viết WordPress

Phần cuối này sẽ hướng dẫn các bạn cách xử lý và hiển thị hình ảnh ra trang chi tiết bài viết, cũng như custom và crop hình theo đúng kích thước xác định. Chúc các bạn thực hành thành công.

• Tìm hiểu các hàm để hiển thị ảnh đại diện cho bài viết

if(has_post_thumbnail){
//code in here
}
the_post_thumbnail_url()

• Làm thể nào để custom size (crop image) cho bài viết

add_image_size(string $name, int $width, int $height, bool|array $crop = false)

Link Github

Bài 6: Hướng dẫn các bước làm web truyện tranh WordPress

Ở video này, mình giới thiệu các bước để thực hiện triển khai 1 web truyện tranh bằng WordPress nhằm mục tiêu hỗ trợ giải đáp thắc mắc cho vài bạn nhé. Ở video sau, mình sẽ hướng dẫn lại pagination (phân trang) nâng cao, cũng như cách hiển thị trang chuyên mục ra menu cho web truyện nhé. Chúc các bạn thực hành thành công nhé.

• Bước 1: Cài đặt plugin CPT UI
• Bước 2: Tạo taxonomy để lưu tên truyện(term) và add vào type = post
• Bước 3: Tạo ra các chuyên mục truyện => list ra danh sách của các truyện
• Bước 4: Click vào truyện sẽ list ra các chương của truyện đó
• Bước 5: Có thêm thêm phân trang là done

Tài liệu tham khảo

Bài 7: Hoàn thiện web truyện tranh WordPress 

Video này mình sẽ hoàn thành web truyện và hướng dẫn bạn về hàm pagination mới trong WordPress là:

• the_posts_pagination()

 

Link Github

Bài 8: Lập trình widget trong WordPress

Widget trong WordPress là một chủ đề khá quan trọng. Vì nó giúp các bạn có thể tùy chỉnh và thêm mới một khối nội dung vào thanh sidebar, chân trang hoặc một góc của trang web. Chính vì vậy, mình làm video này để giúp các bạn nắm rõ hơn về widget và làm chủ được cách tùy biến widget.

Widget là khối nội dung được tạo ra giành cho thành sidebar

Khởi tạo tính năng Widgets cho dự án bằng:

• add_theme_supports(‘widgets’);

Bước 1: Tạo Widget:

• hàm register_widget()

Bước 2: In widget ra giao diện:

• dynamic_sidebar()

Link Github

Bài 9: Lập trình tính năng tìm kiếm WordPress

Trong bài này, chúng ta sẽ được tìm hiểu các nội dung sau:

1. Hiển thị form tìm kiếm ra trang web
2. Custom và code lại html cho form tìm kiếm
3. Code để hiển thị kết quả tìm kiếm cho trang search.php
4. Hiển thị từ khóa (query string) đang tìm kiếm cho trang search.php (trang kết quả tìm kiếm)
5. Thực thi tính năng search cụ thể cho từng trang

Ví dụ: Trang A tìm kiếm cho tất cả bài viết + Trang B chỉ tìm kiếm các bài viết thuộc thể loại là truyện trinh thám. Chúc các bạn thực hành thành công nhé.

 

• Bước 1: Hiển thị form search ra giao diện website bằng hàm: get_search_form()
• Bước 2: Viết code hiển thị kết quả search trong file search.php
• Bước 3: Tùy chỉnh lại form search trong file searchform.php
• Bước 4: Hiển thị query search ra trang kết quả search(search.php) bằng hàm: echo get_search_query()

Link Github

Bài 10: Cách dùng Advanced Custom Fields WordPress

Đây là video cuối cùng của series lập trình theme WordPress. Ở bài này, các bạn sẽ được tìm hiểu về các nội dung sau:

1. ACF là gì?
2. Cách ứng dụng ACF vào website để cập nhật lại nội dung tĩnh cho trang web
3. Cách ứng dụng ACF vào website để thêm mới một nội dung

Hy vọng, kết thúc series này các bạn sẽ có được các kiến thức cơ bản để có thể nắm được quy trình phát triển theme WordPress.

Cách dùng Advanced Custom Field trong WordPress

1. Định nghĩa Advanced Custom Field: Advance Custom Fields (ACF) là một plugin rất cần thiết khi code theme trong WordPress, nó dùng để dàn trang và hiện data vô cùng hiệu quả. ACF cho phép bạn thêm các field cần thiết một cách dễ dàng, bạn có thể thêm field trong post, page, page template, category, tag … ở mọi nơi bạn muốn.
2. Ứng dụng Advanced Custom Field để cập nhật lại nội dung cho website
3. Ứng dụng Advanced Custom Field để thêm vào WordPress một nội dung mới

Link plugin ACF Pro

Link Github