บางทีการซื้อธีมมาใช้นั้นไม่ได้ตอบโจทย์เรื่อง SEO และ Perfomance เพราะเราแทบไม่รู้เลยว่าธีมที่เราติดตั้งไปนั้นแรกๆอาจจะดี และต่อพอนานวันเข้ากลับทำให้เว็บไซต์ช้าลง ไม่ติดอันดับ โหลดช้า ซึ่งเสี่ยงมากกับค่าใช้จ่ายที่เสียไปกับการซื้อธีม การสร้างธีมเพื่อใช้เองนั้นอาจเป็นอีกหนึ่งทางเลือกสำหรับผู้ที่ต้องการมีธีมเป็นของตัวเอง หรือสร้างเพื่อองค์กรใดองค์กรหนึ่งโดยเฉพาะเจาะจง
สิ่งที่ต้องเตรียม
- OS ระบบปฏิบัติการอะไรก็ได้ที่มีอยู่ ไม่ว่าจะเป็น macOS, Linux, Windows และสามารถลงโปรแกรม VSCode ได้
- VSCode โปรแกรมสำหรับเขียนโค้ด หรือ TextEditor ตัวไหนก็ได้ที่ถนัดหรือสามารถลงกับ OS ที่ใช้อยู่
- ความรู้เบื้องต้นเกี่ยวกับ โค้ด PHP
- Server ไม่ว่าจะเป็น Share Hosting Server หรือ Visual Server ต่างๆ เช่น xamp สำหรับติดตั้งกับ Windows, mamp สำหรับติดตั้งบน macOS, lamp สำหรับติดตั้งบน Linux
- โปรแกรม บีบอัด Winrar หรือ Winzip
เริ่มต้นเขียนโปรแกรม
สร้างโฟลเดอร์ ชื่อ เดียวกันกับ โปรเจคที่จะตั้งชื่อธีม เช่น My Theme ก็ให้ตั้งชื่อ โฟลเดอร์ของโปรเจคว่า My Theme
เปิดโปรแกรม VSCode ขึ้นมา
ให้เลือกไปที่ Folder ที่สร้างไว้ก่อนหน้านี้
ซึ่งเมื่อเปิดขึ้นมาแล้วจะยังไม่มีไฟล์อะไรอยู่ในโฟลเดอร์
ให้ทำการสร้างไฟล์แรก ชื่อว่า style.css ซึ่งไฟล์นี้จะเป็นตัวบ่งบอกรายละเอียดต่างๆของธีมว่าชื่อ ธีมนี้ชื่ออะไร ใครเป็นผู้สร้าง และเจ้าของธีมคือใครชื่ออะไร เว็บไซต์อ้างอิงของนักพัฒนา และแหล่งที่จะสามารถดาวน์โหลดธีมได้
และ Code เบื้องต้นของ Style จะเป็นแบบนี้ และในส่วนนี้เองที่จะเป็น css ที่เราควบคุมรูปธีมให้เป็นไปตามที่ใจเราต้องการ ทั้งสี ตัวหนังสือ แต่แนะนำว่าถ้าเป็นธีมแบบคลีนๆ แล้วไปใช้ page builder เป็นตัวช่วยสร้างดีกว่า
/*
Theme Name: My Theme
Author: Ruk-Com
Description: Clean Theme
Version: 1.0
*/
ไฟล์ต่อมาคือไฟล์ส่วนด้านบนของธีม ที่ใช้ชื่อ ว่า header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
ไฟล์ต่อมาเป็นไฟล์ในส่วน body ของธีม ชื่อไฟล์ว่า index.php
<?php get_header(); ?>
<div id="content">
<!-- Your main content goes here -->
</div>
<?php get_footer(); ?>ต่อมาไฟล์ส่วนด้านล่างของธีม ชื่อไฟล์ว่า footer.php
<?php wp_footer(); ?>
</body>
</html>ส่วนไฟล์ต่อไปจะเป็นไฟล์ที่เพิ่มฟังก์ชั่นต่างของส่วนด้านในของธีม หากแต่การเขียนไฟล์ฟังก์ชั่นสำหรับธีมไฟล์นี้ คือ ชื่อธีมกับชื่อฟังก์ชั่นต่างๆ จะต้องเป็นชื่อเดียวกัน เช่น ตัวอย่างนี้ ไฟล์ธีมชื่อ my theme ดังนี้ ฟังก์ชั่นที่ใช้กับธีมนี้แต่ละฟังก์ชั่นจะต้องขึ้นต้นด้วยคำว่า my_theme ดังนี้
<?php
// Enqueue styles and scripts
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');หากธีม ชื่ออื่น อย่างเช่น ธีมชื่อ fooder ไฟล์ในฟังก์ชั่นนี้จะต้องขึ้นต้นด้วย fooder ดังนี้
<?php
// Enqueue styles and scripts
function fooder_enqueue_styles() {
wp_enqueue_style('fooder-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'fooder_enqueue_styles');ไฟล์ต่อมาจะเป็นไฟล์ screenshot ของ ธีม หรือไฟล์ปกของธีมนั่นเอง ซึ่งจะมีอัตราส่วนของ 900 x 600 px และเป็นไฟล์นามสกุล png เท่านั้น ซึ่งสามารถออกแบบด้วยโปรแกรม Photoshop หรือโปรแกรมอื่นๆ ได้
ทำการ Save As หรือ Export เป็น ไฟล์ PNG
และทำการตั้งชื่อ ไฟล์ว่า screenshot ตามด้วยนามสกุลไฟล์เป็น .png และเก็บไว้ในโฟลเดอร์ของธีมที่เราสร้างขึ้น
และไฟล์ในโฟลเดอร์ทั้งหมดที่อยู่ในธีมนี้ จะมีทั้งหมด 6 ไฟล์ดังนี้
- style
- header
- index
- footer
- functions
- screenshot
Package File
เมื่อเราได้ไฟล์ครบแล้ว ขั้นตอนต่อมาคือการจัดเก็บไฟล์ในรูปแบบ Package ซึ่งต้องใช้โปรแกรมบีบอัดไฟล์ให้เป็นไฟล์นามสกุล .zip เท่านั้น เราถึงจะใช้ธีมที่เราสร้างไปใช้กับ wordpress ได้ โดยให้เราคลิกขวาที่โฟลเดอร์ที่เราสร้างธีมนั้น และ เลือกทำการบีบอัด Add to archive…
และเลือก ประเภทของไฟล์ format เป็น ZIP ไฟล์ และกดตกลง และเราจะได้ไฟล์ธีมของเราเป็นรูปแบบ zip ไฟล์
ทำการติดตั้งธีมบนระบบ wordpress
ให้ทำการติดตั้งเหมือนติดตั้งธีมทั่วๆไป
ทำการเปิดใช้งานธีม
จะเห็นธีมที่สร้างเสร็จแล้วเป็นแบบนี้
ในส่วนการปรับแต่งค่าของธีมจะได้มาประมาณนึง ตาม WordPress Core ที่ให้มาตามระบบของ WordPress
สรุป
การสร้างธีมไว้ใช้เองหรือทำให้บริษัท องค์กรนั้นเป็นส่วนที่ดี ซึ่งได้ธีมที่มีน้ำหนักเบา เมื่อติดตั้งบนระบบ WordPress แล้วทำให้ได้ของเรื่อง Perfomance ซึ่งมีความเร็วมากๆ เหมาะสำหรับทำ SEO และได้ความส่วนตัวของธีม เพราะถูกสร้างมาเพื่อเฉพาะเว็บไซต์นั้นๆ และสามารถเพิ่มฟังก์ชั่นได้เองในธีมด้วย
Related Posts
