เขียน Theme WordPress ใช้เอง - TsupamaN.com https://www.tsupaman.com/tag/เขียน-theme-wordpress-ใช้เอง ทำเว็บไซต์ด้วย Wordpress Fri, 16 Aug 2013 02:23:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 การเขียน Theme WordPress ตอนที่ 2 https://www.tsupaman.com/2013/08/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%82%e0%b8%b5%e0%b8%a2%e0%b8%99-theme-wordpress-%e0%b8%95%e0%b8%ad%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88-2 Fri, 16 Aug 2013 01:49:55 +0000 https://www.tsupaman.com/?p=264 จากบทความที่แล้ว การเขียน 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('&laquo;', true, […]

The post การเขียน Theme WordPress ตอนที่ 2 appeared first on TsupamaN.com.

]]> จากบทความที่แล้ว การเขียน 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('&laquo;', 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('&laquo;', 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">&copy; Copyright 2013 tsupaman.com All rights reserved. Powered by WordPress.</p>

		<div class='clear'>&nbsp;</div>
	</div>

   </div>	
   <div class='clear'>&nbsp;</div>
   <?php wp_footer(); ?>
</div>
</body>
</html>
  •  จะเห็นว่า ในไฟล์  footer นัั้น แทบไม่มีอะไรเลย นอกจาก tag ปิดต่างๆ ที่สร้างขึ้นใน header.php เราแค่ประกาศ <?php wp_footer(); ?> เพื่อบอกให้รู้ว่า สิ้นสุด footer แล้วนะเท่านั้นเอง นอกนั้นจะใส่โค้ดอะไร ค่อยมาว่ากันทีหลังครับ

วันนี้ขอจบการสร้าง theme wordpress ใช้งานเองแค่ header กับ footer นะครับ ครั้งหน้าจะเข้าสู่หน้า index กัน

บทความโดย tsupaman.com

The post การเขียน Theme WordPress ตอนที่ 2 appeared first on TsupamaN.com.

]]>