การสร้าง Theme WordPress

Sirichai Teerapattarasakul

Sirichai Teerapattarasakul / June 02, 2025

4 min read

บันทึกการสร้างธีม WordPress ด้วยตัวเอง สิ่งที่ต้องรู้พื้นฐานมีความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS, และและ PHP ต่อไปนี้คือขั้นตอนเริ่มต้นสร้างธีม WordPress ตั้งแต่เริ่มต้น:

ขั้นตอนที่ 1: ติดตั้ง WordPress ในเครื่อง (Localhost)

ตรงนี้ผมใช้ Local by Flywheel เพื่อทำเป็น Local Server เพราะใช้งานง่ายดีคลิกไม่กี่คลิกก็ได้เว็บไซต์ Worpress แล้ว หรือใครจะใช้ตัวอื่น เช่น XAMPP, MAMP หรือ Docker ก็ได้ แล้วแต่สะดวกครับ เมื่อได้เว็บไซต์โปรเจ็คมาแล้ว ให้ทำความเข้าใจโครงสร้างโฟลเดอร์ของ WordPress อีกครั้ง ตามนี้

  • ธีม WordPress จะอยู่ในโฟลเดอร์ wp-content/themes/
  • จะสร้างโฟลเดอร์ธีมใหม่ในนี้ เช่น wp-content/themes/mytheme

ผมมีเขียนบันทึก โครงสร้างไฟล์ของเว็บไซต์ WordPress สามารถอ่านทำความเข้าใจอีกครั้ง

ขั้นตอนที่ 2: สร้างโฟลเดอร์และไฟล์พื้นฐานของธีม

  1. สร้างโฟลเดอร์ธีม

    • ไปที่ wp-content/themes/ และสร้างโฟลเดอร์ใหม่ เช่น mytheme
    • ชื่อโฟลเดอร์ควรเป็นชื่อที่ไม่ซ้ำและสื่อถึงธีม (เช่น my-first-theme)

  2. สร้างไฟล์หลักของธีม ธีม WordPress ต้องการไฟล์พื้นฐานอย่างน้อย 2 ไฟล์:

    • style.css: ไฟล์สไตล์และข้อมูลเมตาของธีม
    • index.php: ไฟล์หลักที่แสดงหน้าแรกของเว็บ

    ตัวอย่างไฟล์ style.css:

    /*
 Theme Name: My First Theme
 Author: ชื่อของผู้สร้างธีม
 Description: ธีม WordPress แรกของฉัน
 Version: 1.0
 Text Domain: mytheme
*/
/* CSS สำหรับสไตล์ของธีม */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

    ตัวอย่างไฟล์ index.php:

    <!DOCTYPE html>
<html>
<head>
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <h1>ยินดีต้อนรับสู่ธีมของฉัน!</h1>
    <?php wp_footer(); ?>
</body>
</html>

  3. เปิดใช้งานธีม

    • เข้าไปที่ WordPress Admin Dashboard (http://localhost/ชื่อโฟลเดอร์/wp-admin)
    • ไปที่ Appearance > Themes แล้วเลือกธีม My First Theme เพื่อเปิดใช้งาน (ชื่อมากจากที่ตั้ง Theme Name ใน style.css)

ขั้นตอนที่ 3: เพิ่มโครงสร้างพื้นฐานของธีม

  1. สร้างไฟล์ที่สำคัญเพิ่มเติม ธีม WordPress มักมีไฟล์อื่นๆ เพื่อจัดการหน้าเว็บประเภทต่างๆ:

    • header.php: ส่วนหัวของเว็บ (โลโก้, เมนู)
    • footer.php: ส่วนท้ายของเว็บ (ลิขสิทธิ์, ลิงก์)
    • functions.php: ไฟล์สำหรับเพิ่มฟังก์ชันพิเศษให้ธีม เช่น ตั้งค่าและโหลด CSS/JS
    • single.php: เทมเพลตสำหรับแสดงโพสต์เดี่ยว
    • page.php: เทมเพลตสำหรับแสดงหน้าเพจ
    • archive.php: เทมเพลตสำหรับแสดงหมวดหมู่หรือแท็ก

    ตัวอย่าง header.php:

    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
        </nav>
    </header>

    ตัวอย่าง footer.php:

    <footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

    ตัวอย่าง functions.php:

    <?php
// เพิ่มการสนับสนุนเมนู
function mytheme_setup() {
    register_nav_menus(array(
        'main-menu' => __('Main Menu', 'mytheme'),
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

// เพิ่มการสนับสนุนรูปภาพเด่น
add_theme_support('post-thumbnails');
?>

  2. ปรับปรุง index.php เพื่อเรียกใช้ header.php และ footer.php

    <?php get_header(); ?>
<main>
    <h2>โพสต์ล่าสุด</h2>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php the_content(); ?>
    <?php endwhile; else : ?>
        <p>ไม่มีเนื้อหา</p>
    <?php endif; ?>
</main>
<?php get_footer(); ?>

ขั้นตอนที่ 4: ออกแบบและปรับแต่งสไตล์

  1. เพิ่ม CSS ใน style.css

    • ออกแบบหน้าเว็บด้วย CSS เช่น การจัด layout, สี, ฟอนต์
    • ตัวอย่าง:
      header {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 10px;
}
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

  2. ใช้ CSS Framework (หากไม่อยากเขียน CSS เองทั้งหมด)

    • ส่วนตัวใช้ framework หลักๆ คือ Bootstrap และ Tailwind CSS
    • ให้ดาวน์โหลดและรวมไฟล์ CSS/JS ใน functions.php:
      function mytheme_enqueue_styles() {
    wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

ขั้นตอนที่ 5: เพิ่มฟีเจอร์พิเศษ

  1. เพิ่มการสนับสนุนฟีเจอร์ใน functions.php

    • รูปภาพเด่น: add_theme_support('post-thumbnails');
    • โลโก้ที่กำหนดเอง: add_theme_support('custom-logo');
    • วิดเจ็ต: 
      function mytheme_widgets_init() {
    register_sidebar(array(
        'name' => 'Sidebar',
        'id' => 'sidebar-1',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
    ));
}
add_action('widgets_init', 'mytheme_widgets_init');

  2. สร้าง Sidebar

    • สร้างไฟล์ sidebar.php:
      <aside>
    <?php dynamic_sidebar('sidebar-1'); ?>
</aside>
    • เรียกใช้ใน index.php หรือไฟล์อื่น:
      <?php get_sidebar(); ?>

  3. สร้างเทมเพลตหน้าเพจแบบกำหนดเอง (Custom Page Template)

    • สร้างไฟล์เช่น page-custom.php:
      <?php
/*
Template Name: Custom Page
*/
get_header(); ?>
<main>
    <h2>นี่คือหน้าแบบกำหนดเอง</h2>
    <?php the_content(); ?>
</main>
<?php get_footer(); ?>
    • เลือกเทมเพลตนี้ในหน้า WordPress Admin

ขั้นตอนที่ 6: ทดสอบและแก้ไข

ดูหน้าเว็บในเบราว์เซอร์ ตรวจสอบว่าแสดงผลถูกต้องหรือไม่ เช่น หน้าโพสต์, หน้าเพจ, หมวดหมู่, และ sidebar หรือ ใช้ Developer Tools (F12) เพื่อตรวจสอบข้อผิดพลาด CSS หรือ JavaScript

แนะนำติดตั้งปลั๊กอินช่วยทดสอบ

  • Theme Check: ตรวจสอบว่าธีมเป็นไปตามมาตรฐาน WordPress ไหม?
  • WP Debug: เปิดโหมด debug ใน wp-config.php โดยเพิ่ม:
    define('WP_DEBUG', true);

ขั้นตอนที่ 7: เพิ่มความซับซ้อน (ถ้าต้องการ)

  1. เพิ่ม Custom Post Types

    • ใช้ functions.php เพื่อสร้างประเภทโพสต์ใหม่ เช่น Portfolio:
      function create_portfolio_post_type() {
    register_post_type('portfolio', array(
        'labels' => array(
            'name' => 'Portfolios',
            'singular_name' => 'Portfolio'
        ),
        'public' => true,
        'has_archive' => true,
    ));
}
add_action('init', 'create_portfolio_post_type');

  2. เพิ่มการสนับสนุน WooCommerce (ถ้าต้องการร้านค้าออนไลน์)

    • เพิ่มใน functions.php:
      add_theme_support('woocommerce');

  3. ปรับแต่ง Loop

    • ปรับแต่งการแสดงผลโพสต์ใน index.php หรือ archive.php เช่น แสดงเฉพาะสรุปโพสต์:
      <?php the_excerpt(); ?>

ขั้นตอนสุดท้าย: อัปโหลดและใช้งานจริง

รวมไฟล์ทั้งหมดในโฟลเดอร์ธีม (mytheme) และบีบอัดเป็นไฟล์ .zip

อัปโหลดไปยัง WordPress

  • เข้า WordPress Admin > Appearance > Themes > Add New > Upload Theme
  • อัปโหลดไฟล์ .zip และเปิดใช้งาน

มีเครื่องมือ Opensource ที่ช่วยสร้างธีมเพื่อประหยัดเวลา

ชื่อว่า Underscore จะสร้าง Starter Theme เริ่มต้นสำหรับให้เลย อาจจะลองใช้และเอาไปแกะโค้ดดูภายหลังก็ได้

แหล่งเรียนรู้เพิ่มเติม

  • WordPress Codex: codex.wordpress.org
  • WPBeginner: wpbeginner.com
  • Theme Handbook: developer.wordpress.org/themes

หวังว่าจะมีประโยชน์ครับ ♥️