การสร้าง 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

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