ก่อนเริ่มเขียนโค้ด คุณต้องมีสภาพแวดล้อมการพัฒนาท้องถิ่น ซึ่งโดยปกติจะรวมถึงเซิร์ฟเวอร์ท้องถิ่น (เช่น XAMPP, MAMP หรือ Local) และโปรแกรมแก้ไขโค้ด (เช่น VS Code, PhpStorm) ตรวจสอบให้แน่ใจว่า PHP (แนะนำเวอร์ชัน 7.4 หรือสูงกว่า) และ MySQL ติดตั้งอยู่ในสภาพแวดล้อมของคุณแล้ว
ธีม WordPress มาตรฐานคือโฟลเดอร์ที่ประกอบด้วยชุดไฟล์เฉพาะ เริ่มต้นด้วยการสร้างโฟลเดอร์ใหม่ในwp-content/themesของ WordPress เช่น ตั้งชื่อว่าmy-first-theme。
ถัดไป สร้างไฟล์พื้นฐานที่จำเป็นที่สุดสองไฟล์:style.css和index.phpโดยที่style.cssไม่เพียงแต่เป็นสไตล์ชีต แต่ยังเป็น “บัตรประจำตัว” ของธีมด้วย โดยบล็อกความคิดเห็นในส่วนหัวของไฟล์ใช้เพื่อประกาศธีมของคุณต่อ WordPress
แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างเว็บไซต์ส่วนบุคคลตั้งแต่เริ่มต้น。
在style.cssในไฟล์ คุณจำเป็นต้องเพิ่มข้อมูลส่วนหัวในรูปแบบต่อไปนี้:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/ข้อมูลนี้จะปรากฏในหน้า “รูปลักษณ์” -> “ธีม” ในแถบหลังบ้านของ WordPress พร้อมกัน,index.phpไฟล์เป็นเทมเพลตเริ่มต้นของธีม แม้ว่ามันจะว่างเปล่าชั่วคราว แต่ก็ต้องมีอยู่ เพื่อให้ WordPress สามารถระบุได้ว่านี่เป็นธีมที่ถูกต้อง
สร้างไฟล์เทมเพลตพื้นฐาน
หลังจากมีไฟล์พื้นฐานแล้ว ธีมของคุณยังไม่สามารถแสดงเนื้อหาใดๆ ได้ WordPress ใช้ระบบลำดับชั้นของเทมเพลตเพื่อตัดสินใจว่าไฟล์เทมเพลตใดจะถูกโหลดสำหรับหน้าแต่ละประเภท ต่อไป เราจะสร้างไฟล์เทมเพลตหลักหลายไฟล์
สร้างเทมเพลตส่วนหัวและส่วนท้าย
เพื่อการนำโค้ดกลับมาใช้ใหม่และความสม่ำเสมอ เรามักจะแยกส่วนหัว (Header) และส่วนท้าย (Footer) ของเว็บเพจออกเป็นไฟล์แยกกัน ขั้นแรกให้สร้างheader.phpไฟล์ ซึ่งประกอบด้วยส่วนหัวของเอกสาร HTML เปิดแท็ก<body>และพื้นที่ส่วนบนของเว็บไซต์ที่ใช้ร่วมกัน (เช่นโลโก้และเมนูนำทาง)
หนึ่งที่ง่ายที่สุดheader.phpตัวอย่างอาจมีเนื้อหาดังต่อไปนี้:
แนะนำให้อ่าน สร้างเว็บไซต์มืออาชีพ: คู่มือขั้นสูงสุดสำหรับการพัฒนาและปรับแต่งธีม WordPress อย่างรอบด้าน。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>ระวังในนั้นwp_head()ฟังก์ชันซึ่งจำเป็นต้องเรียกใช้เพื่อให้ WordPress core, ปลั๊กอิน และธีมเองสามารถแทรกโค้ดที่จำเป็น (เช่น CSS และ JS) ในส่วนหัวของหน้าได้
จากนั้น สร้างfooter.phpไฟล์ที่ใช้ปิด<body>和<html>แท็ก และรวมเนื้อหาส่วนท้ายของหน้า
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>ในทำนองเดียวกัน,wp_footer()ฟังก์ชันก็จำเป็นเช่นกัน
ตอนนี้ เราสามารถอัปเดตindex.phpในget_header()和get_footer()ฟังก์ชันเพื่อนำสองส่วนนี้เข้ามา:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>การสร้างลูปบทความและเทมเพลตเนื้อหา
ในด้านบนindex.phpในนั้น เราเห็นแกนกลางของ WordPress: ลูป (The Loop) มันใช้สำหรับวนลูปผ่านบทความทั้งหมด (หรือบทความเดียว) ของหน้าปัจจุบัน เพื่อให้เนื้อหาบทความมีโครงสร้างที่ดีขึ้น เรามักจะแยกตรรกะการแสดงผลของบทความเดี่ยวออกเป็นไฟล์แยกต่างหาก
สร้างcontent.php或template-parts/content.phpไฟล์ แล้วในลูปผ่านget_template_part()เรียกใช้ฟังก์ชัน
แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ฉบับสมบูรณ์: จากพื้นฐานสู่ระดับสูงพร้อมแบบฝึกหัดจริง。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;จากนั้นสร้างtemplate-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/th/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>ด้วยวิธีนี้ ชื่อบทความ บทคัดย่อ ข้อมูลเมตา และอื่นๆ จะถูกส่งออกในรูปแบบมาตรฐาน
การนำเข้า Stylesheet และสคริปต์
ธีมสมัยใหม่ขาดไม่ได้คือ CSS และ JavaScript WordPress มีฟังก์ชันมาตรฐานเพื่อเข้าคิว (enqueue) ไฟล์สไตล์ชีตและสคริปต์อย่างปลอดภัย แทนที่จะใช้โดยตรงในเทมเพลต<link>或<script>แท็ก
ลงทะเบียนและเข้าคิวสไตล์ชีตหลัก
แม้ว่าเราจะมีอยู่แล้วstyle.cssแต่โดยปกติเราจะโหลดผ่านfunctions.phpไฟล์ ก่อนอื่นให้สร้างที่ไดเรกทอรีรูทของธีมfunctions.phpไฟล์สำหรับภาษาต่างๆ ได้
จากนั้น ใช้wp_enqueue_style()ฟังก์ชันเพื่อโหลดสไตล์ชีต เราต้องการในfunctions.phpสร้างฟังก์ชันและเชื่อมต่อกับwp_enqueue_scriptsการกระทำนี้
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()ฟังก์ชันจะรับเส้นทางไฟล์ของธีมโดยอัตโนมัติstyle.cssเส้นทางไฟล์
เพิ่มสคริปต์เมนูนำทางที่ตอบสนอง
เพื่อเพิ่มฟังก์ชันการทำงานแบบโต้ตอบ เช่น เมนูที่ตอบสนองสำหรับอุปกรณ์เคลื่อนที่ เราจำเป็นต้องนำเข้า JavaScript สมมติว่าเรามีสคริปต์ง่ายๆ สำหรับสลับการแสดงผล/ซ่อนเมนู
ก่อนอื่นให้สร้างjs/navigation.jsไฟล์ จากนั้นในfunctions.phpในฟังก์ชันเดียวกัน ใช้wp_enqueue_script()เพื่อโหลดมัน
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}พารามิเตอร์สุดท้ายtrueหมายถึงการวางสคริปต์ที่ด้านล่างของหน้า (ก่อนแท็ก</body>), ซึ่งมักจะช่วยเพิ่มประสิทธิภาพการโหลดหน้า
ดำเนินการฟังก์ชันหลักของธีม
functions.phpเป็น “สมอง” ของธีม ใช้สำหรับเพิ่มฟังก์ชันและการสนับสนุนต่าง ๆ นอกเหนือจากการโหลดทรัพยากรแล้ว เรายังต้องประกาศฟังก์ชันที่ธีมรองรับที่นี่ด้วย
เพิ่มการสนับสนุนฟีเจอร์ธีม
WordPress มีชุด “คุณสมบัติของธีม” ที่คุณต้องประกาศการรองรับอย่างชัดเจนจึงจะสามารถใช้งานได้ ฟังก์ชันพื้นฐานที่สุดรวมถึงรูปภาพขนาดย่อของบทความ (รูปภาพเด่น), เมนูที่กำหนดเอง และการรองรับมาร์กอัป HTML5
在functions.phpเพิ่มโค้ดต่อไปนี้ใน:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeเป็นฮุกการกระทำที่ทำงานเมื่อเริ่มต้นธีม เป็นตำแหน่งมาตรฐานสำหรับการตั้งค่าคุณสมบัติของธีม
ลงทะเบียนเมนูนำทาง
เว็บไซต์ส่วนใหญ่จำเป็นต้องมีเมนูนำทาง ระบบเมนูของ WordPress อนุญาตให้ผู้ใช้กำหนดรายการเมนูเองได้ในส่วนหลังบ้านภายใต้ “รูปลักษณ์” -> “เมนู” คุณต้องลงทะเบียนตำแหน่งเมนูสำหรับธีมของคุณก่อน
ในmy_first_theme_setupฟังก์ชั่นที่แล้ว ให้เพิ่มต่อไป:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}หลังจากลงทะเบียนแล้ว คุณก็สามารถใช้งานในไฟล์เทมเพลต (เช่นheader.php) ใช้ฟังก์ชันwp_nav_menu()ฟังก์ชั่นเพื่อแสดงเมนูนี้แล้ว:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>สร้างแถบด้านข้างและพื้นที่วิดเจ็ต
เครื่องมือ (Widget) เป็นฟังก์ชันที่ทรงพลังอีกอย่างของ WordPress หากต้องการใช้งาน คุณต้องลงทะเบียนแถบด้านข้าง (พื้นที่พร้อมสำหรับเครื่องมือ) ก่อน
在functions.phpสร้างฟังก์ชันใหม่ในwidgets_initและเชื่อมโยงกับแอ็กชัน
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-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', 'my_first_theme_widgets_init' );หลังจากลงทะเบียนแล้ว คุณจะเห็นพื้นที่ “แถบด้านข้างหลัก” ใน “รูปลักษณ์” -> “เครื่องมือ” ในแผงควบคุม และสามารถลากเครื่องมือไปวางได้ ในการแสดงผลในธีม คุณต้องเพิ่มโค้ดในเทมเพลต (เช่นsidebar.php) เรียกใช้dynamic_sidebar( 'sidebar-1' )ฟังก์ชัน
สรุป
ด้วยคู่มือนี้ เราได้ทำกระบวนการพัฒนาธีม WordPress ที่เรียบง่ายแต่ครบฟังก์ชันสมบูรณ์ เราเริ่มจากการตั้งค่าแวดล้อม สร้างไฟล์พื้นฐาน แล้วค่อยๆ สร้างโครงสร้างเทมเพลต แยกส่วนหัวและส่วนท้าย และนำลูปโพสต์หลักมาใช้ จากนั้น เราได้เรียนรู้วิธีเพิ่มสไตล์และสคริปต์ให้กับธีมด้วยวิธีมาตรฐาน เพื่อรับประกันความเข้ากันได้และประสิทธิภาพ สุดท้าย ในfunctions.phpเราได้เปิดใช้งานฟังก์ชันหลักของธีม เช่น รูปภาพเด่น เมนูนำทาง และพื้นที่วิดเจ็ต ทำให้ธีมมีความสามารถในการปรับแต่งที่ทรงพลัง
นี่เป็นเพียงจุดเริ่มต้นเท่านั้น บนพื้นฐานนี้ คุณสามารถสร้างไฟล์เทมเพลตที่มืออาชีพยิ่งขึ้น (เช่นsingle.php、page.php、archive.php) สำรวจ WordPress API ที่ซับซ้อนมากขึ้น เช่น ประเภทโพสต์ที่กำหนดเอง ระบบอนุกรมวิธาน Customizer API เป็นต้น เพื่อสร้างธีมเว็บไซต์เฉพาะตัวที่มีฟังก์ชันหลากหลายและการออกแบบที่เป็นเอกลักษณ์
คำถามที่พบบ่อย (FAQ)
การพัฒนา WordPress Theme ต้องเชี่ยวชาญเทคโนโลยีใดบ้าง?
การพัฒนาเวิร์ดเพรสธีมจำเป็นต้องเชี่ยวชาญในเทคนิคหลักหลายประการ ประการแรกคือ PHP เพราะตัวเวิร์ดเพรสเองถูกเขียนด้วย PHP ไฟล์เทมเพลตและตรรกะการทำงานทั้งหมดล้วนต้องพึ่งพามัน คุณจำเป็นต้องเข้าใจไวยากรณ์พื้นฐานของ PHP ฟังก์ชัน ลูป และคำสั่งเงื่อนไข
ประการที่สองคือ HTML และ CSS ซึ่งใช้สำหรับสร้างโครงสร้างและสไตล์ของหน้าเว็บ การทำความเข้าใจหลักการออกแบบเว็บที่ตอบสนอง (Responsive Web Design) และเทคโนโลยีการจัดวาง CSS แบบสมัยใหม่ (เช่น Flexbox, Grid) เป็นสิ่งสำคัญมาก สุดท้าย การมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript สำหรับการทำงานด้านปฏิสัมพันธ์ส่วนหน้า (Front-end Interactivity) การทำความคุ้นเคยกับฟังก์ชัน PHP เฉพาะของเวิร์ดเพรสและระบบฮุค (Hooks) ถือเป็นกุญแจสำคัญในการพัฒนาธีมอย่างมีประสิทธิภาพ
ไฟล์ style.css และ functions.php ไฟล์ไหนสำคัญกว่า?
ไฟล์ทั้งสองนี้มีบทบาทที่แตกต่างกันโดยสิ้นเชิงแต่มีความสำคัญอย่างยิ่งในการพัฒนาเวิร์ดเพรสธีม ไม่สามารถเปรียบเทียบได้ง่ายๆ ว่าอันไหนสำคัญกว่ากันstyle.cssไฟล์คือ “ตัวระบุตัวตน” ของธีม โดยบล็อกความคิดเห็นที่ส่วนหัวของไฟล์เป็นสิ่งที่จำเป็นสำหรับ WordPress ในการจดจำธีม หากไม่มีธีมจะไม่สามารถแสดงในรายการ “ธีม” ในแถบหลังบ้านได้
而functions.phpไฟล์คือ “ศูนย์กลางฟังก์ชัน” ของธีม โดยโค้ดเกือบทั้งหมดที่เพิ่มประสิทธิภาพธีมจะถูกเขียนไว้ที่นี่ เช่น การลงทะเบียนเมนู การเพิ่มการสนับสนุนธีม การโหลดสคริปต์และสไตล์ การกำหนดฟังก์ชันที่กำหนดเอง เป็นต้น หากไม่มีธีมจะสูญเสียฟังก์ชันไดนามิกและความสามารถในการขยายส่วนใหญ่ ทั้งสองอย่างเสริมซึ่งกันและกันและขาดอย่างใดอย่างหนึ่งไม่ได้
ทำไมต้องใช้ฟังก์ชัน wp_head() และ wp_footer()?
wp_head()和wp_footer()เป็นฮุคสำคัญในการสื่อสารระหว่าง WordPress หลักกับธีมและปลั๊กอิน ในheader.php的</head>เรียกใช้ก่อนแท็กwp_head()เป็นวิธีมาตรฐานที่อนุญาตให้ WordPress เอง ปลั๊กอินที่คุณติดตั้ง และส่วนอื่นๆ ของธีมของคุณ แทรกโค้ดที่จำเป็น (เช่น แท็กเมตา ลิงก์สไตล์ชีต การอ้างอิงสคริปต์ ข้อมูลโครงสร้าง JSON-LD เป็นต้น) ลงในส่วนหัวของหน้า
ในทำนองเดียวกันfooter.php的</body>เรียกใช้ก่อนแท็กwp_footer()ใช้สำหรับแทรกสคริปต์ (เช่นโค้ดวิเคราะห์, JS ที่โหลดล่าช้า) หรือ HTML อื่นๆ ที่ต้องการโหลดที่ส่วนท้ายของหน้า หากละเว้นฟังก์ชันเหล่านี้อาจทำให้ปลั๊กอินทำงานไม่ปกติ แถบเครื่องมือจัดการไม่แสดง และปัญหาความเข้ากันได้ต่างๆ
จะทำให้ธีมของฉันเป็นไปตามมาตรฐานอย่างเป็นทางการของ WordPress ได้อย่างไร
เพื่อให้ธีมของคุณเป็นไปตามมาตรฐานอย่างเป็นทางการของ WordPress และมีคุณภาพสูง คุณต้องปฏิบัติตาม 'คู่มือการพัฒนา WordPress Theme' และ 'ข้อกำหนดการตรวจสอบธีม' ซึ่งรวมถึง: การใช้แนวทางปฏิบัติการเข้ารหัสที่ปลอดภัย การใช้ฟังก์ชันการหนีสำหรับข้อมูลเอาต์พุตแบบไดนามิกทั้งหมด (เช่นesc_html(), esc_url()), การใช้ฟังก์ชันสากลสำหรับสตริงการแปลทั้งหมด (เช่น__(), _e()) และโหลดฟิลด์ข้อความ
ธีมควรมีการออกแบบที่ตอบสนองต่ออุปกรณ์ต่างๆ เพื่อให้แสดงผลได้ดีบนอุปกรณ์ทุกชนิด รหัสควรมีความชัดเจน มีคำอธิบายประกอบ และเป็นไปตามมาตรฐานการเข้ารหัสของ WordPress นอกจากนี้ ธีมควรมีตัวเลือกการปรับแต่งที่เพียงพอผ่านตัวปรับแต่ง WordPress และควรนำไปใช้อย่างถูกต้องทั้งหมด ฟังก์ชันและฮุคหลักของ WordPress ก่อนเผยแพร่ เป็นนิสัยที่ดีในการทดสอบด้วยปลั๊กอินตรวจสอบธีม
ขั้นต่อไป ฉันควรทำอย่างไรต่อไป
อ่านเพิ่มเติมและรับความรู้ที่มีประโยชน์
下面这些内容与本文主题相关，适合继续深入阅读。优先从与你当前问题最接近的文章开始看，再逐步扩展到周边主题，效果通常会更好。
- คู่มือพื้นฐาน WordPress สำหรับผู้เริ่มต้น: สร้างเว็บไซต์มืออาชีพเว็บไซต์แรกของคุณตั้งแต่เริ่มต้น
- โซลูชันแบบครบวงจรสำหรับการสร้างเว็บไซต์: คู่มือการดำเนินการฉบับสมบูรณ์ตั้งแต่เริ่มต้นจนถึงการเปิดตัว
- คำนำ: ทำไมจึงเลือกพัฒนา WordPress
- คู่มือขั้นสูงสุดในการสร้างเว็บไซต์: กระบวนการครบวงจรในการสร้างเว็บไซต์มืออาชีพตั้งแต่เริ่มต้น
- วิธีเลือกธีม WordPress ที่ดีที่สุด: คู่มือการซื้อแบบครบวงจรตั้งแต่การออกแบบจนถึงประสิทธิภาพ
ไทย