คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างธีมแบบกำหนดเองตั้งแต่เริ่มต้นจนสำเร็จ

พื้นฐานธีม WordPress และการเตรียมสภาพแวดล้อมการพัฒนา

ก่อนเริ่มสร้างธีม WordPress ที่กำหนดเอง ต้องเข้าใจองค์ประกอบพื้นฐานของมันเสียก่อน WordPress Theme ที่พื้นฐานที่สุดอย่างน้อยต้องมีไฟล์สองไฟล์:index.php和style.cssโดยที่style.cssไฟล์นี้ไม่เพียงกำหนดสไตล์ของธีม แต่ส่วนความคิดเห็นในส่วนหัวของไฟล์ยังประกอบด้วยข้อมูลเมตาหลักของธีม เช่น ชื่อธีม, ผู้เขียน, คำอธิบาย และหมายเลขรุ่น ซึ่งเป็นสิ่งที่ WordPress ใช้ระบุว่าว่าโฟลเดอร์นั้นเป็นธีมที่ถูกต้องหรือไม่

คุณต้องเตรียมสภาพแวดล้อมการพัฒนาท้องถิ่น สามารถใช้เครื่องมืออย่าง XAMPP, MAMP หรือ Local by Flywheel เพื่อตั้งค่าเซิร์ฟเวอร์ที่มี PHP และ MySQL อย่างรวดเร็ว และติดตั้ง WordPress ให้เรียบร้อย จากนั้น ในไดเรกทอรีการติดตั้ง WordPress ที่wp-content/themesในโฟลเดอร์ ให้สร้างโฟลเดอร์ใหม่เป็นไดเรกทอรีธีมของคุณ ตัวอย่างเช่น คุณสามารถสร้างโฟลเดอร์ชื่อmy-first-themeนี่คือพื้นที่ทำงานธีมของคุณ แนะนำให้ใช้โปรแกรมแก้ไขโค้ดมืออาชีพ เช่น VS Code หรือ PhpStorm ซึ่งมีการเน้นไวยากรณ์และคำแนะนำที่ดีสำหรับ PHP, HTML, CSS และ JavaScript สามารถเพิ่มประสิทธิภาพการพัฒนาอย่างมาก

คำอธิบายโครงสร้างไฟล์หลักของธีม

ธีมที่ทำงานได้ครบถ้วนและมีโครงสร้างชัดเจนประกอบด้วยไฟล์มาตรฐานหลายไฟล์ที่ทำงานร่วมกันเพื่อกำหนดรูปลักษณ์และฟังก์ชันการทำงานของเว็บไซต์

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ฉบับสมบูรณ์: สร้างเว็บไซต์ที่กำหนดเองตั้งแต่เริ่มต้นจนเสร็จสิ้น。

บทบาทของไฟล์สไตล์ชีตและฟังก์ชัน

style.cssคือสไตล์ชีตของธีม โดยบล็อกความคิดเห็นที่ส่วนหัวของไฟล์มีความสำคัญอย่างยิ่ง ต้องมีข้อมูลเฉพาะที่กำหนดไว้ มิฉะนั้น WordPress จะไม่สามารถจดจำธีมนี้ได้ ตัวอย่างส่วนหัวพื้นฐานมีดังนี้:

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

functions.phpไฟล์ คือ “สมอง” ของธีม มันเป็นไฟล์เทมเพลตพิเศษที่ใช้สำหรับเพิ่มฟังก์ชันของธีม, ลงทะเบียนเมนู, แถบด้านข้าง และโต้ตอบกับฟังก์ชันหลักอื่นๆ ของ WordPress ไม่สามารถเข้าถึงได้โดยตรงผ่าน URL แต่จะถูกโหลดโดย WordPress โดยอัตโนมัติเมื่อเริ่มต้นธีม คุณสามารถใช้โค้ด PHP และฟังก์ชันเฉพาะของ WordPress ได้ที่นี่add_action()和add_filter()รอฮุคเพื่อขยายฟังก์ชันการทำงาน

หน้าที่ของไฟล์เทมเพลต

ไฟล์เทมเพลตควบคุมวิธีการแสดงผลของหน้าเว็บต่าง ๆ WordPress ปฏิบัติตามกฎลำดับชั้นของเทมเพลตที่เฉพาะเจาะจง เมื่อเข้าถึงหน้าใดหน้าหนึ่ง มันจะค้นหาไฟล์เทมเพลตที่ตรงกันตามลำดับความสำคัญ ตัวอย่างเช่น
- front-page.php: ใช้สำหรับแสดงหน้าที่ถูกตั้งเป็นหน้าแรก
- home.php: ใช้สำหรับแสดงหน้าดัชนีบทความบล็อก
- single.php: ใช้สำหรับแสดงบทความบล็อกเดี่ยว
- page.php: ใช้สำหรับแสดงหน้าเดี่ยว
- archive.php: ใช้สำหรับแสดงหน้าจัดเก็บหมวดหมู่ แท็ก ผู้เขียน ฯลฯ
1. 404.php: แสดงเมื่อไม่พบหน้า
- header.php: ประกอบด้วยส่วนหัวของหน้า () และพื้นที่นำทางด้านบน
- footer.php: ประกอบด้วยพื้นที่ส่วนท้ายของหน้า
- sidebar.php: กำหนดเนื้อหาของแถบด้านข้าง
- index.php: นี่คือเทมเพลตสำรองสุดท้าย หากไม่มีเทมเพลตอื่นที่เฉพาะเจาะจงกว่า WordPress จะใช้เทมเพลตนี้

สร้างฟังก์ชันหลักของธีม

ธีมสมัยใหม่จำเป็นต้องมีฟังก์ชันพื้นฐานบางอย่าง เช่น เมนูนำทาง, พื้นที่วิดเจ็ต และการรองรับรูปภาพเด่นของบทความ

เปิดใช้งานฟังก์ชันเมนูนำทาง

在functions.phpในเอกสาร คุณต้องใช้register_nav_menus()ฟังก์ชันเพื่อลงทะเบียนตำแหน่งเมนู ตัวอย่างเช่น ลงทะเบียนเมนู “เมนูนำหลัก” หนึ่งตำแหน่ง:

แนะนำให้อ่าน เรียนรู้การพัฒนา WordPress Theme: คู่มือหลักและขั้นตอนปฏิบัติจากเริ่มต้นจนเชี่ยวชาญ。

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

หลังจากลงทะเบียน ผู้ใช้จะสามารถกำหนดเมนูให้กับตำแหน่งเหล่านี้ในส่วนหลังของ WordPress ภายใต้ “รูปลักษณ์” -> “เมนู” ในการแสดงเมนูในเทมเพลต คุณต้องเรียกใช้header.phpในตำแหน่งที่เหมาะสมของเทมเพลตwp_nav_menu()ฟังก์ชัน

เพิ่มการรองรับวิดเจ็ต

แถบด้านข้าง (พื้นที่วิดเจ็ต) เป็นส่วนประกอบที่ยืดหยุ่นของธีม WordPress คุณสามารถใช้register_sidebar()ฟังก์ชันเพื่อลงทะเบียนพื้นที่วิดเจ็ตหนึ่งแห่งหรือมากกว่า

function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

หลังจากลงทะเบียนแล้ว ผู้ใช้สามารถลากและวางวิดเจ็ตไปยัง “แถบด้านข้างหลัก” ได้ในส่วน “รูปลักษณ์” -> “วิดเจ็ต” ในแผงควบคุม ในการแสดงแถบด้านข้างในเทมเพลต คุณจำเป็นต้องsidebar.php或single.phpใช้ในเอกสารdynamic_sidebar()ฟังก์ชัน

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

การนำเสนอธีมสไตล์และการโต้ตอบ

การนำเสนอภาพของธีมและปฏิสัมพันธ์ของผู้ใช้เป็นจุดสำคัญในการพัฒนา front-end

แนะนำ CSS และ JavaScript

แนวทางปฏิบัติที่ดีที่สุดคือการจัดเรียงไฟล์สไตล์ชีตและสคริปต์ (enqueue) เพื่อเรียกใช้งาน แทนที่จะเข้ารหัสลิงก์โดยตรงใน HTML ซึ่งช่วยให้แน่ใจว่าการพึ่งพาอาศัยกันถูกต้องและหลีกเลี่ยงการโหลดซ้ำซ้อน ในfunctions.phpใน, ใช้wp_enqueue_style()和wp_enqueue_script()ฟังก์ชัน

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义CSS文件
    wp_enqueue_style( 'mytheme-custom-style', get_template_directory_uri() . '/assets/css/custom.css' );
    // 引入jQuery（WordPress已内置）和一个自定义JS文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

get_stylesheet_uri()ฟังก์ชันดึง URL ของstyle.cssURL ของไดเรกทอรีธีมget_template_directory_uri()รับ URL ของไดเรกทอรีธีม

แนะนำให้อ่าน คู่มือการพัฒนา WordPress Theme ตั้งแต่เริ่มต้นจนเชี่ยวชาญอย่างสมบูรณ์。

การออกแบบที่ตอบสนอง (Responsive Design)

เว็บไซต์สมัยใหม่ต้องแสดงผลได้ดีบนอุปกรณ์ทุกประเภท ซึ่งทำได้หลักๆ ผ่าน CSS Media Queries ตรวจสอบให้แน่ใจว่าในของคุณมีเมต้าแท็กวิวพอร์ต ซึ่งโดยปกติจะทำในheader.phpเสร็จสิ้น:

<meta name="viewport" content="width=device-width, initial-scale=1">

จากนั้น ในไฟล์ CSS ของคุณ ให้เขียนกฎสไตล์สำหรับความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่น ตั้งค่าลายเอาต์ที่แตกต่างสำหรับหน้าจอที่เล็กกว่า 768px:

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

@media screen and (max-width: 768px) {
    .site-header, .site-main, .site-footer {
        padding: 10px;
    }
    .main-navigation ul {
        flex-direction: column;
    }
}

สรุป

การพัฒนา WordPress Theme เป็นกระบวนการเชิงระบบ เริ่มจากการทำความเข้าใจโครงสร้างไฟล์พื้นฐาน ไปจนถึงการสร้างฟังก์ชันหลัก เช่น เมนูและวิดเจ็ต และไปจนถึงการนำสไตล์ส่วนหน้าและปฏิสัมพันธ์มาใช้ กุญแจสำคัญคือการปฏิบัติตามมาตรฐานการเข้ารหัสของ WordPress และลำดับชั้นของเทมเพลต และใช้ประโยชน์จากfunctions.phpและระบบ Hook เพื่อขยายฟังก์ชันการทำงาน ผ่านการตั้งค่าแวดล้อมการพัฒนาท้องถิ่นและขั้นตอนที่เป็นระเบียบ แม้แต่ผู้เริ่มต้นก็สามารถสร้างธีมที่กำหนดเองที่สมบูรณ์และเป็นมืออาชีพได้ทีละขั้นตอน จำไว้ว่าการจัดระเบียบโค้ดและความคิดเห็นที่ดีคือรากฐานของการบำรุงรักษาระยะยาว

คำถามที่พบบ่อย (FAQ)

การพัฒนา WordPress Theme ต้องการพื้นฐานภาษาการเขียนโปรแกรมอะไรบ้าง?

การพัฒนา WordPress Theme จำเป็นต้องเชี่ยวชาญ HTML, CSS และ PHP เป็นหลัก HTML ใช้สำหรับสร้างโครงสร้างหน้า, CSS ใช้สำหรับควบคุมสไตล์และการจัดวาง, และ PHP เป็นภาษาหลักของ WordPress ที่ใช้สำหรับประมวลผลลอจิก, เรียกใช้ข้อมูลและสร้างเนื้อหาแบบไดนามิก นอกจากนี้ การเข้าใจ JavaScript พื้นฐานบางส่วนยังมีประโยชน์มากสำหรับการนำปฏิสัมพันธ์ส่วนหน้ามาใช้

จะทำให้ธีมของฉันเป็นไปตามมาตรฐานอย่างเป็นทางการของ WordPress ได้อย่างไร

เพื่อให้ธีมของคุณเป็นไปตามมาตรฐานอย่างเป็นทางการของ WordPress ขอแนะนำให้ปฏิบัติตาม "คู่มือการพัฒนา WordPress Theme" และ "คู่มือการตรวจสอบธีม" ประเด็นหลักรวมถึง: ใช้แนวปฏิบัติการเข้ารหัสที่ปลอดภัย หลีกหนีข้อมูลไดนามิกทั้งหมดที่ส่งออก ตรวจสอบและทำความสะอาดข้อมูลที่ป้อนทั้งหมด ใส่ไฟล์ CSS และ JavaScript ในคิวอย่างถูกต้อง ตรวจสอบให้แน่ใจว่า theme มีการตอบสนองและแสดงผลได้ดีบนอุปกรณ์ต่างๆ ให้การสนับสนุนการแปลที่เพียงพอ ใช้ฟังก์ชันเช่น__()和_e()เพื่อห่อหุ้มข้อความที่แปลได้ทั้งหมด และหลีกเลี่ยงการเข้ารหัสฟังก์ชันหลักในธีม

ไฟล์ functions.php ของธีมและปลั๊กอินแตกต่างกันอย่างไร?

functions.phpไฟล์เป็นส่วนหนึ่งของธีม ฟังก์ชันของมันผูกกับธีมที่เปิดใช้งานอยู่ปัจจุบัน ใช้เพื่อเพิ่มหรือปรับเปลี่ยนคุณสมบัติที่เกี่ยวข้องโดยตรงกับรูปลักษณ์และฟังก์ชันของธีม เช่น การลงทะเบียนเมนู, ไซด์บาร์, การเพิ่มการสนับสนุนฟีเจอร์ของธีม เป็นต้น เมื่อเปลี่ยนธีมfunctions.phpโค้ดในนี้จะไม่มีผลอีกต่อไป

ปลั๊กอินเป็นโมดูลฟังก์ชันที่แยกออกจากธีม มีจุดมุ่งหมายเพื่อเพิ่มฟังก์ชันเฉพาะให้กับเว็บไซต์ (เช่น แบบฟอร์มติดต่อ, การปรับแต่ง SEO, แคช ฯลฯ) ฟังก์ชันของปลั๊กอินไม่ได้ขึ้นอยู่กับธีมเฉพาะใด ๆ ถึงแม้จะเปลี่ยนธีม ฟังก์ชันของปลั๊กอินมักจะยังคงใช้งานได้ หลักการแยกแยะง่าย ๆ คือ: ถ้าฟังก์ชันเป็นส่วนหนึ่งของการนำเสนอภาพ ควรอยู่ในธีม; ถ้าเป็นฟังก์ชันทั่วไปที่แยกออกจากการออกแบบ ให้พิจารณาทำเป็นปลั๊กอิน

จะดีบักข้อผิดพลาด PHP ที่พบระหว่างการพัฒนาได้อย่างไร?

ในขั้นตอนการพัฒนา แนะนำให้เปิดใช้งานโหมดดีบักของ WordPress เพื่อให้ค้นพบข้อผิดพลาดได้ง่าย เปิดไฟล์ที่อยู่ในไดเรกทอรีธีมwp-config.phpไฟล์, ค้นหาการตั้งค่าที่เกี่ยวข้องและแก้ไขดังนี้:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误日志保存到 /wp-content/debug.log
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误信息（避免用户看到）

การตั้งค่าWP_DEBUG_LOGเป็นtrueหลังจากนั้น，ข้อความผิดพลาดจะถูกเขียนลงในwp-content/debug.logไฟล์，ทำให้สะดวกในการดูโดยไม่ส่งผลต่อการแสดงผลด้านหน้า นอกจากนี้，การใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ (แถบ Console และ Network) เพื่อแก้ไขปัญหา JavaScript และ CSS ก็เป็นขั้นตอนที่จำเป็น