บทนำ

"จูมล่า มีความซับซ้อน", "จูมล่า มีไว้สําหรับพวกที่เก่งเทคโนโลยี", "จูมล่า ใช้งานยาก" นี่เป็นเพียงส่วนหนึ่งของคำวิจารณ์ที่พบบ่อยที่สุด แทนที่จะเป็นคำพูดประมาณว่า “ผมได้อ่านเกี่ยวกับ CMSมาแล้วมันดีมาก” อะไรประมาณนี้ ในความเป็นจริง Joomla นั้นเหมือนกับ CMS อื่น ๆ อย่างพวกการทําอาหาร ดาราศาสตร์ฟิสิกส์ งานไม้ การดําน้ำลึก ฯลฯ มันซับซ้อนถ้าคุณไม่ใช้เวลาในการเรียนรู้และฝึกฝนมัน แต่ถ้าคุณใช้เวลาไม่กี่นาทีในการเรียนรู้Joomla คุณจะได้เรียนรู้สิ่งใหม่ ๆ สิ่งที่มีประโยชน์และอาจจะเปลี่ยนความคิดคุณไปเลยก็ได้และเพราะผมแน่ใจว่าผมพูดถูกผมพนันได้เลยว่าคุณจะได้เรียนรู้ที่จะเปลี่ยนการออกแบบโมดูลการเข้าสู่ระบบ Joomla ได้ ภายในเวลาไม่ถึง 10 นาที ใช่น้อยกว่า 10 นาที!

ผู้เรียน

บทความการสอนนี้เหมาะสําหรับผู้ใช้เริ่มต้น Joomla เพราะผู้มาใหม่ต้องการตัวอย่างที่ง่ายในการเรียนรู้เข้าใจและความคืบหน้า (และใช่ผู้ใช้ขั้นสูง : คําอธิบายจะเป็นพื้นฐานสําหรับคุณ แต่ผมคิดว่ามันคุ้มค่าที่จะอ่านต่อไป) บทความนี้มีวัตถุประสงค์เพื่อแสดงให้เห็นว่าทุกคนสามารถเรียนรู้และพัฒนาทักษะ Joomla ได้อย่างง่ายดาย คุณต้องการความเต็มใจและ 10 นาทีเท่านั้น!

การนำไปใช้

ในการสอนนี้ คุณจะได้เรียนรู้การเปลี่ยนการแสดงผลส่วนหน้าของโมดูลเข้าสู่ระบบ Joomla เริ่มต้น และไม่จําเป็นต้องใช้ความอดทน ไม่จําเป็นต้องมีปริญญาเอกด้านคอมพิวเตอร์และไม่ต้องกังวลคุณจะทำมันพังโดยค่าเริ่มต้นโมดูลการเข้าสู่ระบบ Joomla มีประสิทธิภาพทางเทคนิคและมาพร้อมกับการออกแบบพื้นฐาน ด้วยการสอนนี้โมดูลการเข้าสู่ระบบของคุณจะมีลักษณะดังนี้:

สิ่งที่ต้องมี

1. Joomla 5 ติดตั้งบนเซิร์ฟเวอร์ (ท้องถิ่นหรือห่างไกล)
2. เวลาว่าง 10 นาที

และเนื่องจาก Joomla 5 ขับเคลื่อนโดย Bootstrap 5 อาจเป็นประโยชน์ในการเปิดเอกสารประกอบของเฟรมเวิร์กนี้ในเบราว์เซอร์ของคุณ: https://getbootstrap.com/docs/5.2/getting-started/introduction/ ในการสอนนี้ผมได้ปิดใช้งานปลั๊กอิน System - Remember Me และ System - Passkey (Passwordless) Login เพื่อการแสดงผลเท่านั้น

พร้อมกันหรือยัง มาเปลี่ยนแปลงโมดูลการเข้าสู่ระบบกันเถอะ!

• 1. - เปิดแผงผู้ดูแลระบบ Joomla ของคุณ

  

  
  

  1.1 - ติดตาม: เทมเพลต>ระบบ>เทมเพลตไซต์

  

  
  

  1.2 - คลิกที่ชื่อเทมเพลตของคุณเพื่อเข้าถึงไฟล์

  

  
  

  1.3 - คลิกที่แท็บ "สร้างการแทนที่" เพื่อเปิด

  

  
  

  1.4 - คลิกที่ "mod_login" ในรายการโมดูลเพื่อสร้างการแทนที่

  

  
  
  2. แก้ไขโค้ดของการแทนที่

  2.1 - คลิกที่: HTML > mod_login > default.php

  

  
  

  2.2 - ในโปรแกรมแก้ไขข้อความทางด้านขวาของหน้าจอ ให้ค้นหาบรรทัดที่ 31 และเพิ่ม:

  class="fw-bold fs-4"​

  
  

  ไปที่<p>แท็ก

  คำอธิบาย:

  fw-bold: เราทำตัวหนาข้อความล่วงหน้าด้วยคลาส Bootstrap นี้ ข้อมูลเพิ่มเติมเกี่ยวกับน้ําหนักตัวอักษรที่นี่: https://getbootstrap.com/docs/5.2/utilities/text/#font-weight-and-italics 

  fs-4: เราใช้คลาส Bootstrap อีกอันเพื่อปรับขนาดข้อความล่วงหน้า ข้อมูลเพิ่มเติมเกี่ยวกับขนาดตัวอักษรที่นี่: https://getbootstrap.com/docs/5.2/utilities/text/#font-size 

  2.2 - ค้นหาบรรทัดที่ 35 และแทนที่:

  <div class="mod-login__userdata userdata">​

  
  
  

  ด้วย

  <div class="mod-login__userdata userdata pb-2">​

  
  
  

  คำอธิบาย:

  pb-2: เราเพิ่มช่องว่างภายในที่ด้านล่างของส่วนนี้

  2.3 - ค้นหาบรรทัด 108 และแทนที่:

  btn-primary​

  
  

  โดย

  btn-dark​

  
  

  คำอธิบาย:

  เราเปลี่ยนสีของปุ่มเข้าสู่ระบบเท่านั้น ข้อมูลเพิ่มเติมเกี่ยวกับปุ่มที่นี่: https://getbootstrap.com/docs/5.2/components/buttons/ 

  2.4 -หลังจากบรรทัดที่ 133 ให้เพิ่ม <br /> เพื่อแสดงเส้นแนวนอน

  2.5 -หลังจากบรรทัดที่ 138 ให้ใส่โค้ดต่อไปนี้:

  <div class="mod-login__submit form-group">
  <a class="btn btn-outline-dark w-100" href="/<?php echo Route::_($registerLink); ?>">
  <?php echo Text::_('MOD_LOGIN_REGISTER'); ?> </a>
  </div>​

  
  

  คำอธิบาย:

  เราได้ย้ายปุ่มสร้างบัญชีไปยังส่วนใหม่เพื่อให้ผู้เข้าชมมองเห็นได้ชัดเจนยิ่งขึ้น นอกจากนี้เรายังใช้ฟิลด์โพสต์ข้อความเป็นชื่อสําหรับส่วนใหม่นี้ด้วย

  เราได้ใช้การออกแบบเค้าร่างกับปุ่ม เพื่อให้มีความแตกต่าง

  2.6 -เลือกและลบบรรทัด 122 ถึง 127

  คำอธิบาย:

  บรรทัดที่ 122: เนื่องจากเราจะแสดงบัญชีการสร้างตามค่าเริ่มต้น เราจึงไม่จําเป็นต้องตรวจสอบสถานะของตัวแปรนี้

  บรรทัดที่ 124 และ 125: ด้านล่างนี่คือโค้ดสําหรับเปิดหน้าไปยังบัญชีการสร้าง ที่เราได้เพิ่มไว้ในขั้นตอนที่ 2.5 แล้ว

  ตอนนี้โค้ดของคุณจากบรรทัด 134 ถึง 142 ควรมีลักษณะดังนี้:

  <hr />	
  <div class="mod-login__posttext posttext pt-3">
      <p class="fw-bold fs-4"><?php echo $params->get('posttext'); ?></p>
  </div>    
  <div class="mod-login__submit form-group">
      <a class="btn btn-outline-dark w-100" href="/<?php echo Route::_($registerLink); ?>">
      <?php echo Text::_('MOD_LOGIN_REGISTER'); ?> </a>
   </div>	
  <?php endif; ?>​

  
  

  2.7 - คลิกที่ปุ่ม "บันทึกและปิด" หากมันถูกต้องแล้ว

  
  
  3. ลองใช้การออกแบบใหม่ของเรา

  3.1 - จากแผงการดูแลระบบของคุณ คลิกที่ "โมดูล"

  

  
  

  3.2 - ค้นหาและเปิดโมดูลการเข้าสู่ระบบของคุณ (สร้างโดยค่าเริ่มต้นด้วย Joomla)

  

  
  

  3.3 - ป้อนข้อความล่วงหน้า ”ยินดีต้อนรับกลับ” และข้อความตอนหลัง “ผมยังเป็นมือใหม่”  (หรืออะไรก็ได้ที่คุณต้องการ)

  

  
  

  3.4 - เลือกการแทนที่ของคุณในตัวเลือกเค้าโครงโมดูลในแท็บ "ขั้นสูง"

  

  
  

  3.5 - คลิกที่ปุ่ม "บันทึกและปิด" เมื่อคุณทําเสร็จแล้ว

  
      4.ดูที่ส่วนหน้าเว็บไซต์

• และใช่ การออกแบบโมดูลการเข้าสู่ระบบของนั้นดูดี สะอาดตาเป็นระเบียบ และเป็นไปตามที่คาดไว้!

  ขอแสดงความยินดีด้วยคุณทํามันได้เวลาไม่ถึง 10 นาทีตามที่บอกไว้!

• แนวทางในการสร้างการแทนที่ให้เหมือนมืออาชีพ

  -แทนที่จะแทนที่ไฟล์ "default.php" คุณสามารถสร้างสําเนาและเปลี่ยนชื่อสําเนานี้ได้ ด้วยวิธีนี้ คุณจะเก็บไฟล์ "default.php" ไว้เป็นแบบจําลอง และคุณสามารถสร้างการแทนที่โมดูลเดียวกันได้มากเท่าที่คุณต้องการ

  -หากจําเป็น ให้ใช้ "-" ในชื่อการแทนที่ของคุณ ด้วย "_" การแทนที่ของคุณจะไม่พร้อมใช้งานในเมนูแบบเลื่อนลงเค้าโครงโมดูล

  -ใช้คลาส Bootstrap (หรือคลาส CSS ของเฟรมเวิร์กของเทมเพลตของคุณ) ในการแทนที่ให้มากที่สุดเพื่อประหยัดเวลาและประสิทธิภาพ

  -หากการแทนที่ของคุณไม่ได้ใช้กับส่วนหน้า ให้ตรวจสอบว่าคุณได้เลือกไว้ในตัวเลือกเค้าโครงโมดูลในแท็บ "ขั้นสูง" หรือไม่

  -คุณไม่จําเป็นต้องเรียนรู้โค้ดเพื่อสร้างการแทนที่ แต่การรู้วิธีอ่านโค้ดอาจช่วยได้เล็กน้อย

  ในที่สุดคําแนะนําที่ดีที่สุดเกี่ยวกับการแทนที่นั้นง่ายมาก: ทดสอบทดสอบและทดสอบอีกครั้ง ได้ไม่มีพลาด

บทสรุป

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

หากว่าคุณสนใจเกี่ยวกับจูมล่าเพิ่มเติม สามารถดูได้{--mlinkarticle=9703--}ที่นี่ หรือสามารถแวะชมส่วนเสริมต่างๆ ของจูมล่าได้ที่ Mindphp.com

• ดาวน์โหลดจูมล่า