มีหลายๆ ท่าน PM มาถามผมเรื่องของการปรับแต่งเจ้า
Themplate Wordpress ต้องศึกษาอะไรบ้าง
ถ้าให้ผมตอบคงต้องศึกษาการเขียนโปรแกรมหรือการใช้โปรแกรมเยอะพอสมควร แต่จริงๆ แล้วเราไม่จำเป็นต้องรู้หรือศึกษาทุกๆ เรื่อง
โดยผมถึอปรัชญาว่า
"รู้เท่าใหน ทำมันเท่านั้นให้ดีที่สุด" แต่ไม่ใช่ว่าไม่รู้อะไรเลยนะครับ
มาเริ่มเข้าเรื่องกันเลยดีกว่านะครับ
ก่อนจะเริ่มปรับแต่งเราควรจะรู้จักโครงสร้างไฟล์ใน Themplate กันก่อนนะครับstyle.css เป็นไฟล์ที่ใช้เก็บ Stylecheet และ ตัว Refference ถึง Themplate นะครับindex.php เป็นไฟล์หน้าแรกของ Themplate header.php เป็นไฟล์แยกส่วนหัวของ Themplate ส่วนใหญ่ก็จะมี element ของ css , javascript และส่วนหัวของหน้า Themplatefooter.php ตามชื่อครับเป็นไฟล์ส่วนท้ายsidebar.php เป็นส่วนข้างของ Themplate จะอยู่ด้านซ้ายหรือขวา แล้วแต่การวาง Layout ของ Themeplate ครับsingle.php เป็นไฟล์แสดงรายละเอียดของแต่ละ permalink ครับpage.php เป็นส่วนหน้าที่เราสร้างจาก wp เช่นพวก about me ที่เก็บ Folder Themplate อยู่ที่ wp-content\themesมาทำความรู้จักกับ codex ว่ามันคืออะไรกันนะครับ codex มันคือ Function Refference เป็น Document ที่รวมฟังก์ชั่นการทำงานที่ wp สร้างขึ้นเพื่อความสะดวกในการใช้งาน โดยจะจัดเป็นหมวดหมู่ สำหรับผมแล้วนึกอะไรไม่ออกก็จะมาเปิด Document ตัวนี้อ่านดู มันก็จะมีรายละเอียด และตัวอย่างให้เรา ซึ่งค่อนข้างสะดวก และน่าจะเป็นอีกเหตุผลหนึ่งที่ wp เป็น CMS ที่ได้รับความนิยม เนื่องจากแก้ไขง่าย รายละเอียด
http://codex.wordpress.org/Function_Reference 
HTML Tag ที่ชื่อว่า DIV นั้นสำคัญอย่างไร ในสมัยก่อนนั้นเวลาเราสร้างเว็บไซต์ขึ้นการจัด Layout ต่างๆ นั้นนิยมที่จะใช้ Table เพื่อจัดตำแหน่งต่างๆ ของหน้าเว็บเรา ผลก็คือ เมื่อเราจะทำการปรับหรือแก้ไขหน้าเว็บนั้นๆ ค่อนข้างทำได้ยาก ตัวอย่างนะครับ
<table border="0">
<tr>
<td>
<table border="0">
<tr>
<td>
<table border="0">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
ท่านดูด้านบนแล้วก็ค่อนข้างงง ซึ่งมันเกิดจากการซ้อนกันของ Table ทำให้อ่านและแก้ไขยาก ปัจจุบันเขาจึงนิยมใช้ div มาเพื่อจัดตำแหน่งของหน้าเว็บแทน ซึ่งเจ้า div นั้นมันสามารถทำงานกับ css ได้อย่างมีประสิทธิภาพ และเข้ากับ SEO Onpage เป็นอย่างดี ลองมาดูตัวอย่างนะครับ
<html>
<header></header>
<body>
<div id="header"></div>
<div id="content>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
สังเกตุด้านบนว่า div นั้นอ่านง่ายกว่าการใช้ Table มาก ฉะนั้นปัจจุบัน Template ต่างๆ ก็จะนำ div มาจัด Layout ต่างๆ ของหน้าเว็บไซต์แทน
เจาะลึกถึงไฟล์ใน Template ไฟล์ต่างๆ ตามโครงสร้างไฟล์ของ Template มีส่วนหนึ่งที่ใช้ในการประกอบกันเป็นเป็นหน้าตาของเว็บเพจ คือ
1. header.php
2. footer.php
3. sidebar.php
4. กรณีที่มีหลายๆ column
เพราะเหตุใด wp ถึงแยกไฟล์เหล่านี้ออกมา สาเหตุคือแทบทุกเพจของหน้าเว็บมีการแสดงผลของส่วนต่างๆ ที่ซ้ำักัน ไม่ว่าจะเป็น header , footer หรือ sidebar จึงแยกเพื่อสะดวกต่อการแก้ไข ฉะนั้ันเราก็จะทราบแล้วว่า ไฟล์ดังกล่าว เป็นที่เก็บ code ของส่วนประกอบต่างๆ ของหน้าเว็บเพจ
index.php เป็นไฟล์ที่รวมองค์ประกอบของ header , sidebar , footer และส่วนแสดงของ post มาดูตัวอย่างกัน
<?php get_header(); ?>
<!-- BEGIN content -->
<div id="content">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<!-- BEGIN post -->
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a>
<?php the_excerpt(); ?>
<p class="date"><?php the_time('F j, Y') ?> <span class="category"><?php the_category(', ') ?></span> <span class="comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></a></p>
</div>
<!-- END post -->
<?php endwhile; ?>
<p class="postnav">
<?php next_posts_link('« Older Entries'); ?>
<?php previous_posts_link('Newer Entries »'); ?>
</p>
<?php else : ?>
<div class="notfound">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that is not here.</p>
</div>
<?php endif; ?>
</div>
<!-- END content -->
<?php get_sidebar(); get_footer(); ?>
สังเกตุว่าจะมี code PHP และ HTML ปนกัน และแยกเป็นองค์ประกอบชัดเจน โดยส่วนหัวจะมีฟังก์ชั่น get_header(); ซึ่งจะดึงข้อมูลจากไฟล์ header.php โดยช่วงกลางจะเป็นการดึง post มาแสดง และส่วนท้ายก็จะเป็น get_footer(); ซึ่งก็จะดึงข้อมูลจากไฟล์ footer.php มา
จากตัวอย่างจะเห็นว่าองค์ประกอบของหน้า index.php นั้นไม่ได้ยุงยากและซับซ้อน ซึ่งส่วนใหญ่แล้วก็จะใช้งานฟังก์ชั่นจาก codex ปนกับ Tag DIV เป็นหลัก
single.php จะคล้ายๆ กับไฟล์ index.php ครับ แต่ไฟล์นี้จะแสดง post เพียงแค่รายการเดียวแทน มาดูตัวอย่างครับ
<?php get_header();?>
<!-- BEGIN content -->
<div id="content">
<?php
if (have_posts()) : the_post();
?>
<!-- begin post -->
<div class="single">
<h2><?php the_title(); ?></h2>
<p class="details">
<?php the_time('F j, Y') ?> |
<?php the_category(', ') ?>
</p>
<div class="break"></div>
<?php echo the_content(); ?>
<p class="tags">Tags: <?php the_tags('', ', ', ''); ?></p>
</div>
<!-- end post -->
<div id="comments">
<?php comments_template(); ?>
</div>
<?php else : ?>
<div class="notfound">
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that is not here.</p>
</div>
<?php endif; ?>
</div>
<!-- END content -->
<?php get_sidebar(); get_footer(); ?>
สังเกตุว่า code จะไม่แตกต่างจาก index.php มากนั้น เพียงแค่เพิ่มส่วนของ comment เข้ามา ในเบื่องต้นขอพูดไฟล์ต่างๆ เพียงเท่านี้นะครับ
ติดตามตอนต่อไปครับ
พัฒนาเว็บไซต์
