Tài liệu hướng dẫn tích hợp AI Gemini trực tiếp vào WordPress thông qua API Google từng bước cụ thể

Bài viết có thể chúng tôi cung cấp rất nhiều kiến thức liên quan bổ ích, tuy nhiên bạn hãy bám vào trọng tâm để tránh tình trạng đi xa quá xa nhé.

Trong thời đại AI bùng nổ, việc kết hợp AI vào website đã không còn xa lạ. Nếu bạn là sinh viên lập trình đang học WordPress và muốn thử nghiệm công nghệ mới, thì tích hợp Gemini AI (Google AI) chính là một lựa chọn thú vị. Bài viết này sẽ hướng dẫn bạn từng bước cụ thể để tích hợp Gemini AI vào WordPress, kèm theo ví dụ code, lỗi thường gặp và cách khắc phục. Chỉ cần đọc hết bài này, bạn hoàn toàn có thể tự làm được mà không cần hỏi thêm AI hay chuyên gia nào khác.

Trước hết, đừng vội, nếu đọc lướt bạn sẽ dễ bỏ qua bản chất của việc tích hợp. Hãy kiên nhẫn đọc từ trên xuống dưới: mình đã tinh gọn và loại bỏ những bước thừa để bạn có thể làm theo ngay. Bạn không cần phải hỏi AI mỗi bước — dù AI có thể hỗ trợ, nhưng nếu chưa biết cách đặt câu hỏi và sắp xếp thứ tự công việc hợp lý, thì bài viết này chính là thứ bạn cần. Nếu vẫn gặp vướng mắc, liên hệ mình ngay để được hướng dẫn cụ thể.

Bài viết này dựa vào tài liệu góc từ Gooogle https://ai.google.dev/gemini-api/docs?hl=vi

Còn nếu bạn mới bắt đầu code muốn biết API là gì thì có thể xem bài viết bên dưới đây

Tổng Hợp API Hữu Ích Giúp Website WordPress Hoạt Động Hiệu Quả Hơn

1. Đoạn code gọi API Gemini cơ bản (PHP thuần, không nằm trong hàm)

Tại sao phải xem qua đoạn code php này? Sở dĩ bản chất WordPress được phát triển bằng ngôn ngữ lập trình PHP, nên bạn vẫn có thể sử dụng đoạn code này để chạy trong functions.php. tuy nhiên hãy chậm lại 1 xíu có nhiều cái cần giải thích rõ ràng hơn.

<?php
$api_key = "API_KEY_CUA_BAN"; 
$url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=$api_key";

// Prompt muốn gửi lên Gemini
$prompt = "Viết 1 đoạn giới thiệu ngắn về WordPress cho sinh viên CNTT.";

// Dữ liệu request
$data = [
    "contents" => [[
        "parts" => [["text" => $prompt]]
    ]]
];

// Gọi API bằng cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

$response = curl_exec($ch);
curl_close($ch);

$result = json_decode($response, true);

// Hiển thị kết quả
echo "<pre>";
print_r($result);
echo "</pre>";

Mấu chốt là làm sao bạn có cái key này $api_key = "API_KEY_CUA_BAN"; 

Cách để tạo API KEY Gemini Google miễn phí

Truy cập vào link này https://aistudio.google.com/

Ok vậy là chúng ta đã có API Key kết nối tới Gemini rồi, nó có dạng như sau:

$api_key = 'AIzaSyDu5sRWjU8vC985wFQ3dzAUf-VtB11gvqVkM';

Ngay bên dưới đây là đoạn code tương tự như ở trên, nhưng bảo mật và đơn giản hơn nhờ tận dụng các hàm sẵn có của WordPress. Thay vì phải viết cURL thủ công, WordPress đã cung cấp cho chúng ta hàm wp_remote_post cùng với nhiều hàm hỗ trợ bắt lỗi. Bạn sẽ thấy đa số các hàm này đều có tiền tố wp_ ở đầu, đây là quy ước chuẩn trong WordPress để phân biệt và tránh trùng tên với hàm khác. Cùng tiếp tục nhé!

Việc chỉnh sửa code có rất nhiều cách làm, đối với các bạn mới, có thể sử dụng plugin này ( Nhưng lưu ý đến tính bảo mật ), có thể liên hệ chúng tôi nếu cần thiết.

File Manager

2. Đoạn code chuẩn trong WordPress như sau:

Tốt rồi, giờ thì bạn có thể dùng đoạn code sau trong file functions.php ngay bên dưới nhé.

<?php
// API key của bạn
$api_key = "AIzaSyDu5sRWjU8vC985wFQ3dzAUf-VtB11gvqVkM"; // Đã thay bằng KEY Gemini vừa tạo

// Endpoint Gemini 2.0 Flash
$url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=$api_key";

// Prompt muốn gửi lên Gemini
$prompt = "Viết 1 đoạn giới thiệu ngắn về WordPress cho sinh viên CNTT.";

// Dữ liệu request
$data = [
    "contents" => [[
        "parts" => [["text" => $prompt]]
    ]]
];

// Gọi API bằng wp_remote_post
$response = wp_remote_post(
    $url,
    [
        'headers' => [
            'Content-Type' => 'application/json'
        ],
        'body'    => json_encode($data),
        'timeout' => 30,
    ]
);

// Kiểm tra lỗi
if (is_wp_error($response)) {
    echo "Lỗi khi gọi API: " . $response->get_error_message();
} else {
    $http_code = wp_remote_retrieve_response_code($response);
    $body   = wp_remote_retrieve_body($response);
    $result = json_decode($body, true);

    echo "<pre>";
    print_r($result);
    echo "</pre>";

    // Nếu muốn lấy luôn text trả về
    if (isset($result['candidates'][0]['content']['parts'][0]['text'])) {
        echo "<h3>Kết quả từ Gemini 2.0 Flash:</h3>";
        echo "<p>" . esc_html($result['candidates'][0]['content']['parts'][0]['text']) . "</p>";
    }
}

Nếu dùng đoạn code này thì bỏ code ở phần mục số 1 đi nhé. Chúng ta tiếp tục qua phần số 3 thôi.

Có một trải nghiệm thú vị tôi cần lưu ý đế các bạn tránh gặp như tôi, khi mình test với Gemini, nếu để timeout thấp hơn 15s thì hay bị lỗi, mình đã thử tăng lên 30s thì ổn định hơn. 'timeout' => 30,

Chỗ này tôi cung cấp thêm 1 thông tin quan trọng nếu bạn giỏi về lập trình ngôn ngữ python thì cũng ok nhé.

Đoạn code bằng PYTHON

import requests
import json

# API key của bạn
api_key = "AIzaSyDu5sRWjU8vC985wFQ3dzAUf-VtB11gvqVkM"  # KEY Gemini vừa tạo

# Endpoint Gemini 2.0 Flash
url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key={api_key}"

# Prompt muốn gửi lên Gemini
prompt = "Viết 1 đoạn giới thiệu ngắn về WordPress cho sinh viên CNTT."

# Dữ liệu request
data = {
    "contents": [
        {
            "parts": [
                {"text": prompt}
            ]
        }
    ]
}

try:
    # Gọi API bằng requests.post
    response = requests.post(
        url,
        headers={"Content-Type": "application/json"},
        data=json.dumps(data),
        timeout=30
    )

    response.raise_for_status()  # Nếu lỗi HTTP thì raise exception

    result = response.json()

    # In full JSON response
    print(json.dumps(result, indent=2, ensure_ascii=False))

    # Nếu muốn lấy luôn text trả về
    if "candidates" in result and \
       "content" in result["candidates"][0] and \
       "parts" in result["candidates"][0]["content"] and \
       "text" in result["candidates"][0]["content"]["parts"][0]:
        
        print("\nKết quả từ Gemini 2.0 Flash:")
        print(result["candidates"][0]["content"]["parts"][0]["text"])

except requests.exceptions.RequestException as e:
    print("Lỗi khi gọi API:", e)

3. Tách thành hàm để gọi cho tiện

Trong WordPress (và lập trình nói chung), việc tách logic gọi API ra thành một hàm riêng mang lại nhiều lợi ích. Thay vì viết thẳng đoạn code gọi API trong mỗi file, chúng ta chỉ cần viết một hàm duy nhất rồi gọi lại khi cần. Cách làm này giúp:

• Tái sử dụng dễ dàng: chỉ cần gọi tên hàm, không phải copy lại cả đoạn code dài.
• Dễ bảo trì: nếu sau này API thay đổi, chỉ cần sửa trong hàm, toàn bộ website sẽ tự cập nhật theo.
• Code rõ ràng, gọn gàng: nhìn tên hàm là hiểu mục đích, giúp người khác đọc code nhanh hơn.
• Dễ mở rộng: có thể thêm tính năng (cache, log, giới hạn token) ngay trong hàm mà không ảnh hưởng chỗ khác.

Nói cách khác, việc tách hàm chính là cách viết code sạch, tiết kiệm thời gian và chuyên nghiệp hơn.

Bạn có thể thay để đoạn code sau bằng đoạn code mục 2 ở trên.

<?php
/**
 * Gọi API Gemini 2.0 Flash từ WordPress
 *
 * @param string $prompt Nội dung muốn gửi cho Gemini
 * @return string Trả về text của Gemini (hoặc thông báo lỗi)
 */
function wpshare247_call_gemini( $prompt = "" ) {
    $api_key = "AIzaSyDu5sRWjU8vC985wFQ3dzAUf-VtB11gvqVkM"; 
    $url     = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=$api_key";

    // Dữ liệu request
    $data = [
        "contents" => [[
            "parts" => [["text" => $prompt]]
        ]]
    ];

    // Gọi API bằng wp_remote_post
    $response = wp_remote_post(
        $url,
        [
            'headers' => [
                'Content-Type' => 'application/json'
            ],
            'body'    => json_encode($data),
            'timeout' => 30,
        ]
    );

    // Kiểm tra lỗi
    if ( is_wp_error( $response ) ) {
        return "Lỗi khi gọi API: " . $response->get_error_message();
    }

    $body   = wp_remote_retrieve_body( $response );
    $result = json_decode( $body, true );

    return $result['candidates'][0]['content']['parts'][0]['text'] ?? "Không có dữ liệu trả về.";
}

Cách gọi hàm:

<?php 
$prompt = 'Viết 1 đoạn giới thiệu ngắn về WordPress cho sinh viên CNTT.';
$output = wpshare247_call_gemini( $prompt );

4. Vì sao phải tạo Shortcode Gemini

Shortcode giúp chúng ta nhúng kết quả AI trực tiếp vào bài viết hoặc trang trong WordPress một cách nhanh chóng. Thay vì viết code PHP thủ công trong template, bạn chỉ cần gõ [wpshare247_gemini prompt=”Câu hỏi của bạn”] ngay trong nội dung bài viết. Cách làm này giúp dễ sử dụng cho cả người không rành code, linh hoạt hơn và tiết kiệm thời gian khi muốn gọi AI nhiều lần ở nhiều chỗ khác nhau.

/**
 * Shortcode để test Gemini
 * Sử dụng: [wpshare247_gemini prompt="Xin chào Gemini"]
 */
function wpshare247_gemini_shortcode( $atts ) {
    $atts = shortcode_atts( [
        'prompt' => 'Viết 1 đoạn giới thiệu ngắn về WordPress cho sinh viên CNTT.'
    ], $atts );

    $output = wpshare247_call_gemini( $atts['prompt'] );

    return "<div class='wpshare247-gemini-output'>" . esc_html( $output ) . "</div>";
}
add_shortcode( 'wpshare247_gemini', 'wpshare247_gemini_shortcode' );

Cách dùng:

[wpshare247_gemini prompt="Viết 3 lý do tại sao nên học WordPress ở Wpshare247"]

Các vị trí có thể nhúng Shortcode Gemini trong WordPress

• Trong nội dung bài viết (Post Content)
  • Chèn trực tiếp vào bài viết hoặc trang bằng Block Editor (Gutenberg) hoặc Classic Editor.
  • Ví dụ:

    [wpshare247_gemini prompt="Giới thiệu về WordPress cho sinh viên CNTT."]
    

• Trong Page (Trang tĩnh)
  • Dùng khi bạn muốn tạo 1 trang riêng kiểu “Chat với Gemini” hoặc “Sinh viên hỏi đáp AI”.
• Trong Widget / Sidebar
  • Thêm vào Text Widget hoặc Custom HTML Widget.
  • Hiển thị Gemini ngay trong sidebar hoặc footer.
• Trong Template / Theme PHP
  • Dùng do_shortcode() để gọi shortcode trong file theme:

    echo do_shortcode('[wpshare247_gemini prompt="Hello Gemini!"]');
    

• Trong Page Builder (Elementor, WPBakery, Divi, v.v.)
  • Các builder đều hỗ trợ Shortcode Widget/Module → kéo thả và chèn [wpshare247_gemini …].
• Trong WooCommerce
  • Chèn vào mô tả sản phẩm, tab sản phẩm, hoặc trang thanh toán để tạo phần giải thích tự động bằng AI.
• Trong Custom Post Type
  • Nếu bạn có CPT (ví dụ: “Bài tập”, “Dự án”, “Tài liệu”) → đều có thể chèn shortcode để gọi Gemini sinh nội dung.
• Trong Popup / Form Plugin
  • Một số plugin (Elementor Popup, Contact Form 7, WPForms) cho phép dùng shortcode để hiển thị kết quả AI.
• Trong Email Template (gián tiếp)
  • Với plugin hỗ trợ shortcode trong email (ví dụ WooCommerce Email Customizer), bạn có thể chèn Gemini để tạo lời chào động.

Trong bài viết này, bạn mới chỉ thực hành trực tiếp trong theme của website. Tuy nhiên, để tiện lợi và chuyên nghiệp hơn, chúng ta hoàn toàn có thể tách code thành một plugin riêng. Khi đó, bạn có thể cài đặt và sử dụng plugin này trên bất kỳ website WordPress nào, thay vì chỉ giới hạn trong một theme duy nhất.

Video cho bài viết này:

5. Những lỗi thường gặp và cách khắc phục

Trong quá trình thử nghiệm, bạn có thể gặp một số lỗi phổ biến:

• Sai API Key
  • Thông báo: Invalid API key.
  • Cách khắc phục: kiểm tra lại key trong Google AI Studio.
• Quota exceeded (hết giới hạn gọi API)
  • Do bạn gọi API quá nhiều lần.
  • Cách xử lý: đăng ký thêm hạn mức hoặc nâng cấp tài khoản.
• Response không có dữ liệu
  • Lỗi khi parse JSON → $body[‘candidates’] rỗng.
  • Cách xử lý: in ra toàn bộ $body để debug.
• API Key để lộ trong code
  • Rủi ro bảo mật nếu bạn public theme/plugin.
  • Cách xử lý: lưu API Key trong file wp-config.php hoặc tạo trang Settings trong admin để nhập key.
• Timeout / quá lâu mới trả kết quả
  • Do mạng chậm hoặc server yếu.
  • Cách xử lý: thử với prompt ngắn, tối ưu hosting.

Việc tích hợp không quá khó, nhưng để làm tốt bạn sẽ cần đầu tư nhiều thời gian cho tính chặt chẽ, bảo mật, cũng như trải nghiệm UI/UX. Thêm vào đó, việc kiểm thử là khâu quan trọng để đảm bảo plugin hoạt động ổn định. Vì vậy, nếu bạn muốn tiết kiệm thời gian và có giải pháp chuyên nghiệp hơn, hãy sử dụng dịch vụ Phát Triển Plugin WordPress từ Công ty thiết kế web TBAY tại website366.com.