Xây Dựng WordPress Theme Tùy Chỉnh từ A-Z với Trợ Lý AI Gemini

Bởi

Chào mừng bạn đến với hướng dẫn toàn diện về cách phát triển một WordPress theme hiện đại, hiệu suất cao. Chúng ta sẽ sử dụng phương pháp “Classic Theme” (dựa trên PHP template) vì đây là nền tảng vững chắc nhất để hiểu lõi của WordPress, nhưng sẽ áp dụng các kỹ thuật hiện đại (CSS3, JS, tối ưu hóa) và tích hợp Gemini vào mọi bước để tăng tốc 10 lần.

Mục tiêu: Một theme blog/portfolio tối giản, responsive, bảo mật và dễ tùy chỉnh.

Giai đoạn 1: Lập Kế Hoạch và Thiết Lập (Planning & Setup)

Đây là giai đoạn định hình ý tưởng. Gemini là một đối tác brainstorming tuyệt vời.

Bước 1.1: Định hình Ý tưởng và Chức năng

Công việc: Quyết định xem theme của bạn sẽ làm gì, trông như thế nào, và cần những tính năng gì.

Cách dùng Gemini: Sử dụng Gemini để khám phá các ý tưởng, xu hướng thiết kế và các tính năng cần thiết cho một theme blog/portfolio.

Prompt mẫu cho Gemini:

“Tôi đang lên kế hoạch tạo một WordPress theme cho blog cá nhân và portfolio. Đối tượng mục tiêu là các nhà văn và nhiếp ảnh gia. Hãy đề xuất 5 xu hướng thiết kế web hiện đại (ví dụ: brutalism, minimalism, glassmorphism) phù hợp với đối tượng này. Đồng thời, liệt kê các tính năng ‘phải có’ (must-have) cho một theme portfolio năm 2025.”

Kết quả mong đợi: Gemini sẽ cung cấp cho bạn một danh sách các xu hướng (ví dụ: “Minimalism với kiểu chữ (typography) đậm”, “Dark Mode”, “Grid layout bất đối xứng”) và danh sách tính năng (ví dụ: “Responsive 100%”, “Lazy loading cho ảnh”, “Hỗ trợ Custom Post Type cho ‘Projects'”, “Tích hợp Customizer để đổi màu”).

Bước 1.2: Thiết lập Cấu trúc File Theme

Công việc: Tạo cấu trúc thư mục và các file cơ bản nhất cho theme.

Cách dùng Gemini: Yêu cầu Gemini liệt kê cấu trúc file tối thiểu cho một WordPress theme cổ điển.

Prompt mẫu cho Gemini:

“Liệt kê cấu trúc file và thư mục tối thiểu cần thiết để một WordPress theme cổ điển (classic theme) hoạt động. Bao gồm cả các file template cơ bản và thư mục cho assets.”

Kết quả mong đợi: Gemini sẽ trả về một cấu trúc cây rõ ràng:

/ten-theme-cua-ban
  |-- style.css         (Bắt buộc: Chứa thông tin theme)
  |-- index.php         (Bắt buộc: File dự phòng (fallback) chính)
  |-- functions.php     (Nơi chứa logic của theme)
  |-- header.php        (Phần đầu trang)
  |-- footer.php        (Phần chân trang)
  |-- sidebar.php       (Phần thanh bên)
  |-- single.php        (Template cho bài viết đơn lẻ)
  |-- page.php          (Template cho trang đơn lẻ)
  |-- archive.php       (Template cho trang danh mục, tag...)
  |-- screenshot.png    (Ảnh đại diện theme trong Admin)
  |-- /assets
      |-- /css
          |-- main.css
      |-- /js
          |-- main.js
      |-- /images

Bước 1.3: Thiết lập Môi trường Phát triển

Công việc: Cài đặt một môi trường WordPress local (ví dụ: LocalWP, XAMPP, MAMP) và tạo thư mục theme mới trong wp-content/themes/.

Cách dùng Gemini: (Nếu bạn chưa rõ)

“So sánh LocalWP và XAMPP để phát triển WordPress theme. Ưu nhược điểm của mỗi loại là gì?”

Giai đoạn 2: Xây dựng Nền tảng Theme (Theme Foundation)

Bây giờ chúng ta sẽ viết code.

Bước 2.1: File style.css (Bắt buộc)

Công việc: Đây không chỉ là file CSS. Đây là file khai báo thông tin theme.

Cách dùng Gemini: Yêu cầu Gemini tạo phần “header comment” bắt buộc cho file style.css.

Prompt mẫu cho Gemini:

“Tạo phần header comment bắt buộc cho file style.css của một WordPress theme. Tên Theme: My Gemini Theme Tác giả: [Tên của bạn] URI Tác giả: [Website của bạn] Mô tả: Một theme portfolio hiện đại được xây dựng với sự hỗ trợ của AI. Phiên bản: 1.0 License: GNU General Public License v2 or later Text Domain: gemini-theme”

Kết quả mong đợi (Sao chép và dán vào style.css):

/*
Theme Name:   My Gemini Theme
Author:       [Tên của bạn]
Author URI:   [Website của bạn]
Description:  Một theme portfolio hiện đại được xây dựng với sự hỗ trợ của AI.
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  [https://www.gnu.org/licenses/gpl-2.0.html](https://www.gnu.org/licenses/gpl-2.0.html)
Tags:         blog, portfolio, responsive-layout
Text Domain:  gemini-theme
*/

Mẹo chuyên gia: Text Domain rất quan trọng cho việc dịch thuật (i18n) sau này.

Bước 2.2: File functions.php – Đăng ký (Enqueue) Scripts và Styles

Công việc: Đây là bộ não của theme. Việc đầu tiên là “nói” cho WordPress biết cách tải file main.css và main.js của chúng ta.

Cách dùng Gemini: Yêu cầu Gemini viết hàm PHP để “enqueue” (đăng ký) scripts và styles một cách chính xác.

Prompt mẫu cho Gemini:

“Viết một hàm PHP cho file functions.php của WordPress để đăng ký (enqueue) các file sau:

  1. File style chính của theme (style.css).
  2. Một file CSS tùy chỉnh tại assets/css/main.css.
  3. Một file JS tùy chỉnh tại assets/js/main.js (phải được tải ở footer).
  4. Google Fonts ‘Inter’ và ‘Lora’.

Đảm bảo sử dụng hook ‘wp_enqueue_scripts’, get_template_directory_uri() và get_stylesheet_uri(). Sử dụng filemtime để ‘cache-busting’ trong quá trình phát triển.”

Kết quả mong đợi (Thêm vào functions.php):

<?php
/**
 * My Gemini Theme Functions
 */

function gemini_theme_enqueue_scripts() {
    // Lấy file style.css gốc của theme
    wp_enqueue_style(
        'gemini-theme-style',
        get_stylesheet_uri(),
        array(),
        filemtime( get_stylesheet_directory() . '/style.css' ) // Cache busting
    );

    // Lấy file CSS tùy chỉnh
    wp_enqueue_style(
        'gemini-theme-main-css',
        get_template_directory_uri() . '/assets/css/main.css',
        array('gemini-theme-style'), // Phụ thuộc vào file style gốc
        filemtime( get_template_directory() . '/assets/css/main.css' )
    );

    // Google Fonts
    wp_enqueue_style(
        'gemini-theme-google-fonts',
        '[https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lora:ital@0;1&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lora:ital@0;1&display=swap)',
        array(),
        null // Không cần version cho link ngoài
    );

    // File JavaScript tùy chỉnh
    wp_enqueue_script(
        'gemini-theme-main-js',
        get_template_directory_uri() . '/assets/js/main.js',
        array('jquery'), // Thêm 'jquery' nếu bạn cần
        filemtime( get_template_directory() . '/assets/js/main.js' ),
        true // true = tải ở footer
    );
}
add_action( 'wp_enqueue_scripts', 'gemini_theme_enqueue_scripts' );

// Thêm các hàm khác bên dưới...

Bước 2.3: header.php và footer.php

Công việc: Tạo các phần chung (đầu và chân) của trang web.

Cách dùng Gemini: Yêu cầu Gemini tạo mã HTML5 boilerplate cơ bản cho header.php và footer.php, bao gồm các “template tag” quan trọng của WordPress.

Prompt mẫu cho Gemini:

“Tạo mã cho file header.php của WordPress. Nó phải bao gồm:

  1. Thẻ <!DOCTYPE html> và <html> với language_attributes().
  2. Phần <head> với bloginfo('charset'), wp_head() và thẻ viewport.
  3. Thẻ <body> với body_class().
  4. Một thẻ <header> cơ bản với bloginfo('name') và bloginfo('description').”

Kết quả mong đợi (header.php):

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); // Rất quan trọng! WordPress dùng nó để chèn CSS, JS,... ?>
</head>
<body <?php body_class(); // Thêm các class CSS động vào body ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gemini-theme' ); ?></a>

    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php if ( is_front_page() && is_home() ) : ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php else : ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php endif; ?>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
        </div><!-- .site-branding -->

        <!-- Chúng ta sẽ thêm menu ở đây sau -->

    </header><!-- #masthead -->

    <div id="content" class="site-content">

Prompt cho footer.php:

“Tạo mã cho file footer.php. Phải bao gồm wp_footer() và đóng các thẻ đã mở trong header.php (như div#content và div#page). Thêm một dòng copyright đơn giản.”

Kết quả mong đợi (footer.php):

    </div><!-- #content -->

    <footer id="colophon" class="site-footer">
        <div class="site-info">
            &copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?>.
            <span class="sep"> | </span>
            <?php
            printf(
                /* translators: 1: Theme name, 2: Theme author. */
                esc_html__( 'Theme: %1$s by %2$s.', 'gemini-theme' ),
                'My Gemini Theme',
                '<a href="[Website của bạn]">Phát triển bởi [Tên của bạn]</a>'
            );
            ?>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); // Rất quan trọng! WordPress dùng nó để chèn JS ở cuối trang ?>
</body>
</html>

Bước 2.4: index.php và Vòng lặp (The Loop)

Công việc: Hiển thị danh sách các bài viết. Đây là file fallback quan trọng nhất.

Cách dùng Gemini: Yêu cầu Gemini tạo Vòng lặp WordPress (The Loop) cơ bản để hiển thị các bài viết.

Prompt mẫu cho Gemini:

“Tạo mã PHP cơ bản cho file index.php. Mã này phải:

  1. Gọi get_header().
  2. Chứa Vòng lặp (The Loop) tiêu chuẩn của WordPress.
  3. Bên trong vòng lặp, kiểm tra if ( have_posts() ).
  4. Hiển thị Tiêu đề (the_title()), Ngày đăng (the_date()), và Nội dung tóm tắt (the_excerpt()).
  5. Hiển thị thông báo ‘Không có bài viết nào’ nếu không có bài.
  6. Gọi get_sidebar() (chúng ta sẽ tạo sau).
  7. Gọi get_footer().”

Kết quả mong đợi (index.php):

<?php get_header(); ?>

<main id="main" class="site-main">

    <?php if ( have_posts() ) : ?>

        <?php if ( is_home() && ! is_front_page() ) : ?>
            <header>
                <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
            </header>
        <?php endif; ?>

        <?php
        // Bắt đầu Vòng lặp
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php
                    the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
                    ?>
                </header><!-- .entry-header -->

                <div class="entry-summary">
                    <?php the_excerpt(); // Hiển thị nội dung tóm tắt ?>
                </div><!-- .entry-summary -->

                <footer class="entry-footer">
                    <span class="posted-on"><?php the_date(); ?></span>
                </footer><!-- .entry-footer -->
            </article><!-- #post-<?php the_ID(); ?> -->
            <?php
        // Kết thúc Vòng lặp
        endwhile;

        // Phân trang (nếu cần)
        the_posts_navigation();

    else :
        // Nếu không có bài viết nào
        ?>
        <section class="no-results not-found">
            <header class="page-header">
                <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'gemini-theme' ); ?></h1>
            </header>
            <div class="page-content">
                <p><?php esc_html_e( 'It seems we can&rsquo;t find what you&rsquo;re looking for.', 'gemini-theme' ); ?></p>
            </div>
        </section>
        <?php
    endif;
    ?>

</main><!-- #main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Thời điểm kiểm tra: Kích hoạt theme của bạn trong WordPress Admin. Bạn sẽ thấy trang web của mình hiển thị danh sách bài viết (nếu có). Nó sẽ rất “xấu”, nhưng nó đã hoạt động!

Giai đoạn 3: Xây dựng các Template File chính

Chúng ta sẽ chi tiết hóa các template để xử lý các loại nội dung khác nhau.

Bước 3.1: single.php và page.php

Công việc: single.php dùng cho bài viết blog đơn lẻ (có metadata). page.php dùng cho trang tĩnh đơn lẻ (như ‘Giới thiệu’).

Cách dùng Gemini: Chúng ta có thể tái sử dụng Vòng lặp từ index.php nhưng điều chỉnh nó.

Prompt mẫu cho Gemini:

“Tạo mã cho file single.php (bài viết đơn lẻ). Nó phải dựa trên Vòng lặp của index.php nhưng:

  1. Hiển thị toàn bộ nội dung (the_content()) thay vì tóm tắt (the_excerpt()).
  2. Hiển thị Tác giả (the_author()) và Ngày đăng (the_date()).
  3. Hiển thị Danh mục (the_category()) và Thẻ (the_tags()).
  4. Hiển thị phần bình luận (comments_template()).”

Kết quả mong đợi (Tóm tắt single.php):

<?php get_header(); ?>
<main id="main" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                <div class="entry-meta">
                    <span class="posted-on">
                        <?php esc_html_e( 'Posted on', 'gemini-theme' ); ?> <?php the_date(); ?>
                    </span>
                    <span class="byline">
                        <?php esc_html_e( 'by', 'gemini-theme' ); ?> <?php the_author_posts_link(); ?>
                    </span>
                </div><!-- .entry-meta -->
            </header><!-- .entry-header -->

            <div class="entry-content">
                <?php
                the_content(); // Hiển thị toàn bộ nội dung
                wp_link_pages(/*...args...*/); // Phân trang cho bài viết dài
                ?>
            </div><!-- .entry-content -->

            <footer class="entry-footer">
                <span class="cat-links">
                    <?php esc_html_e( 'Categories:', 'gemini-theme' ); ?> <?php the_category( ', ' ); ?>
                </span>
                <span class="tags-links">
                    <?php the_tags( esc_html__( 'Tags:', 'gemini-theme' ) . ' ', ', ', '' ); ?>
                </span>
            </footer><!-- .entry-footer -->
        </article><!-- #post-<?php the_ID(); ?> -->
        <?php
        // Nếu bình luận được mở, hiển thị template bình luận
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;

    endwhile; // End of the loop.
    ?>
</main><!-- #main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Nhiệm vụ cho bạn: Yêu cầu Gemini tạo page.php. Nó sẽ tương tự single.php nhưng đơn giản hơn, thường không có metadata (tác giả, ngày đăng, danh mục).

Bước 3.2: Đăng ký Menu và Sidebar

Công việc: Cho phép người dùng quản lý menu điều hướng và widgets từ Admin.

Cách dùng Gemini: Yêu cầu Gemini viết mã cho functions.php để đăng ký các vị trí này.

Prompt mẫu cho Gemini:

“Viết mã PHP cho functions.php để:

  1. Đăng ký một vị trí menu điều hướng (navigation menu) tên là ‘Primary Menu’ (với slug ‘primary’).
  2. Đăng ký một khu vực widget (sidebar) tên là ‘Main Sidebar’ (với ID ‘main-sidebar’).”

Kết quả mong đợi (Thêm vào functions.php):

// ... (Các hàm khác)

function gemini_theme_setup() {
    // Đăng ký Menu
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'gemini-theme' ),
        )
    );

    // Thêm hỗ trợ cho các tính năng khác (ví dụ: post-thumbnails)
    add_theme_support( 'post-thumbnails' ); // Rất quan trọng cho portfolio
    add_theme_support( 'title-tag' ); // Tự động quản lý thẻ <title>
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    add_theme_support( 'automatic-feed-links' );
}
add_action( 'after_setup_theme', 'gemini_theme_setup' );

// Đăng ký Sidebar
function gemini_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( 'Main Sidebar', 'gemini-theme' ),
            'id'            => 'main-sidebar',
            'description'   => esc_html__( 'Add widgets here.', 'gemini-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'gemini_theme_widgets_init' );

Công việc tiếp theo: Yêu cầu Gemini “Hiển thị menu ‘primary’ trong header.php bằng wp_nav_menu()” và “Hiển thị sidebar ‘main-sidebar’ trong sidebar.php“.

Giai đoạn 4: Thiết kế Đáp ứng (Responsive) và Tinh chỉnh

Theme của bạn đã hoạt động, giờ làm cho nó đẹp.

Bước 4.1: Viết CSS (Với sự trợ giúp của Gemini)

Công việc: Viết CSS trong file assets/css/main.css để tạo layout.

Cách dùng Gemini: Gemini cực kỳ mạnh trong việc tạo CSS. Bạn có thể yêu cầu nó tạo layout, CSS cho component, và media queries.

Prompt mẫu cho Gemini:

“Tôi đang tạo layout 2 cột cho WordPress theme.

  1. Thẻ cha là .site-content (hoặc body).
  2. Cột nội dung chính là <main id="main"> (chiếm 70% chiều rộng).
  3. Cột sidebar là <aside id="secondary"> (chiếm 30% chiều rộng).

Hãy viết CSS (sử dụng Flexbox hoặc Grid) để tạo layout này. Quan trọng: Trên màn hình di động (dưới 768px), hai cột này phải xếp chồng lên nhau, <main> ở trên và <aside> ở dưới.”

Kết quả mong đợi (Thêm vào assets/css/main.css):

/* Gợi ý: Bạn nên bọc main và sidebar trong một container chung */
.container-with-sidebar {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Cột nội dung chính */
.site-main {
    flex: 1; /* Mặc định chiếm hết */
    min-width: 0; /* Sửa lỗi flexbox overflow */
}

/* Sidebar */
.widget-area {
    flex-basis: 300px; /* Chiều rộng cố định cho sidebar */
    margin-left: 20px;
}

/* --- Media Queries cho Responsive --- */
@media (min-width: 769px) {
    /* Layout cho desktop */
    .site-main {
        /* Ví dụ: chiếm 70% */
        flex-basis: 0;
        flex-grow: 1;
        /* Hoặc dùng calc() */
        /* width: calc(100% - 320px); */
    }
}

@media (max-width: 768px) {
    /* Layout cho mobile: Xếp chồng */
    .container-with-sidebar {
        flex-direction: column;
    }

    .widget-area {
        margin-left: 0;
        margin-top: 30px;
        flex-basis: auto; /* Reset */
    }
}

Quy trình làm việc: Bạn viết HTML (hoặc yêu cầu Gemini viết), sau đó yêu cầu Gemini viết CSS cho HTML đó. Lặp lại cho header, footer, bài viết, bình luận, v.v.

Bước 4.2: Quốc tế hóa (Internationalization – i18n)

Công việc: Đảm bảo mọi chuỗi văn bản tĩnh trong theme của bạn có thể được dịch.

Cách dùng Gemini: Bạn đã thấy tôi sử dụng esc_html__('Text', 'gemini-theme') và esc_html_e('Text', 'gemini-theme') ở trên. Đây chính là i18n. gemini-theme là “Text Domain” chúng ta đã định nghĩa trong style.css.

Prompt mẫu cho Gemini (để kiểm tra):

“Tôi có đoạn mã PHP này trong theme: <a href="#">Read More</a>. Hãy viết lại đoạn mã này để nó sẵn sàng cho dịch thuật (i18n) trong WordPress, sử dụng text domain ‘gemini-theme’ và đảm bảo an toàn.”

Kết quả mong đợi:

<a href="<?php echo esc_url( get_permalink() ); ?>">
    <?php esc_html_e( 'Read More', 'gemini-theme' ); ?>
</a>

Mẹo chuyên gia:

  • __('Text', 'domain'): Trả về chuỗi đã dịch (dùng trong biến).
  • _e('Text', 'domain'): Echo (in ra) chuỗi đã dịch.
  • esc_html__(), esc_html_e(): Làm tương tự nhưng cũng “escape” (lọc) HTML để bảo mật. Luôn ưu tiên sử dụng chúng.

Giai đoạn 5: Tối ưu hóa, Bảo mật và Gỡ lỗi

Đây là phần biến theme của bạn từ “hoạt động” thành “chuyên nghiệp”.

Bước 5.1: Gỡ lỗi (Debugging) với Gemini

Công việc: Bạn gặp lỗi. Màn hình trắng, layout vỡ, v.v.

Cách dùng Gemini: Thay vì tìm kiếm trên Google hàng giờ, hãy dán lỗi hoặc đoạn mã của bạn vào Gemini.

Prompt mẫu cho Gemini:

“Tôi đang gặp lỗi ‘PHP Fatal error: Call to undefined function get_header()’ trong WordPress theme của mình. Lỗi này có nghĩa là gì và làm thế nào để sửa nó?”

Kết quả mong đợi: Gemini sẽ giải thích (gần như ngay lập tức) rằng lỗi này xảy ra khi WordPress không được tải đúng cách, hoặc bạn đang cố truy cập file PHP trực tiếp. Hoặc, nếu bạn dán mã của mình:

“Tôi đã dán hàm này vào functions.php và trang web của tôi bị trắng (White Screen of Death). Đây là mã: [dán mã lỗi]. Hãy tìm lỗi giúp tôi.”

Gemini sẽ phát hiện ra lỗi cú pháp (như thiếu dấu ; hoặc {) nhanh hơn bạn.

Bước 5.2: Bảo mật (Security)

Công việc: Đảm bảo theme của bạn không có lỗ hổng. Quy tắc vàng: “Escape (lọc) đầu ra, Sanitize (khử trùng) đầu vào”.

Cách dùng Gemini: Yêu cầu Gemini kiểm tra mã của bạn.

Prompt mẫu cho Gemini:

“Hãy xem xét đoạn mã WordPress này và xác định bất kỳ vấn đề bảo mật nào. Đặc biệt là về việc thiếu ‘escaping’ hoặc ‘sanitizing’.

// Lấy một giá trị từ tùy chọn
$bg_color = get_option('my_theme_bg_color');
// Hiển thị nó
echo '<div style="background-color: ' . $bg_color . ';">';
echo 'Chào mừng, ' . $_GET['username'];
echo '</div>';
```"

Kết quả mong đợi: Gemini sẽ cảnh báo bạn:

  1. Lỗi 1 (XSS): echo $bg_color là không an toàn. Nếu ai đó đưa mã độc vào tùy chọn my_theme_bg_color, nó sẽ được thực thi. Phải dùng esc_attr(): echo '<div style="background-color: ' . esc_attr($bg_color) . ';">';
  2. Lỗi 2 (XSS nghiêm trọng): echo $_GET['username'] là một lỗ hổng XSS cực kỳ nguy hiểm. Bất kỳ ai cũng có thể tạo một URL (ví dụ: .../?username=<script>alert(1)</script>) và đánh cắp cookie của quản trị viên. Phải dùng esc_html(): echo 'Chào mừng, ' . esc_html($_GET['username']);

Bước 5.3: Khả năng Truy cập (Accessibility – a11y)

Công việc: Đảm bảo theme của bạn có thể sử dụng được bởi mọi người, bao gồm cả người dùng trình đọc màn hình.

Cách dùng Gemini: Yêu cầu Gemini đánh giá và cải thiện mã HTML.

Prompt mẫu cho Gemini:

“Tạo mã HTML cho một menu điều hướng chính, đảm bảo nó tuân thủ các tiêu chuẩn WCAG về khả năng truy cập (a11y). Bao gồm:

  1. Thẻ <nav> với aria-label.
  2. Cấu trúc danh sách <ul> và <li>.
  3. Các thuộc tính ARIA cơ bản cho các menu con (dropdown) nếu có (ví dụ: aria-haspopup, aria-expanded).
  4. Một nút ‘toggle’ cho menu di động.”

Gemini sẽ tạo ra mã HTML (và cả JavaScript) chuẩn mực mà bạn có thể dùng ngay.

Giai đoạn 6: Hoàn thiện và Triển khai

Bước 6.1: screenshot.png

Công việc: Tạo một ảnh chụp màn hình 1200x900px, đặt tên là screenshot.png và thả vào thư mục gốc của theme. Đây là ảnh đại diện theme trong Admin.

Bước 6.2: Viết tài liệu (Documentation) với Gemini

Công việc: Tạo file readme.txt chuẩn WordPress.

Cách dùng Gemini:

“Tạo nội dung cho file readme.txt theo chuẩn WordPress cho theme của tôi (My Gemini Theme, phiên bản 1.0). Bao gồm các phần: Description, Installation, và Changelog.”

Gemini sẽ tạo ra một file readme.txt được định dạng hoàn hảo mà bạn chỉ cần chỉnh sửa lại.

Bước 6.3: Đóng gói và Kiểm tra

Công việc: Nén thư mục theme của bạn thành file .zip. Cài đặt nó trên một trang WordPress sạch (không phải trang phát triển) để đảm bảo mọi thứ hoạt động.

Lời khuyên cuối cùng: Quy trình làm việc tốt nhất là “Lặp lại nhanh” (Rapid Iteration).

  1. Bạn (Kiến trúc sư): “Gemini, tôi cần một phần hiển thị các bài viết liên quan dưới bài viết đơn lẻ.”
  2. Gemini (Lập trình viên): “Đây là một hàm PHP sử dụng WP_Query để lấy các bài viết cùng danh mục, bạn dán vào single.php.”
  3. Bạn (Kiến trúc sư): “Tuyệt. Giờ viết CSS cho nó để hiển thị 3 cột.”
  4. Gemini (Stylist): “Đây là CSS Flexbox cho class .related-posts.”
  5. Bạn (Kiểm định chất lượng): “Tốt, nhưng kiểm tra lại mã WP_Query này, đảm bảo nó an toàn và tối ưu.”
  6. Gemini (QA): “Đã kiểm tra. Tôi đã thêm wp_reset_postdata() để tránh xung đột Vòng lặp.”

Chúc mừng! Bạn không chỉ xây dựng một theme, bạn đã học được cách sử dụng một siêu năng lực. Chúc bạn thành công!

Rate this post

Viết một bình luận