ใส่ 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>
รูปกดซ้าย-ขวา
พัฒนาเว็บไซต์
