ชำแหละ Code WordPress ตอน Theme

wordpress

ชำแหละ Code เพราะเนื่องจาก CMS ที่ได้รับความนิยม เป็นอย่างสูง ในตอนนี้ และรองรับการออกแบบเว็บไซต์ในทุก style ง่ายต่องาน design แต่มีระบบการทำงานที่ง่ายไม่ซับซ้อนและมีผู้ใช้กันอย่างล้นหลามคงต้องยกให้ WordPress

ชำแหละ wordpress

ผมพยายามที่จะหยิบเอาสื่อของ wordpress มาแนะนำให้เพื่อนๆได้รู้จัก แต่รู้สึกว่ามีน้อนเสียเหลือเกิน เดินเข้าไปที่ร้า้นหนังสือตามห้างก็มีแค่เล่มเดียวและเป็นการใช้งานแบบพื้นฐานเบื้องต้น

วันนี้ผมเลยจะหยิบเอา Code ข้างในของ wordpress มาให้ได้รู้จักกัน แต่เนื้อในของเค้าเยอะมากจริงๆ เอาเป็นว่า ผมจะทยอยเล่าเป็นตอนๆไปแล้วกันนะครับ

เวลาที่คุณ Download file ของ WordPress มาติดตั้ง ในนั้นจะมี Folder ต่างๆแต่เราจะพูดกันถึงเฉพาะที่เกี่ยวข้องกับ Theme เท่านั้นนะครับ

1.ให้เข้าไปที่ Folder wp-content
2.จากนั้นเข้าไปที่ Folder themes
3.จากนั้นคุณจะพบกับไฟล์ของ theme ต่างๆที่คุณติดตั้งเข้าไปใช้ และจะมี theme ชื่อ twentyten อยู่เพราะเป็น theme พื้นฐานที่ wordpress ให้มา

Path : C:\xampp\htdocs\wordpress\wp-content\themes

ข้างในนั้นจะประกอบไปด้วยไฟล์ php ต่างๆและรูปภาพ ทั้งหมดที่เกี่ยวข้อง

ส่วนไฟล์ที่เป็นโครงสร้างของ WordPress นั้นมีดังนี้ครับ

1.header.php – ไฟล์ที่เป็น Code ของ Header section ด้านบนส่วนใหญ่แล้วเราจะให้เป็น Banner logo slogan ส่วน Code จะมีทั้งหมดที่เป็นการเริ่มต้นของ Page รวมอยู่ เช่น title head meta language stylesheet

<!DOCTYPE html> 
<html <?php language_attributes(); ?>>
 <head> 
     <meta charset="<?php bloginfo( 'charset' ); ?>" /> 
     <title> if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; </title> 
     <link rel="profile" href="http://gmpg.org/xfn/11" /> 
     <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> 
     <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

2.index.php – ไฟล์สำหรับหน้าหลักของ wordpress เมื่อเรียก URL เข้ามา เก็บ Code ที่ดึงขึ้นมาจากหน้าต่างๆเพื่อแสดงผลในหน้าแรก เช่น

get_header();
get_template_part( 'loop', 'index' );
get_sidebar();
get_footer();

3.sidebar.php – เป็นไฟล์ที่มีไว้สำหรับแสดงผลเมนูด้านข้าง ข้อมูลส่วนใหญ่จะเป็น widget ทั้งหลาย เช่น

get_search_form();
wp_get_archives( 'type=monthly' );
wp_register();
dynamic_sidebar( 'secondary-widget-area' );

4.single.php – ไฟล์สำหรับการอ่านบทความด้านในแต่ละ POST ซึ่งจะเน้นไปที่เนื้อหานะครับ

ส่วนใหญ่จะมี Code สำหรับการตรวจสอบว่าบทความอยู่ไหม
if ( have_posts() ) while ( have_posts() ) : the_post();
จากนั้นก็ให้วนออกมาด้วย loop ทั้งหมด

5.page.php – ไฟล์สำหรับการเพิ่มหน้าต่างๆเข้ามาใน wordpress ส่วนนี้จะเป็นการทำหน้าใหม่ขึ้นมาเลยนะครับ เหมือนกับของผมที่ชื่อหน้า รู้จักกันก่อน นั้นแหละ Code ของหน้า Page จะคล้ายกันกับหน้า Single แต่จะอยู่ที่การดึงหมวดหมู่ขึ้นมาและการแสดงผลนะครับ

6.comment.php – ไฟล์สำหรับกล่องกรอกข้อความและการดึงข้อความที่ผู้ใช้เข้ามาแสดงข้อความเอาไว้ในแต่ละบทความ

if ( have_comments() ) :
number_format_i18n( get_comments_number() )
wp_list_comments( array( 'callback' => 'twentyten_comment' ) );

และสุดท้ายเลยคือกล่องรับความคิดเห็น

comment_form();

7.search.php – เป็นไฟล์สำหรับแสดงผลการค้นหาครับ

if ( have_posts() ) ;
get_search_query();

8.archive.php – เป็นไฟล์สำหรับการอ่านบทความตามหมวดหมู่ครับ

rewind_posts();
get_template_part( 'loop', 'archive' );

9.function.php – เป็นไฟล์ที่ใช้เก็บ function พิเศษ ซึ่งจะแตกต่างกันไปในแต่ละ theme ครับ ตัวอย่าง

function twentyten_custom_excerpt_more( $output ) { 
     if ( has_excerpt() && ! is_attachment() ) { 
          $output .= twentyten_continue_reading_link(); 
     } 
     return $output; 
}

9.404.php – ไฟล์สำหรับเวลาที่เรียกหาหน้าไม่พบหรือมีปัญหาจะขึ้นมาแสดงแทน  ส่วนใหญ่จะแสดงข้อความตามนี้ Apologies, but the page you requested could not be found.

10.style.css ไฟล์สุดท้ายที่จะพูดถึงกันในวันนี้ครับ ไฟล์นี้เป็นจุดศูนย์รวมการแสดงผล หน้าตาทั้งหมด เพราะว่าทุกอย่างจะถูกกำหนดเอาไว้ด้วย CSS ที่อยู่ในหน้านี้ครับ ตัวอย่างก็จะเป็นแบบนี้

body { line-height: 1; } 
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } 
ol, ul { list-style: none; } 
blockquote { quotes: none; }

ทั้งหมดที่ผมพูดมานี่ จะเป็นแค่การรู้จักกับไฟล์ต่างๆนะครับ ยังไม่เข้าไปถึงเรื่องของการเขียน Code ใดๆทั้งสิ้น หวังว่านี่คงพอ ทำให้คุณรู้จักกับ โครงสร้างของ WordPress ได้มากขึ้น ไม่มากก็น้อยนะครับ ไว้มา ชำแหละ กันต่อ คราวหน้าครับ

คุณอาจสนใจเรื่องนี้

Word Camp Bangkok 2019 งานของคนรัก WordPress

ธีรภัทร เกษสกุล เป็นคุณพ่อของน้องเกี้ยมอี๋ ที่ไม่รู้ว่าใครซนกว่ากัน ทำงานเป็นโปรแกรมเม่ามือหนึ่ง ประจำบ้าน ถนัดงาน Web Application ชอบงานขีดเขียนเป็นชีวิตจิตใจ ดูหนัง เล่นเกมส์กับลูกชาย เปิดร้านขายหมูสะเต๊ะ อาม่า บน Lineman, Grab food และ Food panda เป็นรายได้เสริมหาเลี้ยงเจ้าแสบ

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top