Page 1

บทที่ 2 เอกสารที่เกี่ยวข้อง วิธีติดตั้ง ขั้นตอน การติดตั้ง JOOMLA 2.5 Joomla คือ โปรแกรม OpenSource จาพวก CMS (Content Management System) ซึ่ง ใช้ สาหรับสร้างเว็บไซต์ มีความปลอดภัยสูง และเป็นที่นิยมมากก่อนการติดตั้งโปรแกรมเราต้องจาลองเครื่องของ เราให้เป็นเครื่อง sever ก่อน ตามลิงค์ ติดตั้ง php Mysql Apache โปรแกรมจาลอง Web Server ด้วย XAMPP แล้วเตรียมฐานข้อมูลตามวิธีด้านล่าง

เมื่อเสร็จแล้วจะได้ดังรูป

ขั้นการติดตั้งโปรแกรม ดาวน์โหลดโปรแกรม Joomla 2.5 ก่อน (โหลดได้ที่ http://www.joomla.org/download.html ) หลังจากโหลดไฟล์โปรแกรม joomla2.5 มาเรียบร้อยแล้ว ให้ทาการ Unzip ไฟล์โปรแกรม ไปไว้ที่ D:\xampp\htdocs\joomla25


ตัวอย่างวิธีการ Unzip โปรแกรม

เมื่อเรียบร้อยแล้วก็เริ่มตั้งได้ทันที ตามขั้นตอนด้านล่าง 1. เปิด web browser พิมพ์ URL ไปที่ http://localhost/joomla25/ จะได้หน้าจอดังรูปในขั้นตอนนี้ให้ เลือก ภาษาไทย แล้วคลิก ปุ่ม ต่อไป

2. จะสังเกตว่าบนหน้าต่าง เป็นคาว่า ใช่ ทั้งหมด แล้วจึงคลิกปุ่ม ต่อไป

3. หน้านี้อธิบายเกียวกับลิขสิทธิ์ ก็คลิก ต่อไป ได้เลย


5. การตั้งค่าฐานข้อมูล ชนิดของฐานข้อมูล : Mysql (ต้องเลือก Mysql เท่านั้นนะครับ) ชื่อโฮส : localhost ชื่อผู้ใช้ฐานข้อมูล : root (ค่าปกติ admin ของฐานข้อมูล Mysqlจะ ชื่อ root) รหัสผ่าน : *** (หรืออาจไม่ตั้งก็ได้) ชื่อฐานข้อมูล : joomla25 (ตั้งชื้อฐานข้อมูลอะไรก็ได้ แต่ต้องไม่ซ้ากันนะ) คานาหน้าตาราง : (อันนี้ไม่ต้องสนใจก็ได้ ให้เป็นตามค่าปกติที่เว็บกาหนดมาก็ได้) จากนั้นคลิกปุ่ม ต่อไป ได้เลย

6.ตั้งค่าหลักของเวป ชื่อเว็บ : ทดลองติดตั้ง joomla2.5 (พิมพ์ชื้ออะไรก็ได้ สามารถแก้ไข้ได้ภายหลังนะ) อีเมล์ของคุณ : aaa@aaa.aaa (เป็นเมล์ของผูดูแลระบบ ระบบจะติดต่อกับadminที่เมล์นี้) รหัสผ่านผู้ดูแล : admin (กาหนดอะไรก็ได้ ) ยืนยันรหัสผ่านผู้ดูแล : admin ข้อมูลตัวอย่างจะช่วยให้เราเห็นตาแหน่งของโครงสร้างได้ชัดเจน ทาเสร็จแล้วค่อยลบออกก็ได้


กรอบข้อมูลเสร็จก็คลิก ต่อไป ได้เลย

7. มาถึงตรงนี้เราได้ทาการติดตั้ง Joomla เสร็จเรียบร้อยแล้ว แต่ยังใช้งานไม่ได้ ต้องลบโฟล์เดอร์ installation ก่อน กดปุ่ม..ลบโฟลเดอร์ installation

8. เสร็จเรียบร้อยให้คลิก ปุ่ม ดูหน้าเว็บ จะปรากฏหน้าเว็บ ดังรูปข้างล่างนี้


วิธีเปลี่ยนโลโก้ JOOMLA ขั้นตอนที่ 1. หลังจากที่ทุกท่านติดตั้ง firefox แล้วก็เปิดหน้าเว็บของท่านเลยครับ คลิกขวาที่ Joomla Logo เลือก View Background Image ครับ

ขั้นตอนที่ 2 เราจะเห็นรูปโลโก้ Joomla นะครับว่าอยู่ที่ไหนให้เซพมาไว้ที่เครื่องPCเราครับ


ขั้นตอนที่ 3 เปิดดูรูปครับว่าขนาดเท่าไหร่ และนามสกุลอะไร ตัวอย่างนี้ ชื่อรูป: mw_joomla_logo ขนาด: 298x75 pixels นามสกุล: png


ขั้นตอนที่ 5 ออกแบบโลโก้ของคุณ ให้ขนาด กว้างxยาว เท่ากับโลโก้ Joomla เดิม จากนั้นเซพชื่อเดิม และ นามสกุลเดิม

ขั้นตอนที่ 6 ต่อไปก็อัพโหลดขึ้นไปไว้ที่เว็บไซต์ Root/templates/ชื่อเทมเพลตที่เราใช้/images หรือตัวอย่างนี้ก็คือ Root/templates/rhuk_milkyway/images


ขั้นตอนที่ 8 ลองกลับมาดูหน้าเว็บเราครับว่าโลโก้เปลี่ยนหรือยัง ดูด้วยFirefox หรือ IE

ขั้นตอนที่ 9 ถ้ายังไม่เปลี่ยนให้ลอง Clear Cache เปิดfirefox เลือก Tools=>Clear Private Data=>ติ๊กทุก อัน แล้วคลิก Clear Private Data Now


การเปลี่ยน Position หรือตาแหน่งแสดงโมดูล คาว่าการเปลี่ยน Position หรือตาแหน่งการสแสดงโมดูลในที่นี้ ไม่ได้หมายความว่าการย้าย Position หรือการเพิ่ม Position แต่เป็นการเปลี่ยนตาแหน่ง Position เช่นจาก Left เป็น Right เป็นต้น ซึ่งเมื่อเรามี ความต้องการเปลี่ยนตาแหน่งการแสดงโมดูล หรือเปลี่ยนเทมเพลตใหม่ เราจาต้องมีความรู้ในส่วนนี้บ้าง บทความนี้ใช้เว็บไซต์ที่ติดตั้งด้วยระบบต่อไปนี้ เป็นแม่แบบในการนาเสนอ - joomla 2.5.7 - ภาษาไทย 2.5.7.1 โดย Dev Joomlacorner ท่านสามารถศึกษาการดู Position ของท่านโดยคลิกที่ การดู Position

ตัวอย่าง ผมต้องการให้โดมูล Menu ชื่อว่า เมนูหลัก ให้แสดงที่ Lift ตามตาแหน่ง Position ของ template ที่ผมใช้อยู่ ผมคลิกที่ เลือกตาแหน่ง


เลือก template ที่เราใช้งานอยู่ ตรงนี้ต้องเลือกให้ถูกเทมเพลตที่เราใช้งานอยู่ วิธีดูเทมเพลตไหนว่าเป็นเทม เพลตหลักคลิกที่นี่

ดูที่รายการ ก็จะแสดงเฉพาะ Position ของเทมเพลตที่เราเลือก (ที่เลือกเทมเพลตก่อน ป้องกันความสับสน กรณีที่มีหลายเทมเพลต เพราะแต่ละเทมเพลตมี Position ไม่ตรงกัน) คลิกเลือก Position ที่ต้องการ ตามตัวอย่าง ผมต้องการให้แสดงเมนูหลักที่ด้านซ้าย ผมเลือก Lift (อย่างที่ บอกไว้ แต่ละเทมเพลตมีชื่อ Position และตาแหน่ง Position ไม่เหมือนกัน บางเทมเพลตอาจจะมี Position ด้านซ้ายเป็นชื่ออย่างอื่นก็ได้ ไม่จาเป็นต้องชื่อว่า Lift เช่นอาจจะชื่อว่า Postion-7 เป็นต้น)


เมื่อเลือกมาแล้ว ก็จะเหมือนภาพข้างบน แค่ก็เสร็จแล้วสาหรับการเลือก Position หรือตาแหน่งการแสดง โมดูล จากนั้นทาการบันทึก ก็เป็นอันใช้ได้


ที่ด้านล่าง จะมีคาว่า การกาหนดการแสดงที่เมนู ** เลือกกาหนดการแสดงผล ว่าจะแสดงทุกหน้า, ไม่แสดง,แสดงเฉพาะที่เลือก,แสดงทุกหน้าเว้นที่เลือก --แสดงทุกหน้า หมายถึแสดงทุกเมนูทุกหน้าทั้งเว็บ ตามภาพตัวอย่าง ไม่ว่าจะเป็นเมนู Liks, Main menu, Top menu เป็นต้น แสดงทั้งหมด --แสดงเฉพาะที่เลือก เราต้องมาติ๊กเลือกที่ช่องข้างล่างในกรอบสีแดงอีกทีว่าจะให้แสดงที่หน้าไหน เมนูไหน --แสดงทุกหน้าเว้นที่เลือก ถ้าเราเลือกตัวนี้ แล้วมาติ๊กที่เมนูไหน หน้าไหน หน้านั้นจะไม่มีโมดูลนี้ แสดง


วิธีการเพิ่มบทความใน Joomla 2.5 เมื่อเราทาการเปิดเว็บไซต์ จากโปรแกรม Joomla 2.5 เป็นที่เรียบร้อยแล้ว (หรือหากยังไม่ได้ทาการ ติดตั้ง Joomla2.5 ก็ให้ทาตามวิธีในลิงค์นี้ วิธีติดตั้ง ขั้นตอน การติดตั้ง joomla 2.5) ก่อนการเพิ่มบทความ เราจาเป็นต้องสมัคร User name ก่อนจึงจะสามารถเพิ่มบทความเข้าไปใน เว็บไซต์นี้ได้ เมื่อมี User name เรียบร้อยเเล้ว ก็เริ่มเพิ่มบทความได้เลย ตามขั้นตอนด้านล่างนี้ 1. เปิด Browser ของคุณ แล้วเข้าไปที่ http://www.mindphp.com/administrator จะได้หน้าต่างดังรูป ให้กรอก User name และ password จากนั้นก็ทาการ ล็อกอินเข้าเว็บไซต์

2.หลังจากล็อกอินเเล้ว จะปรากฏหน้าตางดังรูป ให้เลือกที่ Add new article เพื่อทาการเริ่มหน้าใหม่ สาหรับ เพิ่มบทความ

3. ใส่ชื่อบทความที่จะทาการเพิ่มเติม ในช่อง Title และ Alias และช่อง Created by alias ซึ่งทั้งสามช่องนี้ อาจใส่เป็นชื่อเดียวกันเลยก็ได้


4.หลังจากใส่ชื่อบทความแล้ว ให้เริ่มพิมบทความในช่องตามรูป

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

เลือกรูปภาพที่ต้องการ แล้วคลิก open

จากนั้นคลิกที่ Start upload


จะเห็นรูปภาพที่เราทาการ Upload ปรากฏขึ้น ให้คลิกที่ไฟล์รูปภาพนั้น แล้ว คลิกที่ Insert เพื่อทาการนาเข้า ภาพ เพียงเท่านี้ก็เสร็จเรียบร้อย


พื้นฐาน URL ใน JOOMLA 2.5 สวัสดีครับ ผมเคยได้พูดถึงเรื่องของ URL ในเว็บไซต์ joomla 1.5 ไปแล้วนะครับ ในบทนี้ก็จะพูดถึง URL ในส่วนของ Joomla 2.5 กันบ้างนะครับ เพราะว่ามีข้อแตกต่างกันอยู่บ้าง ในเรื่องของการกาหนด พื้นฐานรูปแบบ URL ซึ่งใน Joomla 2.5 นี้เราสามารถกาหนดรูปแบบของ URL ได้ดีขึ้นจากเดิม โดยเราจะ เน้นไปในเรื่องของการรองรับภาษาไทยนั้นเอง ไปดูกันเลยครับ ก่อนอื่นคงต้องบอกก่อนว่า การกาหนด URL ในส่วน Content หรือ เนื้อหาบทความนั้น สาหรับ Joomla 1.5 หากไม่ได้เพิ่มเติมในส่วนของ Extension แล้วนั้น เราจะต้องให้ความสาคัญกับการกาหนดชื่อที่ เป็น Alias ให้มากและต้องเป็นภาษาอังกฤษเท่านั้น แต่สาหรับ Joomla 2.5 นั้น ได้มีการออกแบบฟังค์ชั่นใน การรองรับการใช้ภาษาในการกาหนด URL ที่เป็นแบบ Unicode ได้ด้วย โดยเรามาเริ่มดูที่ละส่วนกันนะครับ 1.การกาหนดรูปแบบของ URL ของ joomla 2.5 ในแบบธรรมดานั้น หากเรามีการกาหนด ชื่อ Title เป็น ภาษาไทย หรือ ภาษาอังกฤษ แต่ ชื่อ Alias เป็น ภาษาอังกฤษ นั้น เราจะสามารถใช้งานได้อย่างปกติ ดังรูป 1

รูปที่ 1 ที่นี้เราลองไปดูที่หน้าเว็บไซต์นะครับ ดังรูปที่.2


รูปที่ 2 จะเห็นว่ารูปแบบของ URL นั้น จะสั้นและดูแล้วเข้าใจง่าย เพราะว่า joomla 2.5 นั้น หลังจากการ ติดตั้งใหม่แล้วนั้น ระบบจะกาหนดให้เปิดใช้งานฟังค์ชั่น Friendly URLs เลยโดยอัตโนมัตินะครับ ซึ่งรูปแบบ จะเป็นแบบ Soft คือจะมีการใช้ index.php อยู่ใน URL และจะไม่ใช้ .htaccess นั้นเอง ทีนี้มาดูในส่วน เนื้อหา จะเห็นว่า URL ได้นาชื่อในส่วน Alias มาใส่แทนในการเรียกไปยังเนื้อหานะครับ แต่ถ้าเราใส่ชื่อ Alias ที่เป็นภาษาไทยลงไป ในชื่อ Alias หลังจากที่เรากด save ตัวอักษรที่เป็นภาษาไทยก็จะหายไปนะครับในการ ใช้รูปแบบ URL แบบนี้นะครับ 2. ทีนี้ แล้วเราจะกาหนดเป็นภาษาไทยได้อย่างไร คาตอบก็ง่ายๆ คือเราต้องไปเปิดการใช้งาน การรองรับ Unicode ใน URL นั้นเอง ซึง่ วิธีเปิดก็ให้เราไปที่เมนู site เลือกที่ Global Configuration ดังรูปที่.3


รูปที่.3 จากนั้นก็ให้เราเลือกที่หัวข้อ Unicode Aliases ให้เป็น Yes นะครับ จากนั้นก็ Save & Close นะ ครับ ทีนี้เราลองกับมาสร้างบทความใหม่กาหนดให้ชื่อ Title เป็นภาษาไทย หรือ ภาษาอังกฤษ แต่ ชื่อ Alias เป็น ภาษาไทย นะครับ ดังรูปที่.4


รูปที่.4 เสร็จแล้วก็ให้เรา Save นะครับ จะเห็นว่าชื่อ Alias ที่เป็นภาษาไทยคราวนี้ไม่หายไปแล้วนะครับ ทีนี้ลองไปดู ในหน้าเว็บไซต์กันบ้างนะครับ เราก็จะได้ดังรูปที่.5


รูปที่.5 ในหน้าเว็บไซต์เพื่อนๆจะเห็นว่า URL ที่ได้รับนั้น ตอนนี้ก็จะเป็นภาษาไทยแล้วนะครับ ส่วนเลขที่อยู่ ด้านหน้านั้น เป็นเลข ID ของบทความนั้นเอง เราสามารถกาหนดการใช้งาน URL ที่เป็นภาษาไทยนี้ ได้กับใน ส่วนที่เป็น Category ได้ด้วยนะครับ โดยให้เราไปกาหนดชื่อที่เป็น Alias ของ Category ที่เราใช้ ดังรูปที่.6


รูปที่.6 จากนั้นก็ไปกาหนดให้เนื้อหาและบทความ อยู่ในหมวดหมู่นี้นะครับ แล้วเราลองไปดูในหน้าเว็บไซต์ นะครับ F5 ก่อนนะครับ เราก็จะได้ดังรูปที่.7

รูปที่.7 เพื่อนๆจะเห็นว่า URL ที่ได้นั้นตอนนี้ เป็นภาษาไทยทั้งในส่วนของ Category และ Content แล้วนะ ค รั บ ที นี้ ม า ดู เ พิ่ ม เ ติ่ ม ว่ า เ ร า จ ะ ท า ใ ห้ URL นี้ ดู ส ว ย ขึ้ น ไ ด้ อ ย่ า ง ไ ร น ะ ค รั บ 3. เปิดใช้งาน Use URL rewriting เป็น การเปิดการใช้งานโหมด rewriting แทนการใช้โหมด soft ซึ่งจะทา ให้ ใน URL นั้นไม่มี คาว่า index.php โดยให้เราเปิดการใช้งานที่เมนู site เลือกที่ Global Configuration เลือกที่หัวข้อ Use URL rewriting เป็น yes นะครับ จากนั้นก็ Save & Close ดังรูปที่.8


รูปที่.8 จากนั้นเราต้องไปเปลี่ยนชื่อไฟล์ htaccess.txt เป็น .htaccess (มีจุดนาหน้า) ในRoot แรกของ joomla นะครับ โดยปกติเราจะเปลี่ยนชื่อเฉยๆไม่ได้ วิธีง่ายสุดคือ ใช้ โปรแกรมFTP เรามีอยู่แล้ว(ในที่นี้คือ FireZilla ) ไปแก้ไขชื่อ ดังรูปที่.9

รูปที่.9


เมื่อแก้ไขเสร็จแล้ว ก็ให้เราไป F5 ที่หน้าเว็บไซต์ใหม่นะครับ เราก็จะได้ดังรูปที่.10

รูปที่.10 เพื่อนๆจะเห็นว่าตอนนี้ใน URL ไม่มีคาว่า index.php แล้วนะครับ ซึ่งการทาแบบนี้จะส่งผลกับทุก ส่วนที่เป็น URL ในเว็บเรานะครับ 4. การใช้งาน Adds Suffix to URL เป็น การกาหนด นามสกุลให้กับ URL นะครับ โดยค่าปกติที่จะได้ก็คือ .html ซึ่งจะแสดงในส่วนที่เป็น Content หรือส่วนที่เป็นเนื้อหาเท่านั้นนะครับ โดยให้เราเปิดการใช้งานที่เมนู site เลือกที่ Global Configuration เลือกที่หัวข้อ Adds Suffix to URL เป็น yes นะครับ จากนั้นก็ Save & Close ดังรูปที่.11


รูปที่.11 ทีนี้เราลองไปดูที่หน้าเว็บไซต์กันนะครับ อย่าลืม F5 ก่อนนะครับ เราก็จะได้ ดังรูปที่.12

รูปที่.12


ตอนนี้เพื่อนๆก็จะได้ URL ที่สั้นๆและเป็นภาษาไทย ได้ง่ายๆ โดยยัง ไม่ต้องไปใช้ Extension ให้ ยุ่งยากนะครับ แต่ถ้าเกิดมีปัญหาขึ้นมาในส่วนของ URL นอกเหนือจากการเรียกใช้งานในส่วนของ content หรือส่วนของ joomla แล้วนั้น เช่นการใช้งาน extension อื่นๆ ร่วมด้วยแล้วลิงค์ต่างๆไม่ไป หรือใช้ไม่ได้ ก็ให้ สันนิฐานเบื่องต้นโดยให้เราปิดในส่วนของข้อที่ 3 และ 4 ก่อนนะครับ คือให้ปิดในส่วน Use URL rewriting และ Adds Suffix to URL ก่อนนะครับ


ทาเว็บให้น่าสนใจยิ่งขึ้นด้วย LIGHTBOX ขัน้ ตอนที่ 1. ไปโหลด lightbox (ไฟล์ Zip) ที่เว็บนี้ก่อนนะครับ http://www.huddletogether.com/projects/lightbox2/ ขั้นตอนที่ 2. พอโหลดมาลงเครื่องแล้วก็ Extract เลยครับ ขั้นตอนที่ 3. จากนั้นไฟล์ที่Extractออกมา่จะเป็นโฟลเดอร์ชื่อ lightbox2.04 เปิดเข้าไปดูเลยครับ จะเจอไฟล์ index.html ซึ่งมีคู่มือการใช้อยู่ ถ้าใครอ่านรู้เรื่องทาเป็นแล้วก็ไม่ต้องอ่านบล็อกผมต่อแล้วล่ะครับ อิอิอิ แต่ถ้า ไม่รู้เรื่องก็ลองอ่านขั้นตอนต่อไปเลย :) ขั้นตอนที่ 4. เพื่อความเข้าใจเบื้องต้นนะครับ ให้คุณเตรียมรูปอย่างน้อยซัก 3 รูปครับ จากนั้นตั้งชื่อ สมมติว่า เป็น picture01.jpg, picture02.jpg, picture03.jpg ขั้นตอนที่ 5. จากนั้นให้Resizeทั้ง 3 รูปเลยครับ แล้วตั้งชื่อว่า picture01-thumbnail.jpg, picture02thumbnail.jpg, picture03-thumbnail.jpg ตอนนี้คุณมี 6 รูปแล้วนะครับ ให้เอาไปรวมกันที่โฟลเดอร์เดียว ผมสมมติชื่อ folder เป็น example-pics ครับ ขั้นตอนที่ 6. ให้อัพโหลดโฟลเดอร์ example-pics ไปที่เว็บไซต์ของคุณนะครับ ตัวอย่างนี้ผมอัพโหลดไปไว้ที่ ตาแหน่งrootนะครับ ตามนี้ Root/example-pics


รูปแสดงวิธีการอัพโหลดโฟลเดอร์ EXAMPLE-PICS ด้วย FILEZILLA ขั้นตอนที่ 7.คราวนี้กลับมาดูที่โฟลเดอร์lightbox2.04 เพื่อความสะดวกให้คุณเปลี่ยนชื่อโฟลเดอร์นี้เป็น lightboxเฉยๆนะครับ ไม่ต้องมี 2.04 ขั้นตอนที่ 8.ต่อไปก็อัพโหลดโฟลเดอร์lightboxไปที่เว็บไซต์ของคุณเลย ตัวอย่างนี้ผมอัพโหลดไปที่ rootนะ ครับ Root/lightbox ขั้นตอนที่ 9.โอเคครับ, ให้นาโค้ดนี้ไปใส่ใน template html นะครับ ระหว่าง tag <head>...</head> <link rel="stylesheet" href="/06628/URLเว็บไซต์คุณ/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="/06628/URLเว็บไซต์คุณ/lightbox/js/prototype.js" type="text/javascript"> </script> <script src="/06628/URLเว็บไซต์คุณ/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"> </script>


<script src="/06628/URLเว็บไซต์คุณ/lightbox/js/lightbox.js" type="text/javascript"> </script> อย่าลืมเปลี่ยนคาว่า"URLเว็บไซต์คุณ"ด้วยนะครับ :) ขั้นตอนที่ 10.และเวลาจะใช้lightboxก็ให้ใช้โค้ดนี้ครับ <a href="/06628/URL ของรูปขนาดเต็ม" rel="lightbox" title="ใส่ชื่อรูป"> <img src="/06628/URL ของรูป thumbnail" alt="ใส่ชื่อรูป" /></a> สาหรับตัวอย่างนี้ (หมายถึง 6 รูปที่เตรียมไว้ในขั้นตอนที่4-5) โค้ดก็จะเป็นแบบนี้ครับ: <a href="http://www.เว็บของคุณ.com/example-pics/picture01.jpg" rel="lightbox" title="picture01"> <img src="http://www.เว็บของคุณ.com/example-pics/picture01-thumbnail.jpg" alt="picture01" /></a> <a href="http://www.เว็บของคุณ.com/example-pics/picture02.jpg" rel="lightbox" title="picture02"> <img src="http://www.เว็บของคุณ.com/example-pics/picture02-thumbnail.jpg" alt="picture02" /></a> <a href="http://www.เว็บของคุณ.com/example-pics/picture03.jpg" rel="lightbox" title="picture03"> <img src="http://www.เว็บของคุณ.com/example-pics/picture03-thumbnail.jpg" alt="picture03" /></a>


หมายเหตุ: หากมีรูปที่เกี่ยวข้องกัน อยากจะทาเป็นกลุ่มเดียวกัน เช่น ใน 100 รูป อาจจะมี กลุ่มรูปรถยนต์ 50 รูป กลุ่มรูปต้นไม้ 30 รูป กลุ่มอื่นๆ 20 รูป เราอาจจะใส่โค้ดเพิ่ม [ชื่อกลุ่ม] ไว้หลังโค้ดตรงนี้ rel="lightbox[ชื่อกลุ่ม]" ซึ่งมีประโยชน์เมื่อเปิดดูรูปใดรูปหนึ่งในกลุ่มดังกล่าวแล้ว จะสามารถใช้แป้นลูกศร บนคีย์บอร์ดเลื่อนรูปไปข้างหน้า หรือ ถอยหลัง ไปยังรูปถัดไปได้ ** อาจจะลองประยุกต์ใช้lightbox กับ photoshop automate web photo gallery


สร้างเมนูง่ายๆกับ MENU ACCORDEON CK สวัสดีครับ วันนี้เรายังคงอยู่กับเรื่องของโมดูลกันนะครับ โดยปกติแล้วการทาเมนูในหน้าเว็บไซต์นั้นจะ มีอยู่ 2 ตาแหน่ง นั้นก็คือเมนูด้านบน หรือเมนูหลัก กับเมนูด้านข้าง ที่อาจจะมีหรือไม่มีก็ได้ ซึ่งในเมนู หลักนั้น โดยปกติเราก็อาจจะใช้การกาหนด css หรือการใช้ Script ของตัวเทมเพลทเองในการกาหนดรูปแบบของเมนู ซึ่งก็ไม่ยากอะไร แต่เมนูด้านข้างนี่สิ บางเทมเพลทก็ไม่ได้กาหนดมาให้ วันนี้ผมจะมาแนะนาโมดูลที่แสดงเมนู ด้านข้างกันครับ สนใจรึป่าว..ถ้าสน ก็ตามมาดูกันต่อครับ.. โดยทั่วไปเมนูด้านข้างนั้น อาจจะถูกนามาใช้หรือไม่มีก็ได้ในเว็บไซต์ แต่ถ้ามี ก็มักจะต้องอ้างอิงกับ css ของเทมเพลทที่เราใช้ ซึ่งขอบอกว่า เทมเพลทฟรีที่เราๆใช้กันอยู่นี้ มีน้อยมากที่จะให้ความสาคัญกับการ กาหนด css ของเมนูด้านข้างนะครับ จึงทาให้เมนูดูไม่ค่อยสวยหรือปรับแต่งได้ยากนั้นเอง จึงเป็นที่มาของวันนี้ ที่ผมจะแนะนาโมดูลที่ชื่อ Menu Accordeon CK ก่อนอื่นเพื่อนๆก็ต้องดาวน์โหลด Module มาก่อนนะครับ จากนั้นก็ทาการติดตั้งได้เลยนะครับ เมื่อ ติดตั้งเสร็จแล้ว ก็ให้มาที่เมนู Extensions เลือกที่ Module Manager นะครับหา Module ที่ชื่อว่า Menu Accordeon CK เมื่อเจอแล้วก็คลิ๊กที่ชื่อได้เลยนะครับ ดังรูปที่.1

รูปที่.1 เมื่อเราเข้ามาที่หน้า Module Manager: Module mod_accordeonck แล้วนั้นก็ให้กาหนดรายละเอียด


ในด้าน Details ก่อนนะครับ ดังรูปที่.2

รูปที่.2 ในส่วน Detials 1.Title กาหนดชื่อของโมดูลนะครับ 2.Show Title กาหนดแสดงชื่อของโมดูลนะครับ 3.Position กาหนด ตาแหน่งที่จะแสดงโมดูลครับ อาจจะเลือกจากรายการที่มีของเทมเพลท หรือถ้าเป็นการ สร้าง position เอง ก็ให้พิมพ์ลงในช่องได้เลยนะครับ 4.Status กาหนดเปิดใช้งานโดยกาหนดให้เป็น Published นะครับ 5.Module Assignment กาหนดแสดงโมดูลในหน้าไหนบ้างนะครับ (อยู่ที่ด้านล่างนะครับ) จากนั้นเรามาดูที่ละส่วนของรายละเอียดด้านขวากันนะครับ ซึ่งจะมีหลายแท็บ ดังนี้นะครับ 1. Basic Options เป็นการกาหนดในส่วนเริ่มต้น ของเมนูที่จะใช้นะครับ ดังรูปที่.3


รูปที่.3 Select Menu เลือกเมนูที่จะใช้ Start Level เลือกลาดับเริ่มต้นที่จะใช้เมนู (ในกรณีถ้าเมนูมี Sub Menu ย่อย นะครับ) ปกติจะเริ่มที่ 1 เสมอ นะครับ End Level ในการณีที่มี Sub Menu ถ้าไม่ต้องการให้แสดง ก็ต้องกาหนดในข้อนี้ (ปกติจะแสดงทุก Sub Menu นะครับ) Link image alignement ในกรณี ถ้า Menu กาหนดให้แสดงรูปด้วย ก็ต้องมากาหนดตาแหน่งรูปจากข้อนี้ นะครับ 2. Advanced Options เป็นการกาหนดค่าเพิ่มเติมนะครับ (เราอาจจะไม่ต้องแก้ไขในส่วนนีน้ ะครับ) ดังรูป ที่.4

รูปที่.4 Menu Tag ID กาหนด Tag ของเมนู


Menu Class Suffix กาหนดรูปแบบของ Menu Class Suffix เฉพาะถ้าเรามีรูปแบบอยู่แล้วใน css นะครับ Alternative Layout น่าจะเป็นการอ้างอิงรูปแบบของโมดูลตามเทมเพลทแบบไหนที่มีนะครับ (ปกติก็จะ เป็น default นะครับ) Caching กาหนดการใช้งาน Cach นะครับ Cache Time ระยะเวลาการใช้ Cach นะครับ 3.Mootools effects เป็นการปรับแต่งลูกเล่นเล็กน้อยของ Link และ การใช้งานนะครับ ดังรูปที่.5

รูปที่.5 Event to open เป็นการเลือกใช้ Mouse แบบ คลิ๊กเมนู หรือ แค่วาง mouse ที่เมนูนะครับ ซึ่งจะเป็นใน กรณีที่มี Sub Menu นะครับ Event target element เลือกรูปแบบว่าจะเป็นเฉพาะ link หรือ Images ที่จะแสดงผลในข้อ 1 นะครับ Fade transition อันนี้ไม่แน่ใจครับ Duration ระยะเวลาในการใช้ Effect ในการแสดง Sub Menu (การยืดและย่อตาแหน่งของ Sub Menu นั้นเอง) Transition เป็นรูปแบบที่จะแสดง Sub Menu (ปกติใช้ Linear นะครับ เลือกไปก็ปวดหัวป่าวๆ ครับ) 4. Styles เป็นการกาหนดค่าพื้นฐานของรูปแบบเมนูที่จะใช้นะครับ ดังรูปที่. 6


รูปที่.6 Use the module styles กาหนดใช้ สไตร์จากตัวโมดูลหรือไม่ (ให้เลือก Yes นะครับ) Menu theme เป็น Theme ที่มีมาให้ในโมดูลนะครับเราจะใช้ตัว default หรือ simple ก็ได้นะครับ( มีบาง กรณีที่ใช้ default แล้วไม่ดี ก็สลับมาที่ simple แทนนะครับ) Image for + และ Image for - เป็นการเลือกใช้รูป + และ - สาหรับย่อและขยาย Sub Menu นะครับ (ใช้ รูปปกติไปก่อนครับ เราสามารถสร้างรูปแล้วค่อยเปลี่ยนที่หลังได้ครับ) Image position กาหนดตาแหน่งของรูป +และ- ว่าจะให้อยู่ด้านไหน (ปกติจะต้องเป็นขวาอยู่แล้วนะครับ เพราะซ้ายจะเป็นชื่อของเมนูครับ) 5. Menu styles เป็นการกาหนดรูปแบบของเมนูนะครับ ซึ่งจะมีย่อยดังนี้นะครับ 5.1 Margins เป็นการกาหนดระยะการชิดด้านของเมนูนะครับ ดังรูปที่.7

รูปที่.7


Use margins ใช้ Margins หรือไม่ External margins กาหนดระยะขอบด้านนอก Internal margins กาหนดระยะขอบด้านใน 5.2 Background เป็นการกาหนดใช้ สีของพื้นหลังเมนูนะครับ ดังรูปที่.8

รูปที่.8 Use background color กาหนดใช้สีพื้นหลังหรือไม่นะครับ Background color กาหนดค่าสีของพื้นหลังนะครับ Use gradient color กาหนดเปิดใช้การไล่สี 2 สีหรือไม่ Gradient color กาหนดค่าสีของสีที่2 นะครับ 5.3 Rounded corners เป็นการกาหนดมุมโค้งของเมนูนะครับ ดังรูปที่.9


รูปที่.9 Use rounded corners กาหนดให้แสดงมุมโค้งหรือไม่ Top left corner กาหนดระยะโค้งของมุมบนซ้าย Top right corner กาหนดระยะโค้งของมุมบนขวา Bottom right corner กาหนดระยะโค้งของมุมล่างขวา bottom left corner กาหนดระยะโค้งของมุมล่างซ้าย 5.4 Shadow กาหนดให้แสดงเงาของเมนูหนะครับ ดังรูปที่.10

รูปที่.10


Use shadow กาหนดใช้การแสดงเงาหรือไม่ Shadow color กาหนดสีของเงานะครับ Shadow width กาหนดความกว้างของเงานะครับ Blur น่าจะเป็นการกาหนดความกว้างของความทึบของเงานะครับ Horizontal offset และ Vertical offset กาหนดระยะของการแสดงเงา Inset อันนีไ้ ม่แน่ใจนะครับ 5.5 Borders กาหนดเส้นขอบของเมนูนะครับ ดังรูปที่.11

รูปที่.11 Use borders กาหนดเปิดใช้เส้นของเมนูหรือไม่ Border color กาหนดสีของเส้นขอบ Border width กาหนดความกว้างของเส้นขอบ 6. First level link styles, Second level link styles และ Other levels link styles เป็นการกาหนดรูปแบบของเมนู แยกตามลาดับการแสดงก่อนหลังนะครับ เช่น First level ก็คือ เมนูลาดับ แรกที่เราเห็นนะครับ ส่วน Second levelก็คือเมนูย่อย ที่ต่อจาก เมนู First level นะครับ ส่วน Other levels ก็คือ Sub ย่อย ต่อจาก Second level ลงไปนะครับ ดังรูปที่.12


รูปที่.12 ที่นี้มาดูรายละเอียดกันนะครับ ซึ่งจะเหมือนกันหมด ดังนั้นผมจะอธิบายในส่วนที่เพิ่มเติมนะครับก็คือ 6.1 Font style เป็นการกาหนดเกี่ยวกับตัวอักษรที่จะใช้นะครับ ดังรูปที่.13

รูปที่.13 Use font กาหนดใช้ Font หรือไม่ Font size ขนาดของตัวอักษร Font color กาหนดสีของตัวอักษร Color on mouseover กาหนดสีในขณะที่ Mouse ชี้ อยู่นะครับ


Description font size กาหนดขนาดตัวอักษรที่เป็น รายละเอียด Description color กาหนดสีของรายละเอียด ส่วนอื่นๆก็จะเหมือนกับที่ผมอธิบายไปแล้วใน Menu styles เมื่อกาหนดเสร็จแล้วก็ save แล้วไปดูที่หน้าเว็บ กันนะครับ ก็จะได้ดังรูปที่.14

รูปที่.14 ทีนี้ผมลองปรับเปลี่ยนดูนะครับ ก็จะได้ดังรูปที่.15


รูปที่.15 ทีนี้ ในกรณีถ้าเรามี First level เป็น Link ไปหน้าหนึ่งของเว็บ และ มี Second level อยู่ใน First level ด้วย ในกรณีนี้ถ้าเรากาหนดในส่วนของEvent to open ที่แท็บ Mootools effects เป็น Click เอาไว้ จะทาให้ Link ในส่วน First level จะใช้ไม่ได้ไปโดยปริยายนะครับ ถ้าต้องการแก้ ก็ต้องเปลี่ยน จาก Click เป็น Mouseover แทน


ป้องกัน SPAM ด้วย RECAPTCHA สวัสดีครับ ช่วงนี้เห็นเว็บอื่นๆที่ใช้ Joomla โดนพวก Spam เข้าเว็บกันเยอะจริงๆ เลยคิดว่าน่าจะทา บทความเกี่ยวกับการป้องกัน spam บ้างดีกว่า ก็เลยเป็นที่มาของบทความนี้นะครับ เพื่อให้เพื่อนๆได้นาไปใช้ ในการป้องกัน spam ต่างๆที่จะเข้ามาไม่ว่าจะในส่วนของ การสมัครสมาชิกในเว็บเรา หรือ ในส่วนของการส่ง อีเมล์ในหน้า Contact us ของเราบ้าง เอาเป็นว่าไปดูกันเลยดีกว่าครับ สาหรับ joomla 1.5 นั้นไม่มีฟงั ค์ชั่นในการเพิ่ม การป้องกันการ Spam เว็บไซต์ ในตัวทาให้เราต้อง พึ่ง Extension เสริมเอา แต่ใน Joomla 2.5 นี้ มีการเพิ่มฟังค์ชั้นในการป้องกัน Spam เอาไว้ในตัวเลย ซึ่งก็ คือ การใช้ ReCaptcha ในการป้องกัน Spam นะครับ โดยเราสามารถเปิดการใช้งานของ ReCaptcha ได้โดย การทาดังนี้ 1.ให้เราไปทาการเปิดการใช้งาน Plugin ที่ชื่อ Captcha - ReCaptcha ก่อนนะครับ โดยไปที่ เมนู Extensions เลือกที่ Plug-in Manager จากนั้นหา Plugin ที่ชื่อ Captcha - ReCaptcha เมื่อเจอ แล้วก็คลิ๊กที่ชื่อได้เลยครับ ดังรูปที่.1

รูปที่.1


เมื่อเข้ามาที่หน้า Plug-in Manager: Captcha - ReCaptcha แล้วนั้น ดังรูปที่.2

รูปที่.2 เริ่มต้นให้เราทาการเปิดการใช้งานก่อนนะครับโดยเลือกที่หัวข้อ Status เป็น Enbled นะครับ จากนั้น การที่ เราจะใช้งาน ReCaptcha ได้นั้นจาเป็นที่เราต้องมี Public Key และ Private Key ของโดเมนที่เราจะใช้ ก่อนนะครับ โดยไปที่ http://www.google.com/recaptcha.

เมื่อมาที่หน้าเว็บไซต์ แล้วนั้น หากยังไม่เคยใช้ก็ให้เราเลือกที่เมนู GET reCAPTCHA จากนั้นก็เลือก SignUp Now ดังรูปที่.3


รูปที่.3 จากนั้นเราก็จะมาที่หน้า Login ของ reCAPTCHA โดยอาศัย Account ของ Google นะครับ ( reCAPTCHA เป็นของ google แล้วนะครับ จึงทาให้เราสามารถใช้ Account ของ google ร่วมกันได้) ถ้าเราเคยทาไว้ก็ นามา Login ได้เลยนะครับ ดังรูปที่.4

รูปที่.4


จากนั้นเราก็จะมาที่หน้า Create a reCAPTCHA key นะครับดังรูปที่.5

รูปที่.5 ในหน้านี้ให้เราใส่ชื่อเว็บไซต์ของเราลงไปนะครับ หากเราอยากจะนา Key ที่ได้นี้ไปใช้ในหลายๆ Sub domain ในเว็บเรา เช่น demo.joomlaup.com ก็ให้เราติ๊กเครื่องหมายถูก ที่หน้าข้อ Enable this key on all domains (global key) ด้วยนะครับ หรือถ้าต้องการนาไปใช้หลายๆเว็บไซต์ ก็คลิ๊กที่ลิงค์ sign up for multiple keys นะครับ ทีนี้เมื่อเสร็จแล้วก็คลิ๊กที่ Create Key ได้เลยนะครับ เราก็จะมาที่หน้ารายละเอียด นะครับ ดังรูปที่.6


รูปที่.6 เพื่อนๆจะเห็นว่าตอนนี้เราได้ Public Key และ Private Key มาแล้วนะครับ ก็ให้เพื่อนๆนาไปใส่ใน Plugin Manager: Captcha - ReCaptchaได้เลยนะครับ ดังรูปที่.2 ข้อที่.3 นะครับ


รูปที่.2 ข้อที่.4 คือเราสามารถเรื่อง them สีของ ReCaptcha ได้ด้วยนะครับ เมื่อเรากาหนดเสร็จแล้วก็ให้เราทาการ Save & close ได้เลยนะครับ ที่นี้เราจะนา reCAPTCHA ไปใช้นะครับ โดยมีอยู่ 2 ส่วนด้วยกันนะครับ 1.ส่วนของการสมัครสมาชิก โดยให้เราไปที่เมนู Users เลือกที่ User Manager จากนั้นเลือกที่ เมนู Options ดังรูปที่.7

รูปที่.7 จากนั้นใน Options ที่แท็บเมนู Component นั้น ในหัวข้อ Captcha ก็ให้เราเลือกที่ Captcha ReCaptcha แล้วก็ Save & Close ดังรูปที่.8


รูปที่.8 จากนั้นให้ลองไปที่หน้าเว็บไซต์นะครับ ดูในหน้า Register นะครับ เราก็จะได้ดังรูปที่.9

รูปที่.9


2.ส่วนของ Contact us นะครับ ก็ให้เราไปที่เมนู Site เลือกที่ Global Configurationในหัวข้อ Default Captcha ให้เลือกที่ Captcha - ReCaptcha แล้วก็ Save & Close ดังรูปที่.10

รูปที่.10 ทีนี้เราลองสร้างหน้า Contact Us ขึ้นมาดู ฟอร์ม นะครับ เราก็จะได้ ดังรูปที่.11


รูปที่.11 เอาละครับ เท่านี้เราก็มีตัวป้องกัน Spam ในเว็บไซต์เราแล้วนะครับ อย่างน้อยก็ อุ่นใจขึ้นมาบ้าง ถึงจะไม่ สามารถป้องกันได้ 100% ก็ตาม แต่ก็ยังดีว่าไม่มีใช่ไหมครับ


สไลด์รูปเนื้อหาด้วย SOT ARTICLE THUMBNAIL SLIDE สวัสดีครับ หลังจากที่ผมได้แนะนาโมดูลที่ชื่อ PlimunNivoSlider ไปแล้วนั้น ซึ่ง เป็ นโมดูลแสดง รูปภาพจากโฟรเดอร์ที่เราเก็บรูปเอาไว้แล้วนั้น มีเพื่อนๆเราได้ เมล์มาถามผมว่า แล้วถ้าเราจะแสดงรูปภาพที่มี อยู่ใน Content เลยได้ไหม เพราะไม่อยากทาบทความ แล้วมาทารูปซ้าอีก ในโมดูล แล้วค่อยกาหนดลิงค์มา แสดงในบทความ อีกที ดูมันยุ่งยากเกิ นไป ซึ่ง ผมก็คิดว่าเป็นแนวคิดที่ดี ก็เลยเป็นที่มาของวันนี้ที่ผมจะมา แนะนาโมดูลที่รูปสไลท์จากบทความที่มีชื่อ ว่า Sot Article Thumbnail slide นะครับ ว่าแล้วก็ไปดูกัน ครับ เริ่มต้นเพื่อนๆก็ต้องดาวน์โหลด Module มาก่อนนะครับ จากนั้นก็ทาการติดตั้งได้เลยนะครับ เมื่ อ ติดตั้ง เสร็จแล้ว ก็ให้มาที่เมนู Extensions เลือกที่ Module Manager นะครับหา Module ที่ชื่อว่าSot Article Thumbnail slide เมื่อเจอแล้วก็คลิ๊กที่ชื่อได้เลยนะครับ ดังรูปที่.1

รูปที่.1 เมื่อเราเข้ามาที่หน้า Module Manager: Module mod_sot_article_thumbnail_slide แล้วนั้นก็ให้ กาหนดรายละเอียดในด้าน Details ก่อนนะครับ ดังรูปที่.2


รูปที่.2 ในส่วน Detials 1.Title กาหนดชื่อของโมดูลนะครับ 2.Show Title กาหนดแสดงชื่อของโมดูลนะครับ แต่โดยปกติในตาแหน่งนี้เราจะไม่แสดงชื่อกันนะครับ เพราะ จะแสดงรูปเป็นหลักครับ 3.Position กาหนด ตาแหน่งที่จะแสดงโมดูลครับ อาจจะเลือกจากรายการที่มีของเทมเพลท หรือถ้าเป็นการ สร้าง position เอง ก็ให้พิมพ์ลงในช่องได้เลยนะครับ 4.Status กาหนดเปิดใช้งานโดยกาหนดให้เป็น Published นะครับ 5.Module Assignment กาหนดแสดงโมดูลในหน้าไหนบ้างนะครับ (อยู่ที่ด้านล่างนะครับ) ก่อนอื่นต้องบอกนะครับว่า การที่เราจะใช้รูปจากบทความ มาแสดงในสไลท์โชว์นั้น รูปที่ใช้ จะต้องมีขนาดที่ พอดีหรือใหญ่กว่า ของพื้นที่ ที่เราแสดงเนื้อหาของบทความนะครับ ดังรูปที่. 3


รูปที่.3 ในพื้นที่ที่เป็นสีส้มอ่อนนั้น คือพื้นที่ ที่ผมจะแสดงเนื้อหาของบทความนะครับ (ในที่นี้ก็ประมาณ 720px) ดังนั้น รูปที่ผมจะนามาใช้จะต้องมีขนาดที่ไม่ต่ากว่า 720px นะครับ ส่วนความสูงก็ตามต้องการเลยครับ ทีนี้ผมทา ตัวอย่างบทความที่มีรูปขนาดพอดีกับตาแหน่งเอาไว้ เราก็จะได้ดังรูปที่.3


รูปที่.3 ที่ทาแบบนี้ก็เพราะว่า ถ้าเรากาหนดขนาดที่พอดีหรือใหญ่กว่าให้กับรูปแล้ว รูปที่แสดงในบทความก็จะดูชัดไม่ แตกนะครับ แล้วก็จะส่งผลกับ การที่เรานารูปนี้ไปแสดงในโมดูลด้วย เพราะถ้าเป็นรูปเล็กกว่า ก็จะทาให้รูป ที่สไลท์แตกได้นะครับ (พูดง่ายๆ คือ ถ้ารูปมีขนาดเล็กกว่าตาแหน่งที่แสดงรูปสไลท์ ก็จะทาให้รูปดูไม่ชัด ดังนั้น จึงต้องเป็นขนาดรูปที่มีขนาดเท่ากับขนาดที่แสดงในบทความ หรือมีขนาดใหญ่กว่าในบทความก็ได้ เพราะใน บทความเราสามารถย่อรูปให้เล็กได้นั้นเอง) ทีนี้เรามาดูที่ละส่วนของรายละเอียดด้านขวากันนะครับ 1. Data Option ส่วนแรก ดังรูปที่. 4


รูปที่.4 Select source data เป็นการเลือกว่าเราจะนาเนื้อหาจาก catagories หรือจากตัวบทความเลย Category เป็นการเลือก Category ที่จะใช้นะครับ Count จานวนบทความที่จะใช้ จะส่งผลถึงการแสดงรูปด้วยนะครับว่ากี่รูปสไลท์ Featured Articles แสดงบทความที่เป็น Featured หรือไม่ Order รูปแบบการจัดเรียง ก่อนหลังของบทความนะครับ Authors เป็นการกเลือกรูปแบบของผู้เขียน (ใช้ค่าเดิมที่เป็น Anyone หมายถึงทุกคนที่เขียนก็ได้ครับ) Select Item ids ในกรณีที่เราเลือกในหัวข้อ Select source data เป็น From item's id เราก็ต้องมา กาหนดเลขไอดีของบทความที่นี้นะครับ 2. Title and Link Options เป็นการกาหนดในส่วน Title และ link นะครับ ดังรูปที่.5


รูปที่.5 Max Length of Title เป็นการกาหนดการตัดข้อความนะครับ ถ้าเรากาหนดน้อยไปก็อาจจะทาให้ Title ที่ เป็นภาษาไทยกลายเป็นสีเหลี่ยมได้นะครับ Open Link กาหนดรูปแบบของลิงค์นะครับ ว่าจะให้เปิดในหน้าเดิมหรือเปิดหน้าใหม่ Link for title กาหนดให้ title เป็นลิงค์หรือไม่ Show readmore link กาหนดให้แสดงปุ่ม readmore หรือไม่ 3. Image Options เป็นการกาหนดในส่วนของรูปภาพนะครับ ดังรูปที่.6

รูปที่.6 Large Thumbnail Width กาหนดขนาดความกว้างของรูปใหญ่ (ตามที่ผมบอกไปในตอนแรกนะครับ) Large Thumbnail Height กาหนดความสูงของรูปนะครับ (กาหนดให้เท่ากับขนาดของรูปที่เราใช้ใน บทความนะครับ) Small Thumbnail Width กาหนดขนาดความกว้างของรูปเล็ก (รูปเล็กจะถูกนาไปใช้ในการแสดงในส่วน ของ Navigation นะครับ) Small Thumbnail Height กาหนดขนาดความสูงของรูปเล็ก Resized Image type เป็นการเลือกว่าจะให้ทาการย่อรูป หรือ Crop ตาแหน่งของรูปตามขนาดที่กาหนดใน รูปใหญ่เท่านั้น 4. Effect Options เป็นการกาหนดเกี่ยวกับ Effect ที่ใช้นะครับ ดังรูปที่.7


รูปที่.7 Auto play เล่นการสไลท์ภาพอัตโนมัตหรือไม่ Timer ระยะเวลาที่แสดงแต่ละรูป Stop when hover ให้หยุดเล่นภาพสไลท์ต่อเมื่อมี mouse มาวางที่รูปหรือไม่ 5.Themes and layouts Options เป็นการกาหนด Navigation และ ความยาวข้อรายละเอียด ดังรูปที่.8

รูปที่.8 Show Navigation กาหนดให้แสดง Navigation หรือไม่ Max Length of Description กาหนดความยาวของรายละเอียดหรือเนื้อหาของบทความที่แสดงในรูปสไลท์ นะครับ ถ้าเรากาหนดน้อยไปก็อาจจะทาให้ ข้อความ ที่เป็นภาษาไทยกลายเป็นสีเหลี่ยมได้นะครับ หลังจากที่เรากได้กาหนดรายละเอียดเรียบร้อยแล้วนั้นก็ให้ทาการ Save แล้วไปดูที่หน้าเว็บไซต์ เราก็จะได้ดัง รูปที่.9


รูปที่.9 แล้วทีนี้เราลองไปชีที่ Navigation เราก็จะได้ดังรูปที่.10

รูปที่.10 จะเห็นว่ามีรูปขนาดเล็กแสดงให้เห็นด้วยนะครับ ซึ่งขนาดจะเล็กหรือใหญ่ก็ตามที่เรากาหนดในส่วน Small Thumbnail นั้นเองครับ แล้วหลังจากที่เราคลิ๊กที่ชื่อ Title แล้วนั้น เราก็จะไปที่บทความนั้นๆได้เลยครับ

Unit 2  
Read more
Read more
Similar to
Popular now
Just for you