--- name: wp-course-builder description: "Skill chuyên dụng để tạo trang web khóa học WordPress hoàn chỉnh với custom theme: Google Auth, hệ thống bài học + video Drive bảo mật, VIP membership, khóa/mở bài, khuyến mãi, admin chuyên nghiệp. Đã thực chiến với dự án Goveoai Edu." --- # 🎓 WordPress Course Website Builder Skill toàn diện để xây dựng trang web khóa học WordPress chuyên nghiệp — đã kiểm chứng qua dự án thực tế **Goveoai Edu**. ## Khi nào sử dụng Skill này - Tạo mới trang web khóa học / đào tạo trực tuyến - Cần hệ thống LMS tự build (không phụ thuộc plugin LMS) - Video bảo mật qua Google Drive (không download được) - Google OAuth login (không cần username/password) - Hệ thống VIP / membership thủ công hoặc tự động - Khóa/mở bài học (bài đầu miễn phí, bài sau VIP) --- ## Cấu trúc theme chuẩn (Blueprint) ``` {theme-name}/ ├── style.css # Theme metadata ├── functions.php # Core: setup, enqueue, roles, includes ├── header.php # Header + nav + user dropdown + login ├── footer.php # Footer + social + toast ├── front-page.php # Homepage (hero, promos, new, announcements, courses) ├── single-{cpt_name}.php # Chi tiết khóa học (lessons accordion + sidebar) ├── single.php # Fallback single ├── page.php # Generic page ├── index.php # Archive fallback ├── search.php # Search results ├── 404.php # 404 page │ ├── inc/ # PHP modules │ ├── google-auth.php # Google OAuth 2.0 │ ├── vip-membership.php # VIP admin + approve/revoke │ ├── drive-video.php # Secure Drive embed │ ├── course-manager.php # Course CPT + Lesson CPT + meta │ ├── customizer.php # Theme Customizer │ ├── template-tags.php # Helper functions (cards, breadcrumbs) │ └── seo.php # Schema + OG Meta │ ├── page-templates/ │ ├── template-dashboard.php # Student dashboard │ └── template-courses.php # Course listing + filter │ └── assets/ ├── css/ │ ├── main.css # Design system (variables, base, components) │ ├── course.css # Course + lesson styles │ ├── dashboard.css # Dashboard layout │ └── responsive.css # Breakpoints └── js/ ├── main.js # Core (animations, ajax, filters, toast) ├── navigation.js # Mobile nav └── drive-player.js # Video fullscreen + anti-download ``` --- ## Bước 1: Khởi tạo Theme ### 1.1 style.css ```css /* Theme Name: {Tên theme} Description: {Mô tả} Version: 1.0.0 Author: {Tên} Text Domain: {text-domain} Requires PHP: 8.0 Requires at least: 6.0 */ ``` ### 1.2 functions.php — Cấu trúc core ```php 'Menu chính']); } add_action('after_setup_theme', 'theme_setup'); // Enqueue: Google Fonts, Material Icons, CSS, JS function theme_scripts() { wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap', [], null); wp_enqueue_style('material-icons', 'https://fonts.googleapis.com/icon?family=Material+Icons+Round', [], null); wp_enqueue_style('main', THEME_URI . '/assets/css/main.css', [], THEME_VERSION); // Conditional loading if (is_singular('course_cpt') || is_front_page()) { wp_enqueue_style('course', THEME_URI . '/assets/css/course.css', ['main'], THEME_VERSION); } wp_enqueue_script('main', THEME_URI . '/assets/js/main.js', ['jquery'], THEME_VERSION, true); wp_localize_script('main', 'themeAjax', [ 'ajaxurl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('theme_nonce'), ]); } add_action('wp_enqueue_scripts', 'theme_scripts'); // Includes require THEME_DIR . '/inc/template-tags.php'; require THEME_DIR . '/inc/google-auth.php'; require THEME_DIR . '/inc/vip-membership.php'; require THEME_DIR . '/inc/drive-video.php'; require THEME_DIR . '/inc/course-manager.php'; require THEME_DIR . '/inc/customizer.php'; require THEME_DIR . '/inc/seo.php'; // Custom Roles function theme_add_roles() { add_role('student', 'Học viên', ['read' => true]); add_role('vip_student', 'Học viên VIP', ['read' => true]); add_role('instructor', 'Giảng viên', ['read' => true, 'edit_posts' => true, 'publish_posts' => true, 'upload_files' => true]); } add_action('after_switch_theme', 'theme_add_roles'); ``` --- ## Bước 2: Hệ thống Course + Lesson (course-manager.php) ### 2.1 Hai Custom Post Types **Nguyên tắc**: 1 Course → nhiều Lessons. Liên kết qua meta `_lesson_course_id`. ```php // COURSE CPT register_post_type('goveoai_course', [ 'labels' => [...], 'public' => true, 'has_archive' => true, 'rewrite' => ['slug' => 'khoa-hoc'], 'supports' => ['title', 'editor', 'thumbnail', 'excerpt'], 'menu_icon' => 'dashicons-welcome-learn-more', ]); // LESSON CPT register_post_type('goveoai_lesson', [ 'labels' => [...], 'public' => true, 'rewrite' => ['slug' => 'bai-hoc'], 'supports' => ['title', 'editor', 'thumbnail'], 'menu_icon' => 'dashicons-media-video', ]); ``` ### 2.2 Course Meta Fields | Meta Key | Mô tả | Type | |---|---|---| | `_price_type` | free / paid / vip | select | | `_price` | Giá gốc (VNĐ) | number | | `_sale_price` | Giá khuyến mãi | number | | `_duration` | Thời lượng tổng | text | | `_difficulty` | beginner / intermediate / advanced | select | | `_instructor` | Tên giảng viên | text | | `_free_lessons` | Số bài mở free (mặc định 3) | number | | `_enrolled_count` | Số học viên | number | | `_featured` | Nổi bật | checkbox | | `_is_hot` | Hot badge | checkbox | | `_is_new` | New badge | checkbox | | `_promo_badge` | Text badge khuyến mãi (VD: "SALE 90%") | text | | `_promo_expires` | Hạn khuyến mãi | date | | `_announcement` | Thông báo nổi bật | textarea | ### 2.3 Lesson Meta Fields | Meta Key | Mô tả | Type | |---|---|---| | `_lesson_course_id` | ID khóa học mẹ | select | | `_lesson_order` | Thứ tự bài | number | | `_lesson_video_url` | Link Google Drive | url | | `_lesson_notes` | Ghi chú bài học | textarea | | `_lesson_material` | Tài liệu đọc thêm (mỗi dòng 1 link/text) | textarea | | `_lesson_duration` | Thời lượng video | text | | `_lesson_access` | auto / free / vip | select | ### 2.4 Logic khóa/mở bài học ``` IF lesson_access === 'free' → Luôn mở IF lesson_access === 'vip' → Luôn cần VIP IF lesson_access === 'auto' → Dựa theo số thứ tự: position <= _free_lessons → Mở position > _free_lessons → Cần VIP hoặc enrolled ``` **Ví dụ**: Khóa 15 bài, `_free_lessons = 3`: - Bài 1-3: ✅ Mở cho tất cả - Bài 4-15: 🔒 Cần VIP mới xem được video ### 2.5 Admin UI chuyên nghiệp Trong edit Course, hiển thị: - **Metabox thông tin** (giá, khuyến mãi, badges) - **Metabox danh sách bài học** (hiển thị inline, có số thứ tự, badges Free/VIP, link edit) - **Nút "Thêm bài học mới"** (link sang `post-new.php?post_type=lesson&course_id=X`) - **Custom Admin Columns**: Giá, Số bài, Học viên, Badges --- ## Bước 3: Google OAuth 2.0 (google-auth.php) ### 3.1 Flow ``` User click "Đăng nhập bằng Google" → /google-login/ (custom rewrite rule) → Redirect to Google OAuth consent screen → Google callback → /google-callback/ → Lấy user info (name, email, avatar) → Kiểm tra user tồn tại (by email) YES → wp_signon() → redirect dashboard NO → wp_create_user() + set role 'student' + save avatar → redirect dashboard ``` ### 3.2 Cấu hình cần thiết | Cài đặt | Nơi lưu | Lấy từ | |---|---|---| | Google Client ID | Customizer | Google Cloud Console | | Google Client Secret | Customizer | Google Cloud Console | | Authorized redirect URI | Google Console | `https://domain.com/google-callback/` | ### 3.3 User Meta lưu từ Google ```php update_user_meta($user_id, 'google_id', $google_user['sub']); update_user_meta($user_id, 'google_avatar', $google_user['picture']); update_user_meta($user_id, 'registered_via', 'google'); ``` --- ## Bước 4: VIP Membership (vip-membership.php) ### 4.1 Flow duyệt VIP ``` User click "Nâng cấp VIP" → AJAX request → set vip_status='pending' → Admin thấy trong admin menu: "VIP Chờ duyệt (X)" → Admin approve → set vip_status='active', vip_expires='2027-01-01' → Cron daily: kiểm tra expires → auto revoke nếu hết hạn ``` ### 4.2 Admin Page Custom admin page `VIP Members` với 3 tab: - **Chờ duyệt**: List pending, nút Approve (chọn hạn: 30/90/365 ngày, vĩnh viễn) - **Đang hoạt động**: List active VIPs với ngày hết hạn - **Đã từ chối/hết hạn**: History ### 4.3 Check VIP function ```php function is_vip($user_id = null) { if (!$user_id) $user_id = get_current_user_id(); // Admin luôn VIP if (user_can($user_id, 'administrator')) return true; // Check status + expiry $status = get_user_meta($user_id, 'vip_status', true); $expires = get_user_meta($user_id, 'vip_expires', true); return $status === 'active' && (!$expires || strtotime($expires) > time()); } ``` --- ## Bước 5: Video Google Drive (drive-video.php) ### 5.1 Cách embed bảo mật ```html ``` **Các lớp bảo vệ**: 1. **Preview mode**: Google Drive chỉ stream, không cho download link 2. **Sandbox iframe**: Chặn redirect ra ngoài 3. **Anti-right-click overlay**: Div vô hình chặn context menu 4. **No referrer**: Không lộ URL gốc 5. **CSS overlay**: Che nút download gốc của Drive ### 5.2 Extract Drive File ID ```php function extract_drive_id($url) { if (preg_match('/\/d\/([a-zA-Z0-9_-]+)/', $url, $m)) return $m[1]; if (preg_match('/[?&]id=([a-zA-Z0-9_-]+)/', $url, $m)) return $m[1]; return null; } ``` ### 5.3 Tích hợp với Lesson Mỗi lesson có meta `_lesson_video_url`. Trong template single course: - Lesson mở → Hiển thị iframe - Lesson khóa → Hiển thị "VIP wall" (gradient background + nút upgrade) --- ## Bước 6: Homepage (front-page.php) ### 6.1 Các section theo thứ tự ``` 1. HERO — CTA chính, stats (học viên, khóa học, giảng viên) 2. PROMOTIONS — Khóa đang khuyến mãi (query _promo_badge != '') 3. NEW COURSES — Khóa mới ra mắt (query _is_new = 1) 4. ANNOUNCEMENTS — Thông báo từ khóa (query _announcement != '') 5. ALL COURSES — Grid toàn bộ với filter (free/vip/paid) 6. HOW IT WORKS — 3 bước bắt đầu 7. CTA — Đăng ký / khám phá ``` ### 6.2 Course Filter (Client-side JS) ```javascript filterBtns.forEach(btn => { btn.addEventListener('click', () => { const filter = btn.dataset.filter; courseCards.forEach(card => { if (filter === 'all' || card.dataset.type === filter) { card.style.display = ''; } else { card.style.display = 'none'; } }); }); }); ``` --- ## Bước 7: Trang chi tiết khóa học (single-{cpt}.php) ### 7.1 Layout ``` ┌──────────────────────────────────────────────────────┐ │ HEADER: Thumbnail | Title, badges, meta, price, CTA │ ├──────────────────────────────────────────────────────┤ │ BODY: │ │ ┌────────────────────────┐ ┌──────────────────────┐ │ │ │ Giới thiệu khóa học │ │ SIDEBAR: │ │ │ │ (the_content) │ │ Tổng quan │ │ │ ├────────────────────────┤ │ - Số bài học │ │ │ │ Danh sách bài học │ │ - Bài miễn phí │ │ │ │ ┌ Bài 1 [Free] ▼ │ │ - Thời lượng │ │ │ │ │ 🎬 Video iframe │ │ - Cấp độ │ │ │ │ │ 📝 Ghi chú │ │ - Học viên │ │ │ │ │ 📖 Tài liệu │ │ - Giảng viên │ │ │ │ └──────────────────────┤ │ │ │ │ │ ┌ Bài 2 [Free] ▶ │ │ [Login/VIP prompt] │ │ │ │ ┌ Bài 3 [Free] ▶ │ └──────────────────────┘ │ │ │ ┌ Bài 4 [🔒VIP] ▶ │ │ │ │ ┌ Bài 5 [🔒VIP] ▶ │ │ │ └────────────────────────┘ │ └──────────────────────────────────────────────────────┘ ``` ### 7.2 Lesson Accordion Logic ```javascript function toggleLesson(lessonId, accessible) { const content = document.getElementById('lesson-content-' + lessonId); // Close all others document.querySelectorAll('.lesson-content').forEach(c => c.style.display = 'none'); // Toggle this one content.style.display = content.style.display === 'none' ? 'block' : 'none'; } ``` --- ## Bước 8: Dashboard Học viên (template-dashboard.php) ### 8.1 Tabs | Tab | Nội dung | |---|---| | Tổng quan | Stats cards (enrolled, completed, VIP), danh sách khóa gần đây | | Khóa học của tôi | Grid course cards đã enrolled | | Tiến trình | Progress tracking (Phase 2) | | Hồ sơ | Avatar, tên, email, ngày đăng ký, trạng thái VIP | ### 8.2 User Stats ```php function get_user_stats($user_id) { $enrolled = get_user_meta($user_id, '_enrolled_courses', true) ?: []; return [ 'enrolled_count' => count($enrolled), 'is_vip' => is_vip($user_id), 'vip_expires' => get_user_meta($user_id, 'vip_expires', true), 'enrolled_ids' => $enrolled, ]; } ``` --- ## Bước 9: CSS Design System ### 9.1 Design Tokens (CSS Variables) ```css :root { /* Colors */ --color-primary: #6366f1; --color-primary-dark: #4f46e5; --color-success: #10b981; --color-accent: #f59e0b; --color-error: #ef4444; --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; /* Typography */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; /* Effects */ --radius-lg: 0.75rem; --radius-xl: 1rem; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --transition-normal: 300ms ease; --header-height: 72px; --container-max: 1280px; } ``` ### 9.2 Key Components | Component | Đặc điểm | |---|---| | **Header** | Fixed, glassmorphism (backdrop-filter blur), scroll shadow | | **Course Card** | Hover lift (-4px), image zoom, gradient badges | | **Lesson Item** | Accordion, numbered circles (blue=free, gray=locked) | | **Buttons** | Gradient primary, outline, Google login SVG | | **Toast** | Slide-in right, auto-dismiss, 4 types | | **VIP Badge** | Gradient gold→red | --- ## Bước 10: SEO (seo.php) ### 10.1 Course Schema ```json { "@type": "Course", "name": "...", "description": "...", "provider": { "@type": "Organization", "name": "..." }, "offers": { "price": "...", "priceCurrency": "VND" } } ``` ### 10.2 Open Graph ```php add_action('wp_head', function() { echo ''; echo ''; echo ''; echo ''; }); ``` --- ## Checklist triển khai Khi tạo dự án mới, follow thứ tự: - [ ] **1.** Tạo `style.css` + `functions.php` (setup, enqueue, roles, includes) - [ ] **2.** Tạo `inc/course-manager.php` (Course CPT + Lesson CPT + meta boxes) - [ ] **3.** Tạo `inc/template-tags.php` (course_card, breadcrumbs, helpers) - [ ] **4.** Tạo `inc/google-auth.php` (OAuth flow + rewrite rules) - [ ] **5.** Tạo `inc/vip-membership.php` (admin page + approve/revoke + cron) - [ ] **6.** Tạo `inc/drive-video.php` (embed + shortcode + anti-download) - [ ] **7.** Tạo `assets/css/main.css` (design tokens + all components) - [ ] **8.** Tạo `assets/css/course.css` + `dashboard.css` + `responsive.css` - [ ] **9.** Tạo `header.php` + `footer.php` - [ ] **10.** Tạo `front-page.php` (hero, promos, new, announcements, courses, CTA) - [ ] **11.** Tạo `single-{cpt}.php` (chi tiết khóa + lessons accordion) - [ ] **12.** Tạo `page-templates/template-dashboard.php` + `template-courses.php` - [ ] **13.** Tạo `assets/js/main.js` + `navigation.js` + `drive-player.js` - [ ] **14.** Tạo `search.php` + `404.php` + `page.php` - [ ] **15.** Tạo `inc/customizer.php` + `inc/seo.php` - [ ] **16.** Test: Google login, VIP flow, video embed, course enrollment --- ## Lưu ý quan trọng ### Permalink Sau khi activate theme, vào `Settings > Permalinks > Post name` và Save để flush rewrite rules. ### Google OAuth - Phải có SSL (HTTPS) để Google OAuth hoạt động - Authorized redirect URI phải chính xác: `https://domain.com/google-callback/` - State token chống CSRF ### Video Drive - File Drive phải share "Anyone with the link can view" - Preview mode không cho download nhưng user **có thể** screen record — đây là giới hạn vật lý - Thêm CSS overlay che nút download gốc của Google Drive player ### VIP System - Phase 1: Admin duyệt thủ công - Phase 2: Tích hợp WooCommerce — mua gói VIP → auto approve - Cron `goveoai_check_vip_expiry` chạy daily để auto revoke expired VIPs ### Admin UX - Custom columns trong admin list (Giá, Bài học, Học viên, Badges) - Badge khuyến mãi hiển thị trên card (promo_badge) - Lesson manager inline trong edit Course --- ## Dự án tham khảo ### Goveoai Edu - **Vị trí**: `c:\Users\Admin\Desktop\Dự án Riêng\Skill riêng\goveoai-edu\` - **Style**: Tham khảo NDGroup Media (ndgroupmedia.com) - **Tính năng**: Google Auth, VIP thủ công, Drive video, Free/Paid/VIP courses, Lesson lock/unlock - **Ngày tạo**: 2026-04-05