วันพุธที่ 28 ธันวาคม พ.ศ. 2554

ถอดธีม wordpress สู่ ธีมsmf

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

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

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

ผมได้เขียนไว้ในบล็อกนี้เกี่ยวกับการเริ่มต้นแต่งธีมsmf จากธีม Default ไว้แล้ว ตั้งแต่สเต็ปแรก (คลิกไปอ่านได้)


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

http://www.hosting22.com/wordpress/elegantthemes/
http://www.webdesignbooth.com/wordpress-showcase-40-beautiful-and-well-designed-blogs-powered-by-wordpress/
http://freewordpresslayouts.com/


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

ธีม wordpress จะมีท็อปเมนู ธีม smf ก็มี
ธีม wordpress มีเนื้อหาตรงกลาง และมีเมนูด้านข้าง(ซ้ายหรือขวา)
ธีม smf มีเนื้อหาตรงกลางเหมือนกัน แตไม่มีเนูด้านข้างไม่ว่าซ้ายหรือขวา เพราะต้องการแสดงเนื้อหาหรือภาพในกระทู้ในพื้นที่ๆกว้างๆ
ส่วน footer ทั้ง wordpress และ smf เหมือนกัน

สรุปก็คือ smf ไม่มี sidebar พอเห็นธีม wordpress ที่สวยๆ ก็ลองนึกจินตนาการว่า ถ้าเป็น smf ซึ่งไม่มี sidebar แล้ว ธีมตัวนี้จะยังสวยอยู่มั้ย?

ถ้าคิดดูแล้ว มันก็น่าจะยังสวยอยู่ก็เลือกเอาธีมนั่นแหละ ..หรือถ้าคิดดูแล้ว ถ้าไม่มี sidebar ไม่สวยแน่ๆ ก็เอามาทั้ง sidebar นั่นแหละ smf มี sidebar ก็ไม่เลว เพียงแต่เนื้อที่แสดงเนื้อหากระทู้จะเล็กลงไปเท่านั้น ไม่สะใจพวกชอบโพสต์รูป

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

ขอให้สนุกกับการแต่งธีมครับ

วันพุธที่ 21 ธันวาคม พ.ศ. 2554

[smf]แจกธีม smf 2.0 เรียบง่ายสบายตา

วันนี้มีธีม smf เวอร์ชั่น 2.0 มาแจกครับ
ธีมตัวนี้เหมาะสำหรับนำไปโมดิฟาย ง่ายต่อการแก้ไข ปรับปรุง เปลี่ยนแปลง แก้ไข ฯลฯ


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

ถ้าต้องการเพิ่มหรือเปลี่ยนภาพพื้นหลัง ให้เปิดไฟล์ index.template.php บรรทัดที่ 405 หรือค้นหาคำว่า
 id="slideshow" ท่านจะเห็นรายชื่อภาพ ดังนี้


 <img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/300813_193622397380685_100001987785137_445274_1599363279_n.jpg" alt="Slideshow Image 1" class="active" />
<img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/319177_193910440685214_100001987785137_445875_286526053_n.jpg" alt="Slideshow Image 1"/>
<img src="http://image.ohozaa.com/i/382/isa2K.JPG" alt="Slideshow Image 2" />
<img src="http://image.ohozaa.com/i/41b/bUHDf.JPG" alt="Slideshow Image 3" />
<img src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/310987_10150354398662762_702047761_8356920_1947153730_n.jpg" alt="Slideshow Image 4" />

นั่นคืำอจำนวนภาพทั้งหมด หากต้องการภาพอื่นก็แค่ไปหา url ของภาพมาเปลี่ยน

อันดันต่อไปมาดูหัวของธีมตัวนี้ "ชุมชนออนไลน" ชาวพฤกษาทาวน์ 
ตัวนี้ใช้ cufon นะครับ ตัวหนังสือที่อยู่ภายใต้แท็ก h1 , h2 และคลาส .sub-title จะกลายร่างเป็นฟ้อนท์ลักษณะแบบนี้หมด ผมเลือกใช้แค่่ส่วนหัวของบอร์ด

อันสุดท้ายมาดูที่ส่วนfooter ด้านล่างสุดมีการดึงข่าวrss มาแสดงด้วย ท่านสามารถเปลี่ยนแหล่งข่าวจากที่อื่นได้ด้วยตัวเอง โดยสามารถเปิดไฟล์ index.template.php

ค้นหาคำว่า feedrss() วิธีใช้งานก็แค่เอา rss จากเว็บที่เราต้องการแสดงมาใส่ เช่น ผมดึงข่าวจากไทยรัฐ ก็จะได้แบบนี้ feedrss('http://www.thairath.co.th/rss/news.xml')

สุดท้ายอยากให้ลองไปดาวน์โหลดมาใช้กันดูครับ เจอปัญหาตรงไหนก้อโพสต์ถามได้ครับ

ดาวน์โหลดที่นี่


ดูตัวอย่างจริงที่นี่

วันอังคารที่ 20 ธันวาคม พ.ศ. 2554

MVC กับ ลูกบอล 3 สี


www.anil2u.info ได้เปรียบเทียบการจัดการโค๊ดด้วยระบบ MVC ด้วยลูกบอล 3 สี ซึ่งดูแล้วทำให้เข้าใจระบบ MVC มากขึ้น

ภาพแรก ให้เลือกลูกบอลสีแดงออกมา จะเห็นว่ามีความยุ่งยากพอสมควรเพราะทุกสีคละเคล้าปะปนกันไปหมด เปรียบเทียบกับการเขียนโปรแกรมรวมกันระหว่าง PHP , Database และ HTML

ภาพที่สอง แม้จะแยกลูกบอลสีเขียวออกไปแล้ว แต่โจกทย์คือให้เลือกลูกบอลสีแดงออกมา ก็พบว่ายังมีความยุ่งยากเช่นเดิม แม้ไม่ยากเท่ากับโจทย์แรก แต่ก็สร้างความยุ่งยากไม่น้อย เปรียบเทียบกับระบบเทมเพลท เช่น smarty  โดยแบ่ง Coding กับ Database ไว้ส่วนหนึ่ง และแยก HTML ไว้อีกส่วนหนึ่ง

ส่วนภาพสุดท้าย มีการแยกลูกบอลทั้งสามสีออกจากกัน  เมื่อต้องการลูกบอลสีไหนก็หยิบสีนั้นออกมาโดยทันที เปรียบเทียบกับระบบ MVC ที่มีการแยกการจัดการชัดเจน เช่น CakePHP , CodeIgniter

ที่มาครับ  http://www.anil2u.info/2011/11/understanding-the-basic-need-of-mvc-architecture/

วันพฤหัสบดีที่ 15 ธันวาคม พ.ศ. 2554

[PHP] substr, strlen และ strrpos


วันนี้ชวนมาทบทวน function พื้นฐานใน php ว่าด้วย substr, strlen และ strrpos


หากเราต้องการจะแทนที่อะไรสักอย่างในตำแหน่งใดตำแหน่งหนึ่ง ด้วยเครื่องหมาย xxx หรือ ****
เช่น ผู้ใช้มีรหัสผ่านชุดหนึ่ง 123456789 เราอยากจะแทนที่ 3 ตำแหน่งสุดท้ายอันได้แก่ 789 ด้วยเครื่องหมาย xxx หรือ ***  จะทำอย่างไร?

พระเอกในโจกทย์นี้คือ substr + strlen
substr ( string, start, length ); //ใช้ดึงข้อความตั้งแต่ตำแหน่งที่กำหนด ตามจำนวนที่กำหนด
ส่วน strlen  strlen ( string ); //ใช้นับจำนวนอักษรทั้งหมด

ตัวอย่างการใช้งาน
echo substr($_POST['password'],0,strlen($_POST['password'])-3)."***";

ผลลัพธ์ 123456***


แต่ถ้าจะแทนที่ชุดอักษรที่มีเครื่องหมายคั่นระหว่างเช่น ตัวเลขไอพี  125.115.620 เราต้องการจะแทนตัวเลขชุดสุดท้าย ด้วยเครื่องหมาย xxx ให้ได้ผลลัพธ์ 125.115.xxx
ให้ใช้ substr + strrpos 
strrpos ( string, find, start ); //ใช้ค้นหาข้อความที่กำหนดใน string จากหลังมาหน้า โดยจะคืนค่าตำแหน่งแรกที่พบ หรือคืนค่า false ถ้าไม่พบ ( การค้นหานี้คำนึงถึงตัวพิมพ์เล็กพิมพ์ใหญ่ ) 

ตัวอย่างการใช้งาน


$ip=" 125.115.620";
echo substr($ip,0,strrpos($ip,'.')).".xxx"
ผลลัพทธ์  125.115.xxx


วันเสาร์ที่ 1 ตุลาคม พ.ศ. 2554

[smf] แยกกระทู้ปักหมุดจากกระทู้ปกติโดยมีแถวคั่น 1 แถว


กระทู้ปักหมุด คือกระทู้ที่ผู้ดูแลบอร์ดต้องการให้อยู่ด้านบนสุด แม้จะมีกระทู้ใหม่ๆเข้ามา แต่กระทู้ปักหมุดก็ยังโดดเด่นเล่นท่าอย่างท้าทายอยู่อันดับต้นๆเสมอ

ถ้าคิดภาพไม่ออก ลองดูรูปด้านล่างนี้


(ภาพตย.จากบอร์ดของ zone-it)

จะเห็นกระทู้ปักหมุดจะมีหมุดปักอยู่ชัดเจน และสามารถปักได้มากกว่า 1 กระทู้ (ตามตย.)

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

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



เราก็แค่จับเมาสท์ให้มั่นแล้วเอาไปคลิกที่ข้อความนั้น ก็เป็นอันเสร็จพิธี

แต่ถ้าท่านหาเมนูนี้ไม่เจอ ก็ไม่ต้องโวยวายร้องไห้คร่ำครวญบ่นพ้อตัดพ้อต่อโชคชะตาของตัวเองนะครับ

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

บางท่านเถียงว่า ผมไม่ได้เป็นแอดมิน แต่ทำไมผมเห็นเมนูนี้ ? ผมไม่ได้ผิดปกติด้านพันธุกรรมใช่มั้ยครับ?

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

โอเคนะครับ เรื่องปักหมุด ทีนี้จะเข้าประเด็นของกระทู้นี้สักที !!!
(เขียนมาครึ่งหน้ายังไม่เข้าประเด็นอีก นิสัยชักจะละม้ายสส.เข้าไปทุกที)


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

ทำได้!!

และวิธีทำนั่น คือ

1. เปิดไฟล์ MessageIndex.template.php ซึ่งอยู่ในโฟลเดอร์ธีมของท่านเอง ถ้าไม่มีไปหาในโฟลเดอร์ธีม Default แล้วก็อปปี้มาไว้ในโฟลเดอร์ธีมของมึง เอ้ย ของคุณครับ

2. ค้นหาคำสั่งนี้
foreach ($context['topics'] as $topic)
    {

3. เจอคำสั่งด้านบนแล้ว เพิ่มคำสั่งนี้ต่อท้าย
if (isset($previousTopicClass) &&  strpos($previousTopicClass, 'sticky') !== false &&  !$topic['is_sticky'])
 echo '<tr><td colspan="7"></td></tr>';
$previousTopicClass = $topic['class'];

  เซฟ..เสร็จ!!

วันอังคารที่ 30 สิงหาคม พ.ศ. 2554

[smf] วิธีลบกระทู้ครั้งละหลายๆกระทู้

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

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

ส่วนอีกวิธีหนึ่ง กรณีสแปมมาหลายตัวและโพสต์กระทู้สลับกันไปสลับกันมาเยอะแยะมากมาย เราต้องการติ๊กเลือกกระทู้โน้น กระทู้นี้ กระทู้นั่น กระทู้นั้น ฯลฯ แล้วคลิก ลบทีเดียวเลย ทำได้ไหม??

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

เสร็จแล้วครับ
ทีนี้ลองไปดูที่กระทู้รวม เราจะมีปุ่มสำหรับติ๊กหลังกระทู้แล้ว





ขอบคุณบทความนี้จาก http://www.justusers.net ครับ

วันเสาร์ที่ 20 สิงหาคม พ.ศ. 2554

SMF Blue Gallery บอร์ดสำหรับคนชอบถ่ายภาพ




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

ถ้าคลิกเข้าไปแล้ว เจอบ้างไม่เจอบ้าง ก็ไม่ต้องตกใจนะครับ พอดีผมไปอาศัยฝากข้อมูลไว้ที่โฮสท์ฟรี เลยอาจมีปัญหาบ้างในบางครั้ง ต้องกด f5 เพื่อรีเฟรซอีกสักครั้งหรือสองครั้ง สามครั้งก็ดี


สำหรับธีมตัวนี้ ก็ตามชื่อเลยครับ สำหรับสังคมของคนที่ชื่นชอบการถ่ายรูป แบ่งปันข้อมูลการท่องเที่ยวและอื่นๆ

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

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

ท่านที่สนใจธีมนี้ เมล์มาที่ nevikup(at)hotmail.com (ไม่ได้แจกนะครับ)

วันศุกร์ที่ 19 สิงหาคม พ.ศ. 2554

ฟังก์ชั่น BBCode to HTML แปลง BBCode เป็น HTML

บางครั้งเราต้องการดึงรายละเอียดกระทู้มาแสดง แต่ปัญหาที่เจอคือมันจะมาทั้ง bbcode ด้วย เวลาแสดงผล html ก็ไม่รู้จักอีก

ดังนั้น ต้องมีฟังก์ชั่นในการแปลงให้ข้อความจาก bbcode กลับเข้าสู่ html ดั่งเดิม

function bbcode2html($message) {

$preg = array(
'/(?<!\\\\)\[color(?::\w+)?=(.*?)\](.*?)\[\/color(?::\w+)?\]/si' => "<span style=\"color:\\1\">\\2</span>",
'/(?<!\\\\)\[size(?::\w+)?=(.*?)\](.*?)\[\/size(?::\w+)?\]/si' => "<span style=\"font-size:\\1\">\\2</span>",
'/(?<!\\\\)\[font(?::\w+)?=(.*?)\](.*?)\[\/font(?::\w+)?\]/si' => "<span style=\"font-family:\\1\">\\2</span>",
'/(?<!\\\\)\[align(?::\w+)?=(.*?)\](.*?)\[\/align(?::\w+)?\]/si' => "<div style=\"text-align:\\1\">\\2</div>",
'/(?<!\\\\)\[b(?::\w+)?\](.*?)\[\/b(?::\w+)?\]/si' => "<span style=\"font-weight:bold\">\\1</span>",
'/(?<!\\\\)\[i(?::\w+)?\](.*?)\[\/i(?::\w+)?\]/si' => "<span style=\"font-style:italic\">\\1</span>",
'/(?<!\\\\)\[u(?::\w+)?\](.*?)\[\/u(?::\w+)?\]/si' => "<span style=\"text-decoration:underline\">\\1</span>",
'/(?<!\\\\)\[center(?::\w+)?\](.*?)\[\/center(?::\w+)?\]/si' => "<div style=\"text-align:center\">\\1</div>",

// [email]
'/(?<!\\\\)\[email(?::\w+)?\](.*?)\[\/email(?::\w+)?\]/si' => "<a href=\"mailto:\\1\" class=\"bb-email\">\\1</a>",
'/(?<!\\\\)\[email(?::\w+)?=(.*?)\](.*?)\[\/email(?::\w+)?\]/si' => "<a href=\"mailto:\\1\" class=\"bb-email\">\\2</a>",
// [url]
'/(?<!\\\\)\[url(?::\w+)?\]www\.(.*?)\[\/url(?::\w+)?\]/si' => "<a href=\"http://www.\\1\" target=\"_blank\" class=\"bb-url\">\\1</a>",
'/(?<!\\\\)\[url(?::\w+)?\](.*?)\[\/url(?::\w+)?\]/si' => "<a href=\"\\1\" target=\"_blank\" class=\"bb-url\">\\1</a>",
'/(?<!\\\\)\[url(?::\w+)?=(.*?)?\](.*?)\[\/url(?::\w+)?\]/si' => "<a href=\"\\1\" target=\"_blank\" class=\"bb-url\">\\2</a>",
// [img]
'/(?<!\\\\)\[img(?::\w+)?\](.*?)\[\/img(?::\w+)?\]/si' => "<img src=\"\\1\" alt=\"\\1\" class=\"bb-image\" />",
'/(?<!\\\\)\[img(?::\w+)?=(.*?)x(.*?)\](.*?)\[\/img(?::\w+)?\]/si' => "<img width=\"\\1\" height=\"\\2\" src=\"\\3\" alt=\"\\3\" class=\"bb-image\" />",

// [list]
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[\*(?::\w+)?\](.*?)(?=(?:\s*<br\s*\/?>\s*)?\[\*|(?:\s*<br\s*\/?>\s*)?\[\/?list)/si' => "\n<li class=\"bb-listitem\">\\1</li>",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[\/list(:(?!u|o)\w+)?\](?:<br\s*\/?>)?/si' => "\n</ul>",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[\/list:u(:\w+)?\](?:<br\s*\/?>)?/si' => "\n</ul>",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[\/list:o(:\w+)?\](?:<br\s*\/?>)?/si' => "\n</ol>",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(:(?!u|o)\w+)?\]\s*(?:<br\s*\/?>)?/si' => "\n<ul class=\"bb-list-unordered\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list:u(:\w+)?\]\s*(?:<br\s*\/?>)?/si' => "\n<ul class=\"bb-list-unordered\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list:o(:\w+)?\]\s*(?:<br\s*\/?>)?/si' => "\n<ol class=\"bb-list-ordered\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(?::o)?(:\w+)?=1\]\s*(?:<br\s*\/?>)?/si' => "\n<ol class=\"bb-list-ordered,bb-list-ordered-d\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(?::o)?(:\w+)?=i\]\s*(?:<br\s*\/?>)?/s' => "\n<ol class=\"bb-list-ordered,bb-list-ordered-lr\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(?::o)?(:\w+)?=I\]\s*(?:<br\s*\/?>)?/s' => "\n<ol class=\"bb-list-ordered,bb-list-ordered-ur\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(?::o)?(:\w+)?=a\]\s*(?:<br\s*\/?>)?/s' => "\n<ol class=\"bb-list-ordered,bb-list-ordered-la\">",
'/(?<!\\\\)(?:\s*<br\s*\/?>\s*)?\[list(?::o)?(:\w+)?=A\]\s*(?:<br\s*\/?>)?/s' => "\n<ol class=\"bb-list-ordered,bb-list-ordered-ua\">",

//line breaks
'/\n/' => "<br>",
// escaped tags like \[b], \[color], \[url], ...
'/\\\\(\[\/?\w+(?::\w+)*\])/' => "\\1"

);

$message = preg_replace(array_keys($preg), array_values($preg), $message);
return $message;
}

วิธีใช้
$body="ฉัน[b]รัก[/b]ประเทศไทย"
echo bbcode2html($body);

ผลลัพธ์

ฉัน<b>รัก</b>ประเทศไทย

วันพฤหัสบดีที่ 18 สิงหาคม พ.ศ. 2554

[smf] แจกธีมsmf Blue Theme 2.0

หลังจากเคยแจกไปแล้วสำหรับ Theme smf Blue Theme เวอร์ชั่น 1 (สำหรับ smf เวอร์ชั่น 1.1.1x) คลิกดูที่นี่

วันนี้ขอเอาใจคนใช้ smf เวอร์ชั่น 2.0 ย้ำนะครับว่าเป็นเวอร์ชั่น 2.0 finalเท่านั้น ประเภทเวอร์ชั่น 2 rc1 หรือ rc 3 rc 5 ใช้ไม่ได้นะครับ

หน้าตาอาจไม่ต่างจาก Blue Theme เวอร์ชั่น 1 มากนัก มาดูหน้าตาก่อนดีครับ



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

ดาวน์โหลดคลิกที่นี่

สำหรับ Blue Theme ตัวนี้ผมได้ปรับแต่งจากธีม Default ของ smf ดังนั้นหน้าตาจึงดูไม่แตกต่างจากธีมดีฟอลต์สักเท่าไร แต่ถ้าใครต้องการหนีจากความซ้ำซากของธีมดีฟอลต์ ธีมนี้คือคำตอบ

สิ่งที่เพิ่มเติมให้ใน Blue Theme นี้คือ แบนเนอร์ และเมนูหลักเพื่อลิงค์ไปยังหน้าแรกของเว็บไซต์

เอาเป็นว่า หากใครพบปัญหาในการใช้งานหรือนำไปแก้ไขเปลี่ยนแปลงแล้วไม่ได้ดังใจ ก็แสดงความคิดเห็นด้านล่างได้

แล้วพบกันใหม่ในตอนนั้น

วันอังคารที่ 16 สิงหาคม พ.ศ. 2554

[smf] Theme 2.0 ธีม smf สำหรับเวอร์ชั่น 2.0

ก่อนจะเข้าเรื่องราวของการแต่งธีม smf สำหรับเวอร์ชั่น 2.0 แบบ step by step วันนี้ขอนำชมธีมที่แต่งแล้วของ smf เวอร์ชั่น 2.0 ซะหน่อยก่อน เพื่อเรียกน้ำย่อย


(คลิกที่ภาพเพื่อดูภาพใหญ่)

ธีมตัวนี้ชื่อว่า Nonthaburi แน่นอนครับ ตั้งชื่อตามเนื้อหา เพราะเนื้อหาต้องการสร้างเป็นชุมชมของคนนนทบุรี (หรือชุมชนของคนในจังหวัดใดจังหวัดหนึ่งที่นำธีมนี้ไปใช้) ต้องการให้คนในจังหวัดช่วยกันนำเสนอเนื้อหา ที่ท่องเที่ยวภายในจังหวัดของตนเอง

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

ลองคลิกดูตัวอย่างจริงๆได้ที่นี่นะครับ




วันเสาร์ที่ 13 สิงหาคม พ.ศ. 2554

[smf] อัพเกรด upgrade smf 2.0

ก่อนจะเข้าสู่เรื่องราวของ smf ในเวอร์ชั่น 2.0
อันดับแรกเลยคือต้องทำการอัพเกรดจากเวอร์ชั่น 1.1+ สู่เวอร์ชั่น 2.0 !!

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

อย่าให้เป็นเช่นนั้นเลย ข้อมูลที่สะสมผ่านการโพสต์จากมวลสมาชิกมากหน้าหลายตา กลั่นกรองมาหลายปีต้องมาป่นปี้ด้วยวิธีอัพเกรดที่ผิดพลาด !!

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

หลังจากโหลดมาไว้ในเครื่องแล้ว รันดูว่าใช้งานได้หรือเปล่า
ถ้าใช้งานได้ปกติให้ล็อกอินเข้าสู่เมนูแอดมิน ถ้าบอร์ดของเราเป็นภาษาไทย เปลี่ยนให้เป็นภาษาอังกฤษก่อน

การอัพเกรด smf จากเวอร์ชั่นอะไรก็แล้วแต่สู่เวอร์ชั่น 2.0 final ก่อนอื่นต้องไปดาวน์โหลดไฟล์upgrade ก่อนครับ (คลิกดาวน์โหลดที่ลิงค์ด้านล่าง)

http://download.simplemachines.org/

เลือกเอาที่เป็น Large upgrade นะครับ


จากนั้นเอามาแตกซิบให้เสร็จสรรพ แล้วจับมันโยนลงไปในโฟลเดอร์ของsmfของเราเลยครับ อาจมีการแจ้งเตือนการทับไฟล์เดิม ก็โอเคไปเลย

เมื่อดาวน์โหลดไฟล์มาไว้ในโฟลเดอร์เสร็จแล้ว ทีนี้เรียกไฟล์ upgrade.php ผ่านบราวเซอร์ http://localhost/forum/upgrade.php

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

หากไม่มีปัญหาใดๆ ในการอัพเกรดจะใช้เวลาไม่เกิน 15 นาที

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

การปรับแต่งหลายๆอย่างที่ทำได้ในเวอร์ชั่น 1 ก็ยังสามารถปรับแต่งได้ในเวอร์ชั่น 2 เช่นกันครับ
เดี๋ยวครั้งหน้าเรามาดูวิธีการแต่งธีมในเวอร์ชั่น 2.0 บ้าง





หมายเหตุ : ดูการอัพเกรดพร้อมภาพประกอบที่ http://www.select2web.com/forums/index.php?topic=45.0

วันพุธที่ 10 สิงหาคม พ.ศ. 2554

[web] print screen หน้าเว็บเพจง่ายๆด้วย Aviary

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

บางคนอาจบอกว่า ใช้ปุ่มPrint Screen บนคีย์บอร์ด ไม่ง่ายกว่าเหรอ?

ง่ายกว่าจริงครับ แต่ถามว่าปุ่มนั้นปุ่มเดียวสามารถปรินสกรีนหน้าเว็บทั้งหน้าได้ไหมละ?
กรณีถ้าเว็บหน้าย๊าว ยาว

ทำได้เหมือนกัน แต่ต้องปรินสกรีนหลายๆครั้ง เอาไปต่อในโปรแกรม photoshop โอ๊ยยุ่งยากตายห่า!!

ผมมีวิธีที่ง่ายกว่านั้นครับ เพียงท่านใช้ Firefox ท่านก็ลง Add-ons ชื่อว่า Aviary
หรือคลิกที่นี่ครับ http://aviary.com/install/firefox

ในหน้าดังกล่าวระบบจะชวนให้ท่าน install Aviary ลงบนบราวเซอร์ Firefox ลงเสร็จแล้ว restart firefox สักรอบนึงก่อน

จากนั้นบนเมนูบราวเซอร์ของท่านจะมีเมนูเพิ่มมาอีกตัวคือ Aviary
ลองคลิกดูจะมีเมนูให้เลือกเพียบ!!



ทั้ง capture ภาพทั้งเพจ เฉพาะจุด หรือตำแหน่งที่เลือกก็ได้
งานนี้บอกได้คำเดียวว่า ..มันจอร์จมาก!!

วันจันทร์ที่ 8 สิงหาคม พ.ศ. 2554

[smf]Tip การตั้งค่าให้แสดงเวลาในการประมวลผลในหน้าเพจ

การตั้งค่าใน smf ความจริงไม่ได้ยากอะไรหรอกครับ ความยากของมันอยู่ตรงที่ว่า เราหาเมนูไม่เจอ??

วันนี้เลยจะมาแนะนำเมนูสำหรับแสดงเวลาในการประมวลผลในหน้าเพจ



สำหรับเวอร์ชั่น 1 เข้าแอดมนิ > ส่วนปรับแต่งค่าการใช้งาน > วางรูปแบบ
ติ๊กตรงคำว่า แสดงเวลาที่ใช้ในการสร้างหน้าทุกหน้า

กดบันทึก..เสร็จ

สำหรับเวอร์ชั่น 2 เข้าแอดมิน > ปรับแต่งบอร์ด > Features and Options > Layout
ติ๊กตรงคำว่า Display time taken to create every page

กดบันทึก.. เสร็จ

วันนี้มาง่ายๆจบง่ายๆงี้แหละ

วันศุกร์ที่ 5 สิงหาคม พ.ศ. 2554

[smf] แจกธีมsmf Blue Theme

ผมเปิดบล็อกและเขียนบทความเกี่ยวกับ smf พร้อมๆกับแต่งธีมของ smf ไปด้วย
เมื่อเขียนบทความเรื่องอะไร ก็ไปปรับแต่งในธีมนั้นๆ ไปด้วย บทความที่เีขียนเกี่ยวกับ smf มากกว่า 20 บทความผมได้ลงมือจริงในธีมที่ชื่อว่า Blue theme

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

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

ภาพตัวอย่าง


คลิกดูตัวอย่างจริง

ดาวน์โหลดที่นี่

ธีมนี้สำหรับ smf เวอร์ชั่น 1 เท่านั้นนะครับ จะ 1.1 หรือ 1. อะไรก็ได้ ส่วนเวอร์ชั่น 2 รอหน่อยนะครับ จะออกมาพร้อมๆกับบทความ
และไม่ support กับ ไออี 6 นะครับ

หากมีปัญหาการใช้งาน กรุณาโพสต์ถามที่นี่นะครับ

วันพฤหัสบดีที่ 4 สิงหาคม พ.ศ. 2554

[smf] แก้ปัญหาเมื่อตั้งกระทู้ยาวๆไม่ได้

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

การตั้งกระทู้ยาวๆไม่ได้ นั้น
ปัญหาเกิดจากการใช้ charset เป็น utf-8 ทำให้มีการจัดเก็บตัวอักษรเพิ่มขึ้น วิธีการแก้ปัญหาสามารถแก้ได้หลายจุด หรืออาจจะต้องแก้พร้อมๆกัน

1. ในส่วนของ database mysql ถ้าหากเป็น utf8_bin อาจจะต้องไปแก้ใน​ table "smf_messages" ​จาก​ TINYTEXT ​เป็น MEDIUMTEXT
ข้อนี้เท่ากับเป็นการขยายขนาดฟิลด์ แต่ถ้าแก้แค่นี้ก็ยังคงเหมือนเดิม นอกจากจะเปลี่ยนสคริปตามที่คุณ terdsak บอก

2. การแก้ไขในส่วนของคำสั่ง
เปิดไฟล์ /Sources/Post.php แล้วหาบรรทัดคำสั่ง

// Make sure the subject isn't too long - taking into account special characters.
if ($func['strlen']($form_subject) > 100)
$form_subject = $func['substr']($form_subject, 0, 100);

// At this point, we want to make sure the subject isn't too long.
if ($func['strlen']($_POST['subject']) > 100)
$_POST['subject'] = addslashes($func['substr'](stripslashes($_POST['subject']), 0, 100));

// Maximum number of characters.
if ($func['strlen']($_POST['subject']) > 100)
$_POST['subject'] = addslashes($func['substr'](stripslashes($_POST['subject']), 0, 100));

ทั้งหมด 3 จุด แล้วเปลี่ยนตัวเลขจาก 100 ให้เพิ่มขึ้นเป็นซัก 300 - 500 แทน
ตรง นี้ทำให้มีการตัดคำให้ยาวขึ้น ซึ่งจะแก้ปัญหาได้ระดับหนึ่ง แต่จะยังมีปัญหาว่าถ้าเกิดมีการตั้งหัวข้อที่ยาวมากๆๆก็จะเจอปัญหาการตัดคำ ไม่ลงตัว กลายเป็นมีตัวประหลาดเหมือนเดิม

ั3. เปิดไฟล์ /Themes/default/Post.template.php

ประมาณบรรทัดที่ 426
// Now show the subject box for this post.
echo '
<tr>
<td align="right" style="font-weight: bold;', isset($context['post_error']['no_subject']) ? 'color: red;' : '', '" id="caption_subject">
', $txt[70], ':
</td>
<td>
<input type="text" name="subject"', $context['subject'] == '' ? '' : ' value="' . $context['subject'] . '"', ' tabindex="', $context['tabindex']++, '" size="80" maxlength="80" />

ให้เปลี่ยนค่า maxlength ให้ลดลงเหลือซัก 50


เครดิตจาก : http://smf.rcw.ms/index.php?topic=1753.0

[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] ทำบอร์ดให้โพสต์ youtube ได้(สำหรับ smf เวอร์ชั่น 2+)

ครั้งก่อนที่เขียนเรื่องการโพสต์ youtube นั่นสำหรับ smf เวอร์ชั่น 1

ถ้าเวอร์ชั่น 2 ก็จะมีการแก้ไขที่แตกต่างกันไป (ยกเว้นคนติดตั้ง mod ) อาจไม่ยุ่งยากและซับซ้อนเท่าไร แต่ผมใช้วิธี manual ครับ

ไฟล์ที่เกี่ยวข้องมี แค่ 3 ตัวครับ
1 ./Sources/Subs.php
2 ./Sources/Subs-Editor.php
3 .Themes/default/languages/Modifications.english.php

ในไฟล์ Sources/Subs.php แก้ไขดังนี้
ค้นหาคำว่า
array(
'tag' => 'hr',
'type' => 'closed',
'content' => '<hr />',
'block_level' => true,
),
เจอแล้วตบลงมาบรรดทัดนึ่ง เพิ่มคำสั่งนี้เข้าไป
array(
'tag' => 'youtube',
'type' => 'unparsed_commas_content',
'test' => '\d+,\d+\]',
'content' => '',
'validate' => create_function('&$tag, &$data, $disabled', '
if (isset($disabled[\'url\']))
$tag[\'content\'] = \'$1\';'),
'disabled_content' => '$1',
),

เซฟปิดไป

ในไฟล์ Sources/Subs-Editor.php แก้ไขดังนี้
ค้นหาคำสั่ง

array(
'image' => 'img',
'code' => 'img',
'before' => '[img]',
'after' => '[/img]',
'description' => $txt['image']
),

ใส่คำสั่งนี้ด้านบนคำสั่งที่ค้นหา

$context['bbc_tags'][] = array(
array(
'image' => 'youtube',
'code' => 'youtube',
'before' => '[youtube]',
'after' => '[/youtube]',
'description' => $txt['youtube']
),

เซฟปิด..

แก้ไขไฟล์ Modifications.english.php ดังนี้
เพิ่มคำสั่งนี้ไป
$txt['youtube'] = 'YouTube';
$txt['youtube_invalid'] = '#Invalid YouTube Link#';

เซฟปิด..

เอาไอค่อนนี้ ไปเก็บไว้ที่โฟลเดอร์ images ในธีมของเรา

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

วันพุธที่ 3 สิงหาคม พ.ศ. 2554

[smf] ขอแนะนำ Anti-Spam Verification มอดดักสแปม

บทที่แล้ว พูดถึงตัวป้องกันสแปมที่ smf ในเวอร์ชั่น 1 ให้มา ซึ่งจะเห็นว่าเท่านั้นมันไม่พอจริงๆที่จะป้องกันโจรร้ายที่จะเข้ามาจู่โจมบอร์ดของเรา

ดังนั้น วันนี้จึงต้องพาพระเอกมาให้รู้จักกันซะหน่อย เขามีชื่อว่า

คลิกเข้าไปดูไปดาวน์โหลดที่นี่ http://custom.simplemachines.org/mods/index.php?mod=1516

ท่านไหนที่ยังไม่เคยติดตั้ง mod วันนี้เป็นโอกาสดีแล้วครับ ผมจะชวนท่านติดตั้ง แล้วท่านจะอุทานว่า บ๊ะๆ ๆ ๆ ..มันง่ายแค่นี้เองนิ !

หลังจากดาวน์โหลดมอดมาแล้ว ก็ไม่ต้องแตกซิบนะครับ ทิ้งไว้งั้นแหละ หลังจากนั้นล็อกอินเข้าสู่ระบบแอดมิน เลือกเมนู -> ศูนย์จัดการแพ็คเกจ > Download Packages

พอคลิกมาถึงหน้านี้แล้ว ลงไปด้านล่างสุดครับ จะเจอเมนู "อัพโหลดแพ็คเกจ" ให้ท่านทำการ Browse แล้วเลือกหามอดที่เป็นไฟล์ซิบที่เราดาวน์โหลดมาไว้เมื่อตะกี้นี้

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



ให้คลิกปุ่ม ติดตั้งเดี๋ยวนี้(น๊าาาาาาา )
เป็นอันเสร็จพิธีการติดตั้งmodครับ

ทีนี้ไปดูการใช้งาน
ไปที่เมนูด้านซ้ายมือ ศูนย์จัดการลงทะเบียน > การตั้งค่า


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

และควรมั่นเปลี่ยนคำถามอยู่บ่อยๆ อาทิตย์ละครั้ง หรือเดือนละ 2-3 ครั้งก็ได้ เพียงเท่านี้สแปมก็ไม่มากลายกล้ำแล้วครับ


[smf] Captcha anti spam สร้างรหัสลับป้องกันสแปมบุก!!

เมื่อสร้างบ้านให้สวยงาม ตกแต่งและมีของมีค่าเต็มบ้านแล้ว อันดับต่อไปที่ขาดเสียไม่ได้เลยคือ ป้องกันโจรมาปล้นบ้าน!!!~

สำหรับ smf เวอร์ชั่น 1 เอง เครื่องมือป้องกันสแปมที่ให้มาถึงว่ายังอ่อน ถูกโจมตีได้ง่าย แต่สำหรับเวอร์ชั่น 2 ขึ้นไป ตั้งแต่ RC-1 จนถึง RC ปัจจุบัน (ซึ่งไม่รู้มันจะ Final เมื่อไร) มีตัวป้องกันค่อนข้างดีและไว้ใจได้ เพราะสามารถสร้างคำถามและคำตอบขึ้นมาเอง ต่อให้สแปมเทพมาจากไหน มันก็เอาคำตอบของเราไม่ได้หรอก เพราะเราเปลี่ยนแม่งทุกวันไปเลย

ที่ผ่านมาผมชวนแต่งธีมด้วยเวอร์ชั่น 1 มาตลอด ดังนั้น ตัวป้องกันสแปมก็เลยจะต้องอ้างอิงจากเวอร์ชั่น 1 ก่อน

เบื้องต้นเราไปดูตัวป้องกันสแปมที่ smf ให้มาก่อน เราจะใช้ประโยชน์อะไรจากมันได้บ้าง?

ล็อกอินเข้าสู่ระบบแอดมิน > ศูนย์จัดการลงทะเบียน > การตั้งค่า



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

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

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

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

วันอังคารที่ 2 สิงหาคม พ.ศ. 2554

[smf] เปลี่ยนชื่อโฟลเดอร์บอร์ดเถิด..จะเกิดปัญหา

ในโลกนี้ไม่มีอะไรที่ได้ดั่งใจทุกอย่างหรอกครับ
เกือบ 90 % ผู้แทนที่เราไปกาเลือก ไม่ได้เป็นสส. หรอก !!

นอกเรื่องละ วกเข้ามาเรื่องเราดีกว่า
เรื่องโฟลเดอร์ชื่อของบอร์ดก็เช่นกัน เดี๋ยวใช้ชื่อ board/ เดี๋ยวใช้ชื่อ forum/ เดี๋ยวก็อยากใช้ forums/ ฯลฯ
จะบอกว่าเปลี่ยนชื่อโฟลเดอร์นั้นมันไม่ยากเลย แต่พอเปลี่ยนแล้วปุ๊บ ..เกิดปัญหาทันที

บางคนรู้มาก(เช่นผม 555) รีบไปเปิดดาต้าเบสตาราง _theme เพื่อแก้พาธของธีม พาธภาพ ฯลฯ และเปิดตาราง _settings แก้พาธอีกที่หนึ่งเหมือนกัน แก้จนหมดทุกที่ทุกตารางที่เก็บพาธของธีม แต่ปรากฏว่าบอร์ดก็ไม่มา มันหายสาปสูญ หน้าบอร์อเป็นสีขาวเนียนนวล ไม่แจ้งเอ่อเร่อห่าเหวอะไรมาให้อุ่นใจเลยแม้แต่บรรทัดเดียว !!!

เหี้ยแล้วสิ (ขอโทษที่เผลออุทานหยาบ)

มาดูวิธีแก้ปัญหาที่ถูกต้องกันดีกว่าครับ
สมมติอยากจะเปลี่ยนชื่อโฟลเดอร์ของธีมเดิม ซึ่งมีชื่อว่า forum อยากจะเปลี่ยนให้มีชื่อว่า forums (มี s มาตัวหนึ่งมันจะสื่อความหมายอะไรหนักหนาวะ)

เราไม่ต้องไปเปลี่ยนข้อมูลในดาต้าเบสครับ เปลี่ยนแค่ข้อมูลในไฟล์พอ มี 2 ไฟล์ คือ
Settings_bak.php และ Settings.php

$boardurl ="http://xxxx.com/forums";
$boarddir="http://xxxx.com/forums";
$sourcedir ="/home/xxxx.com/forums/Sources";
$cachedir ="/home/xxxx.com/forums/cache";

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

เมื่อแก้เสร็จแล้ว ให้ไปดาวน์โหลดไฟล์ repair_settings.php ที่หน้านี้ http://download.simplemachines.org/?tools

อัพไปไว้ในโฟลเดอร์ของบอร์ด(ที่เปลี่ยนชื่อใหม่แล้วนั้น) เสร็จแล้วรันมันขึ้นมาครับ

ตรวจสอบดูในฟอร์มที่รันขึ้นมานั้น ว่าถูกต้องไหม? ถ้าถูกต้องแล้วก็คลิก Save Settings

เสร็จแล้ว ไปดูบอร์ดของเรา ณ โฟลเดอร์ใหม่นั้นสิ มารึยัง?

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

ให้เขาคลิกไปที่เมนู admin (ถึงแม้หน้าตามันจะเ่อ่อๆ แต่ก็พอเดาได้ว่าลิงค์ไหนอยู่ตรงไหน ใช่มั้ยครับ)
คลิกไปที่เมนู admin > Themes and Layout > Themes Setthings
พอถึงหน้านี้ ให้ลงไปดูที่ด้านล่างสุดเลย จะเจอปุ่มนี้ Attempt to reset all themes ปุ่มนี้คือการพยายามคืนค่าของธีมทั้งหมดครับ คลิกเลยอย่ารอช้า

หลังจากคลิกแล้ว บอร์ดของเราก็เริ่มเป็นผู้เป็นคนแล้วใช่มั้ยครับ
ทีนี้ก็ปรับแต่งภาษาให้เป็นภาษาไทย

เท่านี้ก็เสร็จสมบูรณ์แล้วครับบ ..

[smf] เพิ่มเมนูเปลี่ยนภาพส่วนตัวให้หาง่ายๆ

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

ทีนี้มาผันตัวเองมาในฐานะผู้ทำบอร์ดให้คนอื่นใช้บ้าง เราจะปล่อยให้ผู้ใช้ประสบชะตากรรมเช่นนั้นอีกต่อไปไม่ได้ครับ เราต้องช่วยฉุดเขาจากความมืดบอด ชี้ทางสว่างให้

ในเมื่อเมนูนี้หรือเมนูไหนๆก็ตามที่ผู้ใช้มักใช้บ่อยๆ เราก็ควรจะดึงมาแสดงให้ใช้ง่ายๆหน่อย



ว่าแต่วิธีทำละ?

ความต้องการของเราคือเพิ่มเมนู "เปลี่ยนภาพส่วนตัว" ใต้ข้อความส่วนตัวที่มีอยู่แล้ว
อันดับแรกต้องหาตำแหน่งให้เจอก่อนว่ามันอยู่ตรงไหน
ค้นหาคำนี้ก็ได้ครับ // Show the total time logged in?

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

echo '<a href="', $scripturl, '?action=profile;u=', $context['user']['id'],';sa=forumProfile;" title="เปลี่ยนภาพส่วนตัว">เปลี่ยนภาพส่วนตัว</a>';

เพียงเท่านี้ เราก็จะมีเมนูด่วนทันใจให้ผู้ใช้สามารถใช้ได้ง่ายๆแล้วนะครับคุณขาาาาาาาา

หมายเหตุ : link นี้ใช้ได้เฉพาะเวอร์ชั่น 1 เท่านั้นนะครับ

วันจันทร์ที่ 1 สิงหาคม พ.ศ. 2554

[smf] ว่าด้วยการ include ไฟล์มาในหน้าบอร์ด

หากคุณมีไฟล์ .php ตัวหนึ่งและอยากแสดงข้อมูลในไฟล์ .php ออกมาในหน้าแรกของบอร์ด หรือในหน้าไหนก็แล้วแต่ในบอร์ดของท่าน ท่านจะใช้วิธีดึงมาอย่างไร

หลายคนคงคิดถึงฟังก์ชั่นนี้ include(); require(); หรือ require_once();

ผมมีความเสียใจที่จะบอกว่า มันใช้ไม่ได้ครับ !!

วันนี้เลยอยากจะนำเสนอวิธีการเรียกไฟล์จากภายนอกเข้ามาในบอร์ด หลายคนอาจสงสัยว่า จะเรียกไฟล์เข้ามาในบอร์ดทำไม

คืองี้ครับ พอดีผมมีไฟล์ .php ตัวหนึ่งไว้แสดงแบนเนอร์ และลิงค์

<a href="xxx"><img src="xxxx"/></a>
<a href="xxx"><img src="xxxx"/></a>
<a href="xxx"><img src="xxxx"/></a>


อยากเก็บไว้ไฟล์หนึ่งต่างหาก ก็เลยจำเป็นจะต้องเรียกไฟล์จากภายนอกมาฉะนี้แหละ


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

เขียนเป็นฟังก์ชั่นเลยครับ


function banner() {

global $settings, $context, $txt, $scripturl;

$path = $settings['theme_url'].'/banner.php' ;


$ads_file = fopen( $path , 'r');

$banner = stream_get_contents( $ads_file );

echo $banner;

}


จากตัวอย่างนี้ ผมมีไฟล์ banner.php ก็แค่เขียนคำสั่งดึงไฟล์ออกมา ทีนี้อยากให้ไฟล์นี้ไปโผล่ที่ไหนก็แค่เอาฟังก์ชั่นนี้ไปแหมะตรงนั้น

banner();


ทุกสิ่งทุกอย่างที่อยู่ในไฟล์ banner.php ก็จะพรั่งพรูออกมาหมด ด้วยประการฉะนี้แล

วันอาทิตย์ที่ 31 กรกฎาคม พ.ศ. 2554

[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] แต่งธีม ตอน เปลี่ยนและเพิ่มสัญลักษณ์แสดงอารมณ์ smf emotion

ต่อจากตอนที่แล้ว มาว่าด้วยเรื่องเล็กๆน้อยๆที่ควรปรับเพื่อให้บอร์ดดูดี
วันนี้เรามาว่าด้วยเรื่องการเปลี่ยนและเพิ่มสัญลักษณ์แสดงอารมณ์หรือ emotion ในบอร์ดกันเลยดีกว่าครับ

เบื้องต้นล็อกอินเข้าสู่ระบบแอดมิน ไปที่เมนู การวางรูปแบบฟอรั่ม -> ชุดสัญลักษณ์แสดงอารมณ์

เสร็จแล้วติ๊กเลือก 'ใช้สัญลักษณ์แสดงอารมณ์ส่วนตัวเหล่านี้ : ' แล้วคลิกปุ่ม บันทึกการเปลี่ยนแปลง

จะเห็นว่าตรงเมนูแท็บมีเมนูเพิ่มมา จากก่อนหน้านี้มีแค่เมนู 'ชุดสัญลักษณ์แสดงอารมณ์' และ การตั้งค่า แต่ตอนนี้เพิ่มขึ้นมามีเมนู

ชุดสัญลักษณ์แสดงอารมณ์ เพิ่มสัญลักษณ์แสดงอารมณ์ แก้ไขสัญลักษณ์แสดงอารมณ์ จัดเรียงสัญลักษณ์แสดงอารมณ์ การตั้งค่า

ให้คลิกเมนูเพิ่มสัญลักษณ์แสดงอารมณ์ พอมาถึงหน้านี้แล้วคิดว่าคงเข้าใจกันไม่ยากแล้ว




เลือกอัพโหลดไฟล์ หาไฟล์ที่เป็นสัญลักษณ์แสดงอารมณ์ที่ต้องการจะเพิ่มใหม่ ในช่องโค๊ด: ใส่รหัสคำสั่งสำหรับemotionของเรา เช่น :(): หรือ -ea: พยายามอย่าใช้ภาษาไทย หรือใช้ภาษาอังกฤษที่เป็นคำ เช่นคำว่า hello, hi หรือ yo เพราะถ้ามีการโพสต์กระทู้ที่ใช้คำที่ซ้ำกับโค๊ดของเรา แทนที่จะกลายเป็นคำพูด emotion จะโผล่มาแทน

ส่วนชองคำอธิบาย Tooltip ใส่ภาษาไทยคำอธิบายสั้นๆของemotion นั้น เช่นคำว่า ยิ้มแย้ม, โกรธ, ร้องไห้ ฯลฯ

เสร็จแล้วอย่าลืมบันทึกการเปลี่ยนแปลง แล้วไปดูผล..ว่ามีไอค่อนโผล่มารึยัง??

ตอนนั้นมาว่าก่อนต่อฮะ

[smf] แต่งธีม ตอน วิธีทำsmf ให้โพสต์วีดีโอจากyoutubeได้

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

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

เรามาดูกันเลยว่าต้องทำอย่างไร?

การแก้ไขมี 2 ไฟล์ที่เกี่ยวข้องครับ
1. Sources/Subs.php
เปิดไฟล์ขึ้นมาแล้วค้นหาคำนี้
array(
'tag' => 'hr',
'type' => 'closed',
'content' => '<hr />',
'block_level' => true,
),

เจอแล้วตบเอ็นเทอร์ลงบรรทัดหนึ่ง เพิ่มโค๊ดนี้ลงไป
array(
'tag' => 'youtube',
'type' => 'unparsed_commas_content',
'test' => '\d+,\d+\]',
'content' => '<object width="$2" height="$3"><param name="movie" value="http://www.youtube.com/v/$1" ></param><embed src="http://www.youtube.com/v/$1" type="application/x-shockwave-flash" width="$2" height="$3"></embed></object>',
'validate' => create_function('&$tag, &$data, $disabled', '
if (isset($disabled[\'url\']))
$tag[\'content\'] = \'$1\';'),
'disabled_content' => '<a href="$1" target="_blank">$1</a>',
),

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

เสร็จแล้วค้นหาคำนี้
'flash' => array('code' => 'flash', 'before' => '[flash=200,200]', 'after' => '[/flash]', 'description' => $txt[433]),

หลังจากเจอแล้ว ตบลง 1 บรรทัด และวางโค๊ดนี้ลงไป
'youtube' => array('code' => 'youtube', 'before' => '[youtube=425,350]', 'after' => '[/youtube]', 'description' => $txt['youtube']),

เสร็จแล้วเซฟปิดทิ้งไปเลยครับ

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

เมื่อได้ไอค่อนที่ถูกใจแล้วไปเก็บไว้ในโฟลเดอร์ images/bbc
เพียงเท่านี้ก็เสร็จแล้วละครับ

ทีนี้มาดูการใช้งาน..
เมื่อลองคลิก เริ่มต้นกระทู้ใหม่ ..จะพบไอค่อนของ youtube พอคลิกปุ๊บจะเกิดโค๊ดตัวนี้มา[youtube=425,350][/youtube] ให้เราไปที่เว็บยูทูป หาวีดีโอที่ต้องการโพสต์ ด้านใต้วีดีโอจะมีคำว่า Share คลิกปุ๊บจะเกิดโค๊ด เช่น http://youtu.be/88M_UCWyWvM ให้เราก็อปปี้เฉพาะตัวหนังสือที่เป็นสีแดง เอามาใส่ในบอร์ด ก็จะได้แบบนี้

[youtube=425,350]88M_UCWyWvM[/youtube]

เพียงเท่านี้ก็เรียบร้อยแล้วละครับบบ

หมายเหตุ : วิธีนี้ใช้ได้กับเวอร์ชั่น 1 เท่านั้น !!

วันเสาร์ที่ 30 กรกฎาคม พ.ศ. 2554

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

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

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

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

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


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


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



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

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

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

วันพฤหัสบดีที่ 28 กรกฎาคม พ.ศ. 2554

[smf] แต่งธีม ตอน เปลี่ยนปุ่ม "ตั้งกระทู้ใหม่" เป็น "ตอบกระทู้"

ด้วยความที่ smfบอร์ดไม่ใช่สัญชาติไทยแท้ โอนสัญชาติมาอีกทีหนึ่ง ดังนั้นเมนูภาษาไทยที่ถูกโอนมาจึงมีความผิดพลาดอยู่บ้าง

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

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

ทีนี้มาดูการแก้ปัญหาครับ

ไฟล์ที่เกี่ยวข้องมี 2 ตัว

1../Themes/languages/index.thai-utf8.php

2../Sources/Post.php

เบื้องต้นเกิดไฟล์ index.thai-utf8.php มาก่อน แล้วเพิ่มคำสั่งนี้ไป

$txt['post'] = ‘ตั้งกระทู้’;
$txt['post_post'] = ‘ตอบกระทู้’;

เพิ่มตรงไหน?

ลงไปยังบรรทัดล่างสุดเลยก็ได้ครับ แต่ต้องอยู่ภายใน ?> นะ

อันดับต่อไปเปิดไฟล์ Post.php

ค้นหาคำสั่ง $context['submit_label'] = $txt[105];

เมื่อเจอแล้วอย่ารอช้า ลบทิ้งหรือคอมเมนต์ไว้ก็ได้ (//)

จากนั้นใส่คำสั่งนี้ไปแทนครับ

if(!(isset($_GET['topic']))) {

$context['submit_label'] = $txt['post'];
}else {
$context['submit_label'] = $txt['post_post'];
}

คำสั่งของมันก็แค่เช็คว่า เป็นการตั้งกระทู้ใหม่มั้ย? (ถ้าตั้งกระทู้ใหม่ต้องมี ($_GET['topic']) ถ้าตั้งกระทู้ใหม่ก็ให้แสดงปุ่ม “ตั้งกระทู้ใหม่” ถ้าไม่ใช่ก็ให้แสดงปุ่ม “ตอบกระทู้” แทน

เป็นทริกเล็กๆน้อยๆ แต่เวลาจะใช้งานจริงๆก็หากันแทบแย่

อ้อ..ทิปนี้ใช้ได้ทั้งเวอร์ชั่น 1 และเวอร์ชั่น 2 นะคร้าบ

วันพุธที่ 27 กรกฎาคม พ.ศ. 2554

[smf] แต่งธีม ตอน เอาไอค่อนหน้าบอร์ดตัวเก่าออก!

ใน smf เวอร์ชั่น 2 ไม่เจอไอค่อนตัวนี้นะครับ แต่ถ้าใครยังพัฒนาเวอร์ชั่น 1 อยู่ ก็จะเจอไอค่อนตัวที่ว่านี้


(ไอค่อน กระทู้ใหม่ , ไม่มีกระทู้)

ถามว่า มีไอค่อน แล้วมีปัญหาอะไร?
ก็ไม่ได้มีปัญหาอะไรหรอกครับ เพียงแต่ว่าจะเก็บไว้หาห่าอะไรในเมื่อมันไม่ได้สื่ออะไรเลย
ก็เราได้เปลี่ยนไอค่อนหน้าบอร์ดเป็นภาพใหม่หมดแล้ว ไอ้เจ้าไอค่อนนี้ก็เลยหมดประโยชน์ด้วยประการฉะนี้แล

เอาออกก็มิยากเลยครับ เปิดไฟล์ BoardIndex.template.php ที่อยู่ในธีมของเรานะครับ (อย่าไปยุ่งกะธีมคนอื่นโดยเฉพาะธีม Default )
ค้นหาด้วยคำว่า new_some.gif
เจอแล้วก็ลบทิ้งทั้งเครือญาติเลยครับ

<img src="' . $settings['images_url'] . '/new_some.gif" alt="" align="middle" /> ', $txt[333], '
<img src="' . $settings['images_url'] . '/new_none.gif" alt="" align="middle" style="margin-left: 4ex;" /> ', $txt[334], '

หลังจากลบทิ้งแล้ว ตรงพื้นที่ว่างๆนี้จะหาอะไรมาใส่ก็สุดแท้แต่ท่านจะคิดได้นะครับ

วันอังคารที่ 26 กรกฎาคม พ.ศ. 2554

[smf] แต่งธีม ตอน แต่งภาพแนบให้เป็นภาพใหญ่(โดยไม่ต้องคลิก)

(ไม่ต้องอารัมภบทนะครับ ตอนนี้ต่อจากตอนที่แล้วถ้าไม่เข้าก็กลับไปอ่านตอนก่อนนี้ละกัน)

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

เปิดไฟล์ Themes/default/Display.template.php
แล้ว save as.. เซฟไปไว้ที่โฟลเดอร์ของธีมเรา (เหตุผลเคยบอกไปแล้วในบทแรกๆ)

เปิดไฟล์ Display.template.php ขึ้นมาครับ

ค้นหาด้วยคำว่า // Assuming there are attachments...

เพื่อไม่ให้เกิดการผิดพลาด หรือตกหล่น เพราะแก้ไขผิดจุด ผมจะแก้ไขกันทั้งกลุ่มเลยนะครับ

จากตำแหน่งที่ค้นหาเมื่อตะกี้ // Assuming there are attachments... ไล่ลงมาจนถึงคำว่า // Show "« Last Edit: Time by Person »" if this post was edited.

// Assuming there are attachments...
..............
.....
......
// Show "« Last Edit: Time by Person »" if this post was edited.

ลบทิ้งให้หมดครับ แล้วใส่อันนี้แทน

// Assuming there are attachments...
if (!empty($message['attachment']))
{
echo '

<hr width="100%" size="1" class="hrcolor" />
<div style="overflow: auto; width: 100%;">';
foreach ($message['attachment'] as $attachment)
{
if ($attachment['is_image'])
{
if ($attachment['thumbnail']['has_thumb'])


echo '<img src="', $attachment['href'], ';image" id="link_', $attachment['id'], '" border="0" /><br/>';

else

echo '<img src="', $attachment['href'], ';image" id="link_', $attachment['id'], '" border="0" /><br/>';

}


echo '
<a href="' . $attachment['href'] . '"><img src="' . $settings['images_url'] . '/icons/clip.gif" align="middle" alt="*" border="0" />&nbsp;' . $attachment['name'] . '</a> (', $attachment['size'], ($attachment['is_image'] ? ', ' . $attachment['real_width'] . 'x' . $attachment['real_height'] . ' - ' . $txt['attach_viewed'] : ' - ' . $txt['attach_downloaded']) . ' ' . $attachment['downloads'] . ' ' . $txt['attach_times'] . '.)<br />';
}


echo '
</div>';
}
echo '
</td>
</tr><tr>
<td valign="bottom" class="smalltext" id="modified_', $message['id'], '">';
// Show "« Last Edit: Time by Person »" if this post was edited.


แค่นี้แหละครับ เสร็จแล้ว ลองคลิกไปดูของจริง ที่นี่ view demo

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

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



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

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



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

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

วันจันทร์ที่ 25 กรกฎาคม พ.ศ. 2554

[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

วันอาทิตย์ที่ 24 กรกฎาคม พ.ศ. 2554

[smf] เริ่มต้นโมธีม ตอน ใส่ไอค่อนหน้าบอร์ด

สร้างเว็บบอร์ดให้มีชีวิตชีวามากขึ้นด้วยไอค่อนหรือรูปภาพหน้าบอร์ด

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

แต่เดิมหน้าห้องแต่ละห้องจะเป็นภาพนี้ครับ

กรณีไม่มีกระทู้ใหม่
แต่หากมีกระทู้ใหม่จะเป็นภาพนี้

ทีนี้ผมจะเปลี่ยนไอค่อนพวกนี้ละ ใช่จะเปลี่ยนแค่ภาพสองภาพเท่านั้น แต่จะให้แต่ละห้องมีภาพไม่ซ้ำกันด้วย!!

อันดับแรกไปเปิดโฟลเดอร์ Themes/default /BoardIndex.template.php
ก็อปปี้ไฟล์ BoardIndex.template.php มาไว้ในโฟลเดอร์ธีมของเรา (ถ้าอ่านมาแต่แรกจะรู้ว่าธีมตัวใหม่นี้ผมตั้งชื่อว่า Blue_theme ดังนั้น ผมจะก็อปปี้ไฟล์นี้มาไว้ในโฟล์เดอร์ Blue_theme นะ)

อย่างที่เคยบอกไปในบทแรกๆแล้วว่า การจะแก้ไขไฟล์อะไรก็แล้วแต่ที่อยู่ในโฟลเดอร์ธีม Detault เราควรจะก็อปปี้ไฟล์นั้นมาไว้ในโฟลเดอร์ธีมใหม่ของเราครับ เพื่อที่ว่าเวลาอัพเดทเวอร์ชั่นหรือการหาไฟล์ที่แก้ไขแล้วจะได้หาง่ายๆ

อะ มาเข้าเรื่องของเราต่อ
หลังจากก็อปปี้ไฟล์ดังกล่าวมาไว้ในโฟล์เดอร์ธีมของเราแล้ว ทีนี้เปิดไฟล์ขึ้นมาครับ
ให้ไปบรรทัดที่ 121 หรือค้นหาด้วยคำว่า // If the board is new, show a strong indicator.
ให้ไปดูคำสั่งนี้ครับ
echo '<img src="', $settings['images_url'], '/on.gif" alt="', $txt[333], '" title="', $txt[333], '" />';

เห็นคำนี้มั้ยครับ on.gif มันคือภาพนี้
และลองมองไล่ลงต่ำมาอีก 2-3 บรรทัดก็จะเจอคำสั่งนี้
echo '<img src="', $settings['images_url'], '/off.gif" alt="', $txt[334], '" title="', $txt[334], '" />';

คำสั่งนี้ off.gif ก็คือภาพนี้

ทั้งสองภาพนี้อยู่่ในโฟลเดอร์images ในธีมของเรานี่เอง เมื่อเรารู้ที่ตั้งของมันแล้ว ก็เราไปเปลี่ยนภาพได้ หาภาพอะไรก็ได้มา 2 ภาพ และเปลี่ยนชื่อภาพให้เป็น on.gif และ off.gif (ลบอันเก่าหรือวางทับได้เลย)

ทีนี้เราก็จะได้ภาพไอค่อนหน้าห้องบอร์ดไม่เหมือนเดิมแล้ว ...วี้ด วิว

แต่เดี๋ยวก่อน..

ในบทนี้เราไม่ได้ต้องการแค่นั้น เพราะนั่นมันง่ายไป ..ความต้องการของเราคือ...
ต้องให้ภาพแต่ละห้องไม่ซ้ำกันด้วยยยยยยยย ย ย ..

ไม่ยากครับ
ไปที่คำสั่งสองบรรทัดข้างบนอีกครั้ง

echo '<img src="', $settings['images_url'], '/on.gif" alt="', $txt[333], '" title="', $txt[333], '" />';

echo '<img src="', $settings['images_url'], '/off.gif" alt="', $txt[334], '" title="', $txt[334], '" />';

เปลี่ยนสองบรรทัดนี้ใหม่เป็น ..

echo '<img src="', $settings['images_url'], '/brd_',$board['id'],'_on.gif" alt="', $txt[333], '" title="', $txt[333], '" />';


echo '<img src="', $settings['images_url'], '/brd_',$board['id'],'_off.gif" alt="', $txt[334], '" title="', $txt[334], '" />';


มาดูคำอธิบายเพิ่มเติมอีกนิดครับ
เห็นคำสั่งนี้มั้ยครับ
/brd_',$board['id'],'_on.gif
จากคำสั่งนี้จะได้ชื่อภาพเป็น brd_(idของบอร์ด)_on.gif

idของบอร์ดคืออะไร ?
ห้องแต่ละห้องที่ท่านสร้างขึ้นมาจะมีไอดีหรือรหัสประจำห้องไล่ตั้งแต่ 1 2 และ 3 4 เรื่อยๆ แล้วแต่ว่าท่านสร้างไว้กี่ห้อง

ดังนั้น คำสั่งนี้
/brd_',$board['id'],'_on.gif ก็จะเท่ากับชื่อภาพ brd_1_on.gif สำหรับบอร์ดห้องแรก และชื่อ brd_2_on.gif สำหรับบอร์ดห้องที่สอง ห้องที่สาม ห้องที่สี่ ก็จะมีชื่อคล้ายกัน เปลี่ยนแต่ตัวเลขไปตามลำดับ

อีกภาพสำหรับบอร์ดที่ยังไม่มีกระทู้ ก็เหมือนกัน จะได้ชื่อภาพว่า brd_1_off.gif ไล่ไปเรื่อยๆ ตามจำนวนบอร์ด

ชื่อภาพ brd_1_on.gif และ brd_1_off.gif ผมตั้งขึ้นมาเอง ส่วนถ้าท่านต้องการชื่อแปลกพิสดารหรืออะไรแบบไหน อยากให้ภาพเป็นนามสกุลอะไร ก็สุดแท้แต่ท่านนะครับ ใช้อะไรยังไงก็ได้ แต่ต้องอย่าลืมไอดีหรือรหัสของบอร์ด เพื่อให้เกิดความแตกต่างระหว่างภาพแต่ละภาพของห้องแต่ละห้อง

แค่นี้ก็เสร็จแล้วครับ ..ลองดูตัวอย่าง





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



วันศุกร์ที่ 22 กรกฎาคม พ.ศ. 2554

[smf] เริ่มต้นโมธีม ตอน ทดสอบบนโฮสท์ฟรี

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

Blue Theme ตัวนี้ก็เช่นกัน หลังจากจับแต่ง - ต่อเติม - ปรับวาง ไปแล้วก็ยังไม่ถูกใจ เลยต้องปรับเพิ่ม

โดยผมขยายพื้นหลังให้มีพื้นที่มากขึ้น เพื่อขับส่วนเนื้อหาให้โดดเด่น และจะเห็นว่าส่วน header ด้านขวามือยังมีพื้นที่ว่าง เราไม่ค่อยปล่อยพื้นที่ให้ว่างเช่นนั้น ผมจึงเพิ่มแบนเนอร์แบบ Rotate เข้าไป ..




(คลิกภาพเพื่อดูภาพใหญ่ หรือดูตัวอย่างจริงๆได้ที่นี่)

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

ตอนต่อไป เราจะมาว่าถึงไฟล์อื่นๆที่เราจำเป็นจะต้องเอามาใช้ในธีมเรา เช่นไฟล์ BoardIndex.template.php หรือ Display.template.php

สองไฟล์นี้ไว้ทำอะไร และจะทำให้ธีมเราสวยขึ้นมาไหม ..ตอนหน้ามาดูกัน

[smf] เริ่มต้นโมธีม ตอน จับแต่ง-ต่อเติม-ปรับวาง

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

ลองเปรียบเทียบแล้วทายเล่นๆดูครับ
(ดูภาพใหญ่คลิกที่ภาพนะ)



ถ้ายังคิดไม่ออกว่าผมได้เพิ่มเติมตรงไหน งั้นจะเฉลยละกัน
1. เมนู
2. ตาราง และborder
3. ช่องค้นหา

แค่ 3 จุดเท่านั้นเองครับ จะเห็นว่าหลายๆอย่างยังเหมือนเดิมเปะๆ ทีนี้มาว่าถึงรายละเอียดกัน

เมนู แก้ไขอะไรไปบ้าง?

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

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

เมนูเดิมเขาใช้ตาราง ผมจัดการเปลี่ยนตารางให้เป็น ul และ li ซะ
ก็จะได้เมนูแบบนี้

<div class="menu" >
<ul>
<li>หน้าแรก</li>
<li>สมัึครสมาชิก</li>
<li>...</li>
</ul>

</div>

เราก็จะได้เมนูใหม่ที่ไม่เหมือนเดิมแล้ว

ต่อมา ตารางและ border
ผมก็จัดการเปลี่ยนสีหัวตาราง และเปลี่ยนสีborder ที่ไฟล์ style.css อันนี้อยากได้แบบไหนสีอะไรก็ใส่ไปเลยตามใจชอบ

อันสุดท้าย ช่องค้นหา เช่นเดียวกับย้ายเมนูครับ เปิดไฟล์ index.template.php จัดการย้ายจากตำแหน่งเดิม ไปสู่ตำแหน่งที่เราชอบซะ

สรุปการแก้ไข

1. ไฟล์ style.css
เพิ่มคำสั่ง
.menu { padding:0; margin:20px 10px 0 0; width:600px; float:right; height:39px; }
.menu ul { padding:0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:0 3px; border:0;}
.menu ul li a { float:left; margin:0 1px 0 0; padding:13px 0; color:#434343; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:13px 10px; background:none;}
.menu ul li a:hover { color:#fffefe; background: url(images/r_menu.gif) no-repeat right ;}
.menu ul li a:hover span {color:#fffefe; background:url(images/l_menu.gif) no-repeat left ;}
.menu ul li a.active {color:#fffefe; background:url(images/r_menu.gif) no-repeat right ;}
.menu ul li a.active span {color:#fffefe; background:url(images/l_menu.gif) no-repeat left ;}


2. ไฟล์ index.template.php

ช่องค้นหา อยากให้มีตรงไหนก็เอาไปใส่ตรงนั้น ก็จะไม่ใส่เลยก็ไม่มีใครว่าครับ

<form action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '" style="margin: 0;">
<a href="', $scripturl, '?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />';


// Search within current topic?

if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))

echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>

วันอังคารที่ 19 กรกฎาคม พ.ศ. 2554

[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:

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

[web] ย่อชื่อใน Google+ ให้สั้นๆ จำง่ายๆ ดีกว่ามั้ย??

ขอขั้นรายการด้วยเรื่อง Google +
หลังจากสมัครใช้ Google + กันเรียบร้อยแล้ว ปัญหาที่ตามมาคือเราจะแบ่งปันหน้าของเราแก่คนอื่นอย่างไรดี ในกรณีที่เขายังไม่ได้เข้ามาอยู่ในแวดวงของเรา คือ เขายังไม่ถูกเราแอดเข้าสู่ลิสต์

อย่างเฟสบุค ถ้ามีคนถามว่ามีเฟสบุคมั้ย ผมก็จะตอบว่ามี facebookk.com/nevikup แล้วถ้าเป็น Google + ละ?

มีมั้ย?

มีเหมือนกัน คลิกเข้าไปที่ gplus.to/nevikup

วิธีการนั้นแสนจะง่ายดายกว่าก่อการปฏิวัติซะอีกแนะ
เพียงคลิกเข้าไปที่ http://gplus.to/

แล้วคุณจะเข้าใจทุกอย่างแจ่มแจ้ง..
สิ่งที่คุณต้องเตรียมไปเพื่อดำเนินการในหน้านั้น นอกจากตัวและหัวใจแล้ว คุณต้องพก username ของGoogle + และ ID จะไปหาไอดีได้จากที่ไหนเดี๋ยไปในหน้านั้นแล้วเขาจะแนะนำเอง

สรุปเนื้อหาสาระของบทความวันนี้สั้นคือ http://gplus.to/ เท่านั้นเอง

ไม่รู้จะเขียนให้ยาวทำไม!!

[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 ซึ่งจะกล่าวในบทต่อไปครับ

วันจันทร์ที่ 18 กรกฎาคม พ.ศ. 2554

[web]เพิ่มปุ่ม Google +1 ไว้ในเว็บ

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


สำหรับ wordpress นั้นแสนง่ายเลยครับ เพราะมีปลั๊กอินสำหรับการนี้โดยเฉพาะ คลิกไปดาวน์โหลดใช้ได้เลยที่ http://blog.jacobwg.com/wp-plus-one/

วิธีใช้ก็ไม่มีอะไรซับซ้อน อัพโหลดปลั๊กอินที่ดาวน์โหลดมาแล้วไปไว้ที่โฟลเดอร์ plugins แล้วก็ล็อกอินเข้าแอดมินไป activate ก็เป็นอันเสร็จพิธีครับ

ต่อถ้าใช้เว็บใช้ blogspot.com อย่างที่ผมใช้อยู่นี้ก็ยิ่งง่ายใหญ่เลย ล็อกอินเข้าสู่หน้า "การออกแบบ" คลิก "แก้ไข" แล้วคลิกบันทึก (ตามภาพ) ก็ใช้ได้แล้ว



คลิกอ่านรายละเอียดเพิ่มเติม http://buzz.blogger.com/2011/06/add-1-button-to-your-blog.html


ต่อมา หากเป็นเว็บที่เขียนขึ้นเอง ยิ่งง่ายใหญ่ครับ คลิกไปหน้านี้เลย

http://www.google.com/webmasters/+1/button/

ในนั้นก็จะไม่มีอะไรยุ่งยากใจเลย จะมีโค๊ดให้สนใจอยู่ 2 จุด

1. ส่วนแรกเอาไปใส่ที่<head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'th'}</script>


และ 2. เอาไปใส่ ณ ตำแหน่งที่อยากจะให้มีปุ่ม google +1

<g:plusone href="http://example.com"></g:plusone>

แก้ไข http://example.com เป็นหน้าเพจที่คุณจะใส่ปุ่ม Google +1

เพียงเท่านี้ก็เป็นอันเสร็จพิธี Google+1 ละ

[smf] เริ่่มต้นสร้างธีมใหม่

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

เบื้องต้นสร้างธีมใหม่ > แอดมิน > ปรับแต่งธีมและการวางรูปแบบ



ติดตั้งธีมใหม่ มี 2 จุดที่เราต้องทำคือ 1. ในช่อง จากไดเรคทอรี่ ลบทิ้งให้หมด 2. ช่องสร้างธีมใหม่ พิมพ์ชื่อธีมที่เราต้องการลงไป ชื่ออะไรก็ได้ แต่ต้องเป็นภาษาอังกฤษ เสร็จแล้วคลิกปุ่ม "ติดตั้ง"

ระบบจะแจ้งเตือนมาว่าจะคัดลอกจากธีมหลัก กด OK


ระบบจะแจ้งว่าติดตั้งเรียบร้อยแล้ว คลิกกลับไป และลองไปเลือกธีมที่เราพึ่งติดตั้งเมื่อสักครู่ดู

ก็จะได้ธีมหน้าตาธรรมดามาตัวหนึ่ง




ทีนี้ลองคลิกไปดูโฟลเดอร์ Themes จะปรากฏธีมที่เราพึ่งสร้างไปเมื่อสักครู่



คลิกไปดูข้างในก็จะมีไฟล์หลักๆสำหรับธีม 1 ธีม อยู่ 4 ไฟล์ คือ 1.index.php 2.index.template.php 3. style.css และ 4. images



เดี๋ยวตอนต่อไปเราจะมาทำการเปลี่ยนแปลงธีมหน้าตาธรรมดาๆตัวนี้ให้เป็นธีมใหม่แบบตามใจเราเอง !!