หน้าแรก/ความรู้/วูร์ดเพรส/รายละเอียดเนื้อหา

วิธีการพัฒนาและปรับแต่งธีม WordPress แบบตอบสนอง (Responsive) ตัวแรกของคุณ

อ่าน 4 นาที
2026-03-21
2026-06-04
2,432
I earn commissions when you shop through the links below, at no additional cost to you.

การเตรียมการและการตั้งค่าสภาพแวดล้อมการพัฒนา

ก่อนเริ่มเขียนโค้ด การตั้งค่าสภาพแวดล้อมการพัฒนาที่มีประสิทธิภาพเป็นสิ่งสำคัญมาก นี่ไม่เพียงแต่จะเพิ่มประสิทธิภาพการทำงานของคุณ แต่ยังช่วยให้มั่นใจในมาตรฐานและการบำรุงรักษาโค้ดได้

ขั้นแรก คุณต้องมีสภาพแวดล้อมการพัฒนาท้องถิ่น คุณสามารถใช้เครื่องมือเช่น XAMPP, MAMP หรือ Local by Flywheel ซึ่งสามารถตั้งค่าเซิร์ฟเวอร์ท้องถิ่นที่มี PHP และ MySQL ได้อย่างรวดเร็ว หลังจากติดตั้งและเริ่มบริการแล้ว ตรวจสอบให้แน่ใจว่า Apache (หรือ Nginx) และ MySQL กำลังทำงานอยู่

ต่อไป ดาวน์โหลดไฟล์หลัก WordPress เวอร์ชันล่าสุด และแตกไฟล์ไปยังไดเรกทอรีรากของเว็บไซต์บนเซิร์ฟเวอร์ท้องถิ่น (เช่น ของ XAMPP คือ htdocs โฟลเดอร์) ผ่านเบราว์เซอร์เพื่อเข้าถึง http://localhost/your-wordpress-folder เพื่อดำเนินการติดตั้ง WordPress จำชื่อฐานข้อมูล ชื่อผู้ใช้ และรหัสผ่านที่คุณตั้งไว้ไว้

แนะนำให้อ่าน คู่มือเริ่มต้นใช้งาน Tailwind CSS ภาคปฏิบัติ: คู่มือการออกแบบสำหรับสร้างเว็บเพจสมัยใหม่ที่ตอบสนองต่ออุปกรณ์。

สำหรับโปรแกรมแก้ไขโค้ด แนะนำให้ใช้ Visual Studio Code, PhpStorm หรือ Sublime Text โปรแกรมแก้ไขเหล่านี้รองรับการเน้นไวยากรณ์และการแนะนำโค้ดสำหรับ PHP, HTML, CSS และ JavaScript เป็นอย่างดี นอกจากนี้ ให้ติดตั้งปลั๊กอินที่จำเป็น เช่น ปลั๊กอินแนะนำอัจฉริยะสำหรับการพัฒนา WordPress และ Git สำหรับการควบคุมเวอร์ชัน

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

สุดท้าย ในไดเรกทอรีการติดตั้ง WordPress ในเครื่องของคุณ ให้นำทางไปที่ wp-content/themes โฟลเดอร์ ที่นี่ ให้สร้างโฟลเดอร์ใหม่สำหรับธีมที่คุณกำลังจะสร้าง เช่น ตั้งชื่อว่า my-first-themeโฟลเดอร์นี้จะเก็บไฟล์ทั้งหมดของธีมของคุณ

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

ธีม WordPress ประกอบด้วยไฟล์มาตรฐานหลายไฟล์ โดยมีสองไฟล์ที่ต้องมีอยู่เสมอ:style.css 和 index.phpไฟล์เหล่านี้กำหนดข้อมูลพื้นฐานและโครงสร้างของธีม

เริ่มต้นด้วยการสร้าง style.css ไฟล์ ซึ่งไม่เพียงแต่เป็นสไตล์ชีตของคุณ แต่ยังรวมถึงข้อมูลเมตาของธีม ข้อมูลนี้จะแสดงในหน้า “รูปลักษณ์” -> “ธีม” ในแอดมิน WordPress

/*
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
*/

ต่อไปนี้ ให้สร้าง index.php ไฟล์ นี่คือไฟล์เทมเพลตหลักของธีม เมื่อ WordPress ไม่พบไฟล์เทมเพลตที่เจาะจงกว่า (เช่น single.php 或 page.php) จะใช้ไฟล์นี้ index.php ที่ง่ายที่สุดสามารถมีเพียงโค้ดพื้นฐานที่เรียกส่วนหัวของ WordPress ลูปหลัก และส่วนท้าย

แนะนำให้อ่าน เชี่ยวชาญ Tailwind CSS: คู่มือปฏิบัติจากเริ่มต้นสู่การใช้งานจริง。

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/th/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

ในตอนนี้ ธีมของคุณสามารถเปิดใช้งานได้แล้ว ไปที่หน้า “ธีม” ในส่วน “รูปลักษณ์” ของ WordPress แอดมิน คุณควรจะเห็น “ธีมตอบสนองแรกของฉัน” เปิดใช้งานและเยี่ยมชมหน้าแรกของเว็บไซต์ คุณจะเห็นผลลัพธ์พื้นฐาน

เพิ่มการสนับสนุนฟีเจอร์ธีม

为了让主题功能更完善，我们需要通过 functions.php 文件来添加对 WordPress 核心功能的支持。functions.php 文件就像是主题的大脑，用于存放所有自定义函数、类、钩子和过滤器。

การสร้าง functions.php 文件，并添加以下代码来支持文章缩略图、自定义菜单和 HTML5 标记。

hosting.com 共享主机
高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%
โลโก้ Hosting.com เข้าถึงหน้าเว็บ 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

การจัดวางที่ตอบสนองและการออกแบบสไตล์

การออกแบบ Responsive หมายถึงเว็บไซต์ของคุณสามารถให้ประสบการณ์การท่องเว็บที่ดีบนอุปกรณ์ที่มีขนาดต่างกัน เช่น เดสก์ท็อป แท็บเล็ต และโทรศัพท์มือถือ เราทำได้โดยใช้ CSS Media Queries และการจัดวางแบบไหล

ก่อนอื่นใน style.css เขียนสไตล์พื้นฐานระดับโลกภายใต้ข้อมูลเมตา เพื่อวางรากฐานสำหรับการตอบสนอง เราใช้เทคโนโลยีการจัดวาง CSS ที่ทันสมัย เช่น Flexbox

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

ต่อไป เพิ่ม Media Queries เพื่อปรับเปลี่ยนตามความกว้างของหน้าจอที่แตกต่างกัน นี่คือหัวใจสำคัญของการออกแบบ Responsive

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

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

เพิ่มประสิทธิภาพเมนูนำทางให้ตอบสนอง

บนอุปกรณ์หน้าจอเล็ก เช่น โทรศัพท์มือถือ เมนูนำแนวนอนแบบดั้งเดิมมักจะดูแออัด วิธีแก้ปัญหาทั่วไปคือการเปลี่ยนเป็นเมนูแฮมเบอร์เกอร์ เราจำเป็นต้องรวม CSS และ JavaScript เล็กน้อยเพื่อทำให้สำเร็จ

ก่อนอื่นใน header ปรับเปลี่ยนโครงสร้าง HTML ของเมนูบางส่วน ซึ่งมักจะสร้างโดยฟังก์ชัน wp_nav_menu ของ WordPress เพื่อควบคุมสไตล์ เราเพิ่มชื่อคลาสให้กับมัน และเพิ่มปุ่มแฮมเบอร์เกอร์

โฮสติ้งแบบแชร์ของ InterServer
共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。
โลโก้ InterServer เข้าถึงหน้าเว็บ

ในของคุณ header.php ในไฟล์เทมเพลต (จำเป็นต้องนำมาจาก index.php แยกออกมาจากกลาง (กลาง) รหัสเมนูอาจเป็นดังนี้:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

จากนั้น ใน CSS โดยค่าเริ่มต้นจะซ่อนเมนูบนหน้าจอขนาดเล็ก เมื่อผู้ใช้คลิกที่ปุ่มแฮมเบอร์เกอร์ จะสลับคลาส (เช่น .toggled) ผ่าน JavaScript เพื่อแสดงเมนู

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

สุดท้าย เพิ่มไฟล์ JavaScript อย่างง่าย (เช่น js/navigation.js）และผ่าน functions.php การแนะนำ เพื่อจัดการกับเหตุการณ์การคลิกปุ่ม

สร้างเทมเพลตหน้าและวิดเจ็ตที่กำหนดเอง

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

สร้างเทมเพลตหน้าหน้าแบบกำหนดเอง

สมมติว่าคุณต้องการสร้างเทมเพลต “หน้าหน้าเต็มความกว้าง” ที่ไม่มีแถบด้านข้าง เนื้อหาหน้ากินพื้นที่เต็มความกว้าง ขั้นแรก ให้สร้างไฟล์ใหม่ในไดเรกทอรีรูทของธีม ตั้งชื่อเป็น page-fullwidth.phpที่ด้านบนสุดของไฟล์นี้ ต้องเพิ่มความคิดเห็นสำหรับชื่อเทมเพลต

<?php
/**
 * Template Name: 全宽页面
 */
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>
<?php
get_footer(); // 引入 footer.php
?>

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

注册侧边栏部件区域

部件区域允许用户通过拖拽的方式在主题的特定位置（如侧边栏、页脚）添加内容。我们需要在 functions.php 中注册一个侧边栏区域。

ใช้ register_sidebar 函数来注册。这个函数接收一个参数数组，用于定义侧边栏的名称、ID、描述和包装标签。

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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', 'my_first_theme_widgets_init' );

หลังจากลงทะเบียนแล้ว คุณต้องเรียกใช้พื้นที่วิดเจ็ตนี้ในตำแหน่งที่เหมาะสมของเทมเพลตธีม โดยทั่วไปแล้วไซด์บาร์จะอยู่ใน sidebar.php ไฟล์ จากนั้นในไฟล์เทมเพลตหลัก (เช่น index.php 或 single.php) จะแสดงพื้นที่วิดเจ็ตผ่านฟังก์ชัน get_sidebar() การแนะนำฟังก์ชัน

在 sidebar.php ใน, ใช้ dynamic_sidebar ออกมา

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

สรุป

การพัฒนาและปรับแต่งธีม WordPress แบบตอบสนอง (Responsive) ธีมแรกของคุณเป็นกระบวนการที่ทั้งท้าทายและให้ความภาคภูมิใจอย่างมาก ตามขั้นตอนในบทความนี้ คุณได้สร้างสภาพแวดล้อมการพัฒนาขึ้นจากศูนย์ สร้างไฟล์หลักที่จำเป็นสำหรับธีม style.css 和 index.phpและระบุเส้นทางของไฟล์ใบรับรองและไฟล์คีย์ส่วนตัวแยกกันด้วยคำสั่ง functions.php เพิ่มความสามารถให้กับธีม คุณได้ฝึกปฏิบัติการออกแบบเว็บแบบตอบสนองอย่างลึกซึ้ง ใช้ CSS Media Queries และ Flexbox Layout เพื่อให้แน่ใจว่าเว็บไซต์มีความเข้ากันได้บนอุปกรณ์ทุกชนิด สุดท้าย คุณยังได้สำรวจระบบเทมเพลตและ API ของวิดเจ็ตอันทรงพลังของ WordPress เรียนรู้วิธีสร้างเทมเพลตหน้าประเภทกำหนดเองและพื้นที่วิดเจ็ตที่ลากวางได้

หลังจากเชี่ยวชาญพื้นฐานเหล่านี้แล้ว คุณสามารถสำรวจคุณสมบัติธีมขั้นสูงต่อไปได้ เช่น ประเภทบทความกำหนดเอง (Custom Post Types), API ตัวปรับแต่งธีม (Theme Customizer API), การสนับสนุนตัวแก้ไขแบบบล็อก (Block Editor) เป็นต้น เพื่อสร้างธีม WordPress ที่มีประสิทธิภาพมากขึ้นและออกแบบอย่างมืออาชีพ

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

การพัฒนาธีมจำเป็นต้องเริ่มจากศูนย์หรือไม่?

ไม่จำเป็นเสมอไป แม้ว่าการเริ่มจากศูนย์จะทำให้คุณควบคุมและเข้าใจทุกรายละเอียดได้อย่างสมบูรณ์ แต่สำหรับผู้เริ่มต้นหรือสถานการณ์ที่ต้องการการพัฒนาอย่างรวดเร็ว การเริ่มจากธีมพื้นฐานที่มีอยู่ (เช่น Underscores, _s) หรือเฟรมเวิร์ก (เช่นธีมที่ผสานรวม Bootstrap) เป็นทางเลือกที่มีประสิทธิภาพสูงกว่า ซึ่งจะให้พื้นฐานโค้ดที่มั่นคงและสอดคล้องกับแนวทางปฏิบัติที่ดีที่สุด คุณสามารถทำการปรับแต่งบนพื้นฐานนั้นได้

วิธีดีบั๊กธีม WordPress ของฉัน

วิธีการดีบักที่ใช้บ่อยในการพัฒนา WordPress คือการเปิดใช้งาน WP_DEBUGในไฟล์ wp-config.php ในไฟล์, ตั้งค่า define( 'WP_DEBUG', false ); ของคุณเปลี่ยนเป็น define( 'WP_DEBUG', true );ซึ่งจะบังคับให้ WordPress แสดงข้อผิดพลาด คำเตือน และการแจ้งเตือนทั้งหมดของ PHP บนหน้าจอ พร้อมกันนี้ ให้ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์ (แท็บ Console, Elements, Network) เพื่อดีบัก JavaScript, CSS และคำขอเครือข่าย

ทำไมการเปลี่ยนแปลงธีมของฉันจึงไม่เกิดผลทันที?

โดยปกติแล้ว สาเหตุนี้เกิดจากแคชของเบราว์เซอร์หรือปลั๊กอินแคชของ WordPress ก่อนอื่น ลองรีเฟรชแบบบังคับในเบราว์เซอร์ (Ctrl+F5 หรือ Cmd+Shift+R) หากใช้ปลั๊กอินแคช โปรดล้างแคชของปลั๊กอินนั้น นอกจากนี้ ตรวจสอบให้แน่ใจว่าคุณได้แก้ไขไฟล์ที่ถูกต้องในโฟลเดอร์ธีมที่ใช้งานอยู่ หากแก้ไขไฟล์ functions.php บางครั้งเพียงแค่รีเฟรชหน้าแอดมินก็เพียงพอแล้ว เนื่องจากไฟล์นี้จะถูกอ่านทุกครั้งที่โหลดหน้า

จะทำให้ธีมของฉันรองรับหลายภาษาได้อย่างไร?

การทำให้ธีมรองรับหลายภาษา (สากลและท้องถิ่น) เป็นนิสัยที่ดี ซึ่งเกี่ยวข้องกับสองขั้นตอนหลัก: ขั้นแรก ใช้ฟังก์ชันแปลของ WordPress เพื่อห่อหุ้มข้อความทั้งหมดในธีมที่ต้องการแปล เช่น __('Hello World', 'my-first-theme'). ประการที่สอง ใช้เครื่องมือเช่น Poedit เพื่อสแกนไฟล์ธีมและสร้าง .pot ไฟล์เทมเพลต จากนั้นสร้างไฟล์ที่ตรงกันสำหรับแต่ละภาษา .po และไฟล์ที่คอมไพล์แล้ว .mo ไฟล์ และวางไว้ในธีม /languages/ ไดเรกทอรี สุดท้าย ใน functions.php ใช้ฟังก์ชัน load_theme_textdomain ฟังก์ชันสำหรับโหลดการแปล

การพัฒนา Theme แบบธุรกิจต้องระวังอะไรบ้าง?

การพัฒนาเชิงพาณิชย์สำหรับการแจกจ่าย มีข้อกำหนดที่สูงกว่าแบบใช้ส่วนตัวมาก คุณต้องปฏิบัติตามมาตรฐานการตรวจสอบของไดเรกทอรีธีม WordPress อย่างเคร่งครัด เพื่อให้มั่นใจในความปลอดภัยของโค้ดและไม่มีข้อผิดพลาด ต้องดำเนินการหน่วงและตรวจสอบข้อมูลที่ผู้ใช้ป้อนและแสดงผลทั้งหมดอย่างเข้มงวด โดยใช้ฟังก์ชันที่ปลอดภัยเช่น esc_html, esc_urlธีมควรมีเอกสารและความคิดเห็นที่ละเอียดถี่ถ้วน นอกจากนี้ ขอแนะนำอย่างยิ่งให้เพิ่มการสนับสนุนที่ครอบคลุมสำหรับฟังก์ชันหลักของ WordPress (เช่น ตัวแก้ไขบล็อก, โลโก้ที่กำหนดเอง) ในธีมของคุณ และให้แน่ใจว่าสามารถใช้งานร่วมกับปลั๊กอินยอดนิยมได้ สุดท้าย พิจารณาเพิ่มการสนับสนุนตัวปรับแต่งธีม เพื่อมอบประสบการณ์การปรับแต่งแบบเรียลไทม์ที่ใช้งานง่ายให้กับผู้ใช้

ขั้นต่อไป ฉันควรทำอย่างไรต่อไป

如果你正在搭建或优化 WordPress 网站，下一步建议继续阅读性能优化、插件配置和主题定制相关内容。

อ่านเพิ่มเติมและรับความรู้ที่มีประโยชน์

下面这些内容与本文主题相关，适合继续深入阅读。优先从与你当前问题最接近的文章开始看，再逐步扩展到周边主题，效果通常会更好。

แท็ก: