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

สร้างแก้ไขและแนบไฟล์ CSS

อัปเดตล่าสุด: 22 กันยายน 2026

สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:

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

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

สร้างไฟล์ CSS ใหม่

ต้องได้รับสิทธิ์​ ต้องได้รับอนุญาตให้ใช้เครื่องมือออกแบบเพื่อสร้างไฟล์ CSS ในตัวจัดการการออกแบบ

  1. ในบัญชี HubSpot ของคุณ ให้คลิก เพิ่มเติม จากนั้นไปที่ เนื้อหา > ตัวจัดการการออกแบบ หาก เพิ่มเติม ไม่ปรากฏในบัญชีของคุณ ให้ไปที่ เนื้อหา > ตัวจัดการการออกแบบ โดยตรง
  2. ในตัวค้นหาให้คลิกไฟล์ > ไฟล์ใหม่ที่ด้านซ้ายบน
  3. ในกล่องโต้ตอบให้คลิกเมนูแบบเลื่อนลงและเลือก CSS + HubL 
  4. คลิกถัดไป
  5. ป้อนชื่อสำหรับไฟล์ของคุณในฟิลด์ชื่อไฟล์
  6. หากต้องการเปลี่ยนตำแหน่งของไฟล์ให้คลิก เปลี่ยน ในกล่องป็อปอัพให้เลือกตำแหน่งไฟล์ใหม่ 
  7. เมื่อเสร็จแล้วให้คลิก สร้าง

แก้ไขไฟล์ CSS

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

ต้องได้รับสิทธิ์​ ต้องได้รับอนุญาตให้ใช้เครื่องมือออกแบบเพื่อแก้ไขไฟล์ CSS ในตัวจัดการการออกแบบ


หากต้องการดูรายการตัวเลือก CSS มาตรฐานสำหรับเทมเพลต HubSpot โปรดดูที่ Boilerplate CSS

  1. {local.navDesignManager}}
  2. ในตัวค้นหาให้คลิกไฟล์ > ไฟล์ใหม่หรือเปิดไฟล์ CSS ที่มีอยู่
  3. ในตัวแก้ไขโค้ดให้ป้อนหรืออัปเดต CSS เพื่อทำการแก้ไขของคุณ 

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

In the design manager, the code editor is displayed for a CSS file. At the top of the editor, an arrow points to the Show output switch.

ตรวจสอบข้อผิดพลาด

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

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

In the design manager, the code editor is displayed. Arrows point to error gutter on the left and the scroll bar on the right. A box is placed around the hide details/show details hyperlinked text.

เผยแพร่ไฟล์ CSS

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

In the design manager tool, the Actions dropdown menu is selected in the finder. An arrow points to the Copy public URL option.

แนบสไตล์ชีตกับเนื้อหา

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

  1. public_common.css (จำเป็น): สไตล์ชีตที่ใช้เป็นหลักโดยแอปของ HubSpot แต่ยังรวมถึงคุณลักษณะบางอย่างของไซต์
  2. HTML ส่วนหัว: เพิ่มแท็กลิงค์ไปยัง ส่วนกลางของเว็บไซต์ของคุณในการตั้งค่าเนื้อหา > หน้า
  3. Layout.css (จำเป็นสำหรับเลย์เอาต์แบบลากและวาง): ไฟล์ CSS ที่ตอบสนองตามค่าเริ่มต้นที่แนบมากับเลย์เอาต์เทมเพลตแบบลากและวางทั้งหมด
  4. สไตล์ชีตที่แนบมา (หน้า): สไตล์ชีตที่แนบมากับทั้งเว็บไซต์ของคุณในเนื้อหา > การตั้งค่าหน้า
  5. สไตล์ชีตที่แนบมา (บล็อก): สไตล์ชีตที่แนบมากับบล็อกของคุณ (แทนที่ชีตส่วนกลางของไซต์) ในเนื้อหา > การตั้งค่าบล็อก
  6. สไตล์ชีตที่เชื่อมโยง (แนะนำสำหรับเค้าโครงเทมเพลต): สไตล์ชีตที่แนบมาในเค้าโครงเทมเพลต
  7. มาร์กอัป < head > เพิ่มเติมในเทมเพลต: เพิ่มแท็กลิงค์ใน ของเค้าโครงเทมเพลตเฉพาะ
  8. สไตล์ชีตเฉพาะหน้า: สไตล์ชีตที่แนบมาในการตั้งค่าของหน้า
  9. HTML ส่วนหัวของหน้า: เพิ่มแท็กลิงค์ใน ของหน้าใดหน้าหนึ่งในการตั้งค่าของหน้า

แนบสไตล์ชีตกับเทมเพลต

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

ต้องได้รับสิทธิ์​ ต้องได้รับอนุญาตให้ใช้เครื่องมือออกแบบเพื่อแนบสไตล์ชีตกับเทมเพลต


ลากและวางเทมเพลต

  1. ในบัญชี HubSpot ของคุณ ให้คลิก เพิ่มเติม จากนั้นไปที่ เนื้อหา > ตัวจัดการการออกแบบ หาก เพิ่มเติม ไม่ปรากฏในบัญชีของคุณ ให้ไปที่ เนื้อหา > ตัวจัดการการออกแบบ โดยตรง
  2. ในตัวค้นหาให้คลิกชื่อไฟล์เทมเพลตลากและวางของคุณ
  3. ในตัวตรวจสอบให้คลิกเมนูแบบเลื่อนลงเพิ่มในส่วนสไตล์ชีตที่เชื่อมโยงและเลือกสไตล์ชีตของคุณ หากต้องการลบสไตล์ชีตให้คลิก X
  4. เมื่อเสร็จแล้วให้คลิกเผยแพร่การเปลี่ยนแปลงที่มุมขวาบนเพื่อใช้การเปลี่ยนแปลงของคุณกับหน้าสดโดยใช้เทมเพลต
In the design manager, the inspector is displayed for a drag and drop template. A box is placed around the Add dropdown menu in the Linked stylesheets section. An arrow points to the X icon to remove the existing attached stylesheet.

เทมเพลตรหัส

สำหรับเทมเพลตที่มีรหัสสไตล์ชีตจะถูกแนบโดยตรงในตัวแก้ไขรหัสโดยใช้ < link > แท็กหรือแท็ก HubL ใน ของไฟล์ เรียนรู้เพิ่มเติมเกี่ยวกับเทมเพลตรหัสในเอกสารสำหรับนักพัฒนา

แนบสไตล์ชีตไปยังหน้าใดหน้าหนึ่ง

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

ต้องได้รับสิทธิ์​ ต้องได้รับอนุญาตให้แก้ไขเพื่อแนบสไตล์ชีตไปยังหน้าใดหน้าหนึ่ง



โปรดทราบ: ตัวเลือกนี้ไม่พร้อมใช้งานสำหรับเทมเพลตธีมนี้ ดูวิธีแก้ไขการตั้งค่าธีม

วิธีแนบสไตล์ชีตเฉพาะเพจจากส่วนการตั้งค่าของตัวแก้ไขเนื้อหา:

  1. ไปที่เนื้อหาของคุณ:

  2. คลิกชื่อเพจของคุณ
  3. ในตัวแก้ไขเนื้อหาให้คลิกเมนูการตั้งค่าแล้วเลือกขั้นสูง 
  4. ในกล่องโต้ตอบในส่วนสไตล์ชีตให้คลิกเมนูแบบเลื่อนลงแนบสไตล์ชีตและเลือกสไตล์ชีต หากต้องการลบสไตล์ชีตให้คลิก X ถัดจากสไตล์ชีต
  5. หากต้องการปิดสไตล์ชีตที่สืบทอดมาจากเทมเพลตหรือโดเมนให้คลิกเมนูแบบเลื่อนลงถัดจากสไตล์ชีตแล้วเลือกปิดใช้งาน

In the content editor, the settings dialog box is displayed. In the stylesheets section, an arrow points to the domain stylesheets dropdown menu and a box is placed around the Attach a stylesheet dropdown menu.

แนบสไตล์ชีตโดเมน

ต้องใช้ ต้องสมัครใช้บริการ Marketing Hub Professional หรือ Enterprise เพื่อแนบสไตล์ชีตกับโดเมน

ต้องได้รับสิทธิ์​ ต้องได้รับอนุญาตให้ตั้งค่าเว็บไซต์เพื่อแนบสไตล์ชีตกับโดเมน



โปรดทราบ: เทมเพลตธีมต้องมีคำอธิบายประกอบ enableDomainStylesheetsenableDomainStylesheets: true เพื่อใช้สไตล์ชีตระดับโดเมน เรียนรู้เพิ่มเติมเกี่ยวกับคำอธิบายประกอบเทมเพลต

วิธีแนบสไตล์ชีตกับโดเมนทั้งหมด:

  1. ในบัญชี HubSpot ของคุณ คลิก ไอคอนการตั้งค่า ในแถบนำทางด้านบน
  2. ในเมนูแถบด้านข้างให้คลิกเนื้อหา > หน้า
  3. คลิกเมนูแบบเลื่อนลงเพื่อเลือกโดเมนที่คุณต้องการอัปเดตการตั้งค่า
  4. บนแท็บเทมเพลตในส่วน CSS และสไตล์ชีตให้คลิก + เพิ่มสไตล์ชีต หากต้องการลบสไตล์ชีตให้คลิก X ถัดจากสไตล์ชีตที่แนบมา
  5. คลิก บันทึก

In the content page settings, the CSS & Stylesheets section is displayed on the Templates tab. A box is placed around the Add style sheet dropdown menu.

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

Use HubSpot tools on your WordPress website and connect the two platforms without dealing with code. Click here to learn more.
บทความนี้มีประโยชน์หรือไม่
แบบฟอร์มนี้ใช้สำหรับคำติชมเอกสารเท่านั้น เรียนรู้วิธีขอความช่วยเหลือจาก HubSpot
สารบัญ เมนู

เนื้อหาที่เกี่ยวข้อง

New call-to-action