Hostgator Step อีกหน้าของคัมภีร์คนออนไลน์

ทำอย่างไรดีเมื่อเว็ปคุณเริ่มมีข้อมูลมากขึ้นเสียจน Sidebar Widget มันเริ่มไม่เพียงพอกับความต้องการของคุณซะแล้ว

อะไรๆ ก็จับไปยัดกันอยู่ยังกะแหนม (ดูเว็ปผมเป็นตัวอย่าง เดี๋ยวขยันกว่านี้ก่อน 55)

จัดข้อมูลให้เป็นระบบเพิ่มขึ้นด้วย

WordPress Footer Widget

วิธีนี้จะเป็นลักษณะของ Widget Ready คือรูดปรื๊ดๆ นั่นแหละ

ที่จริงมันน่าจะมีหนทางที่ง่ายกว่านี้เช่นการใช้ plugin ผมหาแล้วนะ แต่ไม่เจอก็เลยต้องวุ่นกันนิด คิดซะว่าเป็นการฝึกมือไปในตัวก็แล้วกัน

ดูตัวอย่างได้ที่ http://test.hostgatorstep.com/

ในที่นี ผมใช้ Fantastico ของ hostgator ติดตั้งใหม่เลย จะเป็น WordPress รุ่น 2.92

โดยใช้ Theme ดั้งเดิมที่มากับ WordPress

Step 1

• เปิดไฟล์ functions.php ของ Theme คุณขึ้นมา path(../themes/default/functions.php)
• หา if ( function_exists(‘register_sidebar’) )

ถ้าเจอมันจะอยู่ในรูปประัมาณนี้

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

อยากใส่ Footer Widget สักกี่อันก็เพิ่มลงไป

register_sidebar(2,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(3,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(4,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

ด้านบนนี้ผมต้องการใส่เพิ่ม 3 อัน

ทั้งหมดก็จะอยู่ในรูปนี้

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(2,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(3,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(4,array(
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}

Step 2

• เปิดไฟล์ footer.php ( path..themes/default/footer.php)
• เพิ่ม code นี้่ลงไป อยากให้ตำแหน่งของ widget อยู่ตรงไหนลองปรับแต่งกันดูครับไม่ยาก ใน footer มันมี code ไม่กี่บรรทัด

<div id="footer-sidebar">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div></div>
<div style="clear-both"></div>

Step 3

• ต้องแก้ Css เล็กน้อยสำหรับการแสดงผล ( path…/themes/default/style.css)

เพิ่ม code ด้านล่างนี้ใส่ไฟล์ css ของคุณเลย

#footer-sidebar {
clear: both;
margin: 0 10px;
background: #eee;
overflow: hidden;
padding-top: 10px;
}
#footer-sidebar1 {
float: left;
width: 226px;
margin-left:20px;
margin-right:5px;
}
#footer-sidebar2 {
float: left;
width: 226px;
margin-right:5px;
}
#footer-sidebar3 {
float: left;
width: 226px;
margin-right:5px;
padding-left: 14px;
}

ถ้าทำตามนี้เป๊ะ WordPress ของคุณก็จะแสดงผลดังนี้

**กรณีแก้ไข css นี้ ควรเรียกหา firebug มาช่วยงานนะครับเพราะมันสะดวกมากมาย

เสร็จแล้วครับ แค่นี้คุณอยากยัดอะัไร ก็เต็มที่เลย อยากให้สวยงามกว่านี้ก็แก้ Css กันเอาเองนะครับ

อยากขาย Amazon ดีดี ใช้ Hostgator สิ uptime 99.99%
ที่เดียวที่ให้ส่วนลดมากกว่า 75% >>Hostgator Black Friday
เช่า Hostgator ไม่เป็นดูทึ่นี่้>> วิธีเช่า Hostgator

ใส่เมล์ทีนี่เพื่อรับเรื่องใหม่ก่อนใคร:

คุณอาจหาเรื่องนี้อยู่

• Ipage.com ไม่พอใจคืนเงินได้ตลอดเวลา
• Imacros ทำไมผมเพิ่งรู้จักคุณ
• Link Wheel ของคุณยังมีชีวิตอยู่รึเปล่า
• ลดถึง $55USD กับ Lunarpages.com!!
• วิธีลง Wordpress Mu มากกว่า 1 โดเมนที่ Hostgator