สายเว็บต้องดู! คู่มือการ สร้าง Theme ของ WordPress ด้วย AI แบบ Step-by-Step

คู่มือการสร้างและติดตั้ง WordPress Theme ด้วย AI & Antigravity CLI

อธิบายขั้นตอนการทำงานอย่างละเอียด ตั้งแต่การส่ง Prompt ไปจนถึงการติดตั้งใช้งานจริง

1. หาธีมที่ต้องการ และแคปหน้าจอ มาบอก ai ให้ช่วยสร้างธีมให้โดยใช้ prompt แบบนี้

คลิกปุ่มด้านบนขวาของกล่องเพื่อคัดลอกคำสั่ง (Prompt) นำไปส่งให้ AI พร้อมแนบรูปภาพหน้าจอเว็บไซต์ที่คุณต้องการแกะดีไซน์:

WORDPRESS THEME PROMPT

ช่วยสร้างธีม WordPress โดยอ้างอิงรูปตัวอย่างที่แนบมาเฉพาะด้านการออกแบบ (Layout, สี, ระยะห่าง, Typography และองค์ประกอบ UI) ข้อกำหนด: * สร้างเฉพาะส่วน Header และ Footer ตามรูปตัวอย่าง * ห้ามคัดลอกหรือสร้างเนื้อหาตัวอย่าง ข่าวตัวอย่าง บทความตัวอย่าง หรือข้อความ Placeholder จากภาพ * พื้นที่เนื้อหาตรงกลางให้เป็น Dynamic Content Area ของ WordPress เท่านั้น * ใช้ WordPress Loop และ the_content() สำหรับแสดงเนื้อหาจริงจากระบบ Header และ Footer ต้องสามารถจัดการได้จากหลังบ้านทั้งหมด ได้แก่: * โลโก้เว็บไซต์ * เมนูหลัก * แถบประกาศ * ข้อมูลติดต่อ * ลิงก์โซเชียลมีเดีย * ข้อความลิขสิทธิ์ * Footer Columns ห้าม Hardcode ข้อความ รูปภาพ หรือลิงก์ใด ๆ ลงในไฟล์ธีม ให้รองรับ: * WordPress Customizer หรือ Theme Options * Custom Logo * Navigation Menus * Widgets สำหรับ Footer * Gutenberg Editor ใช้รูปตัวอย่างเป็นเพียงแนวทางด้านการออกแบบเท่านั้น ไม่ใช่ข้อมูลหรือเนื้อหาที่ต้องนำมาสร้างในเว็บไซต์

2. เมื่อ ai เจนโค้ดให้แล้วก็ทำตามคำแนะนำ โดย สร้างโฟลเดอร์ชื่อ pcru-procurement-theme

ทำการสร้างโฟลเดอร์ใหม่เพื่อใช้เก็บไฟล์ทั้งหมดของธีม โดยตั้งชื่อโฟลเดอร์ว่า pcru-procurement-theme

2. ในโฟลเดอร์ธีมสร้างไฟล์ ชื่อ style.css

คลิกเข้าไปในโฟลเดอร์ธีมที่เพิ่งสร้างขึ้นมา เพื่อเตรียมสร้างไฟล์กำหนดสไตล์หลักของธีม

จากนั้นคลิกขวา เลือก new / Text Document เพื่อสร้างไฟล์ข้อความใหม่

จากนั้นเปลี่ยนชื่อไฟล์และนามสกุลเป็น style.css (ตรวจสอบให้แน่ใจว่านามสกุลลงท้ายด้วย .css ไม่ใช่ .txt)

จากนั้นคลิกขวาที่ไฟล์ style.css และวางโค้ดที่คัดลอกโค้ดในขั้นตอนแรก นำโค้ด CSS ที่ AI สร้างให้มาจัดเก็บในไฟล์นี้

วางโค้ดและบันทึก ทำการวางโค้ดลงไปในไฟล์ทั้งหมดแล้วทำการกดบันทึกไฟล์ (Save) ให้เรียบร้อย

ในขั้นตอนถัดไปจะขออธิบายแบบรวดเร็ว

3. ไฟล์ถัดไปต่อจากไฟล์แรก

สร้างไฟล์อื่น ๆ ที่จำเป็นต่อโครงสร้างธีมของ WordPress เพิ่มเติม (เช่น index.php, functions.php ฯลฯ) ตามที่ AI แนะนำ

รวมไฟล์โค้ดทั้งหมด

***แต่ละคำสั่งที่ ai เจนโค้ดให้อาจจะได้ไฟล์ไม่เท่ากัน

4. ขั้นตอนสุดท้ายจะบอกวิธีการนำไปติดตั้งใช้งาน

หากไม่สะดวก ด้วยวิธีการด้วยวิธีคัดลอกไปวางในตำแหน่งที่แนะนำ ให้ใช้วิธีการติดตั้งบนเว็บไซต์ดังนี้

ขั้นตอนการ zip บนวินโดว์ 11 ให้คลิกขวาที่โฟลเดอร์ธีมแล้วเลือก Compress to ZIP file

การติดตั้งบนเว็บไซต์ทำดังนี้ ไปที่หน้าดูแลระบบหลังบ้านของ WordPress

และคลิก Add Themeเพื่อเพิ่มธีมใหม่เข้าสู่ระบบ

จากนั้นคลิก Upload Theme

และเลือกไฟล์ ธีม.zip ที่เตรียมไว้ และคลิก Install Now จากนั้นทำการเปิดใช้งาน (Activate)

การนำไปใช้งาน เข้าสู่ขั้นตอนการเปิดใช้งานธีมจริงบนเว็บไซต์ของคุณ

ตัวอย่างหน้าแรกที่สร้างด้วยธีมใหม่

วิธีใช้ antigravity cli ช่วยสร้างธีม

จะสะดวกยิ่งขึ้นเพราะเป็น agent ไม่ใช่คุยและสร้างไฟล์ธีมด้วยตนเองผ่านแชท ซึ่งเป็นวิธีการที่เชี่ยวชาญขึ้นสะดวกขึ้นสำหรับผู้ทำเว็บไซต์ ซึ่งจะช่วยสร้างธีม และปลั้กอินได้อย่างสะดวกสบาย

การเขียนธีมโดยนำเว็บไซต์ลงมาที่เครื่องก่อนแล้วเปิด agy ในโฟลเดอร์เว็บไซต์เพื่อสั่งให้สร้างธีมให้ โดยสั่งให้สร้างธีมให้กับหน่วยงานตนเอง

ตัวอย่างที่เขียนด้วย agent agy ผลลัพธ์จากการรัน Agent อัตโนมัติในการสร้างธีมตามสั่ง

การใส่ภาพตัวอย่างธีม (screenshot.png)

เพื่อให้แสดงรูปภาพหน้าปกของธีมในหน้าเมนู Appearance ของ WordPress ได้อย่างสวยงามเหมือนธีมมาตรฐานอื่น ๆ ให้ทำดังนี้

ใส่ภาพตัวอย่างให้ธีม โดยการเซฟรูปหน้าเว็บตัวอย่างเป็นชื่อ screenshot.png แล้วนำไปวางไว้ในโฟลเดอร์หลักของธีม