SMF And NEVIKUP

ไฟล์แรกที่เราจะทำการปรับเปลี่ยน คือ ไฟล์หน้าแรกของบอร์ด

หน้าแรกของบอร์ดที่ไฟล์ที่เกี่ยวข้อง 2 ไฟล์ คือ
1. index.template.php
2. BoardIndex.template.php

ไฟล์ index.template.php จะมีหน้าที่เป็นโครงสร้างหลักของบอร์ด ประกอบด้วย ส่วน Header และส่วนFooter โดยที่ทั้งสองส่วนนี้จะมีหน้าตาเหมือนกันในทุกๆเพจ

ส่วนไฟล์ BoardIndex.template.php จะเป็นส่วน Content ของหน้าแรก

เปิดไฟล์ index.template.php เราต้องทำการ include ไฟล์ bootstrap มาให้ครบ ทั้ง css และ js

ไปที่ฟังก์ชั่น template_html_above() หาแท็ก </head> ใส่ include ไฟล์ทั้งหมดก่อนแท็ก </head>


<link href="',$settings['theme_url'],'/jumbotron/dist/css/bootstrap.min.css" rel="stylesheet">


<link href="',$settings['theme_url'],'/jumbotron/jumbotron.css" rel="stylesheet">







หลังจาก include ไฟล์ bootstrap มาแล้ว เราก็สามารถเรียกใช้งาน class ต่างๆของ bootstrap ได้ตามใจ ในทีนี้เราจะเอาโครงสร้างของธีม Jumbotron มาใช้ ดังนั้น เราก็เปิดไฟล์ธีมของ Bootstrap ที่ชื่อ Jumbotron/index.html ขึ้นมา

ก็อปปี้โครงสร้างทั้งหมดที่อยู่ภายใต้ แท็ก <body>... </body> นำมาวางในไฟล์ index.template.php ในฟังก์ชั่น template_body_above()
ตรงจุดนี้ ต้องใช้ความระมัดระวังนิดหนึ่งนะครับ โครงสร้างที่เราก็อปปี้มาและมาวางในไฟล์index.template.php นั้นต้องอยู่ภายใต้คำสั่ง echo ' ... '

ฟังก์ชั่น template_body_above() คือ ส่วนที่เป็น Content ในส่วนหัว หรือ Header เริ่มตั้งแต่ โลโก้ เมนู
ฟังก์ชั่น template_body_below() คือ ส่วนที่เป็น Content ในส่วนท้าย หรือ Footer

ช่องว่างระหว่าง template_body_above() และ template_body_below() จะเป็นส่วน Content ที่จะมาจากไฟล์ BoardIndex.template.php - หน้าแรก , ไฟล์ MessageIndex.template.php - หน้ารวมกระทู้ และไฟล์ Display.template.php - หน้ารายละเอียดกระทู้

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

(ตัวอย่างธีมที่ออกแบบใหม่)

ในตอนต่อไป เราจะมาพูดถึงรายละเอียดของหน้า รวมกระทู้ และหน้ารายละเอียดกระทู้

วันนี้มีธีม 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')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ภาพตัวอย่าง

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

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

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

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

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

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

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

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

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

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

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

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

ผมเคยเขียนการใส่ปุ่ม 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'],'&layout=standard&show-faces=true&width=530&height=60&action=like&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 เวอร์ชั่น 1 เอง เครื่องมือป้องกันสแปมที่ให้มาถึงว่ายังอ่อน ถูกโจมตีได้ง่าย แต่สำหรับเวอร์ชั่น 2 ขึ้นไป ตั้งแต่ RC-1 จนถึง RC ปัจจุบัน (ซึ่งไม่รู้มันจะ Final เมื่อไร) มีตัวป้องกันค่อนข้างดีและไว้ใจได้ เพราะสามารถสร้างคำถามและคำตอบขึ้นมาเอง ต่อให้สแปมเทพมาจากไหน มันก็เอาคำตอบของเราไม่ได้หรอก เพราะเราเปลี่ยนแม่งทุกวันไปเลย

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

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

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

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

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

ในตอนนี้พูดถึงตัวป้องกันสแปมที่ระบบ 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 คือ ผมอยากได้ภาพส่วนตัวแบบคนอื่นเขาบ้าง กว่าจะกวาดหาเมนูเปลี่ยนภาพส่วนตัวเจอ ก็เล่นเอาเหงื่อตกตดแตกกันเลยทีเดียว

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

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

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

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

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

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

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

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

หากคุณมีไฟล์ .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 ก็จะพรั่งพรูออกมาหมด ด้วยประการฉะนี้แล

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

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

ประสิทธิภาพของบอร์ด 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>

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

upic_target = document.postmodify.message;

upic_type = "bbfull";

upic_buttoncss += "color:#000000;";

</script>

#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 ลองเลือกดู

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

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

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

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

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

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

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

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

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

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

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

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

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

การปรับแต่งเรื่องแรกเลยคือ การเพิ่มวีดีโอจาก 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 เท่านั้น !!

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

ธีมที่ผมแต่งเป็นตัวอย่างนี้เป็นเวอร์ชั่น 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 And NEVIKUP

หน้าเว็บ

วันอังคารที่ 24 มิถุนายน พ.ศ. 2557

[SMF] How to SMF Responsive ตอนที่ 2 หน้าแรก

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[smf] แต่งธีม ตอน เปลี่ยนและเพิ่มสัญลักษณ์แสดงอารมณ์ smf emotion

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

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

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