วิธีเพิ่มคลาส CSS ที่กำหนดเองให้กับ WordPress (3 วิธีง่าย ๆ )

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

ในโพสต์นี้ฉันจะแสดง 3 วิธีง่ายๆในการเพิ่มคลาส CSS ให้กับ WordPress - แม้ว่าคุณจะไม่เคยเขียนรหัสบรรทัดเดียว นอกจากนี้คุณยังจะได้เรียนรู้วิธีการทำแบบไม่มีรหัสโดยใช้ตัวสร้างเว็บไซต์ WordPress ที่ทรงพลัง Divi

คลาส CSS คืออะไรและช่วยได้อย่างไร?

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

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

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

วิธีเพิ่มคลาส CSS ให้กับ WordPress

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

ข้ามไปยังวิธีที่สามหากคุณสนใจวิธีการไม่ใช้รหัสมากขึ้น

1. การใช้ WordPress Customizer

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

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

ทำซ้ำกระบวนการสำหรับแต่ละปุ่มและ บันทึก ในการเพิ่มรหัสสไตล์ลงในปุ่มเหล่านี้คุณจะต้องนำทางไปยัง WordPress Customizer> CSS เพิ่มเติม

ในการทำให้ชายแดนกองทัพเรือสีน้ำเงินและพื้นหลังสีฟ้าคุณจะวาง CSS ของคุณที่นี่

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

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

ง่ายๆ - ถ้าคุณรู้จัก CSS

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

2. การใช้ปลั๊กอินเช่น CSS แบบกำหนดเองแบบง่าย ๆ

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

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

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

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

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

3. การใช้ตัวสร้างเว็บไซต์ที่ไม่มีรหัสเช่น Divi

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

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

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

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

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

ดาวน์โหลด Divi 5

มาดูกันว่าฉันหมายถึงอะไรในรายละเอียดเพิ่มเติมด้านล่าง

กลุ่มตัวเลือกของ Divi ที่ตั้งไว้ล่วงหน้าทำให้การเพิ่มคลาส CSS ง่ายขึ้น

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

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

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

วิธีใช้ Divi เพื่อเพิ่มคลาส CSS ใน WordPress โดยไม่ต้องเข้ารหัส

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

การเปลี่ยนพื้นหลังปุ่ม

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

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

การเปลี่ยนเงาของคอลัมน์

มาเพิ่มกล่องเงาในคอลัมน์ทั้งหมด ฉันจะเพิ่มเงากล่องลงในคอลัมน์แรกและบันทึกเป็น Shadow Box Shadow ที่ตั้งไว้ล่วงหน้า

ในการใช้เงาเดียวกันกับคอลัมน์อีกสองคอลัมน์ฉันจะเปลี่ยน Box Shadow Preset เป็น Shadow

การปรับเปลี่ยนการตั้งค่าข้อความที่ตั้งไว้ล่วงหน้า

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

หลังจากบันทึกแล้วนี่คือวิธีที่หน้ากำหนดราคาจะมี:

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

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

Divi เป็นตัวเปลี่ยนเกมสำหรับระบบการออกแบบแบบคลาส

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

เริ่มต้นด้วย Divi 5 วันนี้

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

เรียนรู้เพิ่มเติมเกี่ยวกับ Divi 5

Divi 5 เป็นกรอบการออกแบบที่ทรงพลังพร้อมเครื่องมือที่ทรงพลังเช่น Divi Dash, Divi Sick Sites และ Divi Ai - สร้างขึ้นเพื่อช่วยให้คุณสร้างเว็บไซต์มืออาชีพที่กำหนดเองโดยไม่ต้องสัมผัสรหัสบรรทัดเดียว ไม่มีอะไร จำกัด คุณพร้อมที่จะทำการทดสอบในอนาคตของการออกแบบเว็บไซต์หรือไม่?

ดาวน์โหลด Divi 5