เขียน theme wordpress โดยอ้างอิงพื้นฐาน จาก bootstrap

การเขียนธีม WordPress โดยอ้างอิงพื้นฐานจาก Bootstrap เป็นไอเดียที่ดี เพราะ Bootstrap เป็นเฟรมเวิร์กที่ช่วยให้คุณสร้างเลย์เอาต์ที่ responsive และดูดีได้อย่างรวดเร็ว ต่อไปนี้คือขั้นตอนและแนวทางในการพัฒนาธีม WordPress โดยใช้ Bootstrap:

ขั้นตอนการสร้างธีม WordPress ด้วย Bootstrap

1. ตั้งค่าโครงสร้างโฟลเดอร์ของธีม

สร้างโฟลเดอร์ใหม่ใน wp-content/themes/ เช่น my-bootstrap-theme
สร้างไฟล์พื้นฐานที่จำเป็นสำหรับธีม WordPress:
- style.css (ไฟล์หลักของธีม ต้องมี header comment)
- index.php (เทมเพลตหลัก)
- functions.php (สำหรับโหลดสคริปต์และฟังก์ชันเพิ่มเติม)
- header.php (ส่วนหัวของหน้า)
- footer.php (ส่วนท้ายของหน้า)
- single.php (เทมเพลตสำหรับโพสต์เดี่ยว)
- page.php (เทมเพลตสำหรับหน้าเพจ)

ตัวอย่างโครงสร้าง:

my-bootstrap-theme/
 ├── css/
 │   └── bootstrap.min.css
 ├── js/
 │   └── bootstrap.bundle.min.js
 ├── style.css
 ├── index.php
 ├── functions.php
 ├── header.php
 ├── footer.php
 ├── single.php
 └── page.php

2. เพิ่ม Header Comment ใน style.css

ไฟล์ style.css ต้องมีส่วนหัวเพื่อบอก WordPress ว่านี่คือธีม:

/*
 Theme Name: My Bootstrap Theme
 Theme URI: http://example.com/my-bootstrap-theme/
 Author: Your Name
 Author URI: http://example.com/
 Description: A simple WordPress theme based on Bootstrap.
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: my-bootstrap-theme
 */

3. ดาวน์โหลดและรวม Bootstrap

ดาวน์โหลด Bootstrap จาก getbootstrap.com หรือใช้ CDN
ถ้าจะฝังในธีม:
- วาง bootstrap.min.css ในโฟลเดอร์ css/
- วาง bootstrap.bundle.min.js (รวม Popper.js) ในโฟลเดอร์ js/
หรือใช้ CDN โดยไม่ต้องดาวน์โหลด

4. โหลด Bootstrap ใน functions.php

เพิ่มโค้ดใน functions.php เพื่อโหลด CSS และ JS ของ Bootstrap รวมถึงตั้งค่า Text Domain:

<?php
 function my_bootstrap_theme_setup() {
 // รองรับ Text Domain สำหรับการแปล
 load_theme_textdomain('my-bootstrap-theme', get_template_directory() . '/languages');
 // โหลด CSS
 wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');
 wp_enqueue_style('theme-style', get_stylesheet_uri());
 // โหลด JS (Bootstrap ต้องการ jQuery ในบางกรณี แต่ bundle มี Popper.js แล้ว)
 wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array(), null, true);
 }
 add_action('wp_enqueue_scripts', 'my_bootstrap_theme_setup');

// รองรับฟีเจอร์พื้นฐานของ WordPress add_theme_support('title-tag'); add_theme_support('post-thumbnails'); add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption')); ?>

ถ้าใช้ CDN แทน:

wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
 wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array(), null, true);

5. สร้าง header.php

ใช้โครงสร้าง Bootstrap เช่น Navbar:

<!DOCTYPE html>
 <html <?php language_attributes(); ?>>
 <head>
 <meta charset="<?php bloginfo('charset'); ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
  <a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  <?php
 wp_nav_menu(array(
  'theme_location' => 'primary',
  'container' => false,
  'menu_class' => 'navbar-nav ms-auto',
  'walker' => new WP_Bootstrap_Navwalker()
  ));
  ?>
  </div>
  </div>
  </nav>
  <div class="container mt-4">

หมายเหตุ: ถ้าต้องการให้เมนูรองรับ Bootstrap Navbar ให้ใช้ Bootstrap Nav Walker หรือเขียนคลาสเอง

6. สร้าง footer.php

 </div><!-- /.container -->
 <footer class="bg-light py-3 mt-4">
  <div class="container text-center">
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
  </div>
  </footer>
  <?php wp_footer(); ?>
 </body>
 </html>

7. สร้าง index.php (Loop พื้นฐาน)

ใช้ grid system ของ Bootstrap:

<?php get_header(); ?>
 <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="col-md-4">
  <div class="card mb-4">
  <?php if (has_post_thumbnail()) : ?>
  <img src="<?php the_post_thumbnail_url('medium'); ?>" class="card-img-top" alt="<?php the_title(); ?>">
  <?php endif; ?>
  <div class="card-body">
  <h5 class="card-title"><?php the_title(); ?></h5>
  <p class="card-text"><?php the_excerpt(); ?></p>
  <a href="<?php the_permalink(); ?>" class="btn btn-primary">Read More</a>
  </div>
  </div>
  </div>
  <?php endwhile; else : ?>
  <p><?php _e('No posts found.', 'my-bootstrap-theme'); ?></p>
  <?php endif; ?>
 </div>
 <?php get_footer(); ?>

8. เพิ่มเมนูใน functions.php

ลงทะเบียนเมนูเพื่อใช้ใน Navbar:

function register_my_menus() {
 register_nav_menus(array(
 'primary' => __('Primary Menu', 'my-bootstrap-theme'),
 ));
 }
 add_action('init', 'register_my_menus');

9. ปรับแต่งเพิ่มเติม

Single.php: คัดลอกจาก index.php แล้วปรับให้แสดง the_content() แทน the_excerpt()
Page.php: คล้าย single.php แต่ไม่มี metadata เช่นวันที่
CSS เพิ่มเติม: เขียนสไตล์เพิ่มใน style.css เพื่อปรับแต่งให้เข้ากับดีไซน์ของคุณ

10. ทดสอบและ Optimize

เปิดใช้งานธีมใน WordPress Admin (Appearance > Themes)
ใช้เครื่องมืออย่าง “PageSpeed Insights” เพื่อดูว่าโหลดช้าหรือไม่
ลดการโหลดไฟล์ที่ไม่จำเป็น (เช่น ปิดฟีเจอร์ WordPress ที่ไม่ใช้ ดังที่คุยกันก่อนหน้า)

เคล็ดลับเพิ่มเติม

ใช้ Bootstrap Grid: ออกแบบเลย์เอาต์ด้วย row และ col-* เพื่อให้ responsive
Components: ลองใช้ปุ่ม, cards, modals หรือ carousel ของ Bootstrap ในธีม
Custom CSS: ถ้า Bootstrap ไม่ครอบคลุมดีไซน์ที่ต้องการ ให้เขียนเพิ่มใน style.css
ระวังน้ำหนัก: Bootstrap อาจทำให้ธีมหนักขึ้น ถ้าไม่ใช้ทุกฟีเจอร์ ให้คอมไพล์เฉพาะส่วนที่ต้องการด้วย Sass (ดูใน Bootstrap docs)

Uncategorized