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

วิธีใส่รหัสตัวนับ

สวัสดีทุกคน!

วันนี้ฉันตัดสินใจที่จะพูดถึงหัวข้อที่จะไม่มีวันหมดความเกี่ยวข้องในหมู่ผู้สร้างเว็บไซต์รุ่นเยาว์

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

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

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

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

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

ตอนนี้ฉันจะอธิบายทุกอย่างโดยละเอียดในรูปแบบข้อความ

ไฟล์ที่รับผิดชอบในการแสดงผลหน้าแต่ละประเภท

หากคุณได้อ่านบทความมากมายในบล็อกอื่น ๆ เกี่ยวกับการปรับใช้ฟังก์ชันบางอย่างโดยใช้โค้ด (สคริปต์) ฉันมั่นใจ 100% ว่าคุณเคยเห็นวลีเช่น:

• วางรหัสนี้ลงในไฟล์ที่รับผิดชอบเอาต์พุต หน้าแรก;
• วางรหัสนี้ลงในไฟล์ที่รับผิดชอบในการส่งออกบันทึกและอื่น ๆ

มีไฟล์จำนวนมากที่คุณอาจต้องใส่โค้ดลงไป แต่ไฟล์เหล่านี้คืออะไร? มันง่ายมาก

1. เอาท์พุทโฮมเพจ - index.php;
2. ผลลัพธ์ของบันทึก - ไฟล์ single.php;
3. เอาต์พุตเพจ - ไฟล์ page.php;
4. ผลลัพธ์ของไฟล์เก็บถาวรและหมวดหมู่ - archive.php;
5. เอาต์พุตส่วนท้าย - footer.php;
6. เอาต์พุตหน้าการค้นหา - search.php;
7. เอาต์พุตแถบด้านข้าง - sidebar.php;
8. ไฟล์สไตล์ - style.css;
9. ไฟล์เอาต์พุตหน้า 404 คือ 404.php

ตอนนี้เมื่อพวกเขาบอกคุณว่าคุณต้องวางโค้ดลงในไฟล์ดังกล่าว คุณจะรู้ว่าจะต้องดูที่ไหน

สิ่งที่เหลืออยู่คือการตอบคำถาม: จะกำหนดตำแหน่งที่ถูกต้องในแต่ละไฟล์ได้อย่างไร?

การกำหนดตำแหน่งที่จะแทรกโค้ด

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

ตำแหน่งแรกซึ่งเหมือนกันสำหรับเทมเพลตทั้งหมด คือพื้นที่ในไฟล์ Header.php เหล่านี้คือแท็กเปิดและปิด .

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

แท็กเหล่านี้อยู่ที่ด้านบนสุดของไฟล์ Header.php

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

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

ตำแหน่งที่สองซึ่งเหมือนกันสำหรับเทมเพลตทั้งหมดนั้นอยู่ในไฟล์ที่รับผิดชอบเอาต์พุตของส่วนท้าย - footer.php

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

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

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

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

อย่างที่คุณเห็น ฉันแสดงสคริปต์ทั้งหมดในพื้นที่นี้ ก่อนแท็กปิด

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

ฉันหวังว่าเมื่อพวกเขาบอกให้คุณวางโค้ดลงในพื้นที่เหล่านี้ คุณจะทำได้โดยไม่มีปัญหาใดๆ

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

• แสดงโพสต์ที่คล้ายกัน
• เอาท์พุทแบบฟอร์มการสมัครสมาชิก;
• การแสดงปุ่มโซเชียลและอื่นๆ

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

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

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

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

• กูเกิลโครม- การดูรหัสองค์ประกอบ
• Firefox - สำรวจองค์ประกอบ;
• Opera - ตรวจสอบองค์ประกอบ

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

เข้าไปดูโค้ดองค์ประกอบ (Google Chrome) คลิกขวาที่พื้นที่ว่างของหน้า

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

นี่คือลักษณะของแผง

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

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

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

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

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

ตามตัวอย่าง ฉันได้สร้างบทความใหม่ที่มีเนื้อหาขนาดเล็กเพื่อแสดงให้เห็นว่าจะมีการเน้นอย่างไร บล็อกนี้.

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

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

อย่างที่คุณเห็น บล็อกนี้มีชื่อเหมือนกับในคำแนะนำเครื่องมือโฮเวอร์ทุกประการ

เมื่อเราทราบชื่อของบล็อกที่แสดงส่วนหลักของบทความ เราก็สามารถไปที่ไฟล์ที่ต้องการและแทรกโค้ดที่เราต้องการหลังบล็อกนี้ ตัวอย่างเช่น ลองใช้ไฟล์เอาต์พุตการบันทึก (single.php)

ฉันเปิดมันในตัวแก้ไข Notepad และมองหาบรรทัดในโค้ดที่ขึ้นต้นเหมือนกับในแผงมุมมองโค้ดองค์ประกอบ

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

ฉันเพิ่งใส่ปุ่มโซเชียลลงไปที่นั่นพร้อมกับแบบฟอร์มสมัครสมาชิกเพื่อรับการอัปเดต

นี่คือลักษณะที่ปรากฏบนหน้าเว็บ

เช่นเดียวกับการแทรกลงในไฟล์เทมเพลตอื่นๆ (เพจ หมวดหมู่ ไฟล์เก็บถาวร...)

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

เกี่ยวกับการกำหนดสถานที่ในไฟล์เทมเพลตสำหรับการแทรกลงในไฟล์ที่ต้องการในภายหลังเราได้คิดออกแล้ว

เหลือวินาทีสุดท้ายแล้วซึ่งควรค่าแก่การอุทิศ ณ จุดนี้

มีการตั้งค่าบางอย่างที่ต้องมีการแทรกแซงในไฟล์ Functions.php ของเทมเพลต แต่คุณต้องเข้าใจวิธีใส่โค้ดลงไปด้วย

ตามกฎแล้วในทุกบล็อกพวกเขาเขียนว่าการแทรกควรทำที่ส่วนท้ายสุดของไฟล์ก่อนแท็กปิด?>

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

ในกรณีนี้ฉันเสนอให้ทำสิ่งที่ตรงกันข้าม - ใส่ลงในโค้ดที่จุดเริ่มต้นของไฟล์ก่อนแท็กเปิด ดูภาพด้านล่าง

แท็กเปิดจะเน้นด้วยสีแดง และโค้ดที่แทรกด้วยสีน้ำเงิน

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

แค่นั้นแหละ. หากจู่ๆ คุณพบสถานการณ์เดียวกันกับแท็กปิดที่หายไปในไฟล์ funsctions.php คุณจะรู้ว่าต้องทำอย่างไร

การกำหนดสไตล์การออกแบบในเทมเพลต

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

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

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

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

ดังนั้นให้เปิดไฟล์สไตล์ style.css และมองหาบรรทัด 890 ในกรณีของฉัน

ที่นี่คุณสามารถแก้ไขได้ บันทึกไฟล์และอัปโหลดไปยังโฮสติ้งของคุณ

โปรดทราบว่าฉันแก้ไขไฟล์ทั้งหมดในคอมพิวเตอร์ของฉัน ในกรณีนี้ฉันใช้ โปรแกรมภายนอกซึ่งทำให้สามารถยกเลิกการเปลี่ยนแปลงได้หากมีปัญหาเกิดขึ้น เช่นเดียวกับการทดลองต่างๆ ที่มีโค้ดและสคริปต์ - ทั้งหมดบน

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

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

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

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

ขอแสดงความนับถือ Konstantin Khmelev

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

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

และตอนนี้ คนสวยที่รักของฉัน เรื่องราวได้เริ่มต้นขึ้นแล้ว

อาจมีคำถามที่สมเหตุสมผล: คุณจำเป็นต้องกังวลกับการใส่โค้ดจริง ๆ หรือไม่? ทำไมคุณต้องทำการเน้นโค้ดบางประเภท และทำไมคุณไม่สามารถวางมันเหมือนกับข้อความได้ เป็นต้น

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

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

วิธีแทรกโค้ด html ลงในเนื้อหาของบทความให้สวยงามและถูกต้อง

ตัวเลือกหมายเลข 1 – การเน้นโค้ดผ่านปลั๊กอิน WP-Syntax

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

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

หากคุณติดตั้งทุกอย่าง ปุ่ม "โค้ด" ใหม่จะปรากฏบนแผงตัวแก้ไขของคุณ

หากต้องการแทรกโค้ดผ่านปลั๊กอินนี้ คุณต้องแทรกโค้ดในโหมดภาพ (ปกติที่คุณพิมพ์ข้อความ) ก่อน เลือกด้วยเมาส์ จากนั้นคลิกปุ่ม "โค้ด" และเลือกภาษาที่ตรงกับโค้ดของคุณจากเมนูแบบเลื่อนลง รายการลง ในเวลาเดียวกัน คุณสามารถตั้งค่าการกำหนดหมายเลขของบรรทัดได้โดยระบุหมายเลขแรกใน Line Number หลังจากเลือกแล้ว คลิกแทรก

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

หากคุณไม่ได้ติดตั้งส่วนปุ่ม WP-Syntax คุณจะต้องใช้ชุดรหัสนี้ในการแทรกโค้ด:

กรอกรหัสของคุณที่นี่

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

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

หลังการติดตั้งคุณจะมีรายการเมนู การตั้งค่า > SyntaxHighlighter ซึ่งการตั้งค่าทั้งหมดจะเป็น ใช่ ฉันลืมบอกว่าปลั๊กอินนี้เป็นภาษาอังกฤษและไม่ใช่ภาษารัสเซีย - ข้อเสียเปรียบ หากมีสิ่งใดไม่ชัดเจนให้ใช้การแปลหน้า

การตั้งค่าปลั๊กอินสามารถปล่อยให้เป็นค่าเริ่มต้นได้ - ใช้งานได้ หรือคุณสามารถตั้งค่าตามภาพพร้อมตัวอย่างการตั้งค่าของฉัน:

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

หากต้องการแทรก html หรือ รหัส PHPหากต้องการบันทึกไซต์ด้วยปลั๊กอินนี้ คุณจะต้องใช้โครงสร้างอย่างใดอย่างหนึ่งจากตัวอย่างในหน้าการตั้งค่าปลั๊กอิน (ที่ด้านล่างสุด):

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

ป้อนรหัสยาวของคุณที่นี่

ตัวเลือกหมายเลข 3 – แทรกโค้ด html หรือ php โดยไม่ต้องใช้ปลั๊กอิน

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

ใส่รหัสของคุณที่นี่

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

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

ฉันคิดว่าตอนนี้ตัดสินใจว่าจะแทรกโค้ด html ลงในบล็อกอย่างสวยงามได้อย่างไร

ฉันจะจบคำโวยวายของฉันที่นี่ ฉันหวังว่าฉันจะเป็นประโยชน์ต่อคุณในวันนี้ ขอบคุณสำหรับการอ่าน

แง่บวกเล็กน้อย:

ยินดีต้อนรับการคลิกที่ปุ่มโซเชียลและแสดงความคิดเห็น!

กดปุ่มบอกเพื่อนของคุณเกี่ยวกับบทความ - สิ่งนี้จะนำไปสู่เงิน!

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

มีอีกวิธีหนึ่งก็คือให้คุณแทรกอะไรก็ได้ รหัส HTMLไปยังหน้าเว็บใดก็ได้

นี่คือแท็ก - หลักการคือ: ประการแรก จากนั้นรหัสของคุณ- ผมขอยกตัวอย่างให้คุณฟัง รหัส HTML ของคุณที่ไหน

• style มีหน้าที่รับผิดชอบเกี่ยวกับรูปแบบ ขนาด สีของข้อความภายในแท็ก
• ระยะขอบ: 10px; ขนาดเยื้อง
• ความกว้าง: 300px; ขนาดความกว้าง
• ความสูง: 120px; ขนาดความสูง

ป.ล. ฝึกสมองสักหน่อย

กบสามตัวกำลังนั่งอยู่บนฝั่งสระน้ำ หนึ่งในนั้นตัดสินใจกระโดดลงสระน้ำ เหลือกบกี่ตัวบนฝั่ง?

คุณอาจสนใจสิ่งนี้:

• วิธีเชื่อมต่อจดหมายข่าวกับเว็บไซต์