ตัวอย่างเอกสารประกอบการสอนหลักสูตร WordPress Baby to Ninja รายละเอียด : http://cloud-tutorial.com/wordpress-theme-baby-to-ninja/

2. Course
แนะนำคอร์สเรียน
WordPress Theme Baby To Ninja ผมจะแบ่งออกเป็น 2
ส่วนเพื่อให้ผู้เรียนสามารถกลับมาทบทวนได้ง่ายๆครับ ในส่วนแรกผมจะแบ่ง
ออกเป็นพื้นฐานของ WordPress Theme ครับโดยที่ผมได้แบ่งออกเป็น
หัวข้อย่อยๆไว้แล้ว และหลังจากที่จบพื้นฐานแล้วเราจะนาความรู้ทั้งหมดมา
ใช้เพื่อประยุกต์เป็น WordPress Theme ครับส่วนเรื่องเด่นๆ ที่ผมนามาใส่ไว้
ในคอร์สของ WordPress Theme นั้นก็จะมีพวกการ Hooks ครับและการ
ทาให้ Theme ของเรา Support กับปลักอิน Ecommerce ยอดนิยมอย่าง
Woo Commerce แค่นี้ยังไม่พอครับ ผมยังได้สอนถึงการ Hooks และ
Overrides เจ้าตัว Woo Commerce อีกด้วย
หลังจำกที่เรียนแล้วผู้เรียนจะได้อะไรจำกหลักสูตรนี้บ้ำงเรำมำดูกันนะครับ
1. รู้จักกับเว็บ CMS ข้อดีและข้อเสีย
2. พื้นฐานการพัฒนาเว็บไซต์ด้วย WordPress
3. พื้นฐานการสร้างธีมของ WordPress
4. การประยุกต์การสร้างชิ้นงานจริงจากองค์ความรู้ทั้งหมด
5. ได้เทคนิคต่างๆที่ทันสมัยโดยที่ผู้สอนคอยสอดแทรกให้ระหว่างการสอน
6. สามารถนาความรู้ไปต่อยอดเพื่อสร้างรายได้จากที่เรียนมา
สิ่งที่ผู้เรียนจะได้รับจำกหลักสูตรนี้

3. CMS & WORDPRESS
แนะนำคอร์สเรียน
CMS คืออะไร ? หลายๆคนที่อ่านบทความนี้อาจจะเป็นมือใหม่
เดี๋ยวผมขออธิบายสักนิดนึง CMS คือ Content Management System
หรือภาษาบ้านๆนะครับมันเป็นระบบเอาไว้จัดการองค์ประกอบหรือข้อมูลที่
เราต้องการให้มันแสดงบนหน้าเว็บของเรานะแหละ โอเค ตอนนี้เรารู้จัก CMS
กันแล้วและมันเกี่ยวอะไรกับหัวข้อ รู้จักกับ WordPress ใช่มั้ยครับ นั่นก็
เพราะว่าไอ้ตัว WordPress ที่ว่าเนี่ย มันก็เป็น CMS ตัวนึงเหมือนกันซึ่งเป็นที่
นิยมกันอย่างแพร่หลายและใช้งานกันทั่วโลกเลยทีเดียว
WordPress คือ ? ตามที่บอกด้านบนครับมันเป็น CMS ที่ได้รับ
ความนิยมเป็นอย่างมากเพราะด้วยความที่ว่ามันใช้งานค่อนข้างง่ายและอิสระ
ต่อการจัดการข้อมูล และ ด้วยความที่มีคนใช้เยอะมากรวมถึงเว็บ
Thapwaris.me และ Cloud-tutorial.com ของผมทั้ง2เว็บนี้ก็เป็น
WordPress เหมือนกันครับ มันเลยทาให้มีพวก Plugins , Widgets และ
Themes ออกมาให้เราได้ใช้มากมายทั้งฟรี และไม่ฟรี
หลังจำกที่เรียนแล้วผู้เรียนจะได้อะไรจำกหลักสูตรนี้บ้ำงเรำมำดูกันนะครับ
1. รู้จักกับเว็บ CMS ข้อดีและข้อเสีย
2. พื้นฐานการพัฒนาเว็บไซต์ด้วย WordPress
3. พื้นฐานการสร้างธีมของ WordPress
4. การประยุกต์การสร้างชิ้นงานจริงจากองค์ความรู้ทั้งหมด
5. ได้เทคนิคต่างๆที่ทันสมัยโดยที่ผู้สอนคอยสอดแทรกให้ระหว่างการสอน
6. สามารถนาความรู้ไปต่อยอดเพื่อสร้างรายได้จากที่เรียนมา
สิ่งที่ผู้เรียนจะได้รับจำกหลักสูตรนี้

4. WordPress
ข้อดีของ WordPress
• เป็น Open Source นั่นก็หมายความว่าเราสามารถใช้ได้ฟรีและเอามาประกอบอาชีพเพื่อหาเงินได้นั่นเอง
• มีฐานผู้ใช้งานจานวนมาก ปัจจุบันส่วนแบ่งการตลาดของ WordPress คือ 66% นะครับและยังมีแนวโน้มที่
จะมากขึ้นเรื่อยๆ
• เนื่องจากมีฐานผู้ใช้งานมาก บทความต่างๆที่กล่าวถึงการใช้งานและข้อมูลของ WordPress เองนั่นก็มีมากขึ้น
ตามไปด้วย
• WordPress สามารถทาได้มากกว่า Blog แต่ยังสามารถทาระบบจัดการข้อมูลต่างๆได้ด้วย เช่น เว็บ Course
Online ที่มีทั้งการกาหนดสิทธิ user และการทา marketing หรือการทาเว็บโรงแรมที่มีระบบจองห้องพัก
เป็นต้น
• WordPress สามารถใช้งานได้ง่ายทั้งระบบ Frontend ที่สวยงาม และ Backend ที่สามารถจัดการข้อมูลได้
อย่างรวดเร็ว
• สามารถติดตั้ง Themes และ Plugins เพื่อเพิ่มประสิทธิภาพการทางานได้
• มี Themes และ Plugins ให้เลือกใช้มากมายทั้ง ฟรี และไม่ฟรี

5. WordPress
ข้อดีของ WordPress
• รองรับ SEO ได้อย่างดีโดยเฉพาะ Google
• อัพเดตเวอร์ชั่นอยู่ตลอดเวลาทาให้มีระดับความปลอดภัยค่อนข้างสูง
• มีระบบ media สาหรับจัดการไฟล์ประเภทต่างๆเช่น รูปภาพ เพลง หรือวิดีโอ
• รองรับการทางานแบบ Responsive
• สามารถศึกษาโครงสร้างของ WordPress และพัฒนา Themes หรือ Plugins เพื่อมาใช้งานเองได้
• สามารถเชื่อมต่อกับ Social Network ต่างๆได้อย่างง่าย
• สามารถหา Hosting เพื่อติดตั้งได้ทั่วไป
• ประหยัดเวลาชีวิตในการทาเว็บไซต์ให้ลูกค้าได้อย่างมาก
• สามารถทา E-commerce ได้
• สามารถทา Web board ได้
• ไม่ต้องเขียน Code ก็สามารถสร้างเว็บไซต์ได้

6. 1. เนื่องจำกเป็น CMS จึงทำให้มีขนำดไฟล์ค่อนข้ำงใหญ่
2. หำกไม่อัพเดตเวอร์ชั่นบ่อยๆอำจเสี่ยงต่อกำรโดนโจมตีได้
3. ถ้ำหำกมีกำรใช้งำน Plugins จำนวนมำกอำจทำให้เว็บโหลดช้ำได้
ข้อเสียของ WordPress

7. TOOLS
เครื่องมือที่จำเป็นต้องใช้
1. XAMPP -> โปรแกรมจำลองเซิร์ฟเวอร์
2. BRACKETS.IO -> โปรแกรมสำหรับเขียนโค๊ด
3. WORDPRESS -> เว็บ CMS
ดำวนโหลด
ดำวนโหลด
ดำวนโหลด

8. WordPress Structure
รู้จักกับโครงสร้ำงพื้นฐำนของ WordPress
header.php
index.php
single.php
page.php
search.php
archieve.php
และไฟล์อื่นๆที่ใช้ในกำรแสดงคอนเทนต์
sidebar.php
footer.php
โฟลเดอร์หลัก (ชื่อธีม)
.PHP
Header.php
.PHP
Index.php
.PHP
Footer.php
.css
Style.css
.PHP
Functions.php
Assets [css | JavaScript | images]
อื่นๆ
Screenshot.png/jpg

9. STYLE.CSS
กำรสร้ำงไฟล์ style.css
Style.css ตัวนี้ไม่ใช่ไฟล์สาหรับเก็บ Style
Sheet โดยตรงแต่มันคือไฟล์สาหรับประกาศถึงรายละเอียด
ต่างๆภายใน Theme ที่เราได้ทาการสร้างขึ้น โดยมี
รายละเอียดคร่าวๆเช่น ชื่อธีม ผู้สร้าง ลิ้งต้นทาง ประเภท
ของธีม รายละเอียดด้านลิขสิทธิ์ เป็นต้น
/*
Theme Name: ชื่อธีม
Theme URI: ลิ้งต้นทางของธีม
Author: ผู้สร้างธีม
Author URI: ลิ้งต้นทางผู้สร้าง
Description: รายละเอียดของธีม
Version: เวอร์ชั่น เช่น 1.0
License: ข้อมูลด้านลิขสิทธิ์ เช่น GNU General Public License v2 or later
License URI: ลิ้งต้นทางข้อมูลด้านลิขสิทธิ์ http://www.gnu.org/licenses/gpl-2.0.html
Tags: ประเภทแท็กสาหรับธีม
Text Domain: ชื่อธีมสาหรับใช้อ้างอิงในการประกาศฟังชั่น เช่น cloudtutorial
*/
style.css
Codex WordPress Reference | style.css

10. HEADER.PHP
กำรสร้ำงไฟล์ header.php
header.php เป็นไฟล์เริ่มต้นที่ทุกๆธีมต้องมีใช้
ในการประกาศหัวข้อเอกสาร Html และการเรียกใช้ฟังชั่น
ต่างๆสาหรับ WordPress โดยโครงสร้างเริ่มต้นคร่าวๆจะมี
ดังเช่นตัวอย่าง
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
header.php
*สาคัญต้องใส่ก่อนปิด </header>
ฟังชั่นสาหรับแสดงชื่อเว็บไซต์
ประกาศรูปแบบอักขระ
ประกาศ Lang Attribute
Codex WordPress Reference | Header.php

11. FOOTER.PHP
กำรสร้ำงไฟล์ footer.php
Footer.php เป็นส่วนท้ายของเอกสาร Html
และ WordPress เช่นกัน โดยส่วน footer นี้จะมีการเรียกใช้
งานในส่วนของ control panel ด้วย ถ้าหากธีมของเราไม่มี
การเรียกใช้งาน footer ก็จะทาให้เราไม่สามารถเข้าใช้งาน
ระบบจัดการข้อมูลได้เช่นกัน
<?php wp_footer(); ?>
</body>
</html>
footer.php
* สาคัญเรียกใช้ก่อนปิด </body>
Codex WordPress Reference | footer.php

12. INDEX.PHP
กำรสร้ำงไฟล์ index.php
Index.php เป็นไฟล์สาหรับใช้สาหรับรวบรวม
โครงสร้างไฟล์ต่างๆเพื่อนาออกไปเรนเดอร์ออกทางเว็บเบรา
เซอร์ และส่วนประกอบสาคัญที่จะขาดไม่ได้คือการ
get_header() และ get_footer() เพื่อทาการเรียกมาใช้งาน
นั่นเอง
<?php get_header ?>
// คอนเทนต์ต่างๆ หรือ เรียกใช้งาน the loop ในการแสดงบทความต่างๆ
<?php get_footer ?>
Index.php
เรียกใช้เพื่อดึงข้อมูลจากไฟล์ header.php
เรียกใช้เพื่อดึงข้อมูลจากไฟล์ footer.php

13. FUNCTIONS.PHP
กำรสร้ำงไฟล์ functions.php
Functions.php เป็นไฟล์ที่รวบรวมโค้ดคาสั่ง
ต่างๆ ที่จะช่วยเพิ่มขีดความสามารถให้กับธีมของเรา เช่นการ
เรียกใช้งาน Style และ Stylesheet หรือแม้แต่การกาหนด
รูปแบบของ Feature Images ก็สามารถทาได้เช่นกัน
#add filter Search
function my_filter_search_form( $form ) {
$form = '
<form role="search" method="get" id="searchform" class="search-widget" action="' . home_url( '/' )
. '" >
<input type="search" class="form-control" value="' . get_search_query() . '"
name="s" id="s" />
<i class="fa fa-search"></i>
</form>';
return $form;
}
add_filter( ‘ get_search_form', ‘ my_filter_search_form' );
ตัวอย่ำงโค๊ดในไฟล์ functions.php
1. สร้างฟังชั่นสาหรับ hook ฟอร์ม search
2. รับตัวแปร $form ที่ถูก return ออกมาให้
3. ประกาศตัวแปร $form
และข้อมูลที่ต้องการ hook
4. ส่งค่าที่อยู่ใน $form กลับไปให้ฟังชั่น
my_filter_search_form()
5. ฟังชั่นสาหรับ hook โดยการ filter
6. ฟังชั่นที่เราต้องการ filter
8. ฟังชั่นที่เราต้องการส่งเข้าไป hook

14. End for Preview…