foto1
Internet & Security
foto1
Learn to build your website
foto1
Try to our Goal!
foto1
Tip & Tricks to use Computer
foto1
Operating System


Our Sponsor

mod templates

Header Graphics & Slider.

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

mod template 19

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

mod template 20

ตำแหน่งของโมดูล (Position) ต่างๆ นั้น ในแต่ละเทมเพลตอาจมีชื่อตำแหน่งไม่เหมือนกัน แล้วแต่ผู้ออกแบบเทมเพลตจะกำหนดชื่อ เช่น ในเทมเพลต Protostar กำหนดชื่อเป็น Position-0, Position-1, Position-banner, Position-7 (สำหรับเมนูด้านฝั่งขวา), Position-8 (สำหรับเมนูด้านฝั่งซ้าย) เราจะทดลองย้ายโมดูล No. of Page View (ตัวเลขนับผู้ชม) และ Main Menu ไปไว้ทางฝั่งซ้ายกันดู

mod template 21

เราไปที่เมนู Extension > Modules จะเห็นว่า โมดูลของ No of Page View และ Main Menu จะอยู่ที่ตำแหน่ง (Position) Position-7 ทั้งคู่ เราสามารถเปลี่ยนตำแหน่งได้ด้วยการคลิกที่ชื่อโมดูลที่ต้องการเปลี่ยน ตัวอย่าง เราจะเปลี่ยนที่โมดูล Main Menu ก่อน ดังภาพล่าง

mod template 22

เมื่อคลิกที่ชื่อโมดูลเข้ามาพบหน้าต่างนี้ ให้ทำการเปลี่ยนตำแหน่งด้วยการคลิกที่ปุ่ม Select position เพื่อเลือกตำแหน่ง หรือจะพิมพ์ชื่อตำแหน่งลงไปโดยตรงก็ได้ จาก position-7 เป็น position-8 แล้วบันทึกด้วยการคลิกที่ปุ่ม Save & Close แล้วไปเปลี่ยนที่โมดูลตัวเลขนับ ทำตามขั้นตอนเช่นเดิม บันทึกผลแล้วไปดูที่หน้าแสดงผลกันได้เลย เมนูทั้งสองจะต้องย้ายมายังฝั่งซ้ายตามต้องการ

mod template 23

ผลที่ได้ดังแสดงในภาพบน แต่ถ้าเราอยากย้าย Main Menu ไปไว้เหนือตัวเลขนับจะทำอย่างไร เรื่องนี้ไม่ยากเลยเพราะ Joomla! ได้อำนวยความสะดวกในการจัดเรียงลำดับโมดูลได้ โดยไปที่เดิม Extension > Modules

mod template 24

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

mod template 25

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

โมดูลที่สามารถทำหน้าที่เปลี่ยนภาพสไลด์นี้ มีทั้งที่แจกให้ดาวน์โหลดมาใช้กันได้ฟรีๆ หรือถ้าต้องการคุณสมบัติพิเศษ เช่น เมื่อทำการคลิกที่ภาพนั้นๆ แล้วลิงก์ไปยังหน้าอื่นๆ หรือเว็บไซต์อื่นได้ในแต่ละภาพ อันนี้คงต้องจ่ายเงินซื้อโมดูลกันนะครับ ไปหาได้จาก Joomla Extension Photo Slideshow ครับ เชิญเลือกช็อปตามสะดวก แต่ที่แนะนำในตัวอย่างนี้ คือ ของฟรีนะครับ ทำภาพสไลด์ได้สวยงามทีเดียว คือ Vinaora Nivo Slider

mod template 26

Vinaora Nivo Slider ดาวน์โหลดได้ ที่นี่คลิกเลย

เมื่อดาวน์โหลดมาแล้วเราก็จะทำการติดตั้งกันเลยครับ ไปที่เมนู Extension >  Manage > Install > Upload Package File ดังภาพด้านล่าง

mod template 27

คลิกเลือกไฟล์ที่เราดาวน์โหลดมา กดปุ่ม Open เพื่อทำการติดตั้งได้เลย รอสักครู่เมื่อติดตั้งเสร็จแล้ว จะปรากฏว่า มีโมดูลชื่อ Vinaora Nivo Slider ในหน้าต่าง Modules (Site) ที่ยังไม่ได้กำหนดค่าต่างๆ

mod template 28

เราต้องทำการกำหนดการทำงานให้ถูกต้องต่อไป ด้วยการคลิกที่ชื่อในวงรีสีแดง เพื่อดำเนินการต่อไป ก่อนกำหนดค่าเราต้องเตรียมภาพแบนเนอร์ที่จะใช้ให้พร้อมก่อน ตามขนาดและจำนวนที่ต้องการ (ภาพแบนเนอร์ที่ใช้สำหรับเทมเพลต Protostar นี้ควรมีขนาด 940 x 250 pixels จำนวน 3-5 ภาพ)

mod template 29

การตั้งค่าการใช้งาน เราเริ่มที่เปลี่ยนชื่อตรงส่วน Title จาก Vinaora Nivo Slider เป็น Image Slider เพื่อให้สั้นจดจำได้ง่าย และกำหนดให้ไม่แสดงผลชื่อไตเติ้ล ด้วยการเลือก Show Title ให้เป็น Hide กำหนดตำแหน่งให้โมดูลนี้แสดงผลที่ตำแหน่ง Position-banner ต่อไปเราจะกำหนดในส่วนการแสดงผล (ในกรอบสีเขียว)

บรรทัดแรก Run demo ถ้าเราไม่ได้เตรียมภาพไว้ก่อนสามารถใช้ภาพจากเว็บไซต์ผู้พัฒนาได้ ซึ่งไม่ได้เหมาะกับเว็บเรานะ (รูปการ์ตูน) แค่ดูว่ามันแสดงผลได้หรือยังเท่านั้น แต่ถ้าเตรียมไว้แล้ว บรรทัดนี้ให้เลือกเป็น - None Selected - (จะใช้ภาพของเราเอง)

บรรทัดที่สอง Theme มีให้เลือกหลายตัว ในที่นี้เลือกเป็น default ก่อน (อื่นๆ เอาไว้เลือกทีหลังหากอยากให้ต่างออกไปจากเพื่อน)

บรรทัดที่ 3 และ 4 เป็นการกำหนดความกว้างยาวของภาพให้ตรงตามความต้องการ ความกว้าง (Width (px)) ใช้ 940 pixels ความสูง (Height (px)) 250 pixels

และในบรรทัดถัดไปที่ต้องกำหนดค่าให้ถูกต้องคือ Image Directory (กำหนดที่อยู่ของภาพที่เราจะอัพโหลดไปเก็บ) เป็น images/slide/ ทำการบันทึก (Save & Close)

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

mod template 30

ให้คลิกที่ปุ่ม Create New Folder ทำการกำหนดชื่อโฟลเดอร์เป็น Slide แล้วคลิกที่ปุ่ม Create Folder ในวงรีสีเหลือง

mod template 31

ขั้นตอนต่อไปทำการอัพโหลดรูปภาพที่เตรียมไว้ คลิกที่ปุ่ม Upload เลือกโฟลเดอร์ Slide คลิกที่ปุ่ม Browse จะมีกรอบสำหรับเลือกรูปภาพให้เลือกภาพที่เราเตรียมไว้ทั้งหมด คลิกที่ปุ่ม Open

mod template 32

จะเห็นว่ามีไฟล์ภาพจำนวน 5 files selected หลังปุ่ม Browse พร้อมแล้วสำหรับการอัพโหลด ให้คลิกที่ปุ่ม Start Upload ได้ทันที

mod template 33

เป็นอันเสร็จเรียบร้อยสำหรับการอัพโหลดรูปไปเตรียมไว้ให้โมดูล Image Slide ของเรานำไปแสดงผล จากนั้นไปที่หน้าเว็บหลักเพื่อดูผลได้เลยทันที

mod template 34

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

เอาล่ะ! ถ้าแสดงผลได้แล้วแต่มีการแสดงปุ่มจุดๆ 5 ปุ่ม (ในกรอบสีฟ้าด้านผล) ก็สามารถซ่อนได้โดยไปกำหนดค่า Control Nav ในโมดูลเป็น No ครับ จริงๆ แล้วมีการกำหนดรูปแบบเพิ่มเติมได้อีกมาก เช่น การเปลี่ยนสไลด์ให้เป็นแบบเลือน (Fade) เข้าหากัน หรือเป็นแถบ (Bar) เป็นบล็อก (Block) รวมทั้งกำหนดเวลาในการเปลี่ยนสไลด์ได้ ไปลองเพิ่มเติมกันเองนะครับ

mod template 35

หมายเหตุ การแสดงผลของภาพปกติจะแสดงเรียงลำดับตามชื่อไฟล์ เช่น 1, 2, 3, ... หรือตามตัวอักษรในชื่อตัวแรก เช่น a, b, c, ... ดังนั้นหากต้องการให้ภาพใดแสดงก่อน-หลัง  ก็เปลี่ยนลำดับที่ชื่อไฟล์ได้เลย

วันนี้ ก็ได้ความรู้ไปปรับปรุงเทมเพลตให้สวยงามตามต้องการแล้ว ยังมีอีกหลายรายการที่ต้องทำต่อไป เอาไว้ต่อตอนหน้านะครับ พอดีเครื่องที่ใช้งานประจำ HP Pavilion dv36361TX งอแงมากสงสัยใกล้จะสิ้นอายุขัยล่ะ (13 ปี) รีสตาร์ทโดยไม่ทราบสาเหตุ หันมาหยิบเครื่องเก่า (อีกล่ะ) Macbook White Late 2007 ที่แอปเปิ้ลทอดทิ้งสาวกผู้ภักดีไม่ให้ไปต่ออัพเดท Mac OS X ไม่ได้ เลยจับมาวิ่งด้วย linux Mint เสียเลย (ลองมาหลายดิสโตรตามคำยุของเพื่อนๆ ตอนนี้คบน้องมินต์อยู่) ถึงได้เขียนบทความนี้สำเร็จ โล่ง!...

บทความตอนต่อไป จะเป็นการแก้ไขในส่วนของการแสดงผลฟอนต์ในบทความ เมนู และหัวเรื่อง ในไฟล์ template.css กันนะครับ โปรดติดตามตอนต่อไป

 

สนับสนุนให้ Easyhome อยู่รับใช้ท่านตลอดไป ด้วยการคลิกแบนเนอร์ไปเยี่ยมผู้สนับสนุนของเราด้วยครับ
นโยบายความเป็นส่วนตัว Our Policy

ยินดีต้อนรับทุกท่านสู่เว็บไซต์ Easyhome in Thailand เว็บไซต์ของเรา ใช้คุกกี้ (Cookies) เพื่อให้ท่านได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น อ่านนโยบายคุ้มครองข้อมูลส่วนบุคคล (Privacy Policy) และนโยบายคุกกี้ (Cookie Policy)