องค์ประกอบ
(จากอังกฤษ ร่างกาย- body) ได้รับการออกแบบมาเพื่อจัดเก็บเนื้อหาของหน้าเว็บ (เนื้อหา) ที่แสดงในหน้าต่างเบราว์เซอร์ ข้อมูลที่ควรแสดงในเอกสารควรอยู่ภายในคอนเทนเนอร์ - ข้อมูลนี้รวมถึงข้อความ รูปภาพ แท็ก JavaScript ฯลฯใช้เพื่อกำหนดสีของลิงก์และข้อความบนหน้าเว็บด้วย แนวทางปฏิบัตินี้ไม่เป็นที่ยอมรับใน HTML และขอแนะนำให้ใช้สไตล์เพื่อระบุโครงร่างสีแทน โดยนำไปใช้กับตัวเลือกเนื้อหาบ่อยครั้ง
ใช้เพื่อวางตัวจัดการเหตุการณ์ เช่น onload ที่ทำงานหลังจากเอกสารโหลดลงในหน้าต่างหรือเฟรมปัจจุบันเสร็จแล้วการเปิดและปิดแท็ก
ไม่จำเป็นบนหน้าเว็บ แต่ถือเป็นรูปแบบที่ดีในการใช้กำหนดจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTMLไวยากรณ์
...แท็กปิด
ไม่จำเป็นต้องใช้.
คุณลักษณะ
ตัวอย่าง
แม้แต่อริสโตเติลใน "การเมือง" ของเขายังกล่าวว่าดนตรีที่มีอิทธิพลต่อบุคคลนั้นทำให้เกิด "การชำระล้างซึ่งก็คือความโล่งใจที่เกี่ยวข้องกับความสุข"
ผลลัพธ์ของตัวอย่างปัจจุบันแสดงไว้ในรูปที่ 1 1. เมื่อใช้เหตุการณ์ onload ขององค์ประกอบ
สคริปต์ที่เขียนด้วย JavaScript จะถูกดำเนินการ ในกรณีนี้จะแสดงข้อความว่าเอกสารถูกโหลดแล้วข้าว. 1. หน้าต่างป๊อปอัปในเอกสาร
ข้อมูลจำเพาะ
ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน
- คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
- คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้) - กลุ่มที่รับผิดชอบมาตรฐานมีความพึงพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
- ข้อเสนอแนะที่เสนอ ข้อแนะนำ) - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
- Working Draft - ร่างฉบับสมบูรณ์ยิ่งขึ้นซึ่งได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
- ร่างบรรณาธิการ ( ร่างบรรณาธิการ) - เวอร์ชันร่างของมาตรฐานหลังจากมีการเปลี่ยนแปลงโดยบรรณาธิการโครงการ
- ร่าง ( ข้อกำหนดฉบับร่าง) - เวอร์ชันร่างแรกของมาตรฐาน
มาตรฐาน HTML ที่มีชีวิต (Living) มีความโดดเด่น - ไม่ยึดติดกับการกำหนดหมายเลขเวอร์ชันดั้งเดิม เนื่องจากมีการพัฒนาอย่างต่อเนื่องและได้รับการอัปเดตเป็นประจำ
แท็ก (สองเท่า) ได้รับการออกแบบมาเพื่อจัดเก็บเนื้อหาของหน้าเว็บ (เนื้อหา) ที่แสดงในหน้าต่างเบราว์เซอร์ ข้อมูลที่ควรแสดงในเอกสารควรอยู่ภายในคอนเทนเนอร์ BODY ข้อมูลนี้รวมถึงข้อความ รูปภาพ แท็ก JavaScript ฯลฯ
แท็ก ใช้เพื่อกำหนดสีของลิงก์และข้อความบนหน้าเว็บด้วย แนวทางปฏิบัตินี้เลิกใช้แล้วใน HTML 4 และขอแนะนำให้ใช้สไตล์เพื่อระบุโครงร่างสีแทน โดยนำไปใช้กับตัวเลือก - อย่างไรก็ตาม ตัวเลือกส่วนใหญ่ยังคงรองรับเบราว์เซอร์ต่างๆ
มักจะแท็ก ใช้เพื่อวางตัวจัดการเหตุการณ์ เช่น onLoad ที่ทำงานหลังจากโหลดเอกสารลงในหน้าต่างหรือเฟรมปัจจุบันเสร็จแล้ว
แท็กเปิดและปิด BODY บนหน้าเว็บเป็นทางเลือก แต่ควรใช้แท็กเหล่านี้เพื่อกำหนดจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML
ไวยากรณ์
...
แท็กปิด
ที่จำเป็น.
ตัวเลือก
alink - กำหนดสีของลิงค์ที่ใช้งานอยู่
พื้นหลัง - กำหนดภาพพื้นหลังบนหน้าเว็บ
bgcolor - สีพื้นหลังของหน้าเว็บ
bgproperties - กำหนดว่าจะเลื่อนพื้นหลังพร้อมกับข้อความหรือไม่
ขอบล่าง - เยื้องจากขอบด้านล่างของหน้าต่างเบราว์เซอร์ไปยังเนื้อหา
leftmargin - ระยะขอบแนวนอนจากขอบหน้าต่างเบราว์เซอร์ถึงเนื้อหา
ลิงค์ - สีของลิงค์
scroll - ตั้งค่าว่าจะแสดงแถบเลื่อนหรือไม่
ข้อความ - สีของข้อความในเอกสาร
topmargin - เยื้องจากขอบด้านบนของหน้าต่างเบราว์เซอร์ไปยังเนื้อหา
vlink - สีของลิงค์ที่เข้าชม
ตัวอย่างที่ 1: การใช้แท็ก BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
คุณเพียงแค่ต้องทำเช่นนี้และทำขั้นตอนสุดท้ายให้เสร็จสิ้น
คำอธิบายของพารามิเตอร์แท็ก BODY
พารามิเตอร์ ALINK
คำอธิบาย
ตั้งค่าสีของลิงค์ที่ใช้งานอยู่ สีลิงก์ปัจจุบันจะเปลี่ยนเป็นสีที่ใช้งานอยู่เมื่อมีการคลิกลิงก์ด้วยเคอร์เซอร์ของเมาส์หรือเลือกโดยใช้แป้นพิมพ์
ไวยากรณ์
ข้อโต้แย้ง
คุณสามารถตั้งค่าสีได้สองวิธี
1. ตามชื่อของมัน
เบราว์เซอร์รองรับสีบางสีตามชื่อ
2. ตามค่าเลขฐานสิบหก
เลขฐานสิบหกใช้เพื่อระบุสี ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบทศนิยมนั้นเป็นไปตามชื่อของมัน ตัวเลขจะเป็นดังนี้ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. ตัวเลขตั้งแต่ 10 ถึง 15 จะถูกแทนที่ด้วยตัวอักษรละติน ตัวเลขที่มากกว่า 15 ในระบบเลขฐานสิบหกนั้นเกิดขึ้นจากการรวมตัวเลขสองตัวให้เป็นหนึ่งเดียว ตัวอย่างเช่น ตัวเลข 255 ในรูปทศนิยมจะสอดคล้องกับตัวเลข FF ที่เป็นเลขฐานสิบหก เพื่อหลีกเลี่ยงความสับสนในการกำหนดระบบตัวเลข สัญลักษณ์แฮช # จะถูกวางไว้หน้าเลขฐานสิบหก เช่น #666999 แต่ละสีในสามสี ได้แก่ แดง เขียว และน้ำเงิน สามารถรับค่าได้ตั้งแต่ 00 ถึง FF ดังนั้น สัญลักษณ์สีจึงถูกแบ่งออกเป็นสามองค์ประกอบ #rrggbb โดยที่สัญลักษณ์สองตัวแรกระบุองค์ประกอบสีแดงของสี สองตัวตรงกลางคือสีเขียว และสองตัวสุดท้ายคือสีน้ำเงิน
ค่าเริ่มต้น
ตรงกับสีของลิงค์
...
พารามิเตอร์พื้นหลัง
คำอธิบาย
ระบุรูปภาพที่จะใช้เป็นวอลเปเปอร์ ต่างจากรูปภาพทั่วไป พื้นหลังไม่มีการกำหนดความกว้างหรือความสูง และจะแสดงในขนาดเต็ม 100% เสมอ หากรูปภาพมีขนาดเล็กกว่าหน้าต่างเบราว์เซอร์ รูปภาพนั้นจะถูกทำซ้ำในแนวนอนไปทางขวาและล่าง โดยจัดเรียงเป็นภาพโมเสก ด้วยเหตุนี้ ความแตกต่างที่มองเห็นได้จึงอาจเกิดขึ้นที่จุดเชื่อมต่อของภาพพื้นหลัง ซึ่งผู้เยี่ยมชมเว็บไซต์จะสังเกตเห็นได้ เมื่อเลือกภาพพื้นหลัง ตรวจสอบให้แน่ใจว่ามีความแตกต่างเพียงพอระหว่างภาพกับข้อความบนหน้าเว็บ GIF แบบเคลื่อนไหวสามารถใช้เป็นพื้นหลังได้ แต่จะเบี่ยงเบนความสนใจของผู้อ่าน
ไวยากรณ์
ข้อโต้แย้ง
ที่อยู่รูปภาพที่ถูกต้อง - คุณสามารถใช้เส้นทางแบบสัมพัทธ์หรือแบบสัมบูรณ์ได้
ค่าเริ่มต้น
เลขที่
ตัวอย่างที่ 3: การตั้งค่าวอลเปเปอร์บนหน้าเว็บ
...
พารามิเตอร์ BGCOLOR
คำอธิบาย
กำหนดสีพื้นหลังของเว็บเพจ คุณสามารถใช้พารามิเตอร์นี้ร่วมกับพื้นหลัง โดยเลือกสีพื้นหลังใกล้กับรูปภาพพื้นหลัง
ไวยากรณ์
ข้อโต้แย้ง
ดูพารามิเตอร์ ALINK
ค่าเริ่มต้น
ขึ้นอยู่กับเบราว์เซอร์และเวอร์ชัน แต่สีพื้นหลังมักจะเป็นสีขาว
ตัวอย่างที่ 4: การตั้งค่าสีพื้นหลังของหน้าเว็บ
...
พารามิเตอร์ BGPROPERTIES
คำอธิบาย
ตามค่าเริ่มต้น ภาพพื้นหลังจะเลื่อนไปตามเนื้อหาของหน้าเว็บ การใช้พารามิเตอร์ bgproperties คุณสามารถแก้ไขพื้นหลังได้ในที่เดียว และบังคับให้เลื่อนเฉพาะเนื้อหาเท่านั้น คุณภาพของหน้าเว็บนี้ไม่ค่อยได้ใช้กับเว็บไซต์ ดังนั้น จึงอาจดูแปลกและไม่ปกติสำหรับผู้ใช้
ไวยากรณ์
ข้อโต้แย้ง
มีพารามิเตอร์คงที่เพียงตัวเดียวเท่านั้นซึ่งจะแก้ไขพื้นหลัง หากคุณต้องการลบคุณลักษณะนี้ ให้ลบพารามิเตอร์ bgproperties ออกจากแท็ก BODY หรือตั้งค่าเป็นค่าว่าง - ""
ค่าเริ่มต้น
เลขที่
ตัวอย่างที่ 5: การแก้ไขพื้นหลัง
...
บันทึก
- ไม่ใช่ทุกเบราว์เซอร์ที่รองรับการตั้งค่านี้ ตัวอย่างเช่น Netscape จะเพิกเฉยต่อการตั้งค่านี้
- สังเกตได้ว่าเมื่อตั้งค่าภาพพื้นหลังบนหน้าเว็บผ่านสไตล์ พารามิเตอร์ bgproperies จะหยุดทำงาน
พารามิเตอร์ LEFTMARGIN
คำอธิบาย
กำหนดระยะขอบจากขอบซ้ายและขวาของหน้าต่างเบราว์เซอร์ไปจนถึงเนื้อหาของหน้าเว็บ
ไวยากรณ์
ข้อโต้แย้ง
จำนวนเต็มบวกที่ระบุออฟเซ็ตเป็นพิกเซล
ค่าเริ่มต้น
10 พิกเซลสำหรับ Windows และ 8 พิกเซลสำหรับ Macintosh
ตัวอย่างที่ 6: การเปลี่ยนระยะขอบด้านซ้าย
...
บันทึก
- เบราว์เซอร์ Netscape ไม่เข้าใจพารามิเตอร์ leftmargin ในการตั้งค่าระยะขอบ จะใช้พารามิเตอร์ ความกว้าง - ระยะขอบแนวนอน และ ความสูงขอบ - ระยะขอบแนวตั้ง
- หากต้องการตั้งค่าระยะขอบจากขอบด้านขวา ด้านล่าง และด้านบน ให้ใช้พารามิเตอร์ rightmargin, Bottommargin และ Topmargin ตามลำดับ
พารามิเตอร์ลิงก์
คำอธิบาย
กำหนดสีของลิงค์ที่ยังไม่ได้เยี่ยมชม
ไวยากรณ์
ข้อโต้แย้ง
ดูพารามิเตอร์ ALINK
ค่าเริ่มต้น
#0000FF
ตัวอย่างที่ 7: การตั้งค่าสีลิงก์
...
พารามิเตอร์เลื่อน
คำอธิบาย
พารามิเตอร์การเลื่อนจะควบคุมการมีแถบเลื่อนในหน้าต่างเบราว์เซอร์เมื่อเนื้อหาของเว็บเพจเกินขนาดของหน้าต่างปัจจุบัน การตั้งค่านี้ใช้ได้เฉพาะใน Internet Explorer เท่านั้น
ไวยากรณ์
ข้อโต้แย้ง
ใช่ - แสดงแถบเลื่อน
ไม่ - ป้องกันไม่ให้แถบเลื่อนแสดงในหน้าต่าง
ค่าเริ่มต้น
ใช่
ตัวอย่างที่ 8: การซ่อนแถบเลื่อน
...
พารามิเตอร์ข้อความ
คำอธิบาย
ตั้งค่าสีเริ่มต้นของข้อความที่ใช้บนหน้าเว็บ สีของแต่ละองค์ประกอบสามารถเปลี่ยนแปลงได้อย่างง่ายดายโดยใช้สไตล์
ไวยากรณ์
ข้อโต้แย้ง
ดูพารามิเตอร์ ALINK
ค่าเริ่มต้น
#000000
ตัวอย่างที่ 9: การเปลี่ยนสีข้อความ
...
พารามิเตอร์ VLINK
คำอธิบาย
กำหนดสีของลิงก์ที่เข้าชม เช่น ลิงก์ที่ผู้ใช้ "คลิก" แล้ว
ไวยากรณ์
ข้อโต้แย้ง
ดูพารามิเตอร์ ALINK
ค่าเริ่มต้น
#551a8b (เนวิเกเตอร์ 4); #800080 (หน้าต่าง Internet Explorer); #006010 (อินเทอร์เน็ตเอ็กซ์พลอเรอร์แมคอินทอช)
ตัวอย่างที่ 10: การตั้งค่าสีของลิงค์ที่เข้าชม
...
สีข้อความ
สีพื้นหลัง
ภาพพื้นหลัง
ลิงค์สี
การเติมเต็มเนื้อหา
ออกกำลังกาย
ดังที่คุณทราบแล้วว่าระหว่างแท็กเปิด และแท็กปิด เนื้อหาของหน้าหรือเนื้อหาของหน้านั้นถูกวางไว้ มันก็เรียกว่าคำนี้ เนื้อหา(จากเนื้อหาภาษาอังกฤษ - เนื้อหา) ตัวเลือกแท็ก กำหนดคุณสมบัติของเนื้อหาโดยรวม ในบทเรียนนี้เราจะมาดูบางส่วนกัน
สีข้อความ
สีข้อความของเอกสารทั้งหมดถูกกำหนดโดยพารามิเตอร์ ข้อความ- โดยจะกำหนดชื่อสีหรือค่าสีฐานสิบหก เช่นเดียวกับพารามิเตอร์ สีแท็ก (ดูบทที่ 2: การจัดรูปแบบการทดสอบ):
หรือการใช้ตัวอย่างนี้จะส่งผลให้ข้อความทั้งหมดบนหน้าเป็นสีแดง
พารามิเตอร์ ข้อความเป็นทางเลือก หากคุณละเว้น ข้อความบนหน้าจะเป็นสีดำตามค่าเริ่มต้น คุณอาจเคยเห็นสิ่งนี้จากการทำแบบฝึกหัดก่อนหน้านี้ -
สีพื้นหลัง
สีพื้นหลังของหน้าถูกกำหนดโดยพารามิเตอร์ บีจีคัลเลอร์- ยอมรับชื่อสีหรือค่าสีฐานสิบหก เช่นเดียวกับพารามิเตอร์ ข้อความ.
หรือตัวอย่างนี้จะส่งผลให้พื้นหลังของหน้าเป็นสีแดง
พารามิเตอร์ บีจีคัลเลอร์เป็นทางเลือก หากคุณละเว้น พื้นหลังของหน้าเริ่มต้นจะเป็นสีขาว นี่คือสิ่งที่คุณได้เห็นแล้วจากการทำแบบฝึกหัดก่อนหน้านี้ -
ภาพพื้นหลัง
การใช้พารามิเตอร์ พื้นหลังคุณสามารถตรวจสอบให้แน่ใจว่าหน้านั้นไม่มีพื้นหลังธรรมดา แต่พื้นหลังเป็นรูปภาพ สำหรับพารามิเตอร์นี้ พื้นหลังคุณต้องกำหนดเส้นทางให้กับรูปภาพที่คุณต้องการสร้างพื้นหลังตลอดจนพารามิเตอร์ srcแท็ก
(ดูบทที่ 5 รูปภาพ):
ด้วยวิธีนี้ คุณสามารถจัดเรียงพื้นหลังของหน้าด้วยรูปแบบบางอย่างได้ แต่คุณไม่ควรใช้โอกาสนี้ในทางที่ผิดและสร้างภาพขนาดใหญ่เป็นพื้นหลังเพื่อไม่ให้หน้าหนักเกินไป
ตัวอย่างเช่น เรามีส่วนของรูปแบบนี้:
ถ้าเราสร้างเป็นภาพพื้นหลัง เราจะได้หน้าที่มีพื้นหลังดังนี้:
พารามิเตอร์ พื้นหลังก็เป็นทางเลือกเช่นกัน หากคุณละเว้น พื้นหลังของหน้าเริ่มต้นจะเป็นสีขาว
ลิงค์สี
มีพารามิเตอร์แท็ก 3 รายการสำหรับกำหนดสีของลิงก์ ร่างกาย:
พารามิเตอร์เหล่านี้ได้รับการกำหนดชื่อของสีหรือค่าเลขฐานสิบหกซึ่งคล้ายกับพารามิเตอร์อื่นที่รับผิดชอบสีของบางสิ่งบางอย่าง
หน้าตาหน้าจะเป็นแบบนี้ (ดูสถานะลิงค์ทั้งหมด จำอันเดิม กดค้างไว้ดูว่าเป็นสีอะไร สุดท้ายปล่อย กลับมาที่หน้านี้ดูว่าเป็นสีอะไร ):
พารามิเตอร์เหล่านี้เป็นทางเลือก หากคุณละเว้น สีลิงก์จะใช้ค่าเริ่มต้น (สีน้ำเงิน สีแดง สีม่วง ตามลำดับ)
การเติมเต็มเนื้อหา
หากคุณต้องการให้เนื้อหาของหน้าถอยห่างจากขอบหน้าต่างเบราว์เซอร์ตามจำนวนที่กำหนด ในกรณีนี้ แท็ก ร่างกายมี 4 พารามิเตอร์:
ขอบซ้าย- เยื้องจากขอบด้านซ้าย
ขอบขวา- เยื้องจากขอบด้านขวา
ขอบด้านบน- เยื้องจากขอบด้านบน
ขอบล่าง- เยื้องจากขอบด้านล่าง
พารามิเตอร์เหล่านี้รับค่าเป็นพิกเซล ไม่จำเป็น และคุณสามารถใช้ทั้งหมดพร้อมกันหรือแยกกันก็ได้ ตัวอย่างเช่น คุณสามารถเยื้องเฉพาะด้านซ้ายและด้านขวา หรือเฉพาะด้านบนและด้านล่าง เป็นต้น:
หรือสวัสดีทุกคน!
วันนี้ฉันตัดสินใจที่จะพูดถึงหัวข้อที่จะไม่มีวันหมดความเกี่ยวข้องในหมู่ผู้สร้างเว็บไซต์รุ่นเยาว์
จำเป็นต้องปรับแต่งไซต์เสมอหลังจากสร้างแล้ว การตั้งค่าบางอย่างทำได้โดยการแก้ไขไฟล์ของเทมเพลตธีมที่ติดตั้ง ตัวอย่างเช่น คุณต้องใส่โค้ดที่แสดงรายการที่คล้ายกัน แต่จะใส่ตรงไหนล่ะ?
มือใหม่มักถามคำถามเช่นนี้ พวกเขายังกังวลเกี่ยวกับปัญหาอื่นๆ ที่คล้ายกัน ซึ่งมีแนวทางแก้ไขที่เหมือนกันทุกประการ นอกจากนี้ ในบทความต่อๆ ไป ฉันมักจะหันไปใช้การแทรกโค้ดในตำแหน่งต่างๆ ในเทมเพลต ดังนั้นเนื้อหานี้จึงมีความเกี่ยวข้องมากขึ้นกว่าเดิม
ในบทความนี้ ฉันจะแสดงให้คุณเห็นว่าการระบุตำแหน่งในเทมเพลต WordPress ที่คุณต้องแทรกโค้ดใดๆ เป็นเรื่องง่ายมากเพียงใด ฉันจะพิจารณาประเด็นสำคัญอื่น ๆ ที่อาจเกี่ยวข้องกับคุณในระยะเริ่มแรกด้วย
มาเริ่มกันที่ด้านบนสุดแล้วดูไฟล์ที่คุณอาจต้องแก้ไขหากคุณต้องการแทรกโค้ดด้วยตนเองแทนที่จะใช้ปลั๊กอินเนื่องจากมีตัวเลือกนั้น ฉันไม่ยินดีต้อนรับ แต่สำหรับคนขี้เกียจฉันจะอธิบายปลั๊กอินดังกล่าวในบทความต่อไปนี้
ในตอนแรกฉันให้บทเรียนวิดีโอเนื่องจากหากไม่มีบทเรียนดังกล่าวก็จะเป็นการยากที่จะเข้าใจเนื้อหาที่นำเสนอในรูปแบบข้อความด้านล่าง
ตอนนี้ฉันจะอธิบายทุกอย่างโดยละเอียดในรูปแบบข้อความ
ไฟล์ที่รับผิดชอบในการแสดงผลหน้าแต่ละประเภท
หากคุณได้อ่านบทความมากมายในบล็อกอื่น ๆ เกี่ยวกับการปรับใช้ฟังก์ชันบางอย่างโดยใช้โค้ด (สคริปต์) ฉันมั่นใจ 100% ว่าคุณเคยเห็นวลีเช่น:
- วางรหัสนี้ลงในไฟล์ที่รับผิดชอบในการแสดงหน้าหลัก
- วางรหัสนี้ลงในไฟล์ที่รับผิดชอบในการส่งออกบันทึกและอื่น ๆ
มีไฟล์จำนวนมากที่คุณอาจต้องใส่โค้ดลงไป แต่ไฟล์เหล่านี้คืออะไร? ทุกอย่างง่ายมาก
- เอาท์พุทโฮมเพจ - index.php;
- ผลลัพธ์ของบันทึก - ไฟล์ single.php;
- เอาต์พุตเพจ - ไฟล์ page.php;
- ผลลัพธ์ของไฟล์เก็บถาวรและหมวดหมู่ - archive.php;
- เอาต์พุตส่วนท้าย - footer.php;
- เอาต์พุตหน้าการค้นหา - search.php;
- เอาต์พุตแถบด้านข้าง - sidebar.php;
- ไฟล์สไตล์ - style.css;
- ไฟล์เอาต์พุตหน้า 404 คือ 404.php
ตอนนี้เมื่อพวกเขาบอกคุณว่าคุณต้องวางโค้ดลงในไฟล์ดังกล่าว คุณจะรู้ว่าจะต้องดูที่ไหน
สิ่งที่เหลืออยู่คือการตอบคำถาม: จะกำหนดตำแหน่งที่ถูกต้องในแต่ละไฟล์ได้อย่างไร?
การกำหนดตำแหน่งที่จะแทรกโค้ด
ก่อนอื่น มาดูสถานที่ที่ไม่จำเป็นต้องระบุกันก่อน ซึ่งจะเหมือนกันสำหรับทุกคน โดยไม่คำนึงถึงเทมเพลต
ตำแหน่งแรกซึ่งเหมือนกันสำหรับเทมเพลตทั้งหมด คือพื้นที่ในไฟล์ Header.php นี่คือแท็กเปิดและปิด
.สคริปต์บางตัวจะอยู่ระหว่างแท็กเหล่านี้เสมอ ซึ่งควรจะใช้ได้กับทุกหน้าของไซต์ นั่นคือเราได้วางสคริปต์ไว้สำหรับปุ่มโซเชียลระหว่างแท็กเหล่านี้ และสคริปต์เหล่านี้ใช้ได้กับทุกหน้าของไซต์ที่เราจะแสดง
แท็กเหล่านี้อยู่ที่ด้านบนสุดของไฟล์ Header.php
เนื้อหาในระหว่างนั้นจะแตกต่างกันสำหรับทุกคน เนื่องจากทั้งหมดขึ้นอยู่กับเทมเพลต
หากคุณได้รับแจ้งว่าคุณต้องแทรกโค้ดนี้ระหว่างแท็กเปิดและแท็กปิด จากนั้นคัดลอกโค้ด มองหาพื้นที่ที่คล้ายกันในไฟล์เทมเพลตของคุณ แล้ววางระหว่างแท็กเหล่านั้น
ตำแหน่งที่สองซึ่งเหมือนกันสำหรับเทมเพลตทั้งหมดนั้นอยู่ในไฟล์ที่รับผิดชอบเอาต์พุตของส่วนท้าย - footer.php
สคริปต์สามารถเชื่อมต่อได้ไม่เพียงแต่โดยการแทรกสคริปต์ไว้ระหว่างแท็กเท่านั้น
ในไฟล์ Header.php คุณยังสามารถโหลดผ่านไฟล์ footer.php ได้ ซึ่งจะช่วยเร่งการโหลดหน้าเว็บไซต์ความจริงก็คือเมื่อเพจเริ่มโหลด มันจะโหลดจากบนลงล่าง หากสคริปต์ทั้งหมดอยู่ที่ด้านบนของหน้า การแสดงเนื้อหาจะช้าลง เนื่องจากจะใช้เวลาในการโหลดสคริปต์
หน้าที่ของเราคือการแสดงเนื้อหาของหน้าให้เร็วที่สุดเท่าที่เป็นไปได้แก่ทั้งผู้เยี่ยมชมและเครื่องมือค้นหา ในกรณีนี้ ขอแนะนำให้โหลดสคริปต์ที่ส่วนท้ายสุดของหน้าเพื่อแสดงเนื้อหาก่อน จากนั้นจึงโหลดส่วนที่เหลือทั้งหมด
หากต้องการใช้ตัวเลือกนี้ คุณต้องเปิดไฟล์ footer.php และแทรกสคริปต์ก่อนแท็กปิดเนื้อหา อยู่ที่ส่วนท้ายของเนื้อหาไฟล์ เนื่องจากมีหน้าที่รับผิดชอบในส่วนท้ายของพื้นที่หน้า
อย่างที่คุณเห็น ฉันแสดงสคริปต์ทั้งหมดในพื้นที่นี้ ก่อนแท็กปิด(เน้นด้วยกรอบสีน้ำเงิน) อย่างไรก็ตาม ฉันนำพวกมันออกมาโดยการโหลดจากไฟล์ ไม่ใช่โดยการวางสคริปต์ไว้ในบริเวณนี้ หลังจากนั้นฉันก็เร่งความเร็วบล็อกอย่างมาก วิธีการทำเช่นนี้จะเป็นบทความแยกต่างหาก รอ!
ฉันหวังว่าเมื่อพวกเขาบอกให้คุณวางโค้ดลงในพื้นที่เหล่านี้ คุณจะทำได้โดยไม่มีปัญหาใดๆ
เรามาดูปัญหาที่ซับซ้อนกว่านี้แล้วลองเรียนรู้วิธีระบุตำแหน่งในไฟล์เทมเพลตอื่นที่มีการแทรกโค้ดอื่น ๆ เข้าไป โดยทั่วไปแล้ว รหัสเหล่านี้ได้แก่:
- แสดงโพสต์ที่คล้ายกัน
- เอาท์พุทแบบฟอร์มการสมัครสมาชิก;
- การแสดงปุ่มโซเชียลและอื่นๆ
สิ่งเหล่านี้ทั้งหมดจะถูกแทรกไว้หลังส่วนหลักของเนื้อหา ซึ่งก็คือ หลังส่วนท้ายของบทความ แต่ละอันมีโค้ดเทมเพลตที่แตกต่างกัน ดังนั้นจึงเป็นคำตอบสากลสำหรับคำถามนี้ "โค้ดผลลัพธ์บทความของฉันสิ้นสุดที่ใด"ไม่เลย
แต่คุณสามารถกำหนดจุดสิ้นสุดของโค้ดได้อย่างง่ายดายหลังจากนั้นคุณจะต้องใช้ฟังก์ชันที่คุณต้องการ ฉันได้แสดงวิธีนี้ไปแล้วบางส่วนในบทความเกี่ยวกับการเลือกเทมเพลต WordPress () จากนั้นฉันก็ใช้ฟังก์ชันมาตรฐานของอินเทอร์เน็ตเบราว์เซอร์
เพื่อให้เข้าใจสาระสำคัญของวิธีนี้ได้ดีขึ้น ฉันขอแนะนำให้ดูวิดีโอในตอนต้นของโพสต์นี้ ในนั้น ฉันแสดงให้เห็นว่าทุกอย่างเกิดขึ้นแบบเรียลไทม์ได้อย่างไร ตอนนี้ฉันจะพยายามอธิบายให้ชัดเจนที่สุด
ฉันจะแสดงให้คุณเห็นโดยใช้เบราว์เซอร์ Google Chrome เป็นตัวอย่าง เบราว์เซอร์อื่นๆ ก็มีฟังก์ชันนี้เช่นกัน แต่อาจมีชื่อแตกต่างออกไปเล็กน้อย
- Google Chrome - ดูโค้ดองค์ประกอบ
- Firefox - สำรวจองค์ประกอบ
- Opera - ตรวจสอบองค์ประกอบ
หลักการคล้ายกันใน 3 เบราว์เซอร์ ตอนนี้ ฉันจะแสดงวิธีระบุตำแหน่งของพื้นที่ใดๆ ในเทมเพลตต่างๆ
เข้าไปดูโค้ดองค์ประกอบ (Google Chrome) คลิกขวาที่พื้นที่ว่างของหน้า
หลังจากนี้ แผงจะปรากฏขึ้นที่ด้านล่างของหน้า ซึ่งแสดงซอร์สโค้ดทั้งหมดของหน้า ซึ่งเราสามารถแก้ไขและดูว่าโครงสร้างและรูปลักษณ์ของเทมเพลตจะเปลี่ยนแปลงไปอย่างไรแบบเรียลไทม์ แต่การเปลี่ยนแปลงข้อมูลจะไม่ถูกบันทึก ในการดำเนินการนี้ คุณจะต้องแก้ไขไฟล์เทมเพลตด้วยตนเอง
นี่คือลักษณะของแผง
ฉันชี้ลูกศรไปที่แว่นขยายโดยคลิกซึ่งเราจะตรวจสอบโครงสร้างของเทมเพลตและพิจารณาว่าเทมเพลตของเราประกอบด้วยบล็อกใด ฉันเรียกฟังก์ชันนี้ว่าผู้ตรวจสอบ
หลังจากคลิกที่ตัวตรวจสอบแล้ว เราก็สามารถเลื่อนเมาส์ไปรอบๆ หน้าของเราได้ และเราจะเห็นว่าองค์ประกอบทั้งหมดที่เราวางเมาส์เหนือนั้นเริ่มถูกเน้นด้วยพื้นหลังที่มีสี ตามตัวอย่าง ฉันจะแสดงภาพหน้าจอจากบทความเกี่ยวกับการเลือกเทมเพลต ที่นั่นฉันเลื่อนเมาส์ไปที่ชื่อโพสต์
หากเราจำเป็นต้องแทรกโค้ดหลังผลลัพธ์ของบทความของเรา ก็เดาได้ไม่ยากว่าเราต้องตรวจสอบพื้นที่ของเทมเพลตของเราและค้นหาบล็อกที่มีเนื้อหาทั้งหมดของบทความ คุณสามารถค้นหาทั้งจุดสิ้นสุดของบล็อกและจุดเริ่มต้นได้ นั่นคือคุณสามารถตรวจสอบเทมเพลตได้ทั้งจากด้านล่างและด้านบน
แต่นี่คือข้อสังเกตประการหนึ่ง - เราจำเป็นต้องค้นหาไม่เพียงแค่บรรทัดของบทความเท่านั้น แต่ยังต้องค้นหาบล็อกที่มีเนื้อหาอยู่อย่างแม่นยำ เนื่องจากไม่มีบทความในไฟล์เทมเพลต มีเพียงรหัสที่แสดงเนื้อหาและอยู่ในบล็อก อยู่หลังแท็กบล็อกปิด
