มีมากกว่าหนึ่งวิธีในการเพิ่มโค้ด CSS ที่กำหนดเองลงในบล็อก WordPress

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

แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

วิธีค้นหารายการที่คุณต้องการปรับแต่ง

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

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

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

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

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

อ่าน: วิธีการเพิ่มลดลงเมนูลงด้วย CSS ในการแก้ไข Visual ของคุณ

ตัวอย่างเช่นองค์ประกอบ " font-size บอกให้คุณทราบว่าแบบอักษรที่แสดงในรายการที่เน้นสีนั้นมีขนาดเท่ากับ 13 พิกเซล ตัวแสดงรายล้อมไปด้วยวงเล็บปีกกาและนำหน้าด้วยตัวเลือก ชื่อของไฟล์สไตล์ชีตที่เกี่ยวข้องจะปรากฏทางด้านขวาของตัวเลือก

เมื่อคุณทราบข้อมูลนี้แล้วการเปลี่ยนสไตล์จะกลายเป็นเรื่องง่าย ตัวอย่างเช่นหากคุณต้องการเปลี่ยนแบบอักษรจาก 13px เป็น 14px คุณเพียงแค่มองหาไฟล์สไตล์ชีทของคุณตัวเลือกที่สอดคล้องกับหนึ่งในรายการที่ไฮไลต์ โดยทั่วไปจะอยู่ในรูปแบบนี้: (« # ข้อมูล .block ปลั๊กอินเนื้อหา"). จากนั้นคุณสามารถแก้ไขค่าต่างๆของแอตทริบิวต์

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

วิธี WordPress และการทำงานร่วมกัน CSS

เป็นความจริงที่ว่า ธีม WordPress ถูกสร้างมาแตกต่างกัน ดังนั้น พึงระลึกไว้เสมอว่า .ของคุณ ธีม WordPress อาจไม่สอดคล้องกับสิ่งที่คุณอ่านในส่วนต่อไปนี้ 100%

ที่กล่าวมามันเป็นไปได้มากกว่าที่ CSS ที่ใช้ในบล็อก WordPress ของคุณจะอยู่ในไฟล์ชื่อ " style.css " นี่เป็นชื่อสามัญสำหรับสไตล์ชีตสำหรับเว็บไซต์ทุกประเภทไม่ใช่แค่ WordPress

ดูเพิ่มเติมที่: วิธีการปรับขนาดภาพ Gravatar บน WordPress

ตอนนี้ได้เวลาผ่านกระบวนการแก้ไขที่แตกต่างกันแล้ว

วิธีที่ # 1: การแก้ไขไฟล์สไตล์ของธีม WordPress ของคุณ

มีสองวิธีในการเข้าถึงไฟล์ style.css ของธีมของคุณ

สิ่งแรกคือทำจากแผงควบคุม WordPress ของคุณ บนเมนูด้านซ้ายเลือกเมนู " apparence "แล้ว" สำนักพิมพ์ '

เมื่อคุณอยู่ในหน้าตัวแก้ไขคุณจะเห็นรายการไฟล์บนแถบแนวตั้งทางด้านขวาของหน้า เลื่อนดูรายการไฟล์ คุณจะเห็นไฟล์ชื่อ " style.css สไตล์ชีต ที่ด้านล่างของหน้า

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

อีกวิธีในการค้นหาสไตล์ชีตคือการเรียกดูระบบปฏิบัติการของผู้ให้บริการโฮสติ้งและค้นหาไฟล์ใน ธีม WordPress (โดยใช้ไคลเอนต์ FTP). ตำแหน่งที่แน่นอนจะแตกต่างกันไปขึ้นอยู่กับผู้ให้บริการโฮสต์ของคุณ ในตัวอย่างที่แสดงด้านล่าง ชื่อเว็บไซต์ (ในกรณี thecare ของเรา) เป็นโฟลเดอร์ภายใต้โฟลเดอร์ public_html

เมื่อติดตั้ง WordPress แล้วคุณจะเห็นโฟลเดอร์ wp-content ใน "thecare" โฟลเดอร์ย่อย wp-content คือโฟลเดอร์อื่นที่เรียกว่า " WP-ธีม" ซึ่งเป็นที่ที่ ธีม WordPress มีการติดตั้ง

จากเว็บไซต์นี้ใช้ชุดรูปแบบที่เรียกว่า " จดหมายข่าว », ไฟล์สไตล์« style.css ตั้งอยู่ในโฟลเดอร์ " จดหมายข่าวผู้ปกครอง '

วิธี # 2: การใช้ปลั๊กอินเพื่อแก้ไข CSS

บางทีวิธีที่สะดวกที่สุดในการแก้ไข CSS ของบล็อก WordPress ของคุณคือ การใช้งานปลั๊กอิน.

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

นี่คือปลั๊กอินพรีเมียมบางส่วนที่คุณสามารถใช้เพื่อแก้ไขโค้ด CSS ของคุณได้ ธีม WordPress :

1. ดินสอสีเหลือง: ตัวแก้ไขสไตล์ CSS ของ Visual

Yellow Pencil เป็นโปรแกรมแก้ไขรูปแบบภาพที่คุณสามารถใช้กับธีมใดก็ได้เพื่อปรับแต่งเว็บไซต์ของคุณในไม่กี่นาที (แบบอักษรสีภาพเคลื่อนไหวและอื่น ๆ ... )

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

ค้นพบยังของเรา ปลั๊กอิน 5 WordPress เพื่อแสดงการแจ้งเตือน

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 JS และ CSS ที่กำหนดเองสำหรับ Gutenberg

Le WordPress ปลั๊กอิน JS และ CSS แบบกำหนดเองระดับพรีเมียมสำหรับ Gutenberg จะช่วยให้คุณสามารถเพิ่มสไตล์ที่กำหนดเองได้ไม่ จำกัด จำนวนลงในโปรแกรมแก้ไขแบบ WYSIWYG สำหรับบทความและหน้า WordPress ของคุณ เข้ากันได้กับ WordPress เวอร์ชัน Gutenberg อย่างสมบูรณ์

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 SiteOrigin CSS

เป็นปลั๊กอิน WordPress ที่มีตัวเลือกมากที่สุดในรายการนี้ สิ่งที่น่าทึ่งเกี่ยวกับหลังคือมันฟรี ปลั๊กอิน WordPress นี้เป็นปลั๊กอินเดียวที่ไม่พบในเครื่องมือปรับแต่ง

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

อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน WordPress 10 เพื่อเพิ่มยอดขายของเว็บไซต์ของคุณ

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

4 CSS ที่กำหนดเองง่าย

CSS ที่กำหนดเองง่าย เป็นหนึ่งในปลั๊กอินยอดนิยม

ค้นพบยังของเรา วิธีทำให้บล็อกของคุณรวดเร็ว: การจัดการไฟล์ CSS และ JS.

มีการติดตั้งมากกว่า 100 ครั้งและได้รับคะแนนห้าดาว

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

5 WP เพิ่ม CSS ที่กำหนดเอง

WP เพิ่ม CSS ที่กำหนดเอง เป็นปลั๊กอินที่ช่วยให้คุณ เปลี่ยนเค้าโครงของบล็อก WordPress บทความทั้งหมดหรือเพียงแค่ส่วนบุคคล นี่เป็นตัวเลือกที่ยอดเยี่ยมหากคุณกำลังมองหาความยืดหยุ่นในการปรับแต่งรายการ

ปลั๊กอินได้รับการดาวน์โหลดมากกว่า 10.000 ครั้งและขณะนี้ได้รับคะแนน 4,3 ดาว

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

6 ขี้ยาธีมที่กำหนดเอง CSS

หากคุณกำลังมองหาโซลูชันที่นำเสนอตัวอย่างการเปลี่ยนแปลงของคุณแบบสดคุณอาจลองใช้ CSS ธีมขี้ยาที่กำหนดเอง. 

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

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

• ปลั๊กอิน WordPress 10 แบ่งปันบนเครือข่ายสังคม
• วิธีการแสดงฟิลด์ที่กำหนดเองออกจากวงในเวิร์ดเพรส
• ปลั๊กอิน WordPress 5 สร้างรายได้จากบล็อกของคุณด้วยโฆษณา
• วิธีการป้องกันขูดเนื้อหาบล็อกของคุณ

สรุป

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

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

หากคุณชอบบทความนี้ nอย่าลังเลที่จะ แบ่งปันบนเครือข่ายโซเชียลที่คุณชื่นชอบ. 

...