ตั้งค่าเทมเพลตต่างๆ สำหรับหน้าต่างๆ ใน ​​Joomla การตั้งค่าเทมเพลตที่แตกต่างกันสำหรับหน้าต่างๆ ใน ​​Joomla การแก้ไขสไตล์ของเทมเพลตใหม่

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

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

ขั้นตอนที่ 1: ข้อมูลทั่วไปเกี่ยวกับเทมเพลตใน Joomla

Joomla มีเทมเพลตหลักสามแบบที่ติดตั้งไว้ล่วงหน้าโดยค่าเริ่มต้น: Atomic, Beez5 และ Beez2

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

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

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

เมื่อคุณติดตั้ง Joomla เป็นครั้งแรก เทมเพลต Beez2 จะถูกติดตั้งตามค่าเริ่มต้น หากคุณคลิกที่ชื่อเทมเพลต คุณสามารถแก้ไขการตั้งค่าเทมเพลตได้

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

ขั้นตอนที่ 2 การแสดงเทมเพลตที่แตกต่างกันในหน้าต่างๆ

มาดูการตั้งค่าเทมเพลตอื่นๆ และดูวิธีกำหนดให้กับหมวดหมู่เฉพาะ

• เปิดตัวจัดการเทมเพลต
• ลองดูเทมเพลต Beez5
• คลิกปุ่มแก้ไข

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

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

แบบนี้ หน้าหลักดูด้วยเทมเพลตเริ่มต้น - Beez2:

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

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

ขั้นตอนที่ 3: อธิบายตำแหน่งต่างๆ ของโมดูลในเทมเพลตต่างๆ

ตำแหน่งของโมดูล Beez5 (บนสุด) และ Beez2 (ด้านล่าง) เกือบจะเหมือนกัน ดังนั้นจึงไม่ก่อให้เกิดปัญหามากนักเมื่อเปลี่ยนการออกแบบ อย่างไรก็ตามยังมีความแตกต่าง

ความแตกต่างที่ชัดเจนที่สุดอย่างหนึ่งระหว่างเทมเพลตทั้งสองคือตำแหน่งของโมดูลรอบๆ โลโก้ ใน Beez5 โมดูลตำแหน่ง -1 และตำแหน่ง -0 อยู่ใต้โลโก้:

ใน Beez 2 โมดูลตำแหน่ง -0 อยู่เหนือโลโก้และตำแหน่ง -1 อยู่ด้านล่าง:

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

แต่จะเป็นอย่างไรถ้าตำแหน่งของโมดูลแตกต่างกันอย่างสิ้นเชิง ในที่ต่างๆ ภายใต้ชื่อที่ต่างกัน

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

หน้านี้มีเฉพาะตำแหน่งโมดูลต่อไปนี้:

• อะตอม-topmenu
• อะตอม-topquote
• ค้นหาปรมาณู
• แถบด้านข้างอะตอม
• อะตอมซ้ายล่าง
• อะตอมด้านล่าง

หากคุณต้องการเทมเพลตนี้บนไซต์ของคุณ นอกเหนือจาก Beez2 คุณต้องทำงานมากขึ้น

ขั้นตอนที่ 4 การเพิ่มโมดูลเมนูสำหรับเทมเพลตใหม่

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

• ตอนนี้เราผูกโมดูลเข้ากับหน้าเฉพาะ
• เลือก "เฉพาะในหน้าที่เลือก"
• ทำเครื่องหมายที่ช่องถัดจากรายการเมนูที่คุณต้องการ

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

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

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

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

ขั้นตอนที่ 5: สไตล์เทมเพลต vs เทมเพลตต่างๆ

แทนที่จะใช้เทมเพลตที่แตกต่างกันโดยสิ้นเชิงสำหรับหน้าต่างๆ บนไซต์ของคุณ คุณสามารถสร้างได้ง่ายๆ ตัวเลือกต่างๆเทมเพลตเริ่มต้นของคุณ นี้ โอกาสใหม่ใน Joomla 2.5. ช่วยให้คุณสร้างการออกแบบที่แตกต่างกันในทุกหน้าโดยไม่ต้องทำตามขั้นตอนทั้งหมดที่เราระบุไว้ข้างต้น

• ไปที่ตัวจัดการเทมเพลต
• ทำเครื่องหมายที่ช่องถัดจากเทมเพลตที่คุณต้องการคัดลอก ในกรณีนี้ เราจะใช้ Beez2
• คลิกที่ไอคอน "ทำซ้ำ"

• ทำเครื่องหมายที่ช่องถัดจาก Beez2-Default (2)
• คลิกปุ่ม "แก้ไข"

• Beez2 มาพร้อมกับสองโทนสี ได้แก่ Personal และ Nature เลือก ธรรมชาติ จากรายการแบบเลื่อนลง
• เชื่อมโยงเทมเพลตกับหมวดหมู่ในส่วนลิงก์ไปยังเมนู
• โปรดทราบว่ามีตัวเลือกอื่นๆ คุณยังสามารถเปลี่ยนโลโก้ ชื่อไซต์ และตำแหน่งการนำทางได้อีกด้วย

• ตอนนี้คุณมีไซต์เดียวที่มีเทมเพลตเดียวกันสองสไตล์ซึ่งแนบกับรายการเมนูต่างๆ

• คุณยังสามารถผูกเทมเพลตเมื่อสร้างรายการเมนู
• เมื่อคุณอยู่ในตัวจัดการเมนู คุณสามารถตั้งค่าเทมเพลตที่คุณต้องการสำหรับรายการเมนูนี้ได้ (ดูด้านล่าง)

หากคุณมีคำถามใด ๆ โปรดใช้ของเรา

บทความนี้แสดงวิธีสร้างเทมเพลตมาตรฐาน Beez_20 เป็น "ยาง" ดังนั้นไม่ว่าหน้าจอจะมีความละเอียดเท่าใดก็ตาม ไซต์จะใช้ความกว้างทั้งหมดของหน้าจอ วิธีนี้ทดสอบบน Joomla 1.7 และ Joomla 2.5

ถ้าใช้ ตัวจัดการไฟล์ผู้ให้บริการโฮสต์หรือตัวจัดการ FTP จากนั้นคุณต้องค้นหาไฟล์สไตล์ " our_site\templates\beez_20\css\position.css“.ถ้าจะใช้ แผงควบคุม Joomla แล้วคุณต้องไปที่ ส่วนขยาย -> ตัวจัดการเทมเพลต

ทางด้านขวา สไตล์ชีตเทมเพลต Beez_20 ทั้งหมดจะแสดงอยู่ในรายการ ค้นหาสตริง แก้ไข css/position.cssและคลิกที่มัน หน้าต่างจะเปิดขึ้น ตัวจัดการเทมเพลต: แก้ไขไฟล์.

ที่นี่เราสามารถแก้ไขไฟล์นี้ได้
การหาความกว้างของ div หลัก มันเท่ากับ 1050px

#ทั้งหมด
{
ขอบ: 0 อัตโนมัติ;
ความกว้างสูงสุด: 1050px
ช่องว่างภายใน: 0px
จัดข้อความ: ซ้าย;
}

เปลี่ยนค่านี้เป็น 100%

#ทั้งหมด
{
ขอบ: 0 อัตโนมัติ;
ความกว้างสูงสุด: 100%
ช่องว่างภายใน: 0px
จัดข้อความ: ซ้าย;
}

จากนั้นในไฟล์เดียวกันเราจะพบความกว้างของส่วนท้าย เท่ากับ 1020px

#ส่วนท้าย-ด้านใน
{
ความกว้างสูงสุด: 1020px
ขอบ: 0 อัตโนมัติ;
ขนาดตัวอักษร: 0.8em
ช่องว่างภายใน: 10px 15px 15px 10px;
}

เปลี่ยนค่านี้เป็น 100%

#ส่วนท้าย-ด้านใน
{
ความกว้างสูงสุด: 100%
ขอบ: 0 อัตโนมัติ;
ขนาดตัวอักษร: 0.8em
ช่องว่างภายใน: 10px 15px 15px 10px;
}

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

สิ่งสุดท้ายที่ต้องทำคือแก้ไขส่วนหัว หลังจากที่ไซต์ขยายเต็มความกว้างของหน้าจอ รูปภาพส่วนหัวจะเลื่อนไปทางขวา และสี่เหลี่ยมผืนผ้าสีน้ำเงินปรากฏขึ้นทางด้านซ้าย สิ่งนี้เกิดขึ้นเนื่องจากความกว้างของภาพคือ 1060px รูปภาพส่วนหัวจะอยู่ในโฟลเดอร์ “ our_site\templates\beez_20\images\personal\personal2.jpg". คุณสามารถสร้างภาพขนาดใหญ่ของคุณเองและแทนที่ไฟล์ personal2.jpg ด้วยไฟล์ของคุณเอง (ปล่อยให้ชื่อไฟล์เป็น personal2.jpg) หากไม่มีรูปภาพที่เหมาะสม คุณสามารถปิดการแสดงรูปภาพในสไตล์ชีตและส่วนหัวทั้งหมดจะเป็นสีน้ำเงิน

หากต้องการปิดรูปภาพ เราจำเป็นต้องมีไฟล์ที่มีการตั้งค่าสไตล์ ซึ่งอยู่ที่ " our_site\templates\beez_20\css\personal.css" ในนั้นเราพบ:

ส่วนหัวของโลโก้
{
พื้นหลัง: #0c1a3e URL(../images/personal/personal2.png) ไม่มีซ้ำ ด้านล่างขวา ;
สี:#fff;
ความสูงขั้นต่ำ: 200px;
}

ลบ URL(../images/personal/personal2.png) ด้านล่างขวาโดยไม่ทำซ้ำ คุณควรได้รับสิ่งต่อไปนี้:

ส่วนหัวของโลโก้
{
พื้นหลัง: #0c1a3e;
สี:#fff;
ความสูงขั้นต่ำ: 200px;
ขอบ:0em 10px 0 10px !สำคัญ;
}

เราบันทึกไฟล์. นั่นคือทั้งหมด

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

นอกจากนี้ยังมีกลไกที่กำหนดตำแหน่งของข้อมูล วิธีการ และช่วงเวลาสำหรับการแสดงโมดูลข้อมูลต่างๆ ตัวเลือกภาษาเป็นต้น
ใน รุ่นก่อนหน้า Joomla ใช้เทมเพลต Beez พื้นฐาน ใน เวอร์ชันล่าสุดเทมเพลตที่สร้างขึ้นบนพื้นฐานของมัน (Beez5, Beez_20) มีการเปลี่ยนแปลงที่สำคัญเมื่อเปรียบเทียบกับมัน เมื่อสร้างเทมเพลต Beez นักพัฒนาได้ลงทุนในตัวเลือกที่เป็นไปได้เพื่อปรับให้เข้ากับความต้องการของเจ้าของไซต์ แหล่งที่มาสามารถเปลี่ยนเทมเพลตได้ง่าย การเปลี่ยนแปลงสไตล์ชีตแบบเรียงซ้อนทำให้ง่ายต่อการสร้างเทมเพลตการออกแบบใหม่ทั้งหมดโดยไม่ต้องใช้ความพยายามมากนัก แต่ในกระบวนการทำงานนักออกแบบพยายามไม่ใช้เทมเพลตนี้ แต่พัฒนาเองตั้งแต่เริ่มต้น
ด้วยเหตุนี้ จึงมีการพัฒนาเทมเพลตใหม่ทั้งหมด 2 แบบสำหรับ Joomla เวอร์ชัน 2.5 ทั้งสองเทมเพลตใช้ JavaScript เทมเพลต beez5 ใช้ HTML5 และเทมเพลต beez_20 ไม่ต้องการการแทนที่ เมื่อเค้าโครงไม่จำเป็นต้องใช้ตาราง เปลี่ยนชื่อคลาสของตารางเรียงซ้อนแล้ว

คุณสมบัติแม่แบบ

เทมเพลตใหม่พร้อมใช้งานอย่างกว้างขวาง สามารถเลือกตำแหน่งของบล็อกการนำทางบนเพจ เพิ่มป้ายกำกับฟังก์ชัน WAI-ARIA โมดูลในแท็บสามารถแสดงได้ใน โหมดอัตโนมัติมีการเพิ่มตำแหน่งที่ยุบได้สำหรับโมดูลและคอลัมน์ มีการสร้างแบบฟอร์มการออกแบบ 2 แบบในเทมเพลต beez_20: แบบธรรมชาติและแบบมนุษย์ เพิ่มการรองรับภาษา HTML5 ลงในเทมเพลต beez5
ไม่มีความลับที่จะมีคนที่มีความสามารถในการรับรู้โลกรอบตัวอ่อนแอลง บางคนไม่มีความสามารถในการรับรู้ทางสายตา บางคนถูกจำกัดการรับรู้เสียง อย่างไรก็ตาม คนเหล่านี้ยังใช้ ทรัพยากรสารสนเทศอินเตอร์เนต. และพอร์ทัลอินเทอร์เน็ตที่สร้างขึ้นทั้งหมดควรได้รับการออกแบบสำหรับผู้ใช้ประเภทนี้ เทมเพลต Joomla มีทั้งหมด เครื่องมือที่จำเป็นเพื่อให้คนพิการได้มีโอกาสใช้อินเทอร์เน็ต
เมื่อสร้างเทมเพลต คุณต้องปฏิบัติตามข้อกำหนดพื้นฐาน: วัสดุของไซต์ไม่ควรทับซ้อนกับการออกแบบของวัสดุเหล่านี้ โครงสร้างไซต์ไม่ควรมากเกินไป การนำทางผ่านหน้าไซต์ควรได้รับการสนับสนุนโดยคำสั่งแป้นพิมพ์ การออกแบบสีของเนื้อหา ควรจะตัดกัน
ประเด็นที่สำคัญที่สุดจากมุมมองของนักพัฒนาคือการแยกเนื้อหาออกจากการออกแบบ ในการทำเช่นนี้คุณต้องกำจัดการออกแบบตารางของวัสดุในหน้า การจัดรูปแบบใช้ CSS เท่านั้น วัสดุต้องสร้างเป็นเส้นตรงจากบนลงล่าง
การออกแบบเชิงความหมายช่วยให้คุณสามารถนำทางระหว่างหน้าต่างๆ ของไซต์ตามหัวเรื่อง รายการ ฯลฯ รวมทั้งเพิ่มแนวคิดทั่วไปของเนื้อหาเอกสาร
อย่างไรก็ตาม เค้าโครงเชิงเส้นของเนื้อหาของหน้ามีข้อเสีย กล่าวคือ อาจใช้เวลาในการเข้าถึงข้อมูลที่จำเป็น (หากข้อมูลอยู่ที่ด้านล่างสุดของหน้า) เพื่อแก้ไขปัญหานี้ คุณสามารถใช้บุ๊กมาร์ก HTML เพื่อเพิ่มความเร็วในการนำทางเพจ ในกรณีนี้ ควรสร้างเมนูเพิ่มเติมสำหรับเลื่อนไปมาในหน้า สำหรับผู้ที่คุ้นเคยกับโครงสร้างของเว็บไซต์แล้ว สามารถซ่อนเมนูนี้ได้
ตัวอย่างเช่น:

• ข้ามไปที่ข้อความหลัก
• ไปที่บล็อกการนำทางหลักและเข้าสู่ระบบ

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

เทมเพลตคือส่วนขยายประเภทหนึ่งใน Joomla ที่แสดงถึง รูปร่างไซต์ของคุณ รูปแบบที่ใช้มี 2 แบบ CMS จูมล่า: เทมเพลตส่วนหน้าและเทมเพลตส่วนหลัง ส่วนหน้า (ส่วนหน้า) - กำหนดลักษณะที่ปรากฏของไซต์ของคุณ นี่คือส่วนภาพทั้งหมดของทรัพยากรอินเทอร์เน็ตที่ผู้ใช้เห็น Back-end เป็นเทมเพลตประเภทหนึ่งที่ให้คุณเปลี่ยนรูปลักษณ์ (ส่วนต่อประสาน) ของ Joomla!

Joomla 2.5 มีเทมเพลตมาตรฐานหลายแบบที่มาพร้อมกับการติดตั้ง CMS (เทมเพลตส่วนหน้า 3 แบบและเทมเพลตส่วนหลัง 2 แบบ):

เทมเพลตของเว็บไซต์

• Beez 20 (เทมเพลตเริ่มต้น);
• บีซ 5;
• อะตอม

เทมเพลตแผงการดูแลระบบ

• Bluestorkk (เทมเพลตเริ่มต้น)
• ฮาธอร์

วัตถุประสงค์ของเทมเพลต

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

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

เทมเพลตถูกติดตั้งผ่านแผงผู้ดูแลระบบของ Joomlaในตัวจัดการส่วนขยาย หลังจากการติดตั้งเทมเพลตจะพร้อมใช้งานในตัวจัดการเทมเพลต

ทำไมต้องจูมล่า! ใช้เทมเพลต?

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

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

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

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

การแก้ไขเทมเพลต ทำอะไรได้บ้าง?

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

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

จานสี.ด้วย CSS คุณสามารถเปลี่ยนสีพื้นหลัง ลิงก์ ข้อความ และอื่นๆ ได้

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

รูปภาพและเอฟเฟกต์คุณสามารถควบคุมวิธีการแสดงรูปภาพบนเพจได้อย่างเต็มที่ และแม้แต่สร้างเอฟเฟกต์แฟลช เช่น เมนูแบบเลื่อนลง

18 มิถุนายน 2555

เทมเพลตที่แตกต่างกันสำหรับหน้าไซต์ต่างๆ - 3.8 จาก 5 ขึ้นอยู่กับ 5 โหวต

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

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

ขั้นตอนที่ 1: แยกวิเคราะห์เทมเพลต Joomla มาตรฐาน

Joomla มีเทมเพลตมาตรฐาน 3 แบบ: Atomic, Beez5 และ Beez2 เทมเพลตทั้งสามนี้มีไว้สำหรับไซต์ อีกสองคน - Bluestork และ Hathor - มีไว้สำหรับแผงผู้ดูแลระบบ Joomla คุณยังสามารถติดตั้งเทมเพลตอื่นหรือสร้างเทมเพลตของคุณเอง

เทมเพลตใดเทมเพลตหนึ่งจะถูกกำหนดตามค่าเริ่มต้นเสมอ เทมเพลตเริ่มต้นจะถูกทำเครื่องหมายด้วยดาวสีทอง ดังแสดงในรูป

คุณสามารถเปลี่ยนเทมเพลตเริ่มต้นได้ง่ายๆ โดยคลิกที่ดาวดวงใดดวงหนึ่งที่ไม่สำเร็จ หากทาสีดาวทับ แสดงว่ามีการกำหนดรูปแบบเริ่มต้นใหม่

หลังการติดตั้ง เทมเพลตจูมลาค่าเริ่มต้นคือ Beez2 เมื่อคลิกชื่อเทมเพลต คุณสามารถแก้ไขการตั้งค่าเทมเพลตบางอย่างได้

ในตัวอย่างนี้ คุณสามารถดูหน้าการตั้งค่าเทมเพลต เทมเพลตนี้ถูกกำหนดโดยค่าเริ่มต้นและไม่ได้เชื่อมโยงกับรายการเมนูใดๆ โดยเฉพาะ (ตัวเลือก: ลิงก์ไปยังเมนู)

ขั้นตอนที่ 2: กำหนดเทมเพลตต่างๆ ให้กับหน้า Joomla ต่างๆ

มาดูการแก้ไขเทมเพลตอื่นและดูวิธีกำหนดให้กับหมวดหมู่เฉพาะ

• ปิดหน้าแก้ไขเทมเพลต บีซ2.
• เปิดเทมเพลตเพื่อแก้ไข บีซ 5,โดยทำเครื่องหมายที่ช่องถัดจากเทมเพลตแล้วคลิกปุ่ม: "แก้ไข".

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

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

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

นี่คือลักษณะของหน้าแรกที่มีเทมเพลต Beez เริ่มต้น

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

ขั้นตอนที่ 3: การกำหนดตำแหน่งโมดูลต่างๆ ในเทมเพลตต่างๆ

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

ความแตกต่างอย่างหนึ่งระหว่างเทมเพลตคือตำแหน่งของโมดูลถัดจากโลโก้ ในเทมเพลต Beez5 ตำแหน่ง 1 และ 0 อยู่ใต้โลโก้

ใน Beez20 ตำแหน่ง -0 อยู่เหนือโลโก้ และตำแหน่ง -1 อยู่ด้านล่าง

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

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

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

หน้านี้แสดงรายการตำแหน่งของโมดูล:

1. อะตอม-topmenu
2. อะตอม-topquote
3. ค้นหาปรมาณู
4. แถบด้านข้างอะตอม
5. อะตอมซ้ายล่าง
6. อะตอมด้านล่าง

หากคุณต้องการให้เทมเพลต Atomic ทำงานนอกเหนือจาก Beez20 คุณต้องทำงานมากกว่านี้ ไม่รับประกันว่าตำแหน่งโมดูลที่ทำงานใน Beez20 จะทำงานใน Atomic

ขั้นตอนที่ 4: การเพิ่มโมดูลเมนูไปยังเทมเพลตใหม่

• ไปที่ส่วนขยาย - ตัวจัดการโมดูล แล้วคลิกที่ปุ่ม สร้าง.
• เลือกประเภทของโมดูลเมนู
• กำหนดตำแหน่งโมดูลใหม่ของคุณ แถบด้านข้างอะตอม.
• Joomla 2.5 นำเสนอคุณสมบัติใหม่: ช่องบันทึกสำหรับโมดูล สิ่งนี้จะทำให้คุณไม่สับสนเมื่อคุณมีโมดูลจำนวนมาก

ตอนนี้เราจะผูกโมดูลกับหน้าเฉพาะเท่านั้น

• ในตัวเลือก "ผูกกับรายการเมนู" ให้เลือกค่า "เฉพาะหน้าที่กำหนดเท่านั้น"
• ทำเครื่องหมายในช่องบนหน้าที่คุณต้องการแสดงโมดูล

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

ไปที่ตัวจัดการโมดูลและย้ายเมนูของคุณไปยังตำแหน่ง อะตอม-topmenu. คุณสามารถดูผลลัพธ์ในภาพถัดไป

ขั้นตอนที่ 5: สไตล์จากเทมเพลตเดียวกันแทนที่จะเป็นเทมเพลตอื่น

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

• ไปที่ตัวจัดการเทมเพลต
• เลือกเทมเพลตที่คุณต้องการทำซ้ำ (ทำเครื่องหมายที่ช่องถัดจากเทมเพลตนั้น)
• คลิกที่ปุ่ม "ทำซ้ำ".

• ทำเครื่องหมายที่ช่องถัดจากเทมเพลต Beez2-Default (2)
• คลิกที่ปุ่ม "เปลี่ยน".

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

ตอนนี้คุณมีสไตล์เทมเพลตที่แตกต่างกันสองแบบซึ่งเชื่อมโยงกับสองหน้าในไซต์ของคุณ

• คุณยังสามารถกำหนดเทมเพลตเมื่อสร้างรายการเมนู
• เมื่อคุณอยู่ในตัวจัดการเมนู คุณสามารถผูกสไตล์เทมเพลตได้เมื่อสร้างรายการเมนู

คะแนน 3.80

ยอดเข้าชม: 25562