วิธีที่ดีที่สุดที่จะเอาชนะปลั๊กอิน CSS?

36

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

มันจะดีถ้าสไตล์ชีตของฉันโหลดหลังจากปลั๊กอินดังนั้นฉันจะต้องเป็นเฉพาะไม่มาก นี่จะทำให้สไตล์ของฉันสวยขึ้นมาก

plugins css

— Mild Fuzz
แหล่งที่มา

1

upvote สำหรับการสอนฉันเกี่ยวกับ CSS Specificity ไม่เคยได้ยินมาก่อนคำถามของคุณและมันช่วยฉันได้มาก!

— luke_mclachlan

21

ตามที่คุณแนะนำวิธีที่ยอดเยี่ยมที่สุดคือเมื่อโหลด CSS แทนที่ของคุณหลังจาก CSS ถูกแทรกโดยปลั๊กอิน นี่เป็นเรื่องง่ายที่จะบรรลุ - คุณเพียงแค่ต้องแน่ใจว่าheader.phpสายของคุณwp_head()ก่อนที่มันจะอ้างอิงสไตล์ชีทของคุณ:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— ทิมโคลเตอร์
แหล่งที่มา

และถ้าฉันใช้ธีมลูก ฉันไม่ต้องการแทนที่ header.php ของชุดรูปแบบหลักของฉัน

— จูลส์

19

มีหลายวิธีปลั๊กอินสามารถจัดการ CSS

กรณีที่ดีที่สุด: ปลั๊กอินเข้าคิว CSS และให้ตัวเลือกในการปิดการใช้งาน (ปิดการใช้งานคัดลอกโค้ด CSS ไปที่สไตล์ชีทของคุณและมีความสุข);
กรณีที่ดี: ฟังก์ชั่นปลั๊กอิน hooksins ที่จัดคิวสไตล์ (ฟังก์ชั่นปลดตะขอด้วยตัวเองหากจำเป็น)
กรณีปกติ: ปลั๊กอินคิวคิว CSS โดยตรง ดูวิธีถอนคิวสคริปต์? (ใช้กับสไตล์ได้เช่นกัน) เวอร์ชั่นสั้น - จะมีฟังก์ชั่น dequeue ในการเปิดตัว WP ในอนาคตเพราะตอนนี้สามารถแก้ไขได้ด้วยwp_deregister_*
กรณีที่ไม่ดี: ปลั๊กอินสะท้อนก้อง CSS ในหมู่สิ่งอื่น ๆ กรณี...

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

— Rarst
แหล่งที่มา

ฉันจะรู้ได้อย่างไรว่ามันคืออันไหน

— IanEdington

1

โดยดูจากรหัสเป็นส่วนใหญ่ :)

— Rarst

1

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

@import url('name-of-the-plugin-css.css');

ไปที่มัน (แทนที่แน่นอนชื่อของ. css โดยที่ฉันกำลังฉีด) จากนั้นฉันจะแก้ไขสำเนา css ในโฟลเดอร์ธีมและบันทึกลงในเซิร์ฟเวอร์เช่นเดียวกับไฟล์อื่น ๆ โอ้ใช่บางครั้งอาจจำเป็นต้อง "ตอก" ID หรือคลาสที่เปลี่ยนแปลงโดยกำหนด "! สำคัญ" ให้พวกเขา

ฉันไม่ทราบว่านี่เป็นสถานะของศิลปะ แต่ก็ไม่เป็นอันตรายและทำงานได้ดี

— สเวน Knoch
แหล่งที่มา

1

อีกวิธีที่ค่อนข้างหรูหราคือการใช้ CSS เฉพาะ

ดังนั้นถ้า css ของปลั๊กอินบอกว่า:

div.product div.images img {
  ......
}

คุณกำหนดใน CSS ของคุณ:

body div.product div.images img {
  ......
}

ดูคำตอบของ Michael Raderสำหรับคำถามที่คล้ายกัน

— อันเดรีย
แหล่งที่มา

โอเคขอบคุณมาก. นี่จะเป็นคำตอบที่ได้รับการยอมรับสำหรับฉัน เพียงใช้งาน style.css ทั่วไปและผลงานที่เฉพาะเจาะจงเช่นความเงางาม!

— Luca Reghellin

0

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

คุณยังสามารถใช้ตัวเลือกคุณลักษณะในทางทฤษฎี อย่างไรก็ตามฉันยังไม่ได้ทดสอบทฤษฎีนั้น

— ฌอนเอชสมิ ธ
แหล่งที่มา

0

ฉันลงเอยด้วยการใช้! สำคัญสำหรับ css ที่กำหนดเองของฉันและแทนที่สไตล์สำหรับปลั๊กอินที่ฉันมีปัญหาด้วย ผู้พัฒนาปลั๊กอินใช้งาน! มีความสำคัญตลอดทั้งปลั๊กอิน css และนั่นคือสาเหตุที่ฉันไม่สามารถเขียนทับได้โดยไม่ต้อง! สำคัญ

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— แรนดี้ดี
แหล่งที่มา

-1

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

คุณยังสามารถใช้ตัวเลือกคุณลักษณะในทางทฤษฎี อย่างไรก็ตามฉันยังไม่ได้ทดสอบทฤษฎีนั้น

— dsdsd
แหล่งที่มา