วิธีดันส่วนท้ายไปที่ด้านล่างของหน้าต่างเบราว์เซอร์โดยใช้ CSS การใช้แท็กส่วนท้ายเพื่อสร้างส่วนท้ายในหน้า Html5 แท็กส่วนท้ายกำหนด

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

นอกจากนี้ในบทความแรกเกี่ยวกับการจัดวางไซต์ () มีการพิจารณาแนวคิดพื้นฐานบางประการของเว็บมาสเตอร์โดยไม่เข้าใจว่าเป็นการยากที่จะเข้าใจความแตกต่าง

คุณมีปัญหาอะไรเกี่ยวกับรูปแบบเว็บไซต์ของเรา?

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

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

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

เหล่านั้น. ลักษณะการทำงานที่ถูกต้องของส่วนท้ายสำหรับกรณีข้อมูลจำนวนน้อยบนเพจและหน้าจอผู้ใช้ขนาดใหญ่จะเป็นดังนี้:

ในการดำเนินการนี้ เราจำเป็นต้องดำเนินการปรับแต่งโค้ดของเลย์เอาต์ของเราจำนวนหนึ่ง นอกจากนี้ เราจะทำการเปลี่ยนแปลงไม่เพียงแต่กับไฟล์สไตล์ CSS Style.css เท่านั้น แต่ยังรวมถึง Index.html ซึ่งมีโค้ด Html และบล็อก Div ของฟอร์มด้วย แต่สิ่งแรกก่อน

ตัวอย่างเช่น เราจะใช้เค้าโครงไซต์แบบสามคอลัมน์ที่เราสร้างขึ้นก่อนหน้านี้ ในกรณีนี้ Index.html จะมีลักษณะดังนี้:

ส่วนหัว ส่วนหัว เนื้อหาของหน้า เนื้อหาของหน้า เนื้อหาของหน้า เนื้อหาของหน้า ส่วนท้าย

และคุณสมบัติ CSS ต่อไปนี้เขียนในไฟล์ Style.css:

เนื้อหา html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( สีพื้นหลัง:#FFC0FF; ชัดเจน: ทั้งสอง; )

เลย์เอาต์นั้นมีลักษณะดังนี้:

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

วิธีดันส่วนท้ายไปที่ด้านล่างของเค้าโครงไซต์

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

เนื้อหาทั้งหมดของหน้าไซต์จะอยู่ในแท็กเปิดและปิดของ Body ดังนั้นเราจำเป็นต้องเพิ่มคุณสมบัติ CSS อีกหนึ่งรายการสำหรับแท็ก Body ใน Style.css ซึ่งกำหนดความสูงเป็น 100%:

เนื้อหา, html ( margin:0px; padding:0px; ความสูง: 100%; )

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

คุณสมบัติ CSS พื้นฐาน หากคุณต้องการ คุณสามารถดูที่ . ตอนนี้มาตั้งค่าคอนเทนเนอร์ Div ที่ปิดโครงร่างทั้งหมดของเราให้มีความสูงขั้นต่ำ 100%:

ฉันต้องการเน้นด้วย (div with id="maket") ในการทำเช่นนี้เราจะตั้งค่าเฟรมโดยใช้คุณสมบัติ Border () ที่สอดคล้องกัน:

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

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

ส่วนหัว ส่วนหัว คอลัมน์ด้านซ้าย เมนู เมนู เมนู เมนู คอลัมน์ด้านขวา เมนู เมนู เมนู เมนู เนื้อหาหน้า เนื้อหาหน้า เนื้อหาหน้า เนื้อหาส่วนท้าย

โปรดทราบว่าบล็อกส่วนท้ายไม่ได้อยู่ในคอนเทนเนอร์ทั่วไป (maket) อีกต่อไป ดังนั้นความกว้างจึงไม่ถูกควบคุมโดยคุณสมบัติ CSS ที่ตั้งค่าไว้สำหรับ maket ในไฟล์ Style.css อีกต่อไป ส่วนท้ายจะถูกยืดออกไปตามความกว้างของหน้าจอ แต่จะยังคงอยู่ที่ด้านล่างของหน้าจอ ใต้บล็อกหลักทันที:

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

ปรากฎว่าเป็นเพราะคอนเทนเนอร์หลัก (maket) ใช้ความสูงของขนาดหน้าจอทั้งหมด (กำหนดโดยคุณสมบัติ min-height: 100%) และส่วนท้ายจะอยู่ด้านหลังทันที และคุณจะต้องใช้ เลื่อนไปดูซึ่งไม่ค่อยสะดวกและใช้งานได้จริง .

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

แต่เพื่อตั้งค่าการเยื้องจากด้านบนคุณต้องทราบความสูงของส่วนท้ายเดียวกันนี้ แต่เรายังไม่ทราบ

ดังนั้น อันดับแรก เราตั้งค่าความสูงของคอนเทนเนอร์ที่มีส่วนท้ายด้วยการตั้งค่าคุณสมบัติที่เกี่ยวข้องใน Style.css:

#footer( สีพื้นหลัง:#FFC0FF; ชัดเจน: ทั้งสอง; ความสูง: 50px; )

จากนั้นเราตั้งค่าช่องว่างภายในเชิงลบจากด้านบนเป็นความสูงเท่ากับความสูง:

สิ่งนี้จะช่วยให้ส่วนท้ายสูงขึ้นจนพอดีกับหน้าจอเบราว์เซอร์ (ตอนนี้เราสามารถลบเส้นขอบ: คุณสมบัติ CSS สีดำทึบ 3px ออกจากกฎ maket เพื่อให้ความหนาของเส้นขอบไม่ขัดขวางเค้าโครงทั้งหมดของเรา , พร้อมด้วยส่วนท้าย, จากความสูงพอดีกับหน้าจอ) :

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

เราใส่ตัวเว้นวรรคและต่อสู้กับ Internet Explorer

แต่ปัญหาจะเกิดขึ้นก็ต่อเมื่อมีข้อมูลเพิ่มเติมในหน้าเลย์เอาต์เท่านั้น และสถานการณ์นี้อาจกลายเป็น:

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

เหล่านั้น. ปรากฎว่าที่ด้านล่างของหน้าจอมีบล็อกสองบล็อกซ้อนทับกันในพื้นที่ชั้นใต้ดิน

วิธีแก้ไขปัญหานี้คือการเพิ่มคอนเทนเนอร์ Div เปล่าใหม่ (เรียกว่าตัวเว้นวรรค) ลงในคอนเทนเนอร์หลักของเลย์เอาต์ของเรา (เลย์เอาต์) ในตำแหน่งที่บล็อกส่วนท้ายเคยอยู่

การตั้งค่าความสูงของคอนเทนเนอร์ใหม่นี้เป็นความสูงของส่วนท้าย เราสามารถหลีกเลี่ยงไม่ให้ข้อมูลจากคอนเทนเนอร์หลักชนกับบล็อกส่วนท้าย ให้รหัสคอนเทนเนอร์นี้ () เรียกว่า Rasporka และผลลัพธ์ที่ได้คือ Index.html ของเค้าโครงสามคอลัมน์ของเราจะมีลักษณะดังนี้:

ส่วนหัว ส่วนหัว คอลัมน์ซ้าย เมนูเมนู เมนู เมนูคอลัมน์ขวา เมนูเมนู เมนู หน้าเนื้อหา หน้าเนื้อหา หน้าเนื้อหา หน้าหน้า หน้า หน้า หน้าท้ายหน้า

และใน Style.css เราเขียนสิ่งนี้ ( ซึ่งกำหนดความสูงของคอนเทนเนอร์สเปเซอร์เท่ากับความสูงของชั้นใต้ดิน:

#rasporka ( ความสูง: 50px; )

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

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

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

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

ดังนั้น เราจะต้องเพิ่มคุณสมบัติเพิ่มเติมสำหรับรหัสส่วนท้าย:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

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

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

ทั้งหมดนี้เป็นเพราะ ( ไม่เข้าใจคุณสมบัติ min-height: 100% ที่เราใช้เพื่อตั้งค่าความสูงขั้นต่ำของกล่องหลักให้เท่ากับความสูงของหน้าจอ

ดังนั้นเพื่อแก้ปัญหานี้เราจะต้องใช้แฮ็คที่เรียกว่าซึ่งช่วยให้เราสามารถอธิบาย (บนนิ้ว) กับเบราว์เซอร์เก่าว่าต้องทำอย่างไร ก่อนรายการคุณสมบัติ CSS สำหรับ maket คุณจะต้องแทรกชุดค่าผสมต่อไปนี้:

* html #make ( ความสูง: 100%; )

กฎนี้จะใช้กับเบราว์เซอร์ Internet Explorer 6 เท่านั้น ส่วนที่เหลือจะไม่นำมาพิจารณาและปฏิบัติตาม

ดังนั้น รูปลักษณ์สุดท้ายของ Style.css โดยกดส่วนท้ายที่ด้านล่างของหน้าจอจะเป็นดังนี้:

เนื้อหา html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # ส่วนหัว( สีพื้นหลัง:#C0C000; ) #left( สีพื้นหลัง:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; ขอบซ้าย: อัตโนมัติ; ขอบขวา: อัตโนมัติ; ) #rasporka ( ความสูง: 50px; )

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

คุณยังสามารถดูวิดีโอ "การทำงานกับแท็ก div Html":

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในเว็บไซต์บล็อกหน้า

คุณอาจจะสนใจ

เลย์เอาต์แบบบล็อก - เราสร้างเลย์เอาต์แบบสองคอลัมน์ สามคอลัมน์ และแบบไหลสำหรับไซต์
เค้าโครง DiV - สร้างบล็อกสำหรับเค้าโครงสองคอลัมน์ใน HTML กำหนดขนาดและกำหนดตำแหน่งใน CSS

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

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

ก่อนอื่นมาสร้างส่วนหัวของไซต์โดยใช้แท็ก (ตัวอย่าง 6.2)

ตัวอย่าง 6.2 การใช้งาน

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

ตัวอย่าง 6.3 ส่วนหัวของไซต์

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

ส่วนหัว ( แสดง: บล็อก; พื้นหลัง: #00B0D8 url(images/header-gradient.png) repeat-x; )

ตัวอย่างนี้จะใช้ได้กับทุกเบราว์เซอร์ ยกเว้น IE7 และ IE8 Internet Explorer ไม่ใส่สไตล์ให้กับองค์ประกอบที่ไม่เข้าใจ ความเข้าใจผิดนี้สามารถแก้ไขได้โดยการสร้างองค์ประกอบจำลองโดยใช้ JavaScript ในการดำเนินการนี้ ให้รวมรหัสดังกล่าวไว้ด้วย

document.createElement("ส่วนหัว");

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

ตัวอย่าง 6.4 สคริปต์สำหรับ IE

var e = ("บทความ,นอกเหนือ,figcaption,รูป,ส่วนท้าย,ส่วนหัว,hgroup,nav,section,time").split(","); สำหรับ (var i = 0; i< e.length; i++) { document.createElement(e[i]); }

สคริปต์นั้นถูกห่อด้วยความคิดเห็นแบบมีเงื่อนไขเพื่อให้ทำงานบน IE เวอร์ชัน 8.0 และต่ำกว่าเท่านั้น IE9 รองรับแท็ก HTML5 ใหม่แล้ว

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

ตัวอย่าง 6.5 สคริปต์สำหรับ IE

สคริปต์ที่ระบุทั้งหมดต้องอยู่ในโค้ดก่อน CSS

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

ติดตั้ง doctype ;

รวมสคริปต์จากตัวอย่าง 6.4 หรือ 6.5;

ตั้งค่าการแสดงผล : บล็อกในรูปแบบสำหรับแท็กใหม่

ตอนนี้เรามาดูรายละเอียดเพิ่มเติมของแท็ก HTML5 เพื่อทำความเข้าใจขอบเขตแท็ก

ตัวอย่าง 6.6 การใช้แท็ก

HTML5 IE Cr Op Sa Fx

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

กำหนดบล็อกซึ่งไม่เกี่ยวข้องกับเนื้อหาหลัก สำหรับวางหมวดหมู่ ลิงก์ไปยังไฟล์เก็บถาวร แท็ก และข้อมูลอื่นๆ (ตัวอย่าง 6.7) บล็อกดังกล่าว หากอยู่ด้านข้าง มักเรียกว่า "แถบด้านข้าง" หรือ "แถบด้านข้าง"

ตัวอย่าง 6.7 การใช้งาน

HTML5 IE Cr Op Sa Fx

กัน document.createElement("กัน"); document.createElement("บทความ"); กัน ( พื้นหลัง: #f0f0f0; /* สีพื้นหลัง */ ช่องว่างภายใน: 10px; /* ระยะขอบ */ ความกว้าง: 200px; /* ความกว้างของแถบด้านข้าง */ ลอย: ขวา; /* ตัดซ้าย */ ) บทความ ( ระยะขอบขวา: 240px ; /* ช่องว่างภายในขวา */ display: block; /* องค์ประกอบบล็อก */ )

ประหยัดไฟฟ้า

ภาษาที่ดี

แท่งของใครใหญ่กว่ากัน

เรื่องราวเกี่ยวกับวิธีประหยัดไฟฟ้า มาตรการที่ใช้สำหรับสิ่งนี้ และที่ไปจริง

ใช้เพื่อจัดกลุ่มองค์ประกอบใดๆ เช่น รูปภาพและคำบรรยาย (ตัวอย่าง 6.8)

ตัวอย่าง 6.8 การใช้งาน

HTML5 IE Cr Op Sa Fx

รูป document.createElement("รูป"); document.createElement("figcaption"); รูป ( พื้นหลัง: #5f6a72; /* สีพื้นหลัง */ ช่องว่างภายใน: 10px; /* ช่องว่างภายใน */ จอแสดงผล: บล็อก; /* องค์ประกอบบล็อก */ ความกว้าง: 150px; /* ความกว้าง */ ลอย: ซ้าย; /* บล็อกบรรทัด ขึ้นในแนวนอน */ margin: 0 10px 10px 0; /* margins */ text-align: center; /* center alignment */ ) figcaption ( color: #fff; /* text color */ )

มหาวิหารเซนต์โซเฟีย

โบสถ์โปแลนด์

มีคำอธิบายสำหรับแท็ก แท็กต้องเป็นองค์ประกอบแรกหรือองค์ประกอบสุดท้ายในกลุ่ม

ตั้งค่า "ส่วนท้าย" ของไซต์หรือส่วน โดยปกติจะมีชื่อผู้เขียน วันที่ของเอกสาร การติดต่อ และข้อมูลทางกฎหมาย (ตัวอย่าง 6.9)

ตัวอย่าง 6.9 การใช้งาน

HTML5 IE Cr Op Sa Fx

ส่วนท้าย เว็บไซต์ส่วนตัวของ Christina Vetrova ยินดีต้อนรับ!

ฉันดีใจที่ได้ต้อนรับคุณสู่ไซต์ของฉัน

ลิขสิทธิ์ Christina Vetrova

กำหนด "ส่วนหัว" ของไซต์หรือส่วน

ใช้เพื่อจัดกลุ่มส่วนหัวของเว็บเพจหรือส่วนต่างๆ (ตัวอย่าง 6.10)

ตัวอย่าง 6.10 การใช้งาน

HTML5 IE Cr Op Sa Fx

hgroup Kristina Vetrova เว็บไซต์ส่วนตัว

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

ตัวอย่าง 6.11 การใช้งาน

HTML5 IE Cr Op Sa Fx

นำทาง Cheburashka และจระเข้ Gena Cheburashka | จีน่า | ชาโปกลียัก | ลาริสกา ยินดีต้อนรับ!

กำหนดส่วนของเอกสาร ซึ่งอาจรวมถึงส่วนหัว ส่วนหัว ส่วนท้าย และข้อความ (ตัวอย่างที่ 6-12) คุณสามารถซ้อนแท็กหนึ่งแท็กไว้ในอีกแท็กหนึ่งได้

ตัวอย่าง 6.12 การใช้งาน

HTML5 IE Cr Op Sa Fx

ส่วนการยิงโพรพิลีน

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

ภาษาที่ดี

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

ทำเครื่องหมายข้อความภายในแท็กเป็นวันที่ เวลา หรือทั้งวันที่และเวลา สามารถระบุได้โดยตรงภายในคอนเทนเนอร์ หรือตั้งค่าผ่านแอตทริบิวต์ datetime (ตัวอย่าง 6.13)

วันที่และเวลาถูกกำหนดในรูปแบบสากล ISO 8601 ตัวอย่างการลงทะเบียนแสดงไว้ในตาราง 6.1.

แต่ละยูนิตมีรูปแบบและข้อจำกัดของตัวเอง

• ปี - กำหนดด้วยตัวเลขสี่หลัก (1860)
• เดือน - สองหลัก (01 - มกราคม, 02 - กุมภาพันธ์, 12 - ธันวาคม)
• วันเป็นตัวเลขสองหลักตั้งแต่ 01 ถึง 31
• ชั่วโมงเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 23
• นาทีเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 59
• วินาทีเป็นตัวเลขสองหลักตั้งแต่ 00 ถึง 59
• เขตเวลาเป็นชั่วโมงและนาทีโดยมีเครื่องหมายบวกหรือลบ

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

ตัวอย่าง 6.13 การใช้งาน

HTML5 IE Cr Op Sa Fx

เวลา

1957-10-04 ดาวเทียมโลกประดิษฐ์ดวงแรกเปิดตัว

1960-08-19 การบินครั้งแรกของสุนัขสู่อวกาศ

1961-04-12 นักบินขึ้นสู่อวกาศครั้งแรก

1963-06-16 เที่ยวบินแรกของนักบินอวกาศหญิง

1969-07-21 การลงจอดของชายคนหนึ่งบนดวงจันทร์

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

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

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

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

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

" />

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

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

" />

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

• - ท้ายโค้ด php

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

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

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

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

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

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

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

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

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

เริ่มจากส่วนท้ายใหม่:

เท้าซ้าย .foot-center(float: left;) /*footer block alignment*/ .foot-left (ความกว้าง: 20%;) /*left block width*/ .foot-center (ระยะขอบซ้าย: -6px ;) /*center block padding*/ .foot-right ( /*right block*/ float: none; height: 60px; )

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

บรรทัด - ความสูง: 18px; ) ul.nav.menu_footer li.item-179 a ( /* รายการเมนูแผนผังเว็บไซต์*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /* รายการเมนู About site*/ color: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*รายการเมนู Contacts*/ margin-left: 45px; border-bottom: 3px ทึบ #0f70ad; สี: #0f70ad; )

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

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

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

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

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

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

ในกระบวนการฝึกฝน ฉันได้ค้นพบ 5 วิธีในการกดส่วนท้ายไปที่ด้านล่างสุดของหน้าต่างเบราว์เซอร์โดยใช้ CSS

รหัส HTML ของวิธีการที่นำเสนอทั้งหมดมีโครงสร้างดังต่อไปนี้ (ความแตกต่างเพียงอย่างเดียวคือรหัส CSS):

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

วิธีแรก

ส่วนท้ายถูกกดลงโดยการวางตำแหน่งแบบสัมบูรณ์ และดึงความสูงของบล็อกหลัก (html , body และ .wrapper) ขึ้น 100% ในกรณีนี้ เนื้อหา block.content จำเป็นต้องระบุการเยื้องด้านล่าง ซึ่งเท่ากับหรือมากกว่าความสูงของส่วนท้าย มิฉะนั้น การเยื้องหลังจะปิดเนื้อหาบางส่วน

* ( ขอบ: 0; ช่องว่างภายใน: 0; ) html, เนื้อหา ( ความสูง: 100%; ) .wrapper ( ตำแหน่ง: สัมพัทธ์; ความสูงขั้นต่ำ: 100%; ) .content ( ช่องว่างด้านล่าง: 90px; ) .footer ( ตำแหน่ง : สัมบูรณ์; ซ้าย: 0; ด้านล่าง: 0; ความกว้าง: 100%; ความสูง: 80px; )

วิธีที่สอง

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

* ( margin: 0; padding: 0; ) html, body, .wrapper ( ความสูง: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) ส่วนท้าย ( ความสูง: 80px; ขอบด้านบน: -80px; )

เนื่องจากคุณสมบัติ box-sizing: border-box เราไม่ปล่อยให้กล่อง .content สูงเกิน 100% ดังนั้น ในกรณีนี้ min-height: 100% + padding-bottom: 90px เท่ากับ 100% ของความสูงหน้าต่างเบราว์เซอร์

วิธีที่สาม

เป็นสิ่งที่ดีเพราะไม่เหมือนกับวิธีอื่น (ยกเว้นวิธีที่ 5) ความสูงของส่วนท้ายไม่สำคัญ

* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )

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

เป็นผลให้ส่วนท้ายถูกกดไปที่ด้านล่าง

วิธีที่สี่

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

* ( margin: 0; padding: 0; ) .content ( min-height: calc(100vh - 80px); )

100vh คือความสูงของหน้าต่างเบราว์เซอร์ และ 80px คือความสูงของส่วนท้าย และด้วยความช่วยเหลือของฟังก์ชัน calc() เราจะลบค่าที่สองออกจากค่าแรก โดยการกดส่วนท้ายลงไปด้านล่าง

คุณสามารถค้นหาว่าเบราว์เซอร์ใดบ้างที่รองรับ calc() และ vh ได้ที่ caniuse.com โดยใช้ลิงก์ต่อไปนี้: รองรับฟังก์ชัน calc(), รองรับหน่วย vh

วิธีที่ห้า (ที่เกี่ยวข้องมากที่สุด)

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

* ( margin: 0; padding: 0; ) html, body ( ความสูง: 100%; ) .wrapper ( display: flex; flex-direction: คอลัมน์; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( ยืดหยุ่น: 0 0 อัตโนมัติ; )

คุณสามารถเรียนรู้เกี่ยวกับการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติ flex ได้

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

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

หากต้องการขยายภาพให้คลิกด้วยปุ่มเมาส์ คลิกอีกครั้งเพื่อซูมออก

1. Page Head and Footer (ส่วนหัวและส่วนท้ายของหน้า) การเพิ่มรหัสไปยังหน้าหลักของเว็บไซต์

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

รหัสที่จะเพิ่มในส่วน HEAD ของทุกหน้า (รหัสที่จะใส่ในส่วนหัวของแต่ละหน้า) การเพิ่มโค้ดให้กับเนื้อหาแท็กในส่วน HEAD ผลลัพธ์ของส่วนที่มองเห็นได้ของโค้ดจะปรากฏเหนือส่วนหัวของทุกหน้า รวมถึงหน้าหลักด้วย

รหัสที่จะเพิ่มก่อนส่วนท้ายของหน้า (รหัสที่จะใส่ที่ส่วนท้าย (ส่วนท้าย) ของหน้า) การเพิ่มโค้ดที่ส่วนท้ายของทุกหน้าก่อนแท็กปิด ใช้งานได้เฉพาะกับธีมที่มีส่วนท้ายและไฟล์ footer.php

ตัวนับเกือบทั้งหมดประกอบด้วยสองส่วน - นี่คือรหัสของส่วนที่มองไม่เห็นและมองเห็นได้ (ตัวแจ้ง) ของตัวนับ รหัสชิ้นส่วนที่มองไม่เห็นจะถูกแทรกไว้หลังแท็กเปิด โดยให้อยู่สูงที่สุดเท่าที่จะเป็นไปได้ที่ด้านบนของหน้า ในการทำเช่นนี้ คุณสามารถใช้ปลั๊กอินหรือทำการแก้ไขโดยตรงในไฟล์ header.php, รหัสของส่วนที่มองเห็นได้ (informer) ถูกแทรกลงในส่วนท้ายของไซต์โดยใช้ปลั๊กอินส่วนหัวและส่วนท้ายก่อนแท็กปิดหรือในแถบด้านข้างโดยใช้วิดเจ็ต

2. โพสต์เนื้อหา (โพสต์เนื้อหา) การเพิ่มโค้ดที่จุดเริ่มต้นและจุดสิ้นสุดของโพสต์ในหน้าหมวดหมู่ทั้งหมด เมื่อโพสต์แสดงแบบเต็ม

รหัสที่ต้องใส่ก่อนการโพสต์แต่ละครั้ง (รหัสที่จะใส่ก่อนการโพสต์แต่ละครั้ง) ใส่รหัสที่จุดเริ่มต้นของโพสต์แต่ละหมวดหมู่ (บทความ) หลังชื่อ เฉพาะเมื่อบทความแสดงแบบเต็มเท่านั้น

รหัสที่จะใส่หลังจากแต่ละโพสต์ (รหัสที่จะใส่หลังจากแต่ละโพสต์) ใส่รหัสหลังโพสต์แต่ละหมวดหมู่

3. เนื้อหาของหน้า การเพิ่มโค้ดที่จุดเริ่มต้นและจุดสิ้นสุดของโพสต์ของหน้าสแตติกทั้งหมด เมื่อโพสต์แสดงแบบเต็ม

รหัสที่จะใส่ก่อนแต่ละหน้า ใส่โค้ดที่จุดเริ่มต้นของแต่ละโพสต์ (บทความ) ของเพจแบบสแตติกหลังชื่อเรื่อง เฉพาะเมื่อบทความแสดงแบบเต็มเท่านั้น

รหัสที่จะใส่หลังแต่ละหน้า รหัสจะถูกแทรกหลังโพสต์ในทุกหน้าคงที่

4. เฟสบุ๊ค หากคุณเพิ่ม og:image metafeature (โปรโตคอล Open Graph ที่สามารถใช้เพื่อป้อนข้อมูลเมตาในรูปแบบ Social Graph บนหน้าทรัพยากร) ตัวอย่างเช่น รายชื่อผู้ติดต่อ Faceboock เมื่อคุณคลิกปุ่ม Faceboock ที่จุดเริ่มต้นหรือจุดสิ้นสุด ของโพสต์ คุณสามารถควบคุมการเลือกรูปภาพในทุกหน้าซึ่งจะไปที่วอลล์ของผู้ใช้

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

6. หมายเหตุและรหัสจอด หมายเหตุ