[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] วิธีลบกระทู้ครั้งละหลายๆกระทู้
เคยมีปัญหามั้ยครับ เมื่อสแปมบุกยังบอร์ดของเรา มันทิ้งร่องรอยมลทินเป็นกระทู้นับร้อยๆกระทู้ เราต้องมานั่งเปิดไล่ลบทีละกระทู้ด้วยความเจ็บช้ำน้ำใจ ..

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

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

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

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





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

 [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 เท่านั้นนะครับ

 [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 ก็จะพรั่งพรูออกมาหมด ด้วยประการฉะนี้แล
เขียนโดย Unknown ส่งอีเมลข้อมูลนี้BlogThis!แชร์ไปที่ Twitterแชร์ไปที่ Facebookแชร์ใน Pinterest
ป้ายกำกับ: แต่งธีม, include, smf, smf theme
1 ความคิดเห็น:

    Unknown20 ตุลาคม 2554 11:21

    แก้ไข
    จริงๆวิธี include(); require(); หรือ require_once(); ใช้ได้ครับ

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

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

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

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

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

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





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

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

 [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

 ถอดธีม 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 โดยวิธีการและขั้นตอนที่ผมได้เคยเขียนแล้วเป็นสเต็ปนั่นแล

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

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

เจอกันใหม่ตอนหน้าคร้าบ
เขียนโดย Unknown ส่งอีเมลข้อมูลนี้BlogThis!แชร์ไปที่ Twitterแชร์ไปที่ Facebookแชร์ใน Pinterest
ป้ายกำกับ: แต่งธีม, โพสต์ภาพ, โมธีม, smf, smf theme, upic.me
8 ความคิดเห็น:

    Cocacola26 มีนาคม 2555 04:42

    ใช้กับ smf2.0.2ได้หรือป่าวครับ
    ตอบกลับ
    Unknown26 มีนาคม 2555 08:39

    ใช้ได้กับทุกเวอร์ชั่นครับ
    ตอบกลับ
    Cocacola26 เมษายน 2555 16:38

    วางโค้ดตรงไหนครับใน smf 2.0.2 ช่วยชี้แนะด้วยนะครับขอบคุณครับ
    ตอบกลับ
    Unknown26 เมษายน 2555 16:44

    ผมเขียนไว้ชัดเจนแล้วครับ
    ลองอ่านดูดีๆ
    ตอบกลับ
    Cocacola26 เมษายน 2555 17:44

    ผมใช้ smf 2.0.2 และก็นำไฟล์ Themes/default/Post.template.php ออกมาแก้ ตามขั้นตอนดังกล่าวครับ แต่...ผมไม่เห็นเลย ..td colspan="2">/td> ที่บันทัดไหนก็ไม่มีครับ ก็ลองเอาลงไประหว่าง .td...>/td> ก็ไม่มีผลอะไรแสดงออกมาเลยครับผม
    ตอบกลับ
    คำตอบ
        Unknown27 เมษายน 2555 08:42

        เว็บบอร์ดเอาขึ้นบนโฮสท์รึยังครับ
        ขอ url เดี๋ยวผมจะไปดูให้ หรือไม่ก็ส่ง ไฟล์ Post.template.php มาให้ผมช่วยดูให้ก็ได้ครับ
        ตอบกลับ
    admin11 มิถุนายน 2555 23:54

    ขอบคุณมากครับ ลองดูแล้วเจ๋งไปเลยครับ

    ผมรบกวนถามอย่างนี้ครับ เราสามารถให้มันเป็นปุ่มได้มั๊ยครับ หรือไม่ก็เปลี่ยนปุ่ม image ของเราให้กลายเป็นฟังชั่นค์นี้ไปเลยน่ะครับ

    ขอบคุณมากนะครับ
    ตอบกลับ
    Yada Shop19 สิงหาคม 2555 21:36

    สำหรับผู้ใช้ SMF 2.0.2

    ใส่โค้ดนี้ก่อนหน้า // Finally, the submit buttons.

 [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' => 'http://',%20'after'%20=>%20'', '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 เท่านั้น !!

 [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 ก็ได้หน้าตาใหม่มาแบบนี้
https://farm7.static.flickr.com/6023/5989586854_2b8b1b2a02_z.jpg

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

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

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

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

 [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 นะคร้าบ
เขียนโดย Unknown ส่งอีเมลข้อมูลนี้BlogThis!แชร์ไปที่ Twitterแชร์ไปที่ Facebookแชร์ใน Pinterest
ป้ายกำกับ: แต่งธีม, smf, template, theme
1 ความคิดเห็น:

    Unknown28 กรกฎาคม 2555 14:45

    เพิ่่มเติมครับ ถ้าเป็น SMF เวอร์ชั่น 2
    ให้ค้นหาคำสั่ง ค้นหาคำสั่ง
    $context['submit_label'] = $txt['post'];

    เจอแล้วลบทิ้ง หรือ คอมมเนต์ไว้ // แล้วใช้คำสั่งเดิมนี้แทน

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

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

 [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], '

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

 [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 มาช่วยครับ
ถ้ายังคิดไม่ออกว่า การดึงภาพมาแสดงเป็นอย่างไร ลองดูภาพด้านล่างนี้ก่อน



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

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

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


http://forum.oknevikup.co.cc/

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

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

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