หมวดไฟฟ้า/อิเล็กทรอนิกส์/คอมพิวเตอร์ => ห้อง SMF 2.0.X => Programming => ห้องคอมพิวเตอร์ => นานาสาระ SMF => ข้อความที่เริ่มโดย: Auto Man ที่ 02 มีนาคม 2563, 06:50:23

หัวข้อ: วิธีการเปลี่ยน Page Head ให้เว็บบอร์ด SMF
เริ่มหัวข้อโดย: Auto Man ที่ 02 มีนาคม 2563, 06:50:23
   วิธีการเปลี่ยน Page Head ให้เว็บบอร์ด SMF 
เว็บบอร์ดถือว่าเป็นส่วนหนึ่งของการสร้างเว็บไซต์ เว็บไซต์ส่วนใหญ่จะเลือกทำการติดตั้งเว็บบอร์ดฟรีกัน ซึ่งผมเองก็เป็นหนึ่งในจำนวนนั้นด้วย ผมได้เลือกทำการติดตั้งเว็บบอร์ด SMF ซึ่งเป็นเว็บบอร์ดฟรีครับ และที่สำคัญคือรองรับภาษาไทยด้วยแถมยังมีลูกเล่นต่างๆมากมาย หลังจากที่ได้ทำการติดตั้งเป็นที่เรียบร้อยแล้ว และได้ใช้งานไปสักระยะหนึ่งก็ไม่เกิดปัญหาอะไร แต่มาติดตรงที่รูปแบบครับ คือว่าผมเกิดอยากจะได้ในส่วนPage Head ของเว็บบอร์ดเป็นรูปแบบตามที่เราต้องการบ้างจึงได้ทำการทดลอง การดัดแปลงดูผลจึงออกมาเป็นเช่นที่เห็นนะครับดูตัวอย่างได้ที่ www.9bkk.com/forum/index.php

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607145)    
            
ขั้นตอนในการเพิ่ม Page Headของเว็บบอร์ด SMF ผมจะแบ่งออกเป็น 2 ขั้นตอนดังนี้
            
            
ขั้นตอนที่ 1.จะเป็นการสร้างในส่วน Page Head ของเว็บบอร์ดที่เราจะนำมาเพิ่มเข้าไปครับ

ขั้นตอนที่ 2. จะเป็นวิธีการเพิ่ม script เข้าไปในส่วนของเว็บบอร์ด

ขั้นตอนแรก
            
    
1. ทำการเปิดโปรแกรม Macromedia Dreaweaver ขึ้นมาแล้วทำการสร้าง Page Head ที่เราจะทำการเพิ่มเข้าไปในเว็บบอร์ดของเรา
        
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607146)            
        
2. คลิกที่แทป Code เพื่อดู Script ของหัวเว็บบอร์ด ที่เราสร้างขึ้น
        
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607147)            
        
3. หลังจากนั้นให้เราทำการคัดลอก Script ของส่วน Page Head ที่เราสร้างขึ้นมาไปเก็บไว้ที่โปรแกรม Notepad
        
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607148)
            
            
            
ข้อมูลที่เราจะทำการการคัดลอกจะอยู่ช่วงระหว่าง <body> ............. </body>
            
    
4. เปิดโปรแกรม Notepad ขึ้นมาแล้ว Paste ข้อมูลลงในโปรแกรม แล้วทำการบันทึกไว้เป็นชื่ออะไรก็ได้
            
            
หมายเหตุ
        
1. เพื่อไม่ให้เกิดความผิดพลาดท่านอาจจะบันทึกไฟล์ที่สร้างขึ้นจากโปรแกรม Dreamweavr เป็นนามสกุล .html แล้วทำการอัพโหลดไฟล์ลงไปในเซิร์ฟเวอร์ แล้วทดลองเปิดดู เพื่อตรวจสอบข้อผิดพลาด
        
2. ตำแหน่งที่เก็บรูปภาพจะต้องระบุ URL ให้สมบูรณ์ก่อนนะครับ
            
            
ตัวอย่าง
            
<img src="image/logo/forum/knowledge_forum11.gif" width="400" height="140">
            
            
ให้เราเพิ่ม URL เข้าไปให้สมบูรณ์
            
<img src="http://www.9bkk.co/image/logo/forum/knowledge_forum11.gif" width="400" height="140">
            
            
การที่เราต้องเพิ่มตำแหน่งของเว็บไซต์เข้าไปเพราะว่าเวลาเรานำ Script ไปติดตั้งเราไม่ได้นำไฟล์รูปภาพไปติดตั้งลงในโฟเดอร์ของเว็บบอร์ดด้วย ฉะนั้นโปรแกรมจะตั้งมาโหลดภาพจาำกตำแหน่งที่เราเก็บภาพไว้ในเซิร์ฟเวอร์ครับ
            
            
    

ขั้นตอนที่ 2 ทำการเพิ่มscript เข้าไปในโปรแกรมเว็บบอร์ด
            
    
1. ทำการเปิดโปรแกรม Macromedia Dreaweaver แล้วเปิดไฟล์ index.template.php
        
ตำแหน่งที่เก็บไฟล์ : โฟเดอร์ที่เก็บไฟล์เว็บบอร์ด/Themes/default/index.template.php
            
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607149)            
            
2. ทำการคลิกที่ code เพื่อดู Script ของไฟล์นี้
            
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607150)            
            
3. ให้เลือนหาตำแหน่งดังรูป แล้วทำการวาง Script ของหัวเว็บบอร์ดที่เราจะเพิ่มเข้าไปลงไปดังรูป
            
ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607151)
        
4. ทำการบันทึกไฟล์ แล้วทำการอัพโหลดไฟล์ลงไปในเซิร์ฟเวอร์ แล้วทดลองเปิดโปรแกรมเพื่อดูผลงานของเราได้เลย

ตรงนี้มีภาพ! แต่ท่านจะมองไม่เห็น , ท่านต้อง  สมัครสมาชิก หรือ ลงชื่อเข้าระบบ
 (http://upic.me/show/62607152)

แหล่งที่มาของข้อมูล... (http://www.9bkk.com/stepbystep/webboard/smf/title_change.html)