ชำแหละ Code เพราะเนื่องจาก CMS ที่ได้รับความนิยม เป็นอย่างสูง ในตอนนี้ และรองรับการออกแบบเว็บไซต์ในทุก style ง่ายต่องาน design แต่มีระบบการทำงานที่ง่ายไม่ซับซ้อนและมีผู้ใช้กันอย่างล้นหลามคงต้องยกให้ 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 ได้มากขึ้น ไม่มากก็น้อยนะครับ ไว้มา ชำแหละ กันต่อ คราวหน้าครับ
คุณอาจสนใจเรื่องนี้
