บทความล่าสุดนี้เขียนขึ้นเพื่อเน้นย้ำ ข้อมูลที่ทันสมัยเกี่ยวกับการลบลิงก์ที่ไม่จำเป็นออกจากเทมเพลต Blogspot รวมถึงจากธีมใหม่ของ Blogger ดังที่คุณทราบแล้วว่าโค้ดของ Blogger มีการเปลี่ยนแปลงในปี 2018 จึงมีการดำเนินการหลายอย่างกับโค้ดในลักษณะใหม่ นอกจากนี้ยังมีหัวข้อใหม่ ๆ เกิดขึ้นซึ่งมีรูปแบบแตกต่างออกไป เกี่ยวกับการเปลี่ยนแปลงเหล่านี้ เราจะหารือเกี่ยวกับหัวข้อการลบลิงก์
คุณสามารถตรวจสอบบล็อกของคุณว่ามีลิงก์ภายนอกอยู่ในบริการ https://pr-cy.ru/link_extractor/ และ https://seolik.ru/links หรือไม่ อย่าลืมว่าคุณต้องตรวจสอบไม่เพียงแต่หน้าหลักของบล็อก แต่ยังรวมถึงหน้าโพสต์และเพจด้วย ปริมาณมากลิงก์ภายนอกที่เปิดเพื่อสร้างดัชนีจะถูกป้องกัน
เทมเพลตดังกล่าวมีลิงก์ภายนอกมากที่สุด ในบล็อกทดสอบของฉัน เมื่อฉันติดตั้งธีมธรรมดา ฉันตรวจสอบและพบลิงก์ภายนอก 25 ลิงก์ หน้าแรกซึ่งมี 14 รายการที่ได้รับการจัดทำดัชนี
ฉันขอเตือนคุณว่าก่อนที่จะทำการเปลี่ยนแปลงโค้ดเทมเพลต ให้ทำ สำเนาสำรอง!
และนี่คือรหัสเต็ม:
บันทึกการเปลี่ยนแปลงและตรวจสอบการระบุแหล่งที่มาในบล็อก
นี่คือรายการลิงก์ที่ไม่สมบูรณ์ซึ่งถูกเข้ารหัสในไอคอนเครื่องมือ (รหัสบล็อกจะเป็นของคุณ)
- วิดเจ็ต HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
- วิดเจ็ต HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
- ที่เก็บถาวรของบล็อก: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
- ทางลัดของบล็อก: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
- ข้อความยอดนิยม: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
การกำจัดลิงก์เหล่านี้ทั้งหมดเป็นเรื่องง่าย ค้นหาแท็กในเทมเพลตบล็อกของคุณ ปรากฏหลายครั้งตามที่มีวิดเจ็ตในบล็อกของคุณ ลบแท็กที่เกิดขึ้นทั้งหมด
วิธีการลบ:
วิธีที่ 1 ในแท็บออกแบบ แก้ไของค์ประกอบ "โพสต์ในบล็อก" และยกเลิกการเลือกช่องทำเครื่องหมาย "แสดง "แก้ไขด่วน"
วิธีที่ 2 ค้นหาแท็กในเทมเพลตบล็อกของคุณแล้วลบออก บันทึกการเปลี่ยนแปลงของคุณและตรวจสอบบล็อกของคุณเพื่อดูไอคอนและลิงก์
กล่าวคือ:
ฟังก์ชั่น setAttributeOnload (วัตถุ, คุณลักษณะ, val) (
ถ้า (window.addEventListener) (
window.addEventListener("โหลด",
ฟังก์ชั่น())( object = val; ), false);
) อื่น (
window.attachEvent("onload", function())( object = val; ));
}
}
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() (
ถ้า (gapi.iframes && gapi.iframes.getContext) (
gapi.iframes.getContext().openChild((
URL: "https://www.blogger.com/navbar.g?targetBlogID\x3d1490203873741752013\x26blogName\x3dnew\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dLIGHT\x26layoutType\x3dLAYOUTS\x26searchRoot \x3dhttps:// m-ynewblog.blogspot.com /search\x26blogLocale\x3dru\x26v\x3d2\x26homepageUrl\x3dhttps://m-ynewblog.blogspot.com/\x26vt\x3d-3989465016614688571",
โดยที่: document.getElementById("navbar-iframe-container"),
รหัส: "navbar-iframe"
});
}
});
(การทำงาน() (
สคริปต์ var = document.createElement("สคริปต์");
script.type = "ข้อความ/จาวาสคริปต์";
script.src = "//pagead2.googlesyndication.com/pagead/js/google_top_exp.js";
var head = document.getElementsByTagName("หัว");
ถ้า (หัว) (
head.appendChild (สคริปต์);
}})();
ตอนนี้บล็อก Navbar ไม่มีลิงก์ภายนอกที่จัดทำดัชนีได้ แต่ฉันเชื่อว่าสิ่งนี้ องค์ประกอบพิเศษซึ่งไม่มีภาระการใช้งานและควรลบออกจะดีกว่า
ทำโดยใช้ตัวอย่างการแก้ไข โปรไฟล์ Googleบวก. ฉันเตือนคุณว่า กูเกิลพลัสจะถูกชำระบัญชีในวันที่ 2 เมษายน 2019 ดังนั้น หลังจากวันที่นี้ คุณจะต้องทำการเปลี่ยนแปลงอื่นๆ ในโค้ดวิดเจ็ต "เกี่ยวกับฉัน"
ในการตั้งค่าบล็อก ให้ปฏิบัติตามเส้นทางการตั้งค่าบล็อก -> อื่นๆ -> ฟีดไซต์ -> อนุญาตฟีดบล็อก ใช้การตั้งค่าต่อไปนี้:
เราพบ Attribution1 ในเทมเพลตบล็อกสำหรับค้นหาด้วยวิดเจ็ต (รายการวิดเจ็ต) และลบโค้ดพร้อมกับส่วนดังกล่าว ซึ่งคล้ายกับเทมเพลต Blogger แบบเก่า (ดูด้านบน 1)
รหัสทั้งหมดมีลักษณะดังนี้:
เมื่อเวลาผ่านไป ผู้ดูแลเว็บมือใหม่มีคำถามเชิงตรรกะ: วิธีเปลี่ยนสีและสไตล์ของหัวข้อการเขียน, เพิ่มระดับเสียง และทำให้แบบอักษรของหัวข้อเดียวกันใหญ่ขึ้น สิ่งนี้ทำให้ผู้เริ่มต้นหลายคนสับสนเนื่องจากไม่ชัดเจนว่าจะต้องดูอะไรและที่ไหน
แน่นอน คุณสามารถมีส่วนร่วมในการศึกษาเชิงลึกเกี่ยวกับความซับซ้อนทั้งหมดของการสร้างเว็บไซต์ได้ แต่ถึงแม้จะไม่มีโอกาสเป็นไปได้ แต่ก็มีคำถามเชิงตรรกะอีกข้อหนึ่งเกิดขึ้น: คุณต้องการมันหรือไม่?
คุณจะต้องใช้เวลาพอสมควรในการเรียนรู้พื้นฐานของเว็บมาสเตอร์ และเวลาคือเงิน ดังนั้น หากคุณต้องการปรับเปลี่ยนองค์ประกอบบางอย่างของเทมเพลตเล็กน้อย และไม่ทราบวิธีค้นหาโค้ด HTML ที่จำเป็น โดยไม่คำนึงถึงแพลตฟอร์มของไซต์ บทความนี้เหมาะสำหรับคุณโดยเฉพาะ
HTML และ CSS - ความสัมพันธ์จริงๆ แล้ว หัวข้อนี้ควรจะเรียกว่า "วิธีแก้ไขโค้ด CSS" เอาล่ะ เราจะเริ่มต้นด้วย HTML และจบด้วย CSS ประเด็นก็คือหากจำเป็นต้องเปลี่ยนสีหรือแบบอักษรของไซต์ breadcrumbs จะนำไปสู่ไฟล์ CSS
ก่อนอื่น เรามานิยามแนวคิดทั้งสองนี้กันก่อน:
- รหัส HTML เป็นพื้นฐานในการสร้างไซต์ ต้องขอบคุณเบราว์เซอร์ที่เข้าใจว่าองค์ประกอบใดและตามลำดับที่จะแสดงบนหน้าใดหน้าหนึ่ง
- รหัส CSS เป็นภาษาโปรแกรมที่รับผิดชอบในการปรากฏของหน้าเว็บ เป็นรหัสนี้ที่ควรแก้ไขได้หากคุณต้องการเปลี่ยนรูปลักษณ์ของไซต์
จะเห็นได้ชัดว่าหากคุณต้องการเปลี่ยนแปลง เช่น สีของชื่อเรื่องในบทความหรือรายการเมนู จะต้องแก้ไขไฟล์ CSS ไฟล์ใดไฟล์หนึ่ง นี่คือสิ่งที่คุณต้องเข้าใจในระยะเริ่มแรกของการเปลี่ยนแปลงด้วยตัวเอง
รหัส html ของหน้าอยู่ที่ไหน?ฉันจะไม่ปิดบังความจริงที่ว่าในช่วงเริ่มต้นของการคุ้นเคยกับหลักการของการสร้างเว็บไซต์ ฉันไม่ใช่แค่กาน้ำชา แต่ฉันยังเป็นกาโลหะที่เป็นสนิมอีกด้วย ดังนั้นคุณเช่นเดียวกับฉันจะต้องประสบความสำเร็จอย่างแน่นอน
กลับมาที่หัวข้อการเปลี่ยนโค้ดเพจคุณต้องดูโค้ด html ก่อน ฉันจะบอกคุณโดยใช้เบราว์เซอร์ Opera เป็นตัวอย่างเนื่องจากฉันใช้งานเป็นหลัก ฉันรีบแจ้งให้คุณทราบว่าหากคุณต้องการใช้เบราว์เซอร์อื่น คุณไม่ควรปิดหน้านี้ทันที เนื่องจากหลักการตรวจสอบโดยไม่คำนึงถึงเบราว์เซอร์นั้นเกือบจะเหมือนกัน
วิธีการเปลี่ยนรูปแบบส่วนหัวในบทความก่อนหน้านี้ฉันได้พูดคุยเกี่ยวกับ "วิธีลบลิงก์ออกจากส่วนหัวของ Joomla" และวันนี้คุณจะได้เรียนรู้วิธีแก้ไขสิ่งทั้งหมดนี้และทำให้มันน่าสนใจยิ่งขึ้น
สมมติว่าเราต้องเปลี่ยนสีและขนาดของชื่อบทความ โดยคลิกซ้ายที่มันแล้วเลือก "ดูรหัสองค์ประกอบ" ในหน้าต่างที่เปิดขึ้นมา หลังจากนั้นทางด้านซ้ายของหน้าจออักษรอียิปต์โบราณอันน่าอัศจรรย์จะปรากฏขึ้นมาให้เราทราบด้วยความช่วยเหลือในการพิจารณาว่าสุนัขถูกฝังอยู่ที่ไหน ด้วยวิธีนี้ คุณจะสามารถดูและแก้ไของค์ประกอบเกือบทุกส่วนของเทมเพลตได้
ที่ด้านบนสุด ฉันได้เน้นโค้ด HTML ที่รับผิดชอบในการแสดงส่วนหัว h1 ตามค่าเริ่มต้น ระบบจะไฮไลต์ไว้เมื่อทำการตรวจสอบ พื้นหลังสีเทา- เอ่อ นั่นก็เพื่อ ข้อมูลทั่วไป- เราจำเป็นต้องใส่ใจที่ด้านล่างของภาพหน้าจอซึ่งมีสคริปต์ที่รับผิดชอบในการแสดงผลสไตล์ CSS ฉันขอเตือนคุณทันทีว่าขึ้นอยู่กับเทมเพลตชื่อ ไฟล์ซีเอสเอสอาจแตกต่างกันไป แต่โดยปกติจะเป็น style.css หรือ template.css
ดังนั้นเราจึงตัดสินใจเลือกไฟล์แล้ว แต่เราจะรู้ได้อย่างไรว่ามันอยู่ที่ไหน? มันง่ายมาก คุณเพียงแค่ต้องเลื่อนเคอร์เซอร์ของเมาส์ไปเหนือตำแหน่งนั้นด้วย ด้านขวาคำว่า style.css หลังจากนั้นเส้นทางไปยังไฟล์จะปรากฏขึ้นข้างๆ ในเวลาเดียวกัน บรรทัดที่เราต้องแก้ไขจะถูกระบุที่นี่ด้วย อย่างที่คุณเห็นในภาพนี่คือบรรทัดแรก
จุดสำคัญ!
ก่อนทำการเปลี่ยนแปลง ให้ทำสำเนาสำรองของไซต์ เผื่อไว้เผื่อกรณีคุณสมบัติ CSS บางอย่าง ด้านล่างฉันจะให้คุณสมบัติบางอย่างที่คุณสามารถเพิ่มได้การเปลี่ยนแปลงบางอย่าง
และทดลองกับสไตล์
ขนาดตัวอักษร – เปลี่ยนขนาดตัวอักษร
การตกแต่งข้อความ – ขึ้นอยู่กับคำสั่ง ซึ่งรวมถึงการเน้นและขีดเส้นใต้ข้อความ รวมถึงการเน้นด้วยเส้น
ตระกูลฟอนต์ - ตระกูลฟอนต์
น้ำหนักแบบอักษร – การเลือก
สี – สีข้อความ หากไม่มีการเปลี่ยนแปลงใดๆ หลังจากการปรับเปลี่ยน ให้ล้างแคชของเบราว์เซอร์ของคุณ อย่างที่คุณเห็นการเปลี่ยนแปลงรูปร่าง
ส่วนหัวและรีเฟรชการออกแบบไซต์ คุณเพียงแค่ต้องปรับแต่งโค้ด CSS และไม่เปลี่ยนโค้ด html
ขอบคุณสำหรับความสนใจของคุณและพบกันเร็ว ๆ นี้ในหน้าของ Stimylrosta พบในข้อความข้อผิดพลาดทางไวยากรณ์
- กรุณารายงานสิ่งนี้ให้ผู้ดูแลระบบ: เลือกข้อความและกดปุ่มลัด Ctrl+Enter เราปล่อยหนังสือเล่มใหม่ “การตลาดเนื้อหาในเครือข่ายทางสังคม
: วิธีเข้าถึงหัวสมาชิกของคุณและทำให้พวกเขาหลงรักแบรนด์ของคุณ”
สมัครสมาชิก ซอร์สโค้ดของไซต์คือการผสมผสานระหว่างมาร์กอัป HTML, สไตล์ CSS และสคริปต์จาวาสคริปต์
ซึ่งเบราว์เซอร์ได้รับจากเว็บเซิร์ฟเวอร์
วิดีโอเพิ่มเติมในช่องของเรา - เรียนรู้การตลาดทางอินเทอร์เน็ตกับ SEMANTICA สามารถเปรียบเทียบได้กับชุดคำสั่งที่มอบให้กับทหารโดยผู้บังคับบัญชา ลองจินตนาการว่าผู้ฟังไม่เห็นหรือได้ยินเจ้านาย จากมุมมองของพวกเขา กองทัพจะดำเนินการอย่างเป็นอิสระ ในกรณีของเรา ผู้บัญชาการคือเบราว์เซอร์ ส่วนคำสั่งคือซอร์สโค้ด
และทหารเดินทัพก็เป็นผลลัพธ์สุดท้าย ไซต์ถูกจัดเก็บไว้บนเว็บเซิร์ฟเวอร์ ซึ่งจะส่งเพจตามคำขอของผู้ใช้ คำขอกำลังพิมพ์ URL ในแถบที่อยู่ การคลิกลิงก์ หรือคลิกปุ่มส่งบนแบบฟอร์ม ไม่สำคัญว่าหน้าเว็บจะเขียนด้วยภาษาใด ไม่ว่าจะรวมไว้ด้วยหรือไม่- ผลลัพธ์สุดท้ายของอัลกอริทึมฝั่งเซิร์ฟเวอร์คือชุดของแท็ก html และข้อความ
ซอร์สโค้ดของหน้าคือชุดข้อมูลที่ประกอบด้วย:
- มาร์กอัป HTML;
- สไตล์ชีตหรือลิงก์ไฟล์
- โปรแกรมที่เขียนด้วย JavaScript หรือลิงก์ไปยังไฟล์ที่มีโค้ด
เบราว์เซอร์ทั้งสามส่วนนี้ประมวลผล สำหรับเซิร์ฟเวอร์ นี่เป็นเพียงข้อความที่ต้องส่งเพื่อตอบสนองต่อคำขอ
ทำไมเราอาจต้องศึกษาซอร์สโค้ดทุกสิ่งที่เราเห็น เราสามารถวิเคราะห์และนำไปใช้เพื่อแก้ไขปัญหาบางอย่างที่เกิดขึ้นขณะทำงานกับไซต์ โดยเฉพาะอย่างยิ่งเมื่อทำการเพิ่มประสิทธิภาพ เมื่อดูที่ซอร์สโค้ด เราสามารถ:
- ดูเมตาแท็กของไซต์ของคุณหรือของผู้อื่นเพื่อวิเคราะห์
- ดูการมีอยู่หรือไม่มีองค์ประกอบบางอย่างบนเว็บไซต์: เคาน์เตอร์ รหัสประจำตัว ระบบต่างๆสคริปต์บางอย่างและสิ่งอื่น ๆ
- ค้นหาพารามิเตอร์ขององค์ประกอบ: ขนาด, สี, แบบอักษร
- ค้นหาเส้นทางไปยังภาพถ่ายและองค์ประกอบอื่น ๆ ที่อยู่ในหน้า
- สำรวจลิงก์จากหน้า
- ค้นหาปัญหาเกี่ยวกับโค้ดที่รบกวนกระบวนการเพิ่มประสิทธิภาพเว็บไซต์: ปัญหาที่ไม่ได้แก้ไข แยกไฟล์สไตล์ สคริปต์ รหัสไม่ถูกต้อง
สิ่งเหล่านี้เป็นคุณสมบัติพื้นฐาน แต่ในความเป็นจริงแล้ว คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเพจนี้ได้โดยการสามารถอ่านโค้ดได้
วิธีดูซอร์สโค้ดของไซต์จะไม่สามารถทำเช่นนี้ได้อย่างสมบูรณ์ในรูปแบบที่โพสต์บนเซิร์ฟเวอร์จากเบราว์เซอร์ แต่คุณสามารถดูมาร์กอัปทั้งหมดได้ด้วยการคลิกขวาที่หน้า ที่นี่และต่อไป ตัวอย่างของกูเกิลโครเมียม
เลือกตัวเลือก "ดูโค้ดหน้า" และรับรายการทั้งหมดในแท็บแยกต่างหาก
เป็นเพียงข้อความที่คุณต้องวิเคราะห์จึงจะเข้าใจ แต่คุณสามารถรับโค้ดเชิงโต้ตอบได้โดยใช้เครื่องมือสำหรับนักพัฒนา
วิธีค้นหาซอร์สโค้ดของหน้าเว็บไซต์คลิกที่ไอคอนเมนูในเบราว์เซอร์ ส่วนใหญ่มักจะอยู่ทางด้านขวาและดูเหมือนจุดหรือแถบสามจุด
ในส่วน เครื่องมือเพิ่มเติมเลือก "เครื่องมือสำหรับนักพัฒนา"
หน้าต่างจะเปิดขึ้นเพื่อแสดงสถานะการใช้งานของโค้ด ซึ่งหมายความว่าเมื่อคุณคลิกที่มาร์กอัป สไตล์องค์ประกอบจะปรากฏขึ้นข้างๆ และบล็อกที่เลือกจะถูกเน้นบนหน้า
ในแท็บ "แหล่งที่มา" คุณสามารถดูเนื้อหาของไฟล์บางไฟล์ได้: สคริปต์ แบบอักษร รูปภาพ
ในแท็บ "ความปลอดภัย" คุณสามารถตรวจสอบใบรับรองของเว็บไซต์ได้
แท็บ “การตรวจสอบ” จะช่วยคุณตรวจสอบทรัพยากรที่โพสต์บนโฮสติ้ง
หากตำแหน่งของแผงทางด้านขวาไม่สะดวกคุณสามารถคลิกจุดสามจุดแล้วเปลี่ยนโดยเลือกรายการที่ต้องการ
วิธีดูเมตาแท็กเอกสาร HTML ทุกฉบับมีแท็กโครงสร้าง นี่คือบางส่วนของพวกเขา:
องค์ประกอบได้รับการออกแบบเพื่อแบ่งเขตส่วนต่างๆ บนเพจตามตรรกะ หากจำเป็น องค์ประกอบเหล่านี้จะได้รับการออกแบบโดยใช้สไตล์ มีข้อความที่ปรากฏอยู่บนหน้า แต่ใน แท็กหัวมีข้อมูลการบริการ. เมตาแท็กใช้เพื่อระบุ ทุกสิ่งที่เขียนในนั้นมีไว้สำหรับเซิร์ฟเวอร์และเครื่องมือค้นหา
เนื้อหาของพวกเขาไม่สามารถค้นพบได้ด้วยวิธีอื่นใด
มาดูแท็ก Link กันดีกว่า ด้วยความช่วยเหลือ จะมีการระบุลิงก์ไปยังไฟล์ที่รวมไว้ภายนอก หากต้องการคุณสามารถดูเนื้อหาและบันทึกลงดิสก์ได้ เมื่อต้องการทำเช่นนี้ ให้เลื่อนตัวชี้ไปยังที่อยู่แล้วกด RMB เลือก "เปิดในแท็บใหม่"
จะเปิดในแท็บใหม่ ไฟล์ที่ระบุซึ่งคุณสามารถดูหรือบันทึกได้
วิธีดูซอร์สโค้ดของเพจเพื่อดีบักสคริปต์ในกรณีนี้การเปิดเพจจะสะดวกที่สุด เครื่องท้องถิ่น- หากคุณต้องการเพียงแก้ไขมาร์กอัป สไตล์ และสคริปต์ คุณก็สามารถทำได้โดยตรงจากโฟลเดอร์ โค้ด HTML จะถูกดูในลักษณะเดียวกัน นี่คือข้อผิดพลาด รหัสจาวาสคริปต์สามารถดูได้ในแท็บ "คอนโซล" ซึ่งจะแสดงคำอธิบายของข้อผิดพลาดและหมายเลขบรรทัดที่เกิดข้อผิดพลาด
สามารถดูไวยากรณ์ได้โดยตรงในโค้ด นี่คือสิ่งที่แท็บ "แหล่งที่มา" มีไว้เพื่อ
วิธีดูโค้ดขององค์ประกอบเฉพาะสำหรับ หน้าใหญ่กับ จำนวนมากองค์ประกอบที่หาได้ยาก รหัสที่จำเป็นตลอดทั้งมาร์กอัป ในกรณีนี้คุณควรใช้ ทีมพิเศษเมนูบริบท เลื่อนเมาส์ไปเหนือส่วนแล้วกด RMB เลือกคำสั่ง "ดูโค้ด"
หน้าต่างเดียวกันจะเปิดขึ้น แต่โฟกัสไปที่วัตถุที่เลือก
ประวัติย่อเราบอกคุณแล้วว่าซอร์สโค้ดของหน้าคืออะไร ก็เพียงพอแล้วที่จะเชี่ยวชาญความรู้พื้นฐานเกี่ยวกับ HTML และ CSS และใช้งาน เครื่องมือที่สะดวกนักพัฒนาซอฟต์แวร์ คุณสามารถดีบักเอกสาร HTML ของคุณเองได้
การดูรหัสทรัพยากรบนอินเทอร์เน็ตจะช่วยให้คุณเรียนรู้ไม่เพียงแต่จากเท่านั้น ประสบการณ์ของตัวเองแต่ยังใช้ตัวอย่างการทำงานจริงด้วย และสำหรับผู้เชี่ยวชาญ SEO เมตาแท็กจะมีประโยชน์ ซึ่งเป็นข้อมูลที่สามารถบอกอะไรได้มากมายเกี่ยวกับไซต์
Ctrl + U จะดูซอร์สโค้ดขององค์ประกอบได้อย่างไร?คลิกขวาที่องค์ประกอบของหน้าที่สนใจ
กูเกิลโครม: “ดูรหัสองค์ประกอบ”
Opera : “ตรวจสอบองค์ประกอบ”
FireFox : “วิเคราะห์องค์ประกอบ”
ในเบราว์เซอร์อื่นๆ ให้มองหารายการเมนูที่มีความหมายคล้ายกัน
สวัสดีทุกคน!
โดยเฉพาะอย่างยิ่งฉันได้วางประเด็นทั้งหมดไว้ในตอนต้นของบทความสำหรับผู้ที่กำลังมองหาคำตอบอย่างรวดเร็ว
ข้อมูลนี้อาจเป็นที่รู้จักสำหรับคนจำนวนมาก แต่เนื่องจากฉันเขียนถึงบล็อกเกอร์มือใหม่ โปรแกรมเมอร์เว็บ และผู้ค้นหาแร่อื่นๆ บทความอ้างอิงนี้จึงเป็นสิ่งที่ต้องมี
ในอนาคตคุณจะได้ศึกษาซอร์สโค้ดของหน้าและองค์ประกอบแต่ละอย่างอย่างแน่นอน
เรามาดูกันดีกว่า ตัวอย่างที่เฉพาะเจาะจงคุณจะใช้การดูซอร์สโค้ดของเพจได้อย่างไร
เช่นเราต้องการดูว่าอะไร คำหลัก(คำหลัก) ใช้สำหรับ หน้าเฉพาะ- ไปที่หน้าเว็บที่เราสนใจแล้วกด Ctrl+U ซอร์สโค้ดของหน้านี้จะเปิดในหน้าต่างแยกต่างหากหรือในแท็บแยกต่างหาก กด Ctrl+F เพื่อค้นหาส่วนของโค้ด ใน ในกรณีนี้พิมพ์คำว่า “ในช่องค้นหา” คำหลัก"คุณจะถูกเปลี่ยนเส้นทางไปยังโค้ดที่มีเมตาแท็กนี้โดยอัตโนมัติ และคำที่ค้นหาจะถูกไฮไลต์
โดยการเปรียบเทียบ คุณสามารถค้นหาและศึกษาส่วนย่อยของโค้ดอื่นๆ ได้
การดูซอร์สโค้ดทั้งหมดของหน้านั้นไม่สะดวกนักในกรณีส่วนใหญ่ ดังนั้นจึงเป็นไปได้ที่จะดูโค้ดในทุกเบราว์เซอร์ แต่ละองค์ประกอบหรือชิ้นส่วน
ลองใช้ตัวอย่างเฉพาะของการดูโค้ดขององค์ประกอบ เช่นลองดูว่าลิงค์มีไหม แอตทริบิวต์ nofollow- คลิก คลิกขวาเลื่อนเมาส์ไปที่ลิงก์ที่เราสนใจและในเมนูแบบเลื่อนลง เมนูบริบทคลิกซ้ายที่รายการ “ดูรหัสองค์ประกอบ” หรือที่คล้ายกัน (ขึ้นอยู่กับเบราว์เซอร์ของคุณ) ด้านล่างในหน้าต่างพิเศษสำหรับการวิเคราะห์โค้ด เราได้รับสิ่งที่คล้ายกัน
เราจะเห็นว่าโค้ดลิงก์มี rel=”nofollow” ซึ่งหมายความว่า PR จะไม่ "รั่วไหล" ผ่านลิงก์นี้ เราจะพูดถึงเรื่องนี้โดยละเอียดในบทความต่อไปนี้ ตอนนี้สิ่งสำคัญคือตอนนี้คุณรู้วิธีดูซอร์สโค้ดของเพจและซอร์สโค้ดของแต่ละองค์ประกอบแล้ว
ขนาด,สีของบาง องค์ประกอบที่สำคัญบล็อก - เช่น ชื่อของบล็อกหรือโพสต์ แท็กเพิ่มเติมและสิ่งที่คล้ายกัน ฉันค้นหาโค้ดที่ต้องการด้วยตนเอง โดยทดลองกับโดเมนทดสอบ โดยอิงจากบทความที่เขียนในภายหลัง
และเมื่อเร็ว ๆ นี้ฉันต้องเปลี่ยนสีของลิงก์ เมื่อได้อ่านวรรณกรรมเกี่ยวกับประเด็นนี้แล้วฉันก็ตระหนักได้ สิ่งง่ายๆ: ทุกคนยกตัวอย่างจาก เทมเพลตของตัวเองแต่เราทุกคนมีเทมเพลตที่แตกต่างกัน และจะดีถ้าโค้ดจากตัวอย่างคล้ายกันเล็กน้อย: โดยไม่ต้องบ่น ฉันจะยังคงค้นหามันโดยการค้นหา - โดยการสุ่ม
หมายเลขใช้งานไม่ได้กับรหัสลิงก์ ทุกคนชี้เส้นทางที่แตกต่างกันโดยสิ้นเชิง ฉันสงสัยว่ามีเครื่องมือที่ง่ายและแม่นยำในการค้นหาโค้ด html ที่จำเป็นบนเว็บไซต์ใดๆ หรือไม่
บล็อกเกอร์หลายคนแม้จะมีประสบการณ์แล้วก็ยังประสบปัญหาในการปรับเปลี่ยนเทมเพลตเล็กน้อย ไม่มีอะไรผิดในเรื่องนี้ เพราะทุกคนมีความสนใจและเป้าหมายในการสร้างเว็บไซต์เป็นของตัวเอง หากคุณต้องการเปลี่ยนแปลงเทมเพลตเล็กน้อย เช่น เปลี่ยนส่วนหัว ชื่อบทความและส่วนต่างๆ สีและขนาดของแบบอักษรและลิงก์ โดยปกติแล้วจะเพียงพอที่จะเรียนรู้หลักการง่ายๆ ซึ่งจะกล่าวถึงในบทความนี้ แต่ก็มีกรณีที่ซับซ้อนซึ่งต้องอาศัยความลึกกว่านี้เช่นกันการเรียนรู้ HTML
และ CSS หรือความช่วยเหลือจากผู้เชี่ยวชาญ
วันหนึ่ง คนรู้จักคนหนึ่งขอให้ฉันค้นหาตำแหน่งที่จะเปลี่ยนสีของแผงหมวดหมู่ในเทมเพลตของเขา อัปโหลดหัวข้อไปยังโดเมนย่อยทดสอบ การตั้งค่าสำหรับองค์ประกอบนี้ไม่ได้จัดเก็บไว้ใน style.css แต่อยู่ในไฟล์อื่น บุคคลจึงไม่สามารถค้นหาได้วิธีค้นหาและเปลี่ยนโค้ด html และ css ของไซต์ ถ้าไม่รัก.บทความยาว สำหรับคุณในตอนท้ายของบทความจะมีวิดีโอสอนที่บอกคุณว่าคุณสามารถดูโค้ด html ของไซต์ได้อย่างไรโดยใช้แผ่นจดบันทึก ++ และทำการเปลี่ยนแปลงการออกแบบเทมเพลตใด ๆ โดยใช้ตัวอย่างวิธีเปลี่ยนสีแบบอักษร ในวิดีโอมีรายละเอียดปลีกย่อยอื่นๆ ในการจัดการบล็อก และสำหรับผู้ที่ใกล้ชิดและชัดเจนกับข้อความด้านล่างนี้การวิเคราะห์โดยละเอียด
ธีมพร้อมภาพหน้าจอ
ข้อกำหนดและแนวคิด ตั้งชื่อบทความว่า “How to findรหัส CSS “ แต่ฉันตัดสินใจใช้ชื่อที่ "ผิด" เพราะโดยพื้นฐานแล้วคำตอบสำหรับคำถามนี้พบได้ใน html CSS และ HTML เป็นสิ่งที่แตกต่างกันมาก แม้ว่าจะเป็นสองส่วนของระบบเดียวกันก็ตาม มีมากมายบนอินเทอร์เน็ตบทความทางเทคนิค
- นี่ก็เพียงพอแล้วที่เราจะเข้าใจว่า:
- HTML - รับผิดชอบโครงสร้างของไซต์ (สิ่งที่ตามมาอะไรตามลำดับอะไร ฯลฯ ) นี่คือพื้นฐานในการสร้างไซต์ ถ้าเราเปรียบเทียบกับบ้านแล้วนี่คือแผนผังการจัดห้อง
CSS เป็นผู้รับผิดชอบในการออกแบบ (แบบอักษร ขนาด สี ฯลฯ) นี่คือสไตล์ทั่วไปของบ้านและสไตล์ของห้องแต่ละห้อง: จะมีวอลเปเปอร์ประเภทใด, โคมไฟ, ผ้าม่าน, เฟอร์นิเจอร์ ดังนั้นเอกสารที่ใช้เขียนโค้ด CSS จึงเรียกว่า "สไตล์ชีต" และหากคุณสงสัยว่าจะเปลี่ยนแปลงได้อย่างไร เช่น สีของชื่อไซต์ ขนาดตัวอักษรในข้อความ หรือสีของส่วนหัวในแถบด้านข้าง คุณต้องค้นหาทั้งหมดนี้ในตารางสไตล์ CSS
ฉันชอบทำให้สิ่งที่ซับซ้อนเป็นเรื่องง่าย จำได้ว่านานมาแล้วตอนมีรถคันแรก มันเก่ามาก สายไฟเน่า ฟิวส์ขาดบ่อย และทุกครั้งที่ลากไปปั๊มน้ำมัน ลองนึกภาพดูว่าเสียเงินไปเท่าไหร่ ทดแทนตนเองเมื่อปรากฎว่าต้องเสียเงิน
วันหนึ่งฉันดูว่าอาจารย์ทำอะไรกันแน่ ฉันยังไม่รู้ว่าฟิวส์ทำงานอย่างไร แต่ฉันรู้ว่าจะต้องเปลี่ยนที่ไหน) ฉันจะไม่ซ่อมมอเตอร์ด้วยตัวเอง และการเปลี่ยนฟิวส์ก็ไม่ใช่เรื่องยาก เช่นเดียวกับเว็บไซต์
หากคุณไม่ต้องการเป็นโปรแกรมเมอร์ ก็ไม่จำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับการเขียนโปรแกรม มีความชัดเจนเพียงพอที่จะเข้าใจว่าอะไรมีไว้เพื่ออะไร จะค้นหาได้ที่ไหน และจะเปลี่ยนแปลงได้อย่างไร จะดีกว่าถ้าเปลี่ยนสิ่งที่คุณทำได้ด้วยตัวเองและปล่อยให้ทุกอย่างเป็นหน้าที่ของผู้เชี่ยวชาญ ในบทความเกี่ยวกับมี ลิงค์ที่มีประโยชน์ในหัวข้อนี้
คุณจำเป็นต้องเป็นผู้เชี่ยวชาญในทุกสิ่งหรือไม่?มักจะมีการพูดคุยกันในบล็อก SEO ว่าผู้เริ่มต้นจำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ HTML หรือดีกว่านั้นคือเรียนรู้วิธีเขียนเว็บไซต์ด้วยตนเองเพื่อให้ทุกอย่างมีเอกลักษณ์เฉพาะตัว. ฉันไม่รู้ - สำหรับเขาแต่ละคน และนี่คือสิ่งที่ใกล้กว่าใครอยู่ใกล้กว่า ฉันสนใจมากกว่านี้อีกหน่อย ตอนนี้ฉันจึงเรียนรู้เพิ่มเติมจากวลาดิมีร์ ในเดือนพฤศจิกายนของปีนี้ Vladimir เปิดบล็อกของตัวเอง บล็อกของเขาสร้างขึ้นด้วยวิธีที่ง่ายที่สุด เทมเพลตฟรีเขาเปลี่ยนแปลงเพียงเล็กน้อยเพื่อให้เหมาะกับตัวเอง
หลังจากผ่านไป 10 วันบล็อกก็ขึ้นอันดับที่ 104 ในการจัดอันดับไซต์ Runet ทั้งหมดโดยมีปริมาณการเข้าชมประมาณ 1.5 พันคนต่อวัน ในอีก 10 วัน แล้วมีเรื่องอะไรล่ะ? Vladimir เชี่ยวชาญเรื่อง HTML เป็นอย่างดี และสามารถสั่งซื้อและซื้อเทมเพลตที่เป็นเอกลักษณ์ให้ตัวเองได้ ดังนั้นคุณควรเข้าใจว่าความลับไม่ได้อยู่ในเทมเพลต แต่อยู่ที่ประโยชน์ของข้อมูล
รหัส html ซ่อนอยู่ที่ไหน?ขออภัยที่พูดนอกเรื่อง กลับไปที่รหัสของเรากันดีกว่า) สมมติว่าคุณต้องการเปลี่ยนสีตัวอักษรของชื่อบล็อก ลองดูตัวอย่างไซต์ทดสอบของฉัน
สิ่งสำคัญ: อย่าสับสนกับการดูรหัสหน้า! ตอนนี้เราไม่ต้องการทั้งหน้าแล้ว แค่มีองค์ประกอบแยกต่างหาก
คลิกที่มัน - หน้าต่างดูโค้ดจะปรากฏขึ้นที่ด้านล่างของเบราว์เซอร์:
บรรทัดโค้ดที่เรากำลังเปลี่ยนแปลงจะถูกเน้นด้วยสีแดง
แต่บริเวณที่เน้นด้วยสีน้ำเงินประกอบด้วยสิ่งที่เรากำลังมองหา ที่นี่คุณจะพบบรรทัดโค้ด (ไม่ใช่โดยประมาณ) ที่เกี่ยวข้องกับแบบอักษร สี ขนาด การไฮไลต์ ฯลฯ วิธีนี้ทำให้คุณสามารถค้นหาโค้ดขององค์ประกอบใดๆ ของเทมเพลตใดก็ได้
ค้นหาบรรทัดที่ต้องการในบล็อกที่เน้นด้วยสีน้ำเงิน มีแถบเลื่อนทางด้านขวา คุณสามารถเลื่อนดูและค้นหาบรรทัดที่ต้องการได้
หลักการทั่วไปในการหาสิ่งของ:
ชื่อแบบอักษร - ในบรรทัด FONT FAMILY
ขนาดตัวอักษร - ในบรรทัดขนาดตัวอักษร
สีตัวอักษร - ในบรรทัด COLOR
ต่อไปนี้เป็นบรรทัดหลักสามบรรทัดที่ชื่อ ขนาด และสีแบบอักษรขององค์ประกอบใดๆ เปลี่ยนไป ตรงแถวเลย สไตล์ CSSมีการกำหนดตำแหน่งของบรรทัดในเอกสาร หากคุณต้องการเปลี่ยนองค์ประกอบอื่น ๆ (เช่นคุณต้องค้นหาว่าบรรทัดอยู่ที่ไหนซึ่งคุณสามารถเปลี่ยนสีของแถบเมนูหรือสีของลิงก์ได้) ทุกอย่างจะเหมือนกันทุกประการ
ความสนใจ:
เส้นที่เราจะคัดลอกจะถูกเน้นด้วยสีแดงในรูป
เพื่อให้คุณสามารถค้นหาได้ในสไตล์ชีตในภายหลัง
4. คัดลอกบรรทัด เนื่องจากในตัวอย่างนี้ เราต้องการเปลี่ยนสีของชื่อไซต์ ฉันจึงคัดลอกเส้นที่เน้นในสี่เหลี่ยมสีแดงในภาพที่สอง ในเทมเพลตของฉัน มีหน้าที่เปลี่ยนสีชื่อไซต์:
#header h1 a, #header h1 a:visited (
ค้นหาบรรทัดที่ต้องการในไฟล์ “สไตล์ชีต (style.css)” สิ่งนี้ทำไปแล้วในแผงผู้ดูแลระบบ ฉันขออย่างยิ่งว่า แม้ว่าจะไม่มีความมั่นใจและความเข้าใจที่สมบูรณ์ แต่การทดลองทั้งหมดควรดำเนินการบนโดเมนย่อยทดสอบเพื่อที่จะยกเว้น
ไปที่แผงผู้ดูแลระบบ: คอนโซล - ลักษณะที่ปรากฏ - เครื่องมือแก้ไข ในแถบด้านข้างขวาเราจะพบไฟล์ STYLE TABLE (STYLE.CSS) ให้เปิดขึ้นมา
ตอนนี้เปิดแถบค้นหา ปุ่ม CTRL+ F: หน้าต่างบรรทัดว่างจะปรากฏในหน้าต่างด้านบน เราวางลงในบรรทัดที่เราคัดลอกไว้ในขั้นตอนที่ 4
และคุณจะเห็นว่าเส้นนี้จะถูกเน้นในสไตล์ชีตอย่างไร (เป็นสีส้มในภาพ):
เราทำการเปลี่ยนแปลงองค์ประกอบ ในกรณีของเรา เรากำลังเปลี่ยนสีตัวอักษร ดังนั้นในบรรทัด COLOR เราจึงแทนที่ค่าอื่น - สีที่เราต้องการ ในตัวอย่างสีคือสีดำ ความหมายคือ:
คุณสามารถเลือกสีในบริการจานสีเว็บใดก็ได้: พิมพ์ “จานสีเว็บ” ในเครื่องมือค้นหาและเลือกสีที่คุณต้องการ เลือกสีและคัดลอก ค่าดิจิทัลและเปลี่ยนอันเก่าอย่างระมัดระวัง หลังจากนั้นเราคลิก UPDATE FILE แล้วไปดูสิ่งที่เกิดขึ้น
หากไม่แสดงการเปลี่ยนแปลงในชั่วโมงที่ผ่านมาและไปที่หน้าอีกครั้ง - คราวนี้ควรแสดงทุกอย่าง
ใช้เวลานานในการอธิบาย แต่ในทางปฏิบัติทุกอย่างเสร็จเร็ว โดยเฉพาะเมื่อทักษะเริ่มแรกปรากฏขึ้น
รายละเอียดเพิ่มเติมเกี่ยวกับวิธีเปลี่ยนองค์ประกอบบางอย่าง:
นั่นคือทั้งหมดสำหรับวันนี้ ฉันจะไม่รบกวนคุณเรื่องรหัสอีกต่อไป ฉันหวังว่าตอนนี้คุณเองก็สามารถค้นหาและเปลี่ยนแปลงองค์ประกอบใด ๆ ของโค้ด html หรือโค้ด css ได้อย่างง่ายดาย - ผู้เชี่ยวชาญอาจยกโทษให้ฉันที่ทำให้ง่ายขึ้น และหากคุณไม่เข้าใจก็ยังคงไปที่หน้านั้น อย่าเสียเวลาไปกับเรื่องไร้สาระ
ฉันขอแนะนำให้ดูวิดีโอของ Artem Abramovich เกี่ยวกับวิธีการค้นหาและค้นหาคำหรือองค์ประกอบใด ๆ ในธีม/เทมเพลตใด ๆ สำหรับกลไกใด ๆ (wordpress, joomla ฯลฯ ) และแทนที่ด้วยสิ่งที่คุณต้องการ:
คุณอาจสนใจที่จะรู้: