ก่อนอื่นใส่โค้ดนี้ก่อนนะครับใส่ใน functions.php  
function get_post_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];

 if(empty($first_img)){
  $img_dir = get_bloginfo('template_directory');
   $first_img = $img_dir . '/images/thumb.gif';
 }
 return $first_img;
}
อ่านแบบเต็ม http://www.thaiseoboard.com/index.php?topic=197109.5;

ต่อมาเพิ่ม css เข้าไปที่ style.css
div.amazon {
 float: left;
 border: thin silver solid;
 margin: 0.3em;
 padding: 0.5em;
}
div.amazontext{
 text-align: center;
 font-style: italic;
 font-size: 0.8em;
   white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
overflow: hidden;
width: 130px;
}

แก้หน้าแรกเพื่อให้แสดงตามรูปด้านบนใส่โค้ดด้านล่างแทนที่่ในไฟล์ index.php ของธีม Twenty Twelve:
<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

<div id="primary" class="site-content">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="amazon"><a href="<?php the_permalink(); ?>" /><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="130" height="130"></a>
<div class="amazontext"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
</div>

<?php endwhile; ?>



<?php else : ?>
               <?php endif; // end have_posts() check ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

เปลี่ยนสีเส้นเมนู


เปิด style.css เพื่อแก้โค้ดสี หาโค้ดตามด้านล่าง
.main-navigation div.nav-menu > ul {
              background:url("ใส่ที่อยู่ภาพ")repeat-x; <- อันนี้ใครอยากได้พื้นหลังในเมนูก็เพิ่มได้นะครับ ขนาดภาพ 3x72
border-bottom: 1px solid #00ff00; <- แก้โค้ดสีเส้นบน
border-top: 1px solid #00ff00; <- แก้โค้ดสีเส้นล่าง
display: inline-block !important;
text-align: left;
width: 100%;
}

ใส่ banner บนหัวเว็บ เปิดไฟล์ header.php หา
<header id="masthead" class="site-header" role="banner">

แล้วใส่โค้ด banner ใต้โค้ดด้านบนประมาณนี้
<header id="masthead" class="site-header" role="banner">
<div><img src="http://xxxxxxxsx.com/images/bannerheader.jpg"></div>

ขนาดความกว้าง 950px สูงเท่าไหร่ตามใจครับ


ใน footer ก็ทำได้นะครับ เปิด footer.php
<footer id="colophon" role="contentinfo">
ลบโค้ดเดิมระหว่างนี้ทิ้งแล้วใส่โค้ด banner ขนาดกว้าง 950px
</footer><!-- #colophon -->

ทำเมนู category ในหน้าแรกให้โชวเฉพาะ category ของใครของมัน


เปิด style.css ก๊อปโค้ดด้านล่างไปใส่
/* category manu*/
.catemanue {
    position:relative;
    width:100%;
    height:100%;
    background: #ffccff;
    padding:10px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";    
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}

ทำการแก้ไขหน้า index.php
1.เพิ่มโค้ด <div class="catemanue">ชื่อ category </div> ใต้โค้ด <div id="primary" class="site-content">
2.เพิ่มโค้ด <?php query_posts($query_string . '&cat=1'); ?> ใต้โค้ด <?php /* Start the Loop */ ?>
  อธิบายข้อ 2 เป็นโค้ดโว์เฉพาะ category ให้ใส่ตัวเลข category ไม่ให้ category อื่นให้ใส่เครื่องลบหน้าตัวเลขของ category
 
<div id="primary" class="site-content">
<div class="catemanue">Knife Outdoors</div> ->เพิ่มโค้ดนี้เข้าไปตรงนี้

<div id="content" role="main">
<?php if ( have_posts() ) : ?>

<?php /* Start the Loop */ ?>
                       <?php query_posts($query_string . '&cat=1'); ?> ->เพิ่มโค้ดนี้เข้าไปตรงนี้
<?php while ( have_posts() ) : the_post(); ?>
<div class="amazon"><a href="<?php the_permalink(); ?>" /><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="130" height="130"></a>
<div class="amazontext"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
</div>

<?php endwhile; ?>

<?php else : ?>
               <?php endif; // end have_posts() check ?>

</div><!-- #content -->
</div><!-- #primary -->

3. ในส่วน category ที่ สองให้ทำการก็อปโค้ดด้านบนออกมา เปลี่ยนเลขและชื่อ category เป็นของ category  อันที่สองนะครับ ตามตัวอย่างด้านล่าง แล้วนำโค้ดที่แก้ตัวเลขไปวางไว้ใต้โค้คนี้ <?php get_sidebar(); ?> ในหน้า index.php
<div id="primary" class="site-content">
<div class="catemanue">Test</div> ->เพิ่มโค้ดนี้เข้าไปตรงนี้

<div id="content" role="main">
<?php if ( have_posts() ) : ?>

<?php /* Start the Loop */ ?>
                       <?php query_posts($query_string . '&cat=-1,2 '); ?> ->เปลี่ยนเลข category ตรงนี้ ใส่เครื่องหมายลบหน้าเลข category อันแรกเพื่อไม่ให้โชว์ซ้ำกัน
<?php while ( have_posts() ) : the_post(); ?>
<div class="amazon"><a href="<?php the_permalink(); ?>" /><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="130" height="130"></a>
<div class="amazontext"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
</div>

<?php endwhile; ?>

<?php else : ?>
               <?php endif; // end have_posts() check ?>

</div><!-- #content -->
</div><!-- #primary -->

ย้ายข้าง sideabar เพิ่มโค้ดด้านล่างเข้าไปใน style.css ใส่ล่างสุด
/* Move sidebar */
@import url('../twentytwelve/style.css');
/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
   .site-content {
       float: right;
   }
   .widget-area {
       float: left;
   }
}

/* for IE8 and IE7 ----------------*/
.ie .site-content {
   float: right;
}
.ie .widget-area {
   float: left;
}
/* End Move sidebar */

ใส่ slider บนหัวเว็บ ใส่โค้ดด้านล่างเข้าไปใน style.css
/* slider */
.carousel {
width:854px;
padding:0 53px;
position:relative;
}
.carousel .prev,
.carousel .next {
position:absolute; top:14px;
width:35px; height:35px;
background-image:url("../slider_arrows.gif");
background-repeat:no-repeat;
cursor:pointer;
-moz-opacity:0.5; opacity:.5; filter:alpha(opacity=50);
}
.carousel .prev {
background-position: 0 0;
left:0;
}
.carousel .next {
background-position: -45px 0;
right:0;
}
.carousel .prev:hover,
.carousel .next:hover {
-moz-opacity:0.7; opacity:.7; filter:alpha(opacity=70);
}
.carousel .prev:active,
.carousel .next:active {
-moz-opacity:0.9; opacity:.9; filter:alpha(opacity=90);
}
.carousel .objectsList {
overflow:hidden;
position:relative;
height:125px;
width:854px;
margin:0;
}
.carousel .objectsList ul {
padding:0;
margin:0;
list-style:none;
}
.carousel .objectsList li {
float:left;
width:170px;
height:125px;
padding:0;
margin:0;
text-align:center;
background:none;
border-right:1px solid #dededf;
}
/* END slider */

นำไปใช้งาน เปิดไฟล์ header.php หาบรรทัด
header id="masthead" class="site-header" role="banner">

ใส่โคด้แสดง
<div class="carousel">
                      <div class="objectsList">
                     
                        <ul>
                        <li>ใช้งาน</il>
                      <li>ใช้งาน</il>
                      <li>ใช้งาน</il>
                       </ul>
                      </div>
      <div class="prev"></div>
      <div class="next"></div>
      </div>

รูปกดซ้าย-ขวา

น่าสนครับ

ร่วมด้วยช่วยกันครับ

http://www.changpuakelephantcamp.com/  นี่ครับผมโม Twenty Twelve

ร่วมช่วย  เอาเลเอาท์ไปละกันไม่ว่างขึ้นโค๊ดให้ ใครจะปรับยังไงก็ตามสะดวกเลยครับ น่าจะพอใช้เป้นแนวทางในการออกแบบเว็บได้อยู่ครับ

โอ้       สุดยอด....

อ้างถึงจาก: armddd ใน 31 มีนาคม 2014, 15:28:49
http://www.changpuakelephantcamp.com/  นี่ครับผมโม Twenty Twelve

สวยอะ   

อ้างถึงจาก: armddd ใน 31 มีนาคม 2014, 15:28:49
http://www.changpuakelephantcamp.com/  นี่ครับผมโม Twenty Twelve

โห ใช่เหรอครับเนี่ย สุดยอด

แจ่มจริงๆไรจริงครับ

เอาไปใช้ได้กับ Theme อื่นๆ ด้วยได้เลยนะคะเนี้ย

^^

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

ผมว่า หาคนทำ theme wordpress ใน ไทยเสียว ทำ project เฉพาะกิจ สร้าง theme เจ๋งๆ ซักตัวดีกว่า
มาไว้แชร์ให้คนในไทยเสียวได้นำไปใช้กันครับ

แจ๋มเลย ครับ

อ้างถึงจาก: rukrean ใน 31 มีนาคม 2014, 22:57:30
ผมว่า หาคนทำ theme wordpress ใน ไทยเสียว ทำ project เฉพาะกิจ สร้าง theme เจ๋งๆ ซักตัวดีกว่า
มาไว้แชร์ให้คนในไทยเสียวได้นำไปใช้กันครับ

แชร์ให้คนไทยเสียว ก้เหมือนแจกฟรีให้คนทั้งโลกใช้แหละครับ 

อ้างถึงจาก: MD.18 ใน 31 มีนาคม 2014, 23:09:30

อ้างถึงจาก: rukrean ใน 31 มีนาคม 2014, 22:57:30
ผมว่า หาคนทำ theme wordpress ใน ไทยเสียว ทำ project เฉพาะกิจ สร้าง theme เจ๋งๆ ซักตัวดีกว่า
มาไว้แชร์ให้คนในไทยเสียวได้นำไปใช้กันครับ

แชร์ให้คนไทยเสียว ก้เหมือนแจกฟรีให้คนทั้งโลกใช้แหละครับ 

แรงครับ 555

ร่วมด้วยช่วยกันอีกแรงครัช แหม๋ 

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

ไม่มีใครช่วย กันโมบ้างหรือครับ

อ้างถึงจาก: คนเดินทางไกล ใน 01 เมษายน 2014, 13:27:10
ไม่มีใครช่วย กันโมบ้างหรือครับ

อยากช่วยเหมือนกัน แต่ทำไม่เป็นครับ