จากบทความที่แล้ว การเขียน theme wordpress ตอนที่ 1 เรารู้จักกับ โครงสร้างของ wordpress กันไปแล้ว วันนี้มาเตรียมตัวกัน ว่าจะต้องทำอะไรบ้างครับ เริ่มจาก
- ไฟล์ Worksheet อันนี้ ลองเอาไปอ่านศึกษากันดู หน้าเดียว แต่รวบรวมทุกอย่างไว้เกือบทั้งหมด คลิกดาวน์โหลด แล้วมาเริ่มกันเลย
การสร้าง Theme WordPress ใช้งานเอง
- สร้างไฟล์ header.php เขียนอย่างไร
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link href="<?php bloginfo('template_url'); ?>/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_url'); ?>/css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-func.js"></script>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="container">
<!-- body zone in file index.php -->
อธิบาย header.php
- ประกาศ doctype + <html> และ <head> ตามนี้ (สามารถนำไปใช้ได้ทุกธีม)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11">
- ประกาศ meta tag และ title (จะเห็นว่า ในแท็กเหล่านี้ มีคำสั่ง php แทรกตลอดเช่น <?php bloginfo(‘name’); ?> คือประกาศชื่อ blog name ของเว็บครับ)
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
- การประกาศใช้ stylesheet และ จาวาสคริปต์ ตบท้ายด้วย pingback และ <?php wp_head(); ?> เพื่อให้รู้ว่า จบส่วนของ header แล้วนะ
<link href="<?php bloginfo('template_url'); ?>/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_url'); ?>/css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-func.js"></script>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
ปล. หากจะใช้ path ของธีม ให้ใช้ <?php bloginfo(‘template_url’); ?> เป็นตัวอ้างอิงแบบนี้ <img src=”<?php bloginfo(‘template_url’); ?>/images/picture.jpg” /> เป็นต้น ชื่อไฟล์ต่างๆ รูปภาพ ก็สามารถใช้ path นี้ได้
จากการใช้งานเบื้องต้น สามารถนำโค้ดตัวอย่างนี้ไปใช้ได้เลย เปลี่ยนแค่ stylesheet name หรือ javascript ต่างๆเท่านั้นเองครับ
- สร้างไฟล์ footer.php เขียนอย่างไร
<div class="footer">
<div id="credit">
<p class="copyright">© Copyright 2013 tsupaman.com All rights reserved. Powered by WordPress.</p>
<div class='clear'> </div>
</div>
</div>
<div class='clear'> </div>
<?php wp_footer(); ?>
</div>
</body>
</html>
- จะเห็นว่า ในไฟล์ footer นัั้น แทบไม่มีอะไรเลย นอกจาก tag ปิดต่างๆ ที่สร้างขึ้นใน header.php เราแค่ประกาศ <?php wp_footer(); ?> เพื่อบอกให้รู้ว่า สิ้นสุด footer แล้วนะเท่านั้นเอง นอกนั้นจะใส่โค้ดอะไร ค่อยมาว่ากันทีหลังครับ
วันนี้ขอจบการสร้าง theme wordpress ใช้งานเองแค่ header กับ footer นะครับ ครั้งหน้าจะเข้าสู่หน้า index กัน
« [บทความ] ฉันจะทำเว็บอะไรดี ถึงจะมีเงินผ่อนบ้าน
iMacros Bomb [Case Study] : หารายได้ทางเน็ต สมัครผ่าน Google Sheet »
Comments