ส่วนท้ายเป็นองค์ประกอบโครงสร้างที่สำคัญของเว็บไซต์ มักเรียกว่า "ส่วนท้าย" ตั้งอยู่ที่ด้านล่างของหน้าเว็บและเป็นองค์ประกอบตรงข้ามกับส่วนหัว (ส่วนหัวของไซต์) ซึ่งอยู่ที่ด้านบน

ชั้นใต้ดินทำหน้าที่เป็นบล็อกเพิ่มเติมสำหรับการวางข้อมูลบริษัทและการเชื่อมโยง ส่วนท้ายที่เติมอย่างเหมาะสมมีผลดีต่อและปรับปรุงการใช้งาน บางครั้งก็ใช้เป็นเครื่องมือเพิ่มเติม - ช่วยในการรวบรวมโอกาสในการขาย

สิ่งที่ต้องใส่ในส่วนท้าย

โดยทั่วไปแล้ว ส่วนท้ายจะมีข้อมูลที่จำเป็นในหน้าใดๆ และควร "อยู่ใกล้มือ" สำหรับผู้ใช้เสมอ บ่อยครั้งที่ข้อมูลจากส่วนหัวถูกทำซ้ำในห้องใต้ดิน รายการข้อมูลสำหรับส่วนท้ายจะถูกกำหนดขึ้นอยู่กับประเภทของไซต์ มันถูกสร้างขึ้นขึ้นอยู่กับ รูปร่างหน้า เนื้อหาของบล็อคอื่น ฯลฯ เนื้อหาประเภทต่อไปนี้มักวางไว้ในห้องใต้ดิน:

• การเชื่อมโยงบล็อก

การเชื่อมโยงดังกล่าวอาจเป็นการทำซ้ำเมนูหลักซึ่งมีส่วนสำคัญและเป็นที่นิยม หากส่วนต่างๆ มีโครงสร้างหลายระดับ ส่วนต่างๆ จะถูกแบ่งออกเป็นคอลัมน์พร้อมส่วนหัวที่อธิบาย

ที่มา sima-land.ru

แท็กคลาวด์ยังทำหน้าที่เป็นการเชื่อมโยงกันได้ สิ่งเหล่านี้อาจเป็นส่วนยอดนิยมของไซต์ข้อมูล ข่าวสำคัญ หรือบทความ

ที่มา Vesti.ru

• ลิขสิทธิ์

ส่วนท้ายของไซต์มักจะมีข้อมูลเกี่ยวกับผู้เขียน อธิบายกฎเกณฑ์ในการใช้และทำซ้ำเนื้อหา และข้อมูลเกี่ยวกับผู้พัฒนาทรัพยากร

ที่มา Vesti-ural.ru

• เกี่ยวกับพันธมิตร

บ่อยครั้งที่ข้อมูลเกี่ยวกับผู้ที่สนับสนุนโครงการ การทำงานร่วมกับบริษัท ฯลฯ ได้รับการเผยแพร่ในส่วนท้าย ข้อมูลดังกล่าวมีผลเชิงบวกต่อการเพิ่มระดับความไว้วางใจ นอกจากนี้นี้ ตัวเลือกที่ดีสำหรับผู้ที่มีหน้าที่ต้องวางลิงค์พันธมิตรบนหน้าอินเทอร์เน็ตทั้งหมดของเว็บไซต์ โดยปกติแล้วจะมีลิงก์ไปยังโครงการของตนเองด้วย รุ่นมือถือ, โดเมนย่อย

ที่มา ekb.rbc.ru

• รายชื่อผู้ติดต่อ

ในส่วนท้าย คุณสามารถระบุได้เฉพาะข้อมูลติดต่อพื้นฐานเท่านั้น: ที่อยู่ โทรศัพท์ อีเมล บางครั้งอาจเป็นเพียงโทรศัพท์ ข้อมูลรายละเอียดเพิ่มเติมมีอยู่ในหน้าการติดต่อ

ที่มา uniland.ru

• โซเชียลมีเดีย

ที่มา e1.ru

• แบบฟอร์มโอกาสในการขาย

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

แหล่งที่มา afisha.yandex.ru

• แผนที่

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

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

อะไรเป็นเรื่องปกติที่จะวางไว้ในส่วนท้าย?

องค์ประกอบส่วนท้ายมาตรฐานคือ:

1. ปุ่มเครือข่ายโซเชียลและวิดเจ็ตกลุ่มเครือข่ายโซเชียล
2. ลิงค์ไปยังส่วนหลักของเว็บไซต์
3. ลิงก์ไปยังแหล่งข้อมูลของบุคคลที่สาม
4. ลิขสิทธิ์
5. ข้อมูลการติดต่อ
6. ค้นหา

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

ส่วนท้ายดั้งเดิมคือสถานที่ที่คุณสามารถสร้างความประหลาดใจให้กับผู้เยี่ยมชมได้

ส่วนท้ายคือที่ที่คุณสามารถใช้แนวคิดการออกแบบที่น่าสนใจได้ แม้ว่านี่จะเป็นเว็บไซต์ที่จริงจังก็ตาม บริษัทอย่างเป็นทางการ- นี่เป็นตัวอย่างที่น่าสนใจสองสามตัวอย่าง:

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

การวิจัยการตลาดแสดงให้เห็นว่าไซต์และพอร์ทัลที่มีการจัดเรียงองค์ประกอบส่วนท้ายอย่างมีเหตุผล ออกแบบในสไตล์เดียวกันและไม่กระจัดกระจายไปทั่วพื้นที่ จะถูกจดจำได้เร็วกว่ามากและไม่ทำให้เกิดปัญหาในการทำงาน

ส่วนท้ายสามารถจัดสรรความสูงที่ค่อนข้างใหญ่ได้ แต่ไม่ควรเกินครึ่งหนึ่งของหน้าจอการทำงานของผู้ใช้ เพื่อที่เขาจะได้ไม่ลืมว่าทำไมเขาถึงมาที่ไซต์ของคุณ

เมนูเพิ่มเติมในส่วนท้าย

แนวทางปฏิบัติทั่วไปคือการทำซ้ำเมนูของไซต์ในส่วนท้ายหรือวางเมนูที่ปรับเปลี่ยนเล็กน้อย อย่างไรก็ตาม มักจะเผยแพร่ในรูปแบบขยายหากเมนูมีโครงสร้างหลายระดับ สิ่งนี้มีประโยชน์มากในการนำทางทางเลือก: ที่ด้านล่างเมนูหลักมักจะไม่สังเกตเห็น แต่ผู้ใช้ไม่จำเป็นต้องใช้ความพยายามเพิ่มเติมและสามารถไปที่ส่วนที่เขาต้องการได้ทันที สามารถติดตามได้อย่างง่ายดายโดยใช้แผนที่การคลิกปุ่มของผู้ใช้บนเว็บไซต์จาก Yandex Metrics หรือ Google Analytics

ตัวอย่างเช่น อาจมีลักษณะดังนี้:

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

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

สิ่งที่จะวางไว้ในส่วนท้ายของเว็บไซต์?

ขั้นแรก เรามาตัดสินใจว่าไซต์ประเภทใด สามารถวางไว้ในห้องใต้ดินอะไรได้บ้างเพื่อปรับปรุงปัจจัยด้านพฤติกรรม

ข้อมูลการติดต่อเหมาะที่สุดสำหรับร้านค้าบนเว็บ การวางที่อยู่ของบัตรเดินทาง หมายเลขโทรศัพท์ ที่อยู่ไปรษณีย์ของร้านค้าหรือองค์กร ฯลฯ ไว้ที่ชั้นใต้ดินทำให้บุคคลสามารถสั่งซื้อหรือซื้อได้เร็วขึ้น

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

บุ๊กมาร์กโซเชียลหากเนื้อหาในไซต์ของคุณเกี่ยวข้องกับการอภิปรายจำนวนมาก หรือคุณโพสต์บทวิจารณ์ของกิจกรรมที่เกี่ยวข้องกับการพัฒนาหัวข้อ คุณสามารถวางลิงก์ไปยังส่วนท้ายได้ โซเชียลมีเดียที่คุณโปรโมตทรัพยากร แท็กคลาวด์ รวมถึงบล็อกการนำทางเพิ่มเติม เหมาะสำหรับไซต์ทุกประเภท การวางแท็กคลาวด์ 3D ในส่วนท้ายจะไม่เพียงสะดวกสำหรับผู้ใช้เท่านั้น แต่ยังสวยงามจากมุมมองของการออกแบบอีกด้วย

ควรสังเกตว่าโอกาสในการคลิกลิงก์ส่วนท้ายหากลิงก์ไม่สวยงามและให้ข้อมูลนั้นใกล้เคียงกับศูนย์เนื่องจากส่วนท้ายดังกล่าวไม่เด่น

ตัวอย่างส่วนท้ายของเว็บไซต์ที่ออกแบบอย่างสวยงาม

เพื่อสร้างส่วนท้ายที่สวยงามและให้ข้อมูล เราขอนำเสนอผลงานที่มีชื่อเสียงที่สุดของสตูดิโอออกแบบเว็บไซต์:

1. โซลูชันการออกแบบของสตูดิโอเว็บฝรั่งเศส KDIGIT:

2. การออกแบบส่วนท้ายโดยสตูดิโอออกแบบเว็บไซต์ SNOWDEN Industries:

3. โซลูชันการออกแบบสำหรับส่วนท้ายของ บริษัท Uforia CMS ของสวีเดน:

4. การออกแบบส่วนท้ายที่หรูหราโดย Tapbots:

5. ส่วนท้ายของสตูดิโอออกแบบเว็บไซต์ การออกแบบสำเร็จรูป:

6. การออกแบบส่วนท้ายแบบกลไก:

7. การออกแบบส่วนท้ายที่สวยงาม:

ตามที่ฉันหวังว่าคุณจะเข้าใจแล้ว ส่วนท้ายทั้งหมดเหล่านี้ถูกนำมาใช้บนพื้นฐานของภาพพื้นหลังที่สวยงามและบล็อกข้อมูลที่วางไว้ หากคุณไม่ควรมีปัญหาใด ๆ ในการสร้างภาพพื้นหลัง โชคดีที่มีโปรแกรมแก้ไขรูปภาพต่าง ๆ เช่น Photoshop สำหรับสิ่งนี้ ดังนั้นด้วยการวางข้อมูลในบล็อกที่รวดเร็วและสะดวกก็เป็นไปได้

การเพิ่มบล็อกข้อมูลในส่วนท้าย

มากที่สุด ด้วยวิธีง่ายๆการเพิ่มบล็อกข้อมูลในส่วนท้ายจะเป็นการเพิ่มบล็อกวิดเจ็ตส่วนท้ายลงในแผงผู้ดูแลระบบ WordPress หากต้องการสร้างบล็อกวิดเจ็ต คุณต้องเปิดเมนูผู้ดูแลระบบ -> ตัวแก้ไข และในคอลัมน์ด้านขวา ให้เลือกไฟล์ Functions.php ซึ่งเราจะเพิ่มโค้ด:

ถ้า (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "

",));

ถ้า (function_exists("register_sidebar" ) ) register_sidebar(อาร์เรย์( "name" => "แถบด้านข้างส่วนท้าย" , "before_widget" => "" , "after_widget" => "" , "before_title" => " " , "after_title" => " " , ) ) ;

นี่คือรหัสสำหรับการลงทะเบียนบล็อกใหม่ของวิดเจ็ตในแผงผู้ดูแลระบบ โดยที่ 'name' คือชื่อของวิดเจ็ต 'before_widget' คือโค้ด HTML ที่แสดงก่อนวิดเจ็ต และ 'after_widget' คือโค้ด HTML ที่แสดงหลัง วิดเจ็ต รวมถึงโค้ดก่อนและหลังส่วนหัวของชื่อเรื่อง โดยปกติแล้วจะถูกเพิ่มไว้ที่จุดเริ่มต้นของไฟล์ function.php

บันทึกเนื้อหาของ function.php และไปที่ส่วน "วิดเจ็ต" หากทำทุกอย่างโดยไม่มีข้อผิดพลาดคุณจะพบบล็อกใหม่ที่นั่น:

ดังนั้นเราจึงได้แสดงวิดเจ็ตบล็อกใหม่ในเมนูผู้ดูแลระบบ ตอนนี้เราต้องแสดงวิดเจ็ตของบล็อกนี้บนไซต์ ในการดำเนินการนี้ให้เปิดเมนูผู้ดูแลระบบ -> ตัวแก้ไขและเลือกไฟล์ footer.php ทางด้านขวา อย่างไรก็ตามบล็อกวิดเจ็ตดังกล่าวสามารถแสดงได้ไม่เฉพาะในส่วนท้ายเท่านั้น แต่ยังรวมถึงที่อื่น ๆ บนเว็บไซต์ด้วย

ในไฟล์ footer.php ให้เพิ่มโค้ดต่อไปนี้

เรากำลังเริ่มบทเรียนที่ห้าเกี่ยวกับการแก้ไขเทมเพลตใน CMS Joomla 3 คราวนี้เราจะพูดถึงส่วนท้ายของไซต์ มาดูตัวเลือกการออกแบบส่วนท้ายที่เป็นไปได้และวิธีการสร้างมันกัน

ส่วนท้ายคืออะไร

ส่วนท้ายของไซต์เป็นส่วนที่ต่ำที่สุด ซึ่งมักจะมีข้อมูลเกี่ยวกับไซต์ ลิขสิทธิ์ ฯลฯ เวอร์ชันมาตรฐานในเทมเพลต โปรโตสตาร์ส่วนท้ายไม่มีข้อมูลที่มีความหมายใดๆ:

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

ดังนั้น อันดับแรก ฉันขอแนะนำให้ลบเนื้อหาส่วนท้ายมาตรฐานออก เปิดไฟล์ ดัชนี.phpเทมเพลต Protostar มาตรฐาน และค้นหาโค้ดที่รับผิดชอบในการแสดงส่วนท้าย รหัสระหว่างบรรทัด 205 ถึง 219 มีหน้าที่แสดงส่วนท้ายซึ่งมีลักษณะเช่นนี้ (ขึ้นอยู่กับเวอร์ชันของ Joomla และการเปลี่ยนแปลงที่ทำกับไฟล์ดัชนี บรรทัดของโค้ดอาจแตกต่างกัน):

ตอนนี้ให้ลบโค้ดพิเศษออกจากบรรทัด 210 ถึง 217 ดังนั้นโค้ดสำหรับส่วนท้ายจะเป็นดังนี้:

โดยพื้นฐานแล้ว เราได้ลบทุกอย่างที่เป็นไปได้ออก เหลือเพียงความสามารถในการแสดงโมดูลในส่วนท้ายเท่านั้น

เราบันทึกไฟล์ดัชนีไปที่ไซต์และรีเฟรชหน้า เนื้อหาส่วนท้ายหายไปซึ่งเป็นสิ่งที่เราต้องการ ตอนนี้คุณสามารถเพิ่มข้อมูลใหม่ลงในส่วนท้ายได้ตามดุลยพินิจของคุณ แต่ก่อนที่จะเพิ่มมันคุ้มค่าที่จะตอบคำถาม - อะไรจะอยู่ในส่วนท้ายของไซต์?

ข้อมูลใดที่จะแสดงในส่วนท้ายของไซต์

เพื่อให้ส่วนท้ายมีประสิทธิภาพ จะต้องมีข้อมูลที่อาจเป็นที่สนใจของผู้เยี่ยมชมเว็บไซต์ ข้อมูลนี้อาจแตกต่างกันไปขึ้นอยู่กับจุดเน้นของไซต์ นี่คือตัวอย่างเล็กๆ น้อยๆ ของข้อมูลเดียวกันที่อาจมีอยู่ในส่วนท้าย:

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

อย่าพยายามอัดทั้งหมดที่กล่าวมาไว้ในส่วนท้ายของไซต์ของคุณ การมีข้อมูลมากเกินไป เช่น การไม่มีข้อมูล ก็จะไม่นำไปสู่สิ่งที่ดีเช่นกัน

ในทางกลับกัน มันไม่สำคัญว่าข้อมูลใดจะอยู่ในส่วนท้ายของเว็บไซต์ของคุณ สิ่งสำคัญคือมันเข้ากับการออกแบบโดยรวมและได้รับการออกแบบอย่างสวยงาม

การสร้างส่วนท้ายสำหรับไซต์

ตอนนี้เราละทิ้งทฤษฎีและดำเนินการสร้างส่วนท้ายโดยตรง การสร้างส่วนท้ายทำได้หลายวิธี:

• อัตโนมัติ- เกี่ยวข้องกับการใช้โมดูลต่าง ๆ เพื่อแสดงข้อมูลบางอย่าง
• คู่มือ- ไม่ได้ใช้โมดูล การเปลี่ยนแปลงทั้งหมดจะดำเนินการด้วยตนเองโดยใช้เครื่องมือแก้ไขไฟล์เทมเพลต
• ผสม- ในกรณีนี้จะใช้ทั้งสองตัวเลือกข้างต้นร่วมกัน

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

เพื่อพิจารณาตัวเลือกที่เป็นไปได้ทั้งหมด ฉันจะเลือกตัวเลือกที่สาม ด้วยวิธีนี้ คุณจะมีแนวคิดทั่วไปว่ากำลังแก้ไขอะไรและทำอย่างไร

ตามตัวอย่าง ฉันตัดสินใจแบ่งส่วนท้ายออกเป็นสามส่วนแนวตั้ง ลิงก์ไปยังหน้าบางหน้าของเว็บไซต์จะแสดงทางด้านซ้าย โลโก้บางประเภทจะอยู่ตรงกลาง และข้อความขนาดเล็กจะแสดงทางด้านขวา โมดูลจะรับผิดชอบในการแสดงส่วนซ้ายและขวาของส่วนท้าย และเราจะเขียนโลโก้ด้วยตนเองในไฟล์ดัชนี

ขั้นแรก เรามาสร้างตำแหน่งใหม่สำหรับโมดูลในส่วนท้าย (เราได้พูดถึงวิธีการทำเช่นนี้ในบทเรียนเรื่องการตั้งค่าและแก้ไขเทมเพลต) จำนวนสองชิ้น เนื่องจากจะอยู่ทางด้านซ้ายและด้านขวาของส่วนท้าย จึงมีชื่อที่สอดคล้องกัน - ส่วนท้ายซ้ายและ ส่วนท้ายขวา- เราประกาศไว้ในไฟล์ templateDetails.xml.

ตอนนี้เราทำการเปลี่ยนแปลงไฟล์ดัชนีเทมเพลต รหัสของฉันกลายเป็นดังนี้:

และเพื่อความชัดเจน ภาพหน้าจอ:

มันชัดเจนว่าโมดูลแสดงอย่างไร แต่ฉันต้องการเน้นที่โลโก้โดยละเอียดมากขึ้น รหัสที่รับผิดชอบในการแสดงโลโก้คือ:

baseurl. "แม่แบบ/" $นี่->เทมเพลต "/images/joom4all.png"?>" />

เมื่อมองแวบแรกดูเหมือนว่าแท็ก HTML ธรรมดาสำหรับรูปภาพ แต่โค้ด PHP จะถูกเขียนแทนเส้นทางไฟล์ปกติ รหัสนี้อาจดูซับซ้อนและเข้าใจไม่ได้ตั้งแต่แรกเห็น แต่ในความเป็นจริงแล้ว หากคุณดูแล้วจะชัดเจนว่าไม่มีอะไรซับซ้อนในนั้น:

• - เริ่มต้นโค้ด php
• เสียงสะท้อน- รับผิดชอบในการส่งออกสตริง
• $นี่->baseurl- บรรทัดนี้ส่งคืนชื่อไซต์
• แม่แบบ/- ที่นี่เราระบุว่ารูปภาพถูกจัดเก็บไว้ในโฟลเดอร์เทมเพลต
• $นี่->เทมเพลต- ส่งคืนชื่อของเทมเพลตปัจจุบัน
• /images/joom4all.png- พาธไปยังรูปภาพภายในโฟลเดอร์รูทเทมเพลตและชื่อไฟล์ที่มีรูปภาพ
• ?> - จุดสิ้นสุดของโค้ด php

จากการใช้โค้ด php นี้ เราได้เส้นทางสัมพันธ์ไปยังไฟล์รูปภาพ กล่าวอีกนัยหนึ่ง ไม่ว่าไซต์จะมีชื่ออะไรหรือใช้เทมเพลตใด รูปภาพก็จะถูกนำมาจากโฟลเดอร์รูปภาพของเทมเพลตที่เลือก

เราบันทึกไฟล์ index.php ตอนนี้เราสามารถปิดมันได้แล้ว เราจะไม่ต้องการมันอีกต่อไป

ตอนนี้เรามาสร้างโมดูลต่างๆ ที่เราจะแสดงในตำแหน่งใหม่ที่สร้างขึ้นใหม่ โมดูลแรกจะแสดงเมนูในส่วนท้าย และโมดูลที่สองจะแสดงข้อความขนาดเล็ก

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

เพื่อแยกแยะเมนูส่วนท้ายของเราจากเมนูที่เหลือบนเว็บไซต์ ในการตั้งค่าโมดูลเมนู เราจะเพิ่มคำต่อท้ายคลาส “_footer” เข้าไป:

เพื่อไม่ให้อธิบายว่าโมดูลประเภทใดที่มีประเภท "รหัส HTML" ฉันจะแสดงหลักการทำงานของมันในภาพหน้าจอ:

ฉันกรอกโมดูลนี้ด้วยข้อความบางส่วนที่จะแสดงในส่วนท้าย นอกเหนือจากข้อความปกติแล้ว ฉันเขียนโค้ด PHP เล็กๆ ที่แสดงปีปัจจุบัน:

เราบันทึกโมดูลและไปที่ไซต์เพื่อตรวจสอบผลลัพธ์ และนี่คือสิ่งที่ฉันได้รับ:

แม้ว่าผลลัพธ์จะอยู่ที่นั่น แต่ก็ไม่ได้น่าประทับใจมากนัก ตอนนี้เราจำเป็นต้องจัดรูปแบบองค์ประกอบส่วนท้ายให้เพียงพอมากขึ้นโดยใช้ CSS

ขั้นแรก เรามาสร้างบล็อกส่วนท้ายใหม่:

Foot-left, .foot-center(float: left;) /*การจัดตำแหน่งบล็อกส่วนท้าย*/ .foot-left (ความกว้าง: 20%;) /*ความกว้างของบล็อกด้านซ้าย*/ .foot-center (ระยะขอบซ้าย: -6px ;) /*เยื้องบล็อกกลาง*/ .foot-right ( /*บล็อกขวา*/ float: none; ความสูง: 60px; )

ตัวเลือกถัดไปสำหรับการกำหนดสไตล์คือเมนู ซึ่งฉันใช้สไตล์ต่อไปนี้:

Ul.nav.menu_footer (ระยะขอบ: 0;) /*ระยะขอบเป็นศูนย์สำหรับเมนู*/ ul.nav.menu_footer li ( /*การออกแบบข้อความเมนู*/ ตระกูลแบบอักษร: "Lobster", cursive; ขนาดตัวอักษร: 16px ; บรรทัด -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*รายการเมนูแผนผังไซต์*/ ขอบซ้าย: 15px; สี: #fc8f30; ) ul.nav.menu_footer li.item-180 ( /*รายการเมนู เกี่ยวกับไซต์*/ สี: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*รายการเมนู ผู้ติดต่อ*/ ขอบซ้าย: 45px; ขอบ- ด้านล่าง: 3px ทึบ #0f70ad สี: #0f70ad;

และสุดท้าย เราก็แยกส่วนท้ายออกจากส่วนหลักของเนื้อหา:

Footer.footer hr (เส้นขอบด้านบน: 3px solid #fc8f30;) /*แยกส่วนท้ายออกจากเนื้อหาหลัก*/

บันทึกไฟล์สไตล์ไปที่ไซต์แล้วดูผลลัพธ์:

ดังนั้นเราจึงสร้างส่วนท้ายสำหรับเว็บไซต์ของเราที่ดูสนุกกว่าแบบมาตรฐานมาก นี่เป็นการสรุปบทเรียนนี้ และในบทเรียนถัดไป เราจะตรวจสอบข้อผิดพลาดที่เป็นไปได้ในการออกแบบแบบปรับเปลี่ยนได้ และแก้ไขข้อบกพร่องบางประการ นอกจากนี้ ฉันแนะนำให้คุณอ่านบทความเกี่ยวกับวิธีสร้างเทมเพลต Joomla 3 อย่างรวดเร็ว และโดยเฉพาะอย่างยิ่งส่วนท้ายตั้งแต่เริ่มต้นโดยใช้ Bootstrap

นี่เป็นฝันร้ายบางอย่าง! เหตุใดส่วนท้ายของไซต์ของคุณจึง "ปรากฏขึ้น" อีกครั้งและเปลี่ยนการออกแบบ เป็นไปไม่ได้จริงหรือที่จะกดอะไรลงไปที่ด้านล่างของหน้าอย่างถูกต้อง? เนื้อหาหรืออิฐอย่างน้อย! อิฐไม่พอดีกับมอนิเตอร์เหรอ?

ฉันเห็นแล้วนั่งไม่ทำอะไรเลยจนกว่าคุณจะอ่านบทความของเราจนจบ

สร้างส่วนท้ายที่เหมาะสมสำหรับเว็บไซต์ของคุณ

เจ้าของเว็บไซต์จำนวนมากประสบปัญหานี้เมื่อส่วนท้ายของหน้าลอยไปด้านบน แล้วยังไม่ชัดเจนว่าต้องทำอย่างไร บ่อยครั้งที่การออกแบบเว็บไซต์ที่รวมเข้าด้วยกันอย่างเร่งรีบด้วยตัวเองต้องทนทุกข์ทรมานจากข้อเสียเปรียบนี้ ( วงกลม “มือบ้า”) หรือผู้ดูแลเว็บมือใหม่

ในขณะเดียวกันก็ไม่มีอะไรเลวร้ายเกิดขึ้นในช่วงแรกของชีวิตของเว็บไซต์ และไอดีลนี้จะดำเนินต่อไปตราบใดที่เนื้อหากด "ด้วยน้ำหนัก" ที่ชั้นใต้ดิน เพื่อป้องกันไม่ให้มันลอยขึ้นมา แต่มันก็คุ้มค่าที่จะวางเนื้อหาปริมาณน้อยลงบนหน้า และส่วนท้ายที่ "สงบ" เมื่อเร็ว ๆ นี้ก็จะขึ้นไปด้านบนทันที ทำให้การออกแบบไซต์ทั้งหมดมีรูปลักษณ์ที่ไม่เหมาะสม

เพื่อกำจัด "ข้อบกพร่อง" ของเทมเพลตที่ออกแบบนี้ คุณไม่จำเป็นต้องเสียเงินกับบริการของผู้ดูแลเว็บ ส่วนใหญ่แล้ว คุณสามารถใส่ส่วนท้ายของไซต์ได้ด้วยตัวเอง พิจารณาตัวเลือกที่เป็นไปได้ทั้งหมดเพื่อขจัดปัญหานี้:

วิธีแรก

วิธีแรกในการยึดส่วนท้ายไว้ที่ด้านล่างของหน้าจะขึ้นอยู่กับ CSS มาเริ่มกันที่โค้ดตัวอย่าง จากนั้นมาดูรายละเอียดการใช้งานของมันกันดีกว่า:

html ( ความสูง: 100%; ) ส่วนหัว, การนำทาง, ส่วน, บทความ, ด้านข้าง, ส่วนท้าย ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; Margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( ความสูง: 150px; สีพื้นหลัง: rgb(0,255,255); ) #content ( การขยาย: 100px; ความสูง: 400px; สีพื้นหลัง: rgb(51,255,102) ; ) #footer ( ความกว้าง: 1,000px; ระยะขอบ: -100px อัตโนมัติ 0; ความสูง: 100px; ตำแหน่ง: ญาติ; สีพื้นหลัง: rgb(51,51,204); )

เพื่อแนบแท็กส่วนท้ายที่ด้านล่างของหน้า