หัวข้อ: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: arusgroup ที่ 05 พฤษภาคม 2012, 16:06:14
สาระบัญ: รวม [แชร์แบบบ้านๆ] รวมสาระด้านการเขียน theme (http://www.thaiseoboard.com/index.php/topic,268218.msg3691375.html#msg3691375)[แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2ตอนที่ 6.2 Header and Footer (http://www.thaiseoboard.com/index.php/topic,269334.msg3712301.html#msg3712301) ตอนที่ 6.3 bloginfo() Function (http://www.thaiseoboard.com/index.php/topic,269334.msg3714338.html#msg3714338) ตอนที่ 6.4 loop&Post&page (http://www.thaiseoboard.com/index.php/topic,269334.msg3716191.html#msg3716191) ตอนที่ 6.5 Navigation (http://www.thaiseoboard.com/index.php/topic,269334.msg3718983.html#msg3718983) ผมจะใช้theme ที่ง่ายก่อนเพื่อทำเป็นตัวอย่างนะครับ หลังจากที่เพื่อนๆเข้าใจตัวอย่างแล้วก็ไปประยุคใช้เอานะครับ ดาวโหลดรูปเพื่อใช้เป็นตัวอย่างนะครับ source files (http://www.mediafire.com/?3s7c9g18g2lbgrx) ไฟร์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 แล้วครับ (http://www.picza.net/save/20120505vvIdvTEdvlvdvvx181417_sv1/pic/2012_05_05-050-20120505vvIdvTEdvlvdvvx181417.png) (http://www.picza.net/show.php?id=20120505vvIdvTEdvlvdvvx181417) Thanks: ฝากรูป (http://www.picza.net)เราก็กด activate ครับเพื่อเริ่มใช้งาน theme ที่เราทำครับ ต่อข้างล่างนะครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: kobb ที่ 06 พฤษภาคม 2012, 08:49:32
รออ่านครับ.... :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: poumerida ที่ 06 พฤษภาคม 2012, 11:02:06
:wanwan017: :wanwan017: :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: saikanojo ที่ 08 พฤษภาคม 2012, 11:37:47
มาติดตามจากภาคที่แล้วครับ บทความดีมากเลยครับ :wanwan020:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: arusgroup ที่ 08 พฤษภาคม 2012, 13:06:13
ต้องขอโทษด้วยที่มาตอช้าครับพอดีช่วงนี้วุ่นๆ พอสมควรเลยไม่ค่อยมีเวลาครับ เอาละเรามาต่อกันเลยครับ ผมขอใช้ html ของBlind Faith มาเป็นตัวอย่างนะครับ สามารถดาวโหลดได้จาก ดาวโหลดทีมตัวอย่าง (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/download.zip) เอาละเรามาต่อกันเลยครับ เมื่อเราเปิด 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> ก่อนอื่นเราจะต้องรู้ก่อนว่ามันแบ่งส่วนของเว็บยังไงให้เข้ากับโครที่เราวางไว้ โดยเราจะแบ่งตามนี้นะครับ (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/1.png) เมื่อเรารู้ส่วนที่เราจะแบ่งแล้วเราก็จะนำมันมาวางลงใน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 ของเราครับจะได้รูปร่างหน้าตาออกมาเป็นแบบนี้ครับ (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/2.png) สังเกตุว่าตอนนี้css จะไม่โดนดึงมาใช้นะครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: chui761 ที่ 08 พฤษภาคม 2012, 14:24:35
ลงชื่อเก็บความรู้ก่อน หุๆๆ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: tonotech ที่ 08 พฤษภาคม 2012, 14:30:55
มาลงชื่อเข้าห้องเรียนครับ กำลังสนใจอยากทำธีมเองอยู่เลยครับ
+1 ให้เลยครับ :wanwan003:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: arusgroup ที่ 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('stylesheet_directory'); ?>/reset.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" /> หลังจากนั้นก็ทำในส่วนของtitle ก่อนแก้ <title>Blind Faith</title> แก้เป็นแบบนี้ครับ <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> แก้นวส่วนของ h1 ให้เป็นแบบนี้ครับ <h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo('name'); ?></a></h1>
<span class="slogan"><?php bloginfo('description'); ?></span>แล้วลองแสดงผลดูครับจได้รูปร่างหน้าตาแบบนี้นะครับ (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/3.png)
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: 969 ที่ 09 พฤษภาคม 2012, 12:03:10
เจ๋งอะ เดียวผมจะอ่านตั้งแต่ต้นจนจบเลย
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: scanwave ที่ 09 พฤษภาคม 2012, 12:05:10
สุดยอดครับท่าน
:wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: bonkbonk ที่ 09 พฤษภาคม 2012, 12:53:11
ติดตามอ่าน เรื่อยๆครับ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: arusgroup ที่ 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(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></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('Read More'); ?>
<?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(); ?> เพื่อทำให้เกิดการloop ขึ้นครับผม ตอนนี้หน้าตาของเรา็จะออกมาเป็นแบบนี้แล้วครับ (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/4.png) เราจะเห็นว่าตอนนี้ มันแสดง 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(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
</div>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<?php endwhile; ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div>
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div>
<?php else: ?>
<div id="only-page">No newer/older posts</div>
<?php endif; ?>
<div class="spacer"></div>
<?php get_footer(); ?> ส่วนนี้เราจะแสดงในส่วนของ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(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
</div>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<div class="spacer"></div>
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
<div class="spacer"></div>
<?php get_footer(); ?> ในส่วนของ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('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<div class="spacer"></div>
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
<div class="spacer"></div>
<?php get_footer(); ?> เดี่ยวมาต่อครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: unseennetwork ที่ 10 พฤษภาคม 2012, 21:32:17
:wanwan017: :wanwan017: :wanwan017:
น้ำใจงามจริงๆ ครับ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: nakoto ที่ 10 พฤษภาคม 2012, 21:50:17
ได้ความรู้มากเลยครับ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: aiayeza ที่ 10 พฤษภาคม 2012, 22:08:24
อยากลองทำเองดูเหมือนกันแต่ไม่มีความรู้ด้านนี้เลย สงสัยต้องลองทำดูละ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: i-here-yui ที่ 10 พฤษภาคม 2012, 22:34:42
เข้าสู่หัวใจของการทำธีม wp แล้ว เดี๋ยวไล่อ่านก่อนครับ ขอบคุณครับบบ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: Ashi ที่ 10 พฤษภาคม 2012, 23:09:04
เก็บไว้ก่อน ง่วงนอนมากๆ ครับ บทความดีมากๆ ครับ อ่านแล้วอยากทำตามที่ท่านสอนเลย เยี่ยมๆ :wanwan017: :wanwan017: :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: kik12 ที่ 11 พฤษภาคม 2012, 15:11:07
ลงชื่อไว้ด้วยครับ :wanwan020:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: rondem ที่ 11 พฤษภาคม 2012, 15:20:53
เยี่ยมมาก :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: maxmail ที่ 11 พฤษภาคม 2012, 15:39:14
+1 ขอบคุณมาก ๆ ครับ เดี๋ยวขอไล่อ่านตั้งแต่กระทู้แรกก่อน
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: fogza ที่ 11 พฤษภาคม 2012, 15:46:37
เยี่ยมเลยครับ เก็บไว้อ่านเรียบร้อย เห็นพี่พีระพงษ์เค้าประสบความสำเร็วแล้วอยากทำได้บ้าง
ขอบคุณมากๆ ครับ น้ำใจงามจริงๆ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: katyeba ที่ 11 พฤษภาคม 2012, 16:03:41
ขอบคุณมาเลยครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: bonkbonk ที่ 11 พฤษภาคม 2012, 16:05:50
เขียนได้แจ่มมาก5ดาว รออ่านต่อครับ +1 :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2{มาเขียนต่อแล้ว}
เริ่มหัวข้อโดย: arusgroup ที่ 11 พฤษภาคม 2012, 16:43:09
ตอนสุดท้ายของ Part นี้ครับ Navigation นำส่วนตรงนี้ไปใส่ใน Header.php ครับ <div id="nav-bar-tile">
<?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
</div><!-- nav-bar-tile --> ผมของอธิบาย wp_nav_menu function : menu – ชื่อmenu ที่ต้องการ menu_class – กำหนด class ที่ เราจะใช้จาก css menu_id – กำหนด id ของ <ul> theme_location – ตำแหน่งของการเรียก menu ในตอนแก้theme เดียวไว้มาขยายความตอนที่3 ครับ show_home – แสดงหรือไม่แสดงlink ของหน้าแรก หลังจากนั้นเราก็เพิ่มส่วนของตรงนี้เข้าไป ในfunctions.php นะครับ <?php
add_theme_support('nav-menus');
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
)
);
}
add_theme_support('post-thumbnails');
?> ที่นี้เราก็จะสามรถแก้menu ได้แล้วครับ ไว้เจอกัน Part 3 ครับ :wanwan003:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2 จบแล้ว
เริ่มหัวข้อโดย: kookcoo ที่ 18 พฤษภาคม 2012, 22:20:55
<div มันเยอะแยะไปหมด มีวิธีจัดการ div ให้สัมพันธ์กับ css แบบง่ายๆบ้างมั๊ยครับ :-[
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2 จบแล้ว
เริ่มหัวข้อโดย: aplus191 ที่ 18 พฤษภาคม 2012, 22:23:59
ขอบคุณครับ ได้ความรู้มากเลยครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2 จบแล้ว
เริ่มหัวข้อโดย: cnn2520 ที่ 19 พฤษภาคม 2012, 00:11:28
ได้ความรู้เพิ่มอีกแล้ว :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2 จบแล้ว
เริ่มหัวข้อโดย: arusgroup ที่ 22 พฤษภาคม 2012, 08:58:11
<div มันเยอะแยะไปหมด มีวิธีจัดการ div ให้สัมพันธ์กับ css แบบง่ายๆบ้างมั๊ยครับ :-[
แนะนำให้หใช้ program Sublim text 2 ช่วยครับ แล้วเวลาเราเขียนเราก็ Tab ช่วยจะทำให้ดูง่ายขึ้นครับจะได้ไม่งง ครับผม http://www.thaiseoboard.com/index.php/topic,268595.0.html
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: phakdee ที่ 22 พฤษภาคม 2012, 09:01:56
ขอบคุณมากๆครับ ได้ความรู้มากมาย :wanwan031:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: en365days ที่ 06 พฤศจิกายน 2012, 07:20:25
เข้ามาเก็บความรู้ ขอบคุณครับ :wanwan017:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: seobegin ที่ 05 กุมภาพันธ์ 2013, 23:49:47
ตามมาเก็บความรู้ครับ :wanwan003: :wanwan003:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: laewngai ที่ 06 กุมภาพันธ์ 2013, 00:25:52
ได้ความรู้มากมายครับ
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: bannoffee ที่ 06 กุมภาพันธ์ 2013, 00:43:03
ว้าวๆ ขอบคุณครับ :wanwan020:
หัวข้อ: Re: [แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
เริ่มหัวข้อโดย: be-bb ที่ 06 กุมภาพันธ์ 2013, 05:15:35
ขอบคุณมากครับ :wanwan017:
|