ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์CMS & Free Script[แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
หน้า: [1] 2   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2  (อ่าน 5324 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
arusgroup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 123
ออฟไลน์ ออฟไลน์

กระทู้: 503



ดูรายละเอียด เว็บไซต์
« เมื่อ: 05 พฤษภาคม 2012, 16:06:14 »

สาระบัญ:รวม [แชร์แบบบ้านๆ] รวมสาระด้านการเขียน theme

[แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
ตอนที่ 6.2  Header and Footer
ตอนที่ 6.3  bloginfo() Function
ตอนที่ 6.4  loop&Post&page
ตอนที่ 6.5  Navigation

ผมจะใช้theme ที่ง่ายก่อนเพื่อทำเป็นตัวอย่างนะครับ
หลังจากที่เพื่อนๆเข้าใจตัวอย่างแล้วก็ไปประยุคใช้เอานะครับ

ดาวโหลดรูปเพื่อใช้เป็นตัวอย่างนะครับ
source files
ไฟร์css นะครับ


ขั้นตอนแรก
จริงๆเราสามารถทำทุกอย่างให้อยู่ในไฟร์เดี่ยวได้แต่มันจะแก้ไขยากและทำงานลำบากด้วยดังนั้นจึงเป็นเรื่องทีดีถ้าเราใชชุดไฟร์มาตรฐานจากบทที่แล้วครับ
ก่อนอื่นเลย เราสร้างไฟร์ตามนี้ครับในโฟร์เดอร์ชื่อ theme ของเรา

index.php
single.php
page.php
comments.php
functions.php
header.php
footer.php
sidebar.php
style.css

หลังจากนั้นนำไปไว้ที่theme บนwp นะครับ
หลังจากนั้นเราต้องทำให้wp รู้จัก theme เราก่อนนะครับ
เริ่มด้วยใส่ code ตามนี้ลงไปใน style.css
โค๊ด:
/* 
Theme Name: ชื่อtheme
Theme URI: urlของtheme
Description: รายระเอียดของtheme
Author: ผู้เขียน
Version: 1.0
Tags: tag ของเท็มเพจครับ
*/  
หลังจากนั้นเราก็เข้าไปหลังบ้านของwp ครับ
ทีนี้ตัวtheme ของเราจะแสดงขึ้นให้เห็นในwp แล้วครับ

Thanks:   ฝากรูป

เราก็กด activate ครับเพื่อเริ่มใช้งาน theme ที่เราทำครับ
ต่อข้างล่างนะครับ
« แก้ไขครั้งสุดท้าย: 22 พฤษภาคม 2012, 08:58:53 โดย arusgroup » บันทึกการเข้า

kobb
ก๊วนเสียว
*

พลังน้ำใจ: 30
ออฟไลน์ ออฟไลน์

กระทู้: 476



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 06 พฤษภาคม 2012, 08:49:32 »

รออ่านครับ.... wanwan017
บันทึกการเข้า

poumerida
สมุนแก๊งเสียว
*

พลังน้ำใจ: 67
ออฟไลน์ ออฟไลน์

กระทู้: 609



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 06 พฤษภาคม 2012, 11:02:06 »

 wanwan017 wanwan017 wanwan017
บันทึกการเข้า

saikanojo
ก๊วนเสียว
*

พลังน้ำใจ: 27
ออฟไลน์ ออฟไลน์

กระทู้: 283



ดูรายละเอียด
« ตอบ #3 เมื่อ: 08 พฤษภาคม 2012, 11:37:47 »

มาติดตามจากภาคที่แล้วครับ บทความดีมากเลยครับ  wanwan020
บันทึกการเข้า
arusgroup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 123
ออฟไลน์ ออฟไลน์

กระทู้: 503



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 08 พฤษภาคม 2012, 13:06:13 »

ต้องขอโทษด้วยที่มาตอช้าครับพอดีช่วงนี้วุ่นๆ พอสมควรเลยไม่ค่อยมีเวลาครับ
เอาละเรามาต่อกันเลยครับ
ผมขอใช้ html ของBlind Faith มาเป็นตัวอย่างนะครับ
สามารถดาวโหลดได้จาก
ดาวโหลดทีมตัวอย่าง

เอาละเรามาต่อกันเลยครับ
เมื่อเราเปิด index.html ขึ้นมาจะมีcode แบบนี้นะครับ
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html lang='en'>  
    <head>  
    <title>Blind Faith</title>  
    <link rel="stylesheet" href="reset.css" type="text/css">  
    <link rel="stylesheet" href="style.css" type="text/css">  
    <!--[if IE]>  
    <link rel="stylesheet" href="ie.css" type="text/css" />  
    <![endif]-->  
    </head>  
    <body class="home blog">  
    <div id="top-bar-tile">  
        <div id="top-bar-content">  
            <h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1>  
            <span class="slogan">Just Another Theme by Dan Walker</span>  
            <div id="search-box">  
                <form method="get" id="searchform" action="" >  
                    <input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" />  
                </form>  
            </div><!-- search-box -->  
        </div><!-- top-bar-content -->  
    </div><!-- top-bar-tile -->  
    <div id="nav-bar-tile">  
             <div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div>  
    </div><!-- nav-bar-tile -->  
    <div id="wrapper">  
        <div id="content">  
  
            <div class="post">  
                <h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1>  
                <div class="post-details">  
                    <div class="post-details-left">  
                        Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span>  
                        </div>  
                        <div class="post-details-right">  
                        <span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span>  
                    </div>  
                </div>  
  
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p>  
  
                <p> <a href="#" class="more-link">Read More</a></p>  
  
                <div class="dots"></div>  
            </div><!-- post -->  
  
            <div id="only-page">No newer/older posts</div>  
  
            <div class="spacer"></div>  
            <div class="dots"></div>  
  
            <div id="footer">  
                Copyright © 2011 <a href="http://www.danwalker.com">Dan Walker</a><br />  
                Don't steal anything etc  
            </div>  
  
        </div><!-- content -->  
        <div id="sidebar">  
            <div class="sidebar-box">  
                <span class="sidebar-title">a bit about me</span>  
                <div class="dots"></div>  
                <div class="textwidget">  
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p>  
                </div>  
            </div>  
            <div class="sidebar-box">  
                    <span class="sidebar-title">recent posts</span><div class="dots"></div>  
                <ul>  
                <li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li>  
                </ul>  
            </div>  
        </div><!-- sidebar -->  
        <div class="spacer"></div>  
    </div><!-- wrapper -->  
    </body>  
</html>

ก่อนอื่นเราจะต้องรู้ก่อนว่ามันแบ่งส่วนของเว็บยังไงให้เข้ากับโครที่เราวางไว้
โดยเราจะแบ่งตามนี้นะครับ

เมื่อเรารู้ส่วนที่เราจะแบ่งแล้วเราก็จะนำมันมาวางลงในphp นะครับ
า่วนแรกคือ header.php เราก็จะคัดลอกcode จาก html มาตามนี้ครับ
โค๊ด:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html lang='en'>  
    <head>  
    <title>Blind Faith</title>  
    <link rel="stylesheet" href="reset.css" type="text/css">  
    <link rel="stylesheet" href="style.css" type="text/css">  
    <!--[if IE]>  
    <link rel="stylesheet" href="ie.css" type="text/css" />  
    <![endif]-->  
    </head>  
    <body class="home blog">  
    <div id="top-bar-tile">  
        <div id="top-bar-content">  
            <h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1>  
            <span class="slogan">Just Another Theme by Dan Walker</span>  
            <div id="search-box">  
                <form method="get" id="searchform" action="" >  
                    <input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" />  
                </form>  
            </div><!-- search-box -->  
        </div><!-- top-bar-content -->  
    </div><!-- top-bar-tile -->  
    <div id="nav-bar-tile">  
             <div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div>  
    </div><!-- nav-bar-tile -->  
    <div id="wrapper">  
        <div id="content">  
ตามด้วยfooter.php ทำเหมือนกับheader ครับ
โค๊ด:
<div class="spacer"></div>  
  
            <div id="footer">  
                Copyright © 2011 Blind Faith by <a href="http://www.danwalker.com">Dan Walker</a><br />  
            </div>  
  
        </div><!-- content -->  
<?php get_sidebar(); ?>  
จากhtml จะเห็นว่าต่อจาก footer นั้นเป็นส่วนของsidebar ครับเราจึงใส่ค่าดึง sidebar.php มาครับด้วยคำสัง <?php get_sidebar(); ?>  

หลังจากนั้นเราก็ลงส่วนของ sidebar ครับทำแบบเดี่ยวกับทั้ง2 แบบข้างบนเลยครับผม
โค๊ด:
        <div id="sidebar">  
            <div class="sidebar-box">  
                <span class="sidebar-title">a bit about me</span>  
                <div class="dots"></div>  
                <div class="textwidget">  
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p>  
                </div>  
            </div>  
            <div class="sidebar-box">  
                    <span class="sidebar-title">recent posts</span><div class="dots"></div>  
                <ul>  
                <li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li>  
                </ul>  
            </div>  
        </div><!-- sidebar -->  
        <div class="spacer"></div>  
    </div><!-- wrapper -->  
    </body>  
</html>  

ต่อมาเราก็จะไปที่ index.php ครับลงcode คำสั่งเรียก
header.php กับ footer.php มาครับ ในindex.php เราก็จะลงcode ตามนี้ครับ
โค๊ด:
<?php get_header(); ?>  
  
<?php get_footer(); ?>  

หลังจากนั้นเราไปดูที่หน้า wp ของเราครับจะได้รูปร่างหน้าตาออกมาเป็นแบบนี้ครับ

สังเกตุว่าตอนนี้css จะไม่โดนดึงมาใช้นะครับ
« แก้ไขครั้งสุดท้าย: 10 พฤษภาคม 2012, 10:37:33 โดย arusgroup » บันทึกการเข้า

chui761
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 860
ออฟไลน์ ออฟไลน์

กระทู้: 9,477



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 08 พฤษภาคม 2012, 14:24:35 »

ลงชื่อเก็บความรู้ก่อน หุๆๆ
บันทึกการเข้า

tonotech
ก๊วนเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 338



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 08 พฤษภาคม 2012, 14:30:55 »

มาลงชื่อเข้าห้องเรียนครับ กำลังสนใจอยากทำธีมเองอยู่เลยครับ

+1 ให้เลยครับ wanwan003
บันทึกการเข้า

ร้านไทยแสตมป์   แสตมป์ไทย แสตมป์ไต้หวัน แสตมป์จีน และแสตมป์ต่างประเทศอื่นๆ เชิญแวะชมได้ครับ

UD Seed จำหน่ายเมล็ดพันธุ์ผักซอง ปลีก-ส่ง ขาย PayPal $1=30.70 บาท มีเข้ามาเรื่อยๆ สนใจ PM สอบถามได้ครับ
arusgroup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 123
ออฟไลน์ ออฟไลน์

กระทู้: 503



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 09 พฤษภาคม 2012, 11:58:23 »

มาต่อครับ
การใช้ bloginfo() Function
เราจะใช้bloginfo() ในการดึงค่าต่างๆของwp มานะครับไม่ว้่จะเป็น blog name, description, stylesheet URL, stylesheet directory และอื่นๆอีกมากมาย
สามารถอ่าต่อได้จาก คู่มือ bloginfo() Function http://codex.wordpress.org/Function_Reference/bloginfo

เอาละเรามาทำต่อกันครับ
เรามาหาcode นี้ใน header.php ครับ
โค๊ด:
    <link rel="stylesheet" href="reset.css" type="text/css">  
    <link rel="stylesheet" href="style.css" type="text/css">  
    <!--[if IE]>  
    <link rel="stylesheet" href="ie.css" type="text/css" />  
    <![endif]-->  
หลังจากนั้นเราจะทำการใช้bloginfo()ในการเรียกdirectoryของtheme มาครับ
จะได้โคทแบบนี้ครับ
โค๊ด:
<link rel="stylesheet" href="<?php bloginfo(&#39;stylesheet_directory&#39;); ?>/reset.css" type="text/css">  
    <link rel="stylesheet" href="<?php bloginfo(&#39;stylesheet_url&#39;); ?>" type="text/css">  
    <!--[if IE]>  
    <link rel="stylesheet" href="<?php bloginfo(&#39;stylesheet_directory&#39;); ?>/ie.css" type="text/css" />  
หลังจากนั้นก็ทำในส่วนของtitle
ก่อนแก้
โค๊ด:
 <title>Blind Faith</title>
แก้เป็นแบบนี้ครับ
โค๊ด:
<title><?php bloginfo(&#39;name&#39;); ?> <?php wp_title(); ?></title> 

แก้นวส่วนของ h1 ให้เป็นแบบนี้ครับ
โค๊ด:
<h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo(&#39;name&#39;); ?></a></h1>  
<span class="slogan"><?php bloginfo(&#39;description&#39;); ?></span>
แล้วลองแสดงผลดูครับจได้รูปร่างหน้าตาแบบนี้นะครับ

« แก้ไขครั้งสุดท้าย: 10 พฤษภาคม 2012, 10:37:51 โดย arusgroup » บันทึกการเข้า

969
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 232
ออฟไลน์ ออฟไลน์

กระทู้: 3,589



ดูรายละเอียด
« ตอบ #8 เมื่อ: 09 พฤษภาคม 2012, 12:03:10 »

เจ๋งอะ เดียวผมจะอ่านตั้งแต่ต้นจนจบเลย
บันทึกการเข้า

articlebuilder โปรแกรมส้รางบทความภาษาอังกฤษ มีใครสนใจจะใช้ไม่ครับเปิดแชร์ให้ ใช้ได้ 1 ปี รับแค่ 2 คน จ่ายเพียงคนละ 3000 บาทใช้ได้ 1 ปีครับ จากราคาเต็มปีละ $297 สนใจ PM

เนื่องจาก Mail โดนให้ยืนยันตน ecommerce94@ฮอตเมล.com แต่ผมทิ้งเบอร์โทรที่ใช้กับเมลนี้ไปแล้วตอนนี้เลยใช้ไม่ได้ให้ติดต่อที่เมลใหม่ mybsiz@เอ้าลุค.com (outlook) นะครับ ไม่ได้ค่อยตอบ pm ให้ติดต่อผมที่ Mail ที่แจ้งเลยครับ
scanwave
ก๊วนเสียว
*

พลังน้ำใจ: 38
ออฟไลน์ ออฟไลน์

กระทู้: 464



ดูรายละเอียด
« ตอบ #9 เมื่อ: 09 พฤษภาคม 2012, 12:05:10 »

สุดยอดครับท่าน

 wanwan017
บันทึกการเข้า
bonkbonk
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 103
ออฟไลน์ ออฟไลน์

กระทู้: 2,784



ดูรายละเอียด
« ตอบ #10 เมื่อ: 09 พฤษภาคม 2012, 12:53:11 »

ติดตามอ่าน เรื่อยๆครับ  wanwan017
บันทึกการเข้า

arusgroup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 123
ออฟไลน์ ออฟไลน์

กระทู้: 503



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 10 พฤษภาคม 2012, 10:35:32 »

มาต่อกันอีกครับ
ตอนนี้เราก็ได้โครงร่างกันแล้วนะครับเราจะมาดูในเรื่องของloop ครับ

ในหน้าของindex wp นั้นจะมีloop อยู่ครับloop คือส่วนที่แสดงเนื้อหาครับผมในwp จะทำให้เราเขียนphpง่ายๆ เพื่อทำloop ครับ
ก่อนอื่นเรามาดูในhtml ก่อนครับ

โค๊ด:
<div class="post">  
    <h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> 
    <div class="post-details"> 
        <div class="post-details-left"> 
            Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> 
            </div> 
            <div class="post-details-right"> 
            <span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> 
        </div> 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> 
 
    <p> <a href="#" class="more-link">Read More</a></p> 
 
    <div class="dots"></div> 
</div><!-- post --> 

โดย functions ที่เราใช้เป็นพื้นฐานหลักๆจะมีตามนี้ครับ
the_title
the_tags
the_ID
the_category
the_date
the_content
สามรถอ่าเพิ่มเติมได้ที่นี้ครับ : http://codex.wordpress.org/Template_Tags#Post_tags

เราก็นำฟังชั่นมาใส่ตามที่เอาออกแบบไว้ครับที่นี้ใน index.php.ก็จะได้ออกมาเป็นแบบนี้นะครับ
โค๊ด:
<?php get_header(); ?>  
 
        <div class="post"> 
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> 
                <div class="post-details"> 
                    <div class="post-details-left"> 
                        Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(&#39;, &#39;); ?></span> 
                        </div> 
                        <div class="post-details-right"> 
        <?php edit_post_link(&#39;Edit&#39;, &#39;<span class="comment-count">  &#39; , &#39;</span>&#39;); ?><span class="comment-count"><?php comments_popup_link(&#39;Leave a comment&#39;, &#39;1 Comment&#39;, &#39;% Comments&#39;); ?></span> 
        </div> 
                    </div> 
                </div> 
 
                <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> 
                        <?php the_excerpt(); ?> 
                <?php else : ?> 
                        <?php the_content(&#39;Read More&#39;); ?> 
                <?php endif; ?> 
 
                <div class="dots"></div> 
            </div><!-- post --> 
 
<?php get_footer(); ?>   
หลังจากนั้นใส่code นี้ไปข้างล่าง <?php get_header(); ?> 
โค๊ด:
<?php if ( ! have_posts() ) : ?>  
        <h1>Not Found</h1> 
            <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> 
<?php endif; ?> 
 
<?php while ( have_posts() ) : the_post(); ?> 

และใว้ด้านบนของ <?php get_footer(); ?>
โค๊ด:
<?php endwhile; ?>
เพื่อทำให้เกิดการloop ขึ้นครับผม
ตอนนี้หน้าตาของเรา็จะออกมาเป็นแบบนี้แล้วครับ


เราจะเห็นว่าตอนนี้ มันแสดง loop ออกมาแล้วแต่ถ้าเรามีบทความหลายๆบทความwp จะยังไม่ตัดคำนะครับ
เราจึงต้องเพิ่มจำนวนการแสดงและปุ่มก่อนและหลังเพิ่มเข้าไปอีกครับฃ
เราจะได้ index.php ออกมาเป็นแบบนี้ครับ
โค๊ด:
<?php get_header(); ?>  
 
<?php /* If there are no posts to display, such as an empty archive page */ ?> 
<?php if ( ! have_posts() ) : ?> 
        <h1>Not Found</h1> 
            <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> 
<?php endif; ?> 
 
<?php while ( have_posts() ) : the_post(); ?> 
 
<div class="post"> 
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> 
    <div class="post-details"> 
        <div class="post-details-left"> 
        Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(&#39;, &#39;); ?></span> 
        </div> 
        <div class="post-details-right"> 
        <?php edit_post_link(&#39;Edit&#39;, &#39;<span class="comment-count">  &#39; , &#39;</span>&#39;); ?><span class="comment-count"><?php comments_popup_link(&#39;Leave a comment&#39;, &#39;1 Comment&#39;, &#39;% Comments&#39;); ?></span> 
        </div> 
    </div> 
 
    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> 
            <?php the_excerpt(); ?> 
    <?php else : ?> 
            <?php the_content(&#39;Read More&#39;); ?> 
    <?php endif; ?> 
 
    <div class="dots"></div> 
</div><!-- post --> 
 
<?php endwhile; ?> 
 
<?php if ( $wp_query->max_num_pages ) : ?> 
        <div id="older-posts"><?php next_posts_link(&#39;Older Posts&#39;); ?></div> 
        <div id="newer-posts"><?php previous_posts_link(&#39;Newer Posts&#39;); ?></div> 
<?php else: ?> 
        <div id="only-page">No newer/older posts</div> 
<?php endif; ?> 
 
<div class="spacer"></div> 
<?php get_footer(); ?> 

Single Posts
ส่วนนี้เราจะแสดงในส่วนของPost นะครับจะมีเรื่องเวลา โพสและผู้เขียนเพิ่มเข้ามาครับ
single.phpจะออกมาเป็นแบบนี้ครับ

โค๊ด:
<?php get_header(); ?>  
 
<?php /* If there are no posts to display, such as an empty archive page */ ?> 
<?php if ( ! have_posts() ) : ?> 
        <h1>Not Found</h1> 
            <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> 
<?php endif; ?> 
 
<?php while ( have_posts() ) : the_post(); ?> 
 
<div class="post"> 
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> 
    <div class="post-details"> 
        <div class="post-details-left"> 
        Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(&#39;, &#39;); ?></span> 
        </div> 
        <div class="post-details-right"> 
        <?php edit_post_link(&#39;Edit&#39;, &#39;<span class="comment-count">  &#39; , &#39;</span>&#39;); ?><span class="comment-count"><?php comments_popup_link(&#39;Leave a comment&#39;, &#39;1 Comment&#39;, &#39;% Comments&#39;); ?></span> 
        </div> 
    </div> 
 
    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> 
            <?php the_excerpt(); ?> 
    <?php else : ?> 
            <?php the_content(&#39;Read More&#39;); ?> 
    <?php endif; ?> 
 
    <div class="dots"></div> 
</div><!-- post --> 
 
<div class="spacer"></div> 
 
<?php comments_template( &#39;&#39;, true ); ?> 
 
<?php endwhile; ?> 
 
<div class="spacer"></div> 
<?php get_footer(); ?> 

Page
ในส่วนของpage เราจะนำเวลาและผู้เขียนออกนะครับ
ก็จะได้ออกมาเป็นแบบนี้ครับสำหรับ page.php
โค๊ด:
<?php get_header(); ?>  
 
<?php /* If there are no posts to display, such as an empty archive page */ ?> 
<?php if ( ! have_posts() ) : ?> 
        <h1>Not Found</h1> 
            <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> 
<?php endif; ?> 
 
<?php while ( have_posts() ) : the_post(); ?> 
 
<div class="post"> 
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> 
 
    <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?> 
            <?php the_excerpt(); ?> 
    <?php else : ?> 
            <?php the_content(&#39;Read More&#39;); ?> 
    <?php endif; ?> 
 
    <div class="dots"></div> 
</div><!-- post --> 
 
<div class="spacer"></div> 
 
<?php comments_template( &#39;&#39;, true ); ?> 
 
<?php endwhile; ?> 
 
<div class="spacer"></div> 
<?php get_footer(); ?> 

เดี่ยวมาต่อครับ
บันทึกการเข้า

unseennetwork
Verified Seller
ก๊วนเสียว
*

พลังน้ำใจ: 34
ออฟไลน์ ออฟไลน์

กระทู้: 470



ดูรายละเอียด
« ตอบ #12 เมื่อ: 10 พฤษภาคม 2012, 21:32:17 »

 wanwan017 wanwan017 wanwan017

น้ำใจงามจริงๆ ครับ    wanwan017
บันทึกการเข้า
nakoto
คนรักเสียว
*

พลังน้ำใจ: 9
ออฟไลน์ ออฟไลน์

กระทู้: 154



ดูรายละเอียด เว็บไซต์
« ตอบ #13 เมื่อ: 10 พฤษภาคม 2012, 21:50:17 »

ได้ความรู้มากเลยครับ  wanwan017
บันทึกการเข้า

aiayeza
ก๊วนเสียว
*

พลังน้ำใจ: 19
ออฟไลน์ ออฟไลน์

กระทู้: 294



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 10 พฤษภาคม 2012, 22:08:24 »

อยากลองทำเองดูเหมือนกันแต่ไม่มีความรู้ด้านนี้เลย สงสัยต้องลองทำดูละ
บันทึกการเข้า

i-here-yui
สมุนแก๊งเสียว
*

พลังน้ำใจ: 54
ออฟไลน์ ออฟไลน์

กระทู้: 771



ดูรายละเอียด เว็บไซต์
« ตอบ #15 เมื่อ: 10 พฤษภาคม 2012, 22:34:42 »

เข้าสู่หัวใจของการทำธีม wp แล้ว เดี๋ยวไล่อ่านก่อนครับ ขอบคุณครับบบ  wanwan017
บันทึกการเข้า

Ashi
ก๊วนเสียว
*

พลังน้ำใจ: 21
ออฟไลน์ ออฟไลน์

กระทู้: 228



ดูรายละเอียด
« ตอบ #16 เมื่อ: 10 พฤษภาคม 2012, 23:09:04 »

เก็บไว้ก่อน ง่วงนอนมากๆ ครับ บทความดีมากๆ ครับ อ่านแล้วอยากทำตามที่ท่านสอนเลย เยี่ยมๆ  wanwan017 wanwan017 wanwan017
บันทึกการเข้า
kik12
Newbie
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 79



ดูรายละเอียด เว็บไซต์
« ตอบ #17 เมื่อ: 11 พฤษภาคม 2012, 15:11:07 »

ลงชื่อไว้ด้วยครับ wanwan020
บันทึกการเข้า
rondem
ก๊วนเสียว
*

พลังน้ำใจ: 122
ออฟไลน์ ออฟไลน์

กระทู้: 371



ดูรายละเอียด
« ตอบ #18 เมื่อ: 11 พฤษภาคม 2012, 15:20:53 »

เยี่ยมมาก wanwan017
บันทึกการเข้า
maxmail
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 62
ออฟไลน์ ออฟไลน์

กระทู้: 1,525



ดูรายละเอียด เว็บไซต์
« ตอบ #19 เมื่อ: 11 พฤษภาคม 2012, 15:39:14 »

+1 ขอบคุณมาก ๆ ครับ เดี๋ยวขอไล่อ่านตั้งแต่กระทู้แรกก่อน
บันทึกการเข้า

หน้า: [1] 2   ขึ้นบน
พิมพ์