การสร้าง 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.

]]> การเขียน Theme WordPress ตอนที่ 1 https://www.tsupaman.com/2013/07/how-to-create-theme-wordpress-1 https://www.tsupaman.com/2013/07/how-to-create-theme-wordpress-1#comments Wed, 24 Jul 2013 07:39:30 +0000 https://www.tsupaman.com/?p=253 ก่อนที่เราจะมาเริ่มเขียน Theme WordPress ใช้งานเองนั้น เรารู้จักกับ WordPress ดีพอหรือยัง สามารถใช้งานมันได้เต็มประสิทธิภาพแล้วหรือยัง เรียนรู้ระบบต่างๆภายในแล้วหรือยัง รู้จักภาษา PHP และ HTML (CSS,JavaScript) แล้วหรือยัง  เป็นต้น หากเราไม่มีข้อมูลพวกนี้อยู่เลย การเขียน Theme WordPress นี้ คงเป็นเรื่องยากแล้วล่ะครับ ยิ่งเกริ่นนำยิ่งออกทะเล เดี๋ยวจะหมดกำลังใจที่จะเขียน Theme กันก่อน เอาล่ะมาเริ่มกันเลย มารู้จักกับโครงสร้างของ WordPress ดูจากรูปโครงสร้างด้านบนแล้วงงกันมั๊ยครับ ผมจะอธิบายทีละฉากละกัน การทำงานของ wordpress หลักๆจะมี 3 ส่วนคือ หัว ตัวและขา ดังนี้ ส่วนหัว Head -> header.php ส่วนตัว Content -> index.php , sidebar.php , category.php , archives.php , single.php […]

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

]]> ก่อนที่เราจะมาเริ่มเขียน Theme WordPress ใช้งานเองนั้น เรารู้จักกับ WordPress ดีพอหรือยัง สามารถใช้งานมันได้เต็มประสิทธิภาพแล้วหรือยัง เรียนรู้ระบบต่างๆภายในแล้วหรือยัง รู้จักภาษา PHP และ HTML (CSS,JavaScript) แล้วหรือยัง  เป็นต้น หากเราไม่มีข้อมูลพวกนี้อยู่เลย การเขียน Theme WordPress นี้ คงเป็นเรื่องยากแล้วล่ะครับ ยิ่งเกริ่นนำยิ่งออกทะเล เดี๋ยวจะหมดกำลังใจที่จะเขียน Theme กันก่อน เอาล่ะมาเริ่มกันเลย

มารู้จักกับโครงสร้างของ WordPress

anatomy-wordpress-yoast

ดูจากรูปโครงสร้างด้านบนแล้วงงกันมั๊ยครับ ผมจะอธิบายทีละฉากละกัน การทำงานของ wordpress หลักๆจะมี 3 ส่วนคือ หัว ตัวและขา ดังนี้

  • ส่วนหัว Head -> header.php
  • ส่วนตัว Content -> index.php , sidebar.php , category.php , archives.php , single.php เป็นต้น
  • ส่วนขา Foot -> footer.php

ก็ยังงงล่ะสิท่า ดูภาพดีฟ่าครับ

default-homepage

ที่จะบอกก็คือ คุณต้องรู้ก่อนว่าในการเขียน Theme WordPress นั้น คุณจะต้องรู้ว่ามันมีไฟล์อะไรบ้างที่จะสร้าง Theme ขึ้นมาได้ โดย WordPress จะกำหนดไฟล์เหล่านี้มาโดยเฉพาะเลยก็ว่าได้ ไฟล์ที่ว่ามีดังนี้

  1. header.php เป็นไฟล์ส่วนหัว สำหรับประกาศพวกแท็ก html , head , body อะไรก็ว่ากันไป
  2. footer.php หัวแล้วก็มาท้าย footer.php สำหรับปิดแท็กหรือจบทุกอย่างไว้ในส่วนท้าย
  3. index.php ตัวสำคัญที่จะทำให้หน้าแรกของคุณเกิดขึ้นมาได้ ประกอบไปด้วยหลายๆไฟล์มารวมกัน เช่น search.php , nav.php , sidebar.php , category.php , archives.php , tag.php , single.php , page.php เป็นต้น
  4. category.php สำหรับหน้าหมวดหมู่ต่างๆ หากไม่มีสามารถใช้ archives.php ทดแทนกันได้ ไม่ซีเรียสนะ
  5. single.php มันคือหน้าบทความที่เราอ่านๆกัน ให้นึกถึงตอนเราสร้าง Post ใน WordPress
  6. page.php หน้าเพจเช่นพวก about , contact ให้นึกถึงตอนเราสร้าง Page ใน WordPress
  7. sidebar.php มันคือข้อมูลด้านข้าง การใช้งานเอาไว้มาลงรายละเอียดกันอีกทีครับ
  8. comments.php สำหรับถามตอบและแสดงความคิดเห็น จะอยู่ในส่วนของ single.php
  9. functions.php ไฟล์นี้ค่อนข้างจำเป็นสำหรับเติมเต็มให้ WordPress มีชีวิตชีวาครับ เอาไว้มาลงรายละเอียดกันอีกทีนะ
  10. style.css สำหรับจัดการรูปแบบที่สวยงามของเว็บไซต์ ไม่บังคับ
  11. screenshot.jpg ภาพสำหรับแสดงรูปตอนเราเปลี่ยนธีมครับ

หมดละครับ หลักๆก็จะมีแค่นี้เอง รู้ไว้คร่าวๆแค่นี้ก็พอ รายละเอียดลงลึกเอาไว้เจอกันใน การเขียน Theme WordPress ตอนที่ 2 ครับ

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

]]> https://www.tsupaman.com/2013/07/how-to-create-theme-wordpress-1/feed 1