[smf] ศัลยกรรมหน้าบอร์ดให้เป็นหน้าเว็บ

หลังจากปรับแต่งบอร์ด จากหน้าเดิมๆ เปลี่ยนหน้าจนแทบจำไม่ได้แล้ว เราก็ได้ใส่สิ่งที่บอร์ดจำเป็นต้องมี และเครื่องมือเครื่องไม้ที่ให้ผู้ใช้สามารถใช้งานได้ง่ายที่สุดเท่าที่จะง่ายได้ (การแต่งบอร์ดให้ผู้ใช้สามารถใช้งานได้ง่ายที่สุดนั้น ถือเป็นหน้าที่หลักของนักแต่งธีม เพราะถ้าผู้ใช้ใช้งานยากแล้ว เรื่องอะไรที่เขาจะทนใช้งานบอร์ดของเรา)

ติดตั้งเหล็กดัด มุ้งลวดให้บอร์ดเรียบร้อยแล้ว จากนี้ก็จะมานั่งคิดต่อว่า ถ้าเกิดเราจะทำบอร์ดของเราให้เป็นเว็บเลยได้ไหม?

หลายๆเว็บก็ทำกันแบบนั้น ประมาณว่าเข้ามาในเว็บปุ๊บก็เจอบอร์ดปั๊บเลย แบบนั้นมันธรรมดาไป

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

หน้าบอร์ดก็มีกระทู้เรียงรายหลายหัวหลายหัวข้อ
หน้าเว็บก็จะมีการสรุปดึงเฉพาะกระทู้ที่สำคัญ หรือกระทู้ใหม่มาแสดงแต่พองาม ไม่มาก ไม่น้อยจนเกินไป

เมื่อแยกความแตกต่างได้แล้ว ทีนี้ก็ไม่ยากเลย เราต้องทำหน้าบอร์ดให้กลายเป็นหน้าเว็บ!!!





ก็จึงเลยดำเนินการปรับปรุงศัลยกรรมหน้าตาของเว็บบอร์ดให้ออกมาเป็นหน้าเว็บ (ดังภาพ)
ส่วนตัวอย่างจริง คลิกไปดูที่นี่ครับ

เดี๋ยวตอนต่อไปจะพาไปดูว่า วิธีศัลยกรรมหน้าตาบอร์ดให้เป็นหน้าเว็บนั้นทำอย่างไร?

[smf] เพิ่มปุ่ม like และปุ่มGoogle+1ในกระทู้

ผมเคยเขียนการใส่ปุ่ม Google +1 ไปแล้ว แต่ครั้งนั้นพลาดไปหน่อย ไม่ได้กล่าวถึงการใส่ปุ่ม google+1 ในกระทู้ วันนี้เลยจะรวบยอดพูดถึงการใส่ปุ่ม like และปุ่ม google +1 ไว้ในกระทู้ด้วยกันเลย


ใช้ได้กับ smf ทุกเวอร์ชั่นนะครับ

มาดูวิธีใส่ใน smf ก่อน
เปิดไฟล์ Display.template.php ถ้าเป็น smf เวอร์ชั่น 1 ให้ค้นหาคำว่า
<hr class="hrcolor" width="100%" size="1">

ส่วนถ้าเป็นเวอร์ชั่น 2 ให้ค้นหาคำว่า
<div class="inner" id="msg_', $message['id'], '"', '>

หลังจากเจอแล้วให้ใส่โค๊ดนี้ด้านล่าง

<div class="like">

<iframe src="http://www.facebook.com/plugins/like.php?href=',$scripturl,'/topic,',$context['current_topic'],'.msg',$message['id'],'&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:530px; height:60px"></iframe>
</div>

จบวิธีสำหรับใส่ปุ่ม like

วิธีใส่ปุ่ม Google + 1 ในกระทู้บ้าง
ก่อนอื่นเปิดไฟล์ index.template.php
ก็อปปี้โค๊ดด้านล่างนี้
echo '<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: "

ไปใส่ในส่วน head ครับ เสร็จแล้วเซฟ

ถัดไปเปิดไฟล์ Display.template.php ที่อยู่ในธีมของเรา

สำหรับเวอร์ชั่น 2 ให้ค้นหาำำคำว่า <ul class="reset smalltext quickbuttons">';
ถ้าเป็นเวอร์ชั่น 1 ให้ค้นหาคำว่า <td align="', !$context['right_to_left'] ? 'right' : 'left', '" valign="bottom" height="20" style="font-size: smaller;">';


เมื่อเจอแล้ว ให้วางโค๊ดนี้ถัดจากโค๊ดที่ค้นหาเจอนั้น
สำหรับเวอร์ชั่น 2 echo '<li><g:plusone href="',$scripturl,'/topic,',$context['current_topic'],'.msg',$message['id'],'"></g:plusone></li>';

สำหรับเวอร์ชั่น 1 <td align="', !$context['right_to_left'] ? 'right' : 'left', '" valign="bottom" height="20" style="font-size: smaller;">';


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

[smf] แต่งธีม ตอน เพิ่มปุ่มใส่ภาพแต่เก็บไฟล์ไว้ที่ upic.me

มาว่าถึงเรื่องการปรับแต่งบอร์ดเล็กๆน้อยๆ แต่จะทำให้บอร์ดของเรามีประสิทธิภาพยิ่งใหญ่ได้อีกเรื่องหนึ่ง

นั่นคือ การโพสต์ภาพ

ประสิทธิภาพของบอร์ด smf เกี่ยวกับการโพสต์ภาพนั้นอย่างที่เราเห็นๆ มีสองอย่างคือ เอาภาพมากจากเว็บอื่นโดยใช้ใช้ bbc โค๊ดมาคร่อม [img]http://xxxx[img]

อีกวิธีหนึ่งคือการแนบไฟล์ อย่างที่ผมเคยได้เขียนไว้แล้ว http://nevikup.blogspot.com/2011/07/smf_26.html

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

วันนี้เลยมีอีกหนึ่งวิธีเกี่ยวกับการโพสต์ภาพ ในบอร์ด แต่ไม่ต้องเก็บไว้ในโฮสท์ของเรา หลายคนรู้จักเว็บสำหรับฝากไฟล์ซึ่งมีมากมายไม่ว่าจะเป็น flickr.com ,picasa.google.com, uploadtoday.com ฯลฯ

แต่ที่ผมจะแนะนำในบทความนี้คือเว็บฝากไฟล์ที่ชื่อว่า upic.me

upic.me เขามีดีอะไร?

ผมก็ไม่แน่ใจว่าเขามีดีอะไรที่ต่างจากเว็บฝากไฟล์อื่นๆนะครับ แต่ที่แน่ๆคือเราสามารถสร้างปุ่มสำหรับเลือกไฟล์จากเครื่องเรา แต่เก็บไฟล์ไว้ที่ upic.me และดึงมาแสดงในบอร์ดได้ !!!

เจ๋งมั้ยละครับ

และที่เจ๋งไปกว่านั้นครับ มันยังสามารถเลือกอัพไฟล์พร้อมกันหลายๆไฟล์ได้ บร๊ะเจ้า!!

พูดไป ไม่เห็นภาพ เดี๋ยวมาดูการปรับแต่งกันดีกว่าว่าทำไง?

ขบวนการนี้มีไฟล์ที่เกี่ยวข้องแค่ตัวเดียวครับ คือไฟล์ Themes/default/Post.template.php เปิดมันขึ้นมาครับ และก่อนอื่นใด Save as.. ไปไว้ที่โฟล์เดอร์ของธีมของเราก่อน (ถ้าในธีมของเรามีแล้ว ก็เปิดมันขึ้นมาโดยไม่ต้องไปเปิดจากโฟล์เดอร์ default/นะครับ)

ไปที่บรรทัดที่ 647 ถ้าในบรรทัดดังกล่าวเจอคำสั่ง <td colspan="2"></td> แสดงว่ามาถูกทางแล้ว แต่หากไม่ใช่คำสั่งนี้ ลองมองหาในบรรทัดถัดไปขึ้นบนหรือลงล่างดูในแถวนี้แหละครับ หาแท็กนี้ให้เจอ เสร็จแล้วแปะโค๊ดนี้ลงไปตรงกลางระหว่าง <td colspan="2"> และ </td>

โค๊ดที่ว่านี้คือ โค๊ดนี้ครับ

<script type="text/javascript" src="http://upic.me/js/embedupload.js"></script>

<script type="text/javascript">

upic_target = document.postmodify.message;

upic_type = "bbfull";

upic_buttoncss += "color:#000000;";

</script>

<style type="text/css">

#upic_uploader{}

#upic_uploadprogress{}

.progressWrapper{margin-top:5px;}

.progressContainer{border-bottom:1px dotted #ddd;padding:2px;}

.progressName{text-align:left;color:black;margin-left:2px;float:left;}

.progressBarStatus{color:#666;text-align:right;margin:1px 1px 0 0;font-size:9px;}

.red{border:solid 1px #B50000;background-color:#FFEBEB;}

.green{border:solid 1px #DDF0DD;background-color:#EBFFEB;}

.blue{border:solid 1px #CEE2F2;background-color:#F0F5FF;}

.progressBarInProgress,.progressBarComplete,.progressBarError{clear:both;font-size:0;width:0%;height:2px;background-color:blue;margin-top:4px;}

.progressBarComplete{width:100%;background-color:green;visibility:hidden;}

.progressBarError{width:100%;background-color:red;visibility:hidden;}

</style>

ไฟล์ css นี้เราสามารถตกแต่งให้งดงามกว่านี้ได้ครับ อยู่ที่ท่านแล้วละ

มีจุดหนึ่งที่อยากให้ดูครับ ตรงที่เป็นสีน้ำเงิน ตรงนี้เราสามารถกำหนดให้ภาพที่โพสต์มานั้นเป็นแบบไหน มีให้เลือก htmlfull / htmlthumb / bbfull / bbthumb

htmlfull คือ ภาพที่โพสต์ลงในบอร์ดจะเป็นคำสั่ง html แบบนี้ <img src="ภาพ"/> ขนาดภาพเท่าขนาดจริง

htmlthumb จะคล้ายกับ htmlfull แต่ขนาดภาพที่โพสต์ลงจะเป็นภาพเล็ก สองวิธีนี้ใช้ไม่ได้ในบอร์ด smf เพราะบอร์ด smf ใช้คำสั่งbbc

bbfull และ bbthumb เหมาะกับบอร์ดsmf แนะนำให้เลือกใช้ 2 ตัวนี้ bbfull ภาพที่โพสต์ลงจะมีขนาดเท่าภาพจริง ส่วน bbthumb จะเป็นภาพเล็ก

เมื่อแก้ไขเสร็จแล้วก็เซฟ ทีนี้ลองไปตั้งกระทู้ดูครับ ใต้คำว่าตั้งกระทู้ใหม่ จะมีคำว่า Select images ลองเลือกดู

เจอกันใหม่ตอนหน้าคร้าบ

[smf] แต่งธีม ตอน ปรับปรุงหน้าตาตั้งชื่อธีมว่า "Blue Theme"

ถ้าได้อ่านตั้งแต่แรกเริ่มเรื่องการแต่งธีม หรือโมธีม (แล้วแต่จะเรียก) ก็จะเห็นความเปลี่ยนแปลงทุกสเต็ปของการแต่งธีม

ธีมที่ผมแต่งเป็นตัวอย่างนี้เป็นเวอร์ชั่น 1.1.14 นะครับ แต่ใครที่่กำลังแต่งธีมเวอร์ชั่น 2 ไม่ว่าจะ RC-1 หรือ RC-3 ก็ไม่ต้องห่วงครับ ถึงแม้มันไม่เหมือนกันเปะๆทุกอย่าง แต่มันก็ไม่ได้ต่างกันมากนัก

ในโอกาสต่อไป จะได้มาแต่งธีมของเวอร์ชั่น 2 ต่อไป ตอนนี้มาดูการเปลี่ยนแปลงของการแต่งธีมซะก่อน ก่อนที่จะเริ่มแต่งต่อไป

เริ่มตั้งแต่ธีมเิดิมๆ หน้าตาแบบนี้

http://nevikup.blogspot.com/2011/07/smf_18.html

ได้หน้าใหม่มาแบบนี้

http://nevikup.blogspot.com/2011/07/smf_2473.html

และระหว่างนั้นก็มีการปรับแต่งเล็กๆน้อยๆภายในบอร์ด

ครั้งสุดท้ายคือปรับหน้าตาใหม่ให้ดูเข้ากับชื่อธีม Blue Theme ก็ได้หน้าตาใหม่มาแบบนี้

สามารถคลิกไปดูตัวจริงได้ที่นี่ครับ

ดูเหมือนมันเสร็จแล้ว แต่ความจริงมีรายละเอียดที่ต้องปรับอีกนิดหน่อยเพื่อการใช้งานจริง ในตอนต่อไปเรามาว่ากันต่อถึงการปรับนิดหน่อยที่ว่านั้นมีอะไรบ้าง ต้องปรับตรงไหน และทำไมต้องปรับ??

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

วันนี้มาอัพเดทเท่านี้ก่อน

[smf] แต่งธีม ตอน ดึงภาพจากกระทู้มาแสดงthumbnail

การดึงภาพมาแสดงในหน้ากระทู้รวม ต้องใช้ Mod มาช่วยครับ
ถ้ายังคิดไม่ออกว่า การดึงภาพมาแสดงเป็นอย่างไร ลองดูภาพด้านล่างนี้ก่อน

ถ้าในกระทู้นั้นๆมีการโพสต์ภาพที่ไม่ใช่การแทรกภาพโดยคำสั่ง [img][/img] ต้องเป็นการแนบไฟล์ภาพเท่านั้น ระบบก็จะดึงภาพแรกมาแสดงเป็น thumbnail ในหน้ารวม (ดังภาพ)

วิธีทำ ทำได้โดยใช้ mod ตัวนี้ครับ http://custom.simplemachines.org/mods/index.php?mod=1151

คลิกเข้าไปและทำตามวิธีที่เขาแนะไว้ครับ ไม่ยากเท่าไร

หลังจากติดตั้งปลั๊กอินตัวนี้เข้าไปแล้ว เราจะมีภาพหน้ากระทู้ และเมื่อคลิกเข้ากระทู้ไปแล้วก็จะเจอภาพที่แนบ แต่เป็นภาพขนาดเล็ก แต่สิ่งที่เราอยากได้ก็คือ คลิกกระทู้เข้าไปแล้วเจอภาพใหญ่เท่าขนาดจริงเลย โดยที่ไม่ต้องคลิก..วิธีทำ ทำอย่างไร..ติดตามได้ตอนนั้นครับ หรือคลิกที่นี่ได้เลย

[smf] เริ่มต้นโมธีม ตอน เปลี่ยนเมนูย่อยในบอร์ด

เราจะหยุดการโมหน้าแรกไว้เท่านี้ก่อนครับ
เดี๋ยวเราจะเข้าสู่การโมธีมในหน้ารายละเอียดด้านในกันดีกว่า ..คลิกเข้าไปที่ห้องไหนก็ได้สักห้องหนึ่ง สิ่งที่เราพบเด่นเป็นสง่าสะดุดตาเรามากเลย และดูไม่เข้าพวกกับใคร ท่านดูออกมั้ยครับ??

ถ้าท่านกำลังเดา ผมขอเฉลยละกัน มันคือเมนูครับ
ไม่ใช่เมนูใหญ่ แต่เป็นเมนูในหัวกระทู้ พวก มาร์คว่าอ่านแล้ว | แจ้งเตือน | เริ่มหัวข้อใหม่ | สำรวจความคิดเห็น (โพลล์)

มันยังเป็นแบบเก่าอยู่เลย เราจะทำให้มันกลมกลืนเข้ากับธีมใหม่ของเราใน ณ บัดนาว

วิธีทำมี 2 วิธีครับ เลือกเอาละกัน
1. คือ เอาภาพแบกกราวด์นั่นออกซะ
โดยเปิดไฟล์ index.template.php แล้วไปดูที่ฟังก์ชั่น template_button_strip
ภายในฟังก์ชั่นนี้จะมีคำสั่งนี้อยู่


echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';

ลบ class ทิ้งซะ ให้เหลือเท่านี้พอ

echo '
<td>&nbsp;</td>
<td>', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td>&nbsp;</td>';

ภาพแบกกราวด์จะหายไป ก็จะเหลือเพียงเมนูล้วนๆ

วิธีที่ 2 แก้ไขภาพแบกกราวด์ (ผมเลือกวิธีนี้ครับ)
แก้ไขภาพที่อยู่ในโฟลเดอร์ images ภาพที่แก้ไขมี
1. mirrortab_first.gif
2. mirrortab_back.gif
3. mirrortab_last.gif

แก้ไขโดยเปิดในโปรแกรม photoshop อยากให้มันเป็นสีอะไรก็ใส่สีเข้าไปครับ



ดูตัวอย่างจริง คลิกที่นี่ VIEW DEMO

[smf] เริ่มต้นโมธีม ตอน แต่งหน้าทาปากเธอให้สวยเด่น

ขอแนะแนะ style.css เขาคือตัวเอกสำคัญของบทนี้ครับ

บทที่แล้วเรารู้จักกับ index.template.php ไปแล้ว ถ้าจะเปรียบเทียบแล้ว index.template.php เปรียบเหมือนหน้าตาของหญิงสาวที่ไร้เครื่องประดับ เธอดูเปล่าเปลือย ธรรมดาไม่น่าดู แต่หากว่าได้แต่งองค์ทรงเครื่อง ทาหน้าทาปาก เขียนคิ้ว ใส่เสื้อผ้าหลากสี ด้วย style.css เมื่อไร เมื่อนั้นจากหญิงสาวธรรมดา จะกลายเป็นหญิงงามที่ไม่ธรรมดาทันที !!

อย่ากระนั้นเลย เราจับเธอมาแต่งตัวกันดีกว่าครับ ปล่อยเปลือยเปล่าเช่นนั้นนานๆจะไม่ดีเอา

นี่คือหน้าตาเดิมแบบธรรมดาๆ




ผมได้ใส่เสื้อผ้าและแต่งปากให้เธอบ้างเล็กน้อย .. (แค่เล็กน้อยเท่านั้นนะครับ ยังไม่เสร็จ)




มาดูสิ่งที่ผมทำกับเธอก่อนว่า ผมทำอะไรลงไปบ้าง

ผมเพิ่ม <div class="main"> ไปในไฟล์ index.template.php ในส่วนของฟังก์ชั่น template_main_above และเพิ่ม </div> เพื่อปิดแท็ก<div class="main"> ในส่วนของฟังก์ชั่น template_main_below

ธีมเดิมไม่มีdiv ใหญ่คร่อมเลย มีเพียง table ซึ่งยากต่อการจัดการ ดังนั้นผมเลยคร่อมด้วย <div class="main"> ซะ

หลังจากได้ <div class="main"> ไว้ในไฟล์ index.template.php แล้ว เราก็มาเขียนหน้าทาปากให้เริ่ดที่ไฟล์ style.css

ผมเพิ่มคำสั่งนี้ครับ

body
{
background: #B4E0FF url(images/header.png) no-repeat ;
margin: 0px;
padding: 12px 30px 4px 30px;
}
.main {
width:980px;
margin:0 auto;
padding:5px 10px 5px 25px;
}

คือ เพิ่มภาพพื้นหลัง และจัดการส่วนเนื้อหาให้มีความกว้างแค่ 980px ก็พอ เซตให้มันอยู่ตรงกลางด้วยคำสั่ง margin: 0 auto:

เพียงเท่านี้เราก็เห็นความเปลี่ยนแปลงของธีมใหม่ของเราบ้างแล้วละครับ
มันยังไม่จบเพียงเท่านี้ เดี่ยวคราวหน้ามาทาสีฉวีวรรณให้เธอเอี่ยมกว่านี้ จะได้เป็นหญิงสาวพราวเสน่ห์และมีหน้าตาไม่เหมือนใครอีกด้วย..

[smf] เริ่มต้นโมธีม

วันก่อนได้สร้างไฟล์ template ใหม่แล้ว วันนี้จะพาไปดูรายละเอียดธีมใหม่นั้น
อย่างที่ได้เขียนไว้ในวันก่อนแล้วว่า ในโฟลเดอร์ของธีมใหม่จะมีไฟล์หลักๆแค่ 4 ตัว 1. index.php 2. index.index.template.php 3. style.css และ 4. images

ไฟล์ index.php และโฟลเดอร์ images ยังไม่ต้องสนใจ
พระเอกของเราในตอนนี้คือ index.template.php ดับเบิ้ลคลิกมันคือมาเลยครับ

แน๊ ยังอีก..ไปเปิดมันขึ้นมาก่อนสิ เดี๋ยวก็คุยกันไม่รู้เรื่อง
ถ้าให้ดีเปิดด้วยโปรแกรม Dreamweaver เวอร์ชั่นห่าอะไรก็ได้ (แต่ผมใช้เวอร์ชั่น CS5) เปิดขึ้นมาแล้วคลิกขวาแล้วเลือก Functions ตามภาพ



smf จัดการหน้านี้ด้วยฟังก์ชั่นล้วนๆครับ มีกันอยู่ด้วยกัน 6 ฟังก์ชั่น แต่เราจะสนใจแค่ 2 ฟังก์ชั่นก็พอ
คือ template_main_above และ template_main_below

พูดกันให้เข้าใจง่ายๆหน่อย ก็คือ ฟังก์ชั่น template_main_above ทำหน้าที่ตามชื่อเลยครับ เป็นส่วนครึ่งบนของไฟล์ ส่วน template_main_below ก็คือส่วนท่อนล่าง

ลองดูภาพด้านล่างประกอบ น่าจะเข้าใจได้ง่ายขึ้น


ถ้าดูจากภาพจะเห็นว่าฟังก์ชั่นที่เราสนใจเพื่อการโมธีมก็มีอยู่แค่ 2 ตัวอย่างที่กล่าวในเบื้องต้นเท่านั้นเองครับ(ฟังก์ชั่นที่มีพื้นสีเหลืองจางๆ)

เราอยากจะปรับแต่งตัวไหนก็กระโจนใส่ฟังก์ชั่นนั้นเลย

ในบทนี้ไฟล์ index.template.php อาจจะเป็นพระเอก แต่พระเอกที่แท้จริงที่จะทำให้ทุกอย่างเปลี่ยนแปลงรูปร่างจริงๆ คือ style.css ซึ่งจะกล่าวในบทต่อไปครับ