สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 07/02/2014 2:26 pm

สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x

สำหรับท่านที่ต้องการมีเว็บไซต์ของตัวเอง และต้องการแสดงข้อมูลทั้งภาษาไทยและภาษาอังกฤษ (หรือภาษาอื่นๆ ก็ได้)
Joomla จะเป็นคำตอบให้ท่านได้ ด้วยระบบบริการจัดการที่ดีและการตั้งค่า 2 ภาษาอย่างง่าย

Joomla คืออะไร คลิกที่นี่

ในกระทู้นี้จะสอนการทำเว็บไซต์ 2 ภาษา บนระบบ Joomla ด้วย 2 วิธี
1. การตั้งค่าให้เป็น 2 ภาษาตั้งแต่ตอนติดตั้ง Joomla
2. การตั้งค่าให้เป็น 2 ภาษาหลังจากติดตั้งไปแล้ว (สำหรับคนที่พลาดไม่ได้ทำตอนติดตั้ง Joomla)



มาเริ่มด้วยการตั้งค่าให้เป็น 2 ภาษาตั้งแต่ตอนติดตั้ง Joomla

ก่อนอื่นต้องมีตัวติดตั้งของ Joomla ก่อน ดาวน์โหลดเวอร์ชั่นล่าสุดได้ที่ http://www.joomla.org/download.html
joomla-multilang01.png
joomla-multilang01.png (76.1 KiB) เปิดดู 3246 ครั้ง

หลังจากนั้นแตกไฟล์ zip ที่ได้ไปไว้ใน folder ที่ต้องการ (ในตัวอย่างนี้จะติดตั้งบนเครื่องตัวเอง)
แล้วรันบน Browser จะเข้าหน้าการติดตั้งของ Joomla กรอกข้อมูลต่างๆ ให้ครบ เสร็จแล้วคลิก ต่อไป
joomla-multilang02.png
joomla-multilang02.png (69.5 KiB) เปิดดู 3202 ครั้ง

หน้าจอต่อมาจะเป็นการตั้งค่าฐานข้อมูลใส่ข้อมูลที่จำเป็นให้ครบ แล้วคลิก ต่อไป
joomla-multilang03.png
joomla-multilang03.png (64.29 KiB) เปิดดู 3202 ครั้ง

หน้าจอต่อมาสำคัญนะครับ ระบบจะให้เลือกติดตั้งข้อมูลตัวอย่าง ซึ่งถ้าเราต้องการใช้ 2 ภาษา ต้องเลือก ไม่ติดตั้ง แล้วคลิกปุ่มน้ำเงินติดตั้งครับ
joomla-multilang04.png
joomla-multilang04.png (74.67 KiB) เปิดดู 3202 ครั้ง

รอระบบติดตั้งครับ
joomla-multilang05.png
joomla-multilang05.png (29.48 KiB) เปิดดู 3202 ครั้ง

หลังจากหน้าติดตั้งแล้ว อย่าเพิ่งกดอะไรครับ สำหรับคนที่ติดตั้ง Joomla บ่อยจะรู้ว่าหลังจากติดตั้งแล้วจะต้องกดลบโฟลเดอร์ installation ก็จะเผลอกดไปอย่างรวดเร็วทำให้พลาดไม่สามารถติดตั้งระบบหลายภาษาได้ เพราะฉะนั้นให้เลื่อนหน้าจอมาด้านล่างเพื่อกด ติดตั้งภาษา
joomla-multilang06.png
joomla-multilang06.png (118.82 KiB) เปิดดู 3202 ครั้ง
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 07/02/2014 2:31 pm

:arrow:

หลังจากคลิก ติดตั้งภาษา เข้ามาจะพบข้อมูลภาษาต่างๆ ที่สามารถติดตั้งในระบบ Joomla ได้ ซึ่งปกติ Joomla จะติดตั้งภาษา English อยู่แล้ว ในตัวอย่างจะเลือกติดตั้งเพิ่มแค่ภาษาไทย ก็คลิกทำเครื่องหมายถูกหน้าภาษาไทย แล้วคลิกปุ่มต่อไป
joomla-multilang07.png
joomla-multilang07.png (56.55 KiB) เปิดดู 3201 ครั้ง

ในหน้าจอต่อมาให้เลือกเปิดใช้งานคุณสมบัติแสดงได้หลายภาษา ตั้งค่าเป็น ใช่ ให้หมดตามตัวอย่าง นอกจากนี้ในขั้นตอนนี้สามารถกำหนดภาษาหลักในหน้าเว็บ และ หน้าผู้ดูแลได้
joomla-multilang08.png
joomla-multilang08.png (87.22 KiB) เปิดดู 3201 ครั้ง

ถึงขั้นตอนสุดท้ายให้คลิก ลบโฟลเดอร์ installation ได้ครับ
joomla-multilang09.png
joomla-multilang09.png (71.24 KiB) เปิดดู 3201 ครั้ง

ตัวอย่างหน้าเว็บไซต์ จะเห็นว่าสามารถคลิกเปลี่ยนภาษาได้
แนบไฟล์
joomla-multilang10.png
joomla-multilang10.png (47.25 KiB) เปิดดู 3201 ครั้ง
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 07/02/2014 5:29 pm

:arrow:

ต่อมาการตั้งค่าให้เป็น 2 ภาษาหลังจากติดตั้งไปแล้ว
(สำหรับคนที่พลาดไม่ได้ทำตอนติดตั้ง Joomla)


เข้าไปที่หน้าของผู้ดูแลระบบ ก่อนอื่นต้องติดตั้งภาษาเพิ่มเข้าไปให้มี 2 ภาษาก่อน ไปที่เมนู Extensions เลือก Language Manager
joomla-multilang20.png
joomla-multilang20.png (53.4 KiB) เปิดดู 3243 ครั้ง

คลิก install language
joomla-multilang21.png
joomla-multilang21.png (32.19 KiB) เปิดดู 3243 ครั้ง

ค้นหาภาษาที่ต้องการติดตั้ง ทำเครื่องหมายถูกข้างหน้า แล้วคลิก install
joomla-multilang22.png
joomla-multilang22.png (38.87 KiB) เปิดดู 3243 ครั้ง

กลับมาที่ Language Manager จะเห็นภาษาที่เราเพิ่มใหม่
joomla-multilang23.png
joomla-multilang23.png (27.63 KiB) เปิดดู 3243 ครั้ง

ให้คลิก Content ที่เมนูด้านซ้ายมือ เมื่อเข้าสู่หน้า Content Languages ให้คลิก New
joomla-multilang24.png
joomla-multilang24.png (42.17 KiB) เปิดดู 3243 ครั้ง

กรอกข้อมูลให้ครบถ้วน แล้วคลิก Save & Close
joomla-multilang25.png
joomla-multilang25.png (34.34 KiB) เปิดดู 3243 ครั้ง

เพื่อความเป็นระเบียบของเนื้อหาให้สร้าง Categories สำหรับแต่ละภาษาไว้ ไปที่ Content เลือก Category Manager เลือก Add New Category
joomla-multilang26.png
joomla-multilang26.png (48.56 KiB) เปิดดู 3243 ครั้ง

ใส่ title ของหมวดหมู่ภาษานั้น และเลือก Language ให้ตรงกัน
ภาษาอังกฤษ
joomla-multilang27.png
joomla-multilang27.png (91.55 KiB) เปิดดู 3199 ครั้ง

ภาษาไทย
joomla-multilang28.png
joomla-multilang28.png (92.91 KiB) เปิดดู 3198 ครั้ง

Category ที่ได้
joomla-multilang29.png
joomla-multilang29.png (52.68 KiB) เปิดดู 3242 ครั้ง
แก้ไขล่าสุดโดย tsukasaz เมื่อ 08/02/2014 10:45 am, แก้ไขไปแล้ว 1 ครั้ง.
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 07/02/2014 5:38 pm

:arrow:

หลังจากได้ Category แล้ว ให้สร้างเนื้อหาในแต่ละ Category ไปที่เมนู Content เลือก Article Manager คลิกที่ Add New Article
joomla-multilang30.png
joomla-multilang30.png (62.88 KiB) เปิดดู 3241 ครั้ง

ใส่ title และ content ของแต่ะละเนื้อหา ที่สำคัญคือต้องระบุ Category กับ Language ให้ถูกต้อง
joomla-multilang31.png
joomla-multilang31.png (109.29 KiB) เปิดดู 3197 ครั้ง
joomla-multilang32.png
joomla-multilang32.png (106.29 KiB) เปิดดู 3197 ครั้ง

เนื้อหาของแต่ละภาษาที่สร้างไว้
joomla-multilang33.png
joomla-multilang33.png (128.76 KiB) เปิดดู 3197 ครั้ง

ต่อมาจะสร้างเมนูเพื่อคลิกดูเนื้อหาบนหน้าเว็บ วิธีสร้างเมนูให้ไปที่แถบเมนูด้านบน Menus เลือก Menu Manager แล้วคลิก Add New Menu
joomla-multilang34.png
joomla-multilang34.png (47.1 KiB) เปิดดู 3241 ครั้ง

สร้างเมนูสำหรับภาษาอังกฤษ
joomla-multilang35.png
joomla-multilang35.png (24.81 KiB) เปิดดู 3241 ครั้ง

สร้างเมนูสำหรับภาษาไทย
joomla-multilang36.png
joomla-multilang36.png (24.68 KiB) เปิดดู 3241 ครั้ง

สรุปเมนูที่ได้
joomla-multilang37.png
joomla-multilang37.png (30.13 KiB) เปิดดู 3241 ครั้ง

หลังจากได้เมนูแต่ละภาษา เราต้องสร้าง items ในเมนูด้วย เริ่มที่เมนูของภาษาอังกฤษ เข้าไปที่ Menus เลือก Main Menu EN แล้วคลิก Add New Menu Item
joomla-multilang38.png
joomla-multilang38.png (43.11 KiB) เปิดดู 3241 ครั้ง

Items ของ Main Menu EN ตัวแรกที่ควรสร้างคือหน้าหลักของภาษาอังกฤษ
ส่วนสำคัญที่ต้องกำหนด คือ
Menu Item Type เลือกเป็น Article แล้วเลือก Featured Article
Menu Location เลือก Main Menu EN
Default Page เลือก Yes
Language เลือก English (UK)
joomla-multilang39.png
joomla-multilang39.png (125.11 KiB) เปิดดู 3197 ครั้ง
แก้ไขล่าสุดโดย tsukasaz เมื่อ 08/02/2014 12:18 pm, แก้ไขไปแล้ว 1 ครั้ง.
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 08/02/2014 12:17 pm

:arrow:

หลังจากบันทึกข้อมูล Item หน้าหลัก ของ Main Menu EN ถ้าทำถูกต้องจะมีรูปธงชาติของภาษาอังกฤษแสดง
joomla-multilang40.png
joomla-multilang40.png (45.75 KiB) เปิดดู 3197 ครั้ง

ต่อมาสร้าง Item สำหรับแสดงเนื้อหาภาษาอังกฤษที่เราสร้างไว้
joomla-multilang41.png
joomla-multilang41.png (37.32 KiB) เปิดดู 3241 ครั้ง

สำหรับการทำ Item Menu จากเนื้อหา ให้เลือก Menu Item Type เป็น Article แล้วเลือก Single Article ที่สำคัญอย่าลืมเลือก Language
joomla-multilang42.png
joomla-multilang42.png (122.7 KiB) เปิดดู 3197 ครั้ง

สร้าง Items Menu ให้ครบตามเนื้อหาที่สร้าง
joomla-multilang43.png
joomla-multilang43.png (32.7 KiB) เปิดดู 3197 ครั้ง

เสร็จของภาษาอังกฤษแล้ว ต่อมาทำของภาษาไทย ไปที่ Menus เลือก Main Menu EN แล้วคลิก Add New Menu Item
joomla-multilang44.png
joomla-multilang44.png (50.58 KiB) เปิดดู 3241 ครั้ง

Items ของ Main Menu TH ตัวแรกที่ควรสร้างคือหน้าหลักของภาษาอังกฤษ
ส่วนสำคัญที่ต้องกำหนด คือ
Menu Item Type เลือกเป็น Article แล้วเลือก Featured Article
Menu Location เลือก Main Menu TH
Default Page เลือก Yes
Language เลือก Thailand (TH)
joomla-multilang45.png
joomla-multilang45.png (136.09 KiB) เปิดดู 3197 ครั้ง

หลังจากบันทึกข้อมูล Item หน้าหลัก ของ Main Menu TH ถ้าทำถูกต้องจะมีรูปธงชาติของภาษาไทยแสดง
joomla-multilang46.png
joomla-multilang46.png (36.92 KiB) เปิดดู 3197 ครั้ง

ต่อมาสร้าง Item สำหรับแสดงเนื้อหาภาษาไทยที่เราสร้างไว้
joomla-multilang47.png
joomla-multilang47.png (38.27 KiB) เปิดดู 3239 ครั้ง

สำหรับการทำ Item Menu จากเนื้อหา ให้เลือก Menu Item Type เป็น Article แล้วเลือก Single Article ที่สำคัญอย่าลืมเลือก Language
joomla-multilang48.png
joomla-multilang48.png (122.47 KiB) เปิดดู 3195 ครั้ง

สร้าง Items Menu ให้ครบตามเนื้อหาที่สร้าง
joomla-multilang49.png
joomla-multilang49.png (31.25 KiB) เปิดดู 3195 ครั้ง
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 5423
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย tsukasaz » 08/02/2014 2:15 pm

:arrow:

สำหรับขั้นตอนต่อไป ต้องทำ Module สำหรับแสดง Menu ทั้งภาษาอังกฤษและภาษาไทย ไปที่เมนู Extensions เลือก Module Manager
joomla-multilang50.png
joomla-multilang50.png (54.03 KiB) เปิดดู 3239 ครั้ง

คลิกปุ่ม New เพื่อสร้าง Module
joomla-multilang51.png
joomla-multilang51.png (47.2 KiB) เปิดดู 3239 ครั้ง
joomla-multilang52.png
joomla-multilang52.png (32.19 KiB) เปิดดู 3239 ครั้ง

ใส่ข้อมูล title และข้อมูลที่สำคัญ
Select Menu เลือก Main Menu EN
Language เลือก English (UK)
joomla-multilang53.png
joomla-multilang53.png (111.93 KiB) เปิดดู 3195 ครั้ง

ใส่ข้อมูล title และข้อมูลที่สำคัญ
Select Menu เลือก Main Menu TH
Language เลือก Thailand (TH)
joomla-multilang54.png
joomla-multilang54.png (104.56 KiB) เปิดดู 3195 ครั้ง

Module Menu หลังจากสร้างเสร็จ
joomla-multilang55.png
joomla-multilang55.png (44.77 KiB) เปิดดู 3195 ครั้ง

หลังจากนั้นให้สร้าง Module อีกตัว สำหรับกดสลับภาษา ให้คลิก New แล้วเลือก Language Switcher
joomla-multilang56.png
joomla-multilang56.png (30.54 KiB) เปิดดู 3239 ครั้ง

หลังจากสร้าง Module Language Switcher เสร็จแล้วต้องเปิดใช้งาน Plugin ไปที่เมนู Extensions เลือก Plugin Manager
joomla-multilang57.png
joomla-multilang57.png (54.32 KiB) เปิดดู 3239 ครั้ง

ค้นหา Plugin ที่เกี่ยวข้องกับ language 2 ตัว ซึ่งปกติจะปิดใช้งานอยู่ต้องทำเครื่องหมายถูกแล้วคลิกปุ่ม Enable
joomla-multilang58.png
joomla-multilang58.png (44.49 KiB) เปิดดู 3239 ครั้ง

เสร็จเรียบร้อยครับ ดูหน้าเว็บได้เลย
joomla-multilang59.png
joomla-multilang59.png (26.22 KiB) เปิดดู 3195 ครั้ง
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

surachanapa
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 26/03/2013 5:47 pm

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย surachanapa » 16/02/2015 5:38 pm

ตอนนี้ ตรงให้เปลี่ยนภาษาได้แต่ภาษาอังกฤษ ต้องไปตรวจสอบตรงส่วนไหนค่ะ เพราะอยากให้แสดงภาษาไทยด้วย ค่ะ

apple_ple
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 26/02/2015 4:20 pm

Re: สอนสร้างเว็บไซต์ 2 ภาษา ด้วย Joomla 3.x อย่างละเอียด

โพสต์โดย apple_ple » 27/02/2015 10:35 am

คือลองทำตามขั้นตอนข้างบนแร้วค่ะ .... แต่ภาษาที่โชว์หน้าเว็บโชว์เฉพาะภาษาอังกฤษ แต่สำหรับภาษาไทยมันไม่ขึ้นอ่ะค่ะ เราต้องตั้งค่ายังไงค่ะ ...ขอบคุณค่ะ


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน