Cara terbaik untuk mengatasi plugin CSS?

36

Saat ini, saya menggunakan spesifisitas CSS untuk mengganti gaya plugin. Saya lebih suka ini untuk mengedit plugin karena membuat sakit kepala lebih sedikit ketika Anda memperbarui.

Akan lebih baik jika style sheet saya dimuat setelah plugin, sehingga saya hanya harus spesifik, tidak lebih. Ini akan membuat stylesheet saya jauh lebih cantik.

plugins css

— Fuzz Ringan
sumber

1

upvote untuk mengajar saya tentang Kekhususan CSS, tidak pernah mendengarnya sebelum pertanyaan Anda dan itu membantu saya banyak!

— luke_mclachlan

21

Seperti yang Anda sarankan, pendekatan yang paling elegan adalah ketika CSS Anda diganti setelah CSS disuntikkan oleh plugin. Ini cukup mudah untuk dicapai - Anda hanya perlu memastikan bahwa header.phppanggilan Anda wp_head()sebelum merujuk pada style sheet Anda:

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

    <?php wp_head(); ?>

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

— Tim Coulter
sumber

Dan bagaimana jika saya menggunakan tema anak? Saya tidak suka mengganti header.php dari tema orang tua saya.

— Jules

19

Ada beberapa cara plugin dapat menangani CSS.

kasus terbaik: plugin antrian CSS dan memberikan opsi untuk menonaktifkannya (nonaktifkan, salin kode CSS ke stylesheet Anda dan berbahagia);
kasus bagus: fungsi plugins hooks yang mengantre style (fungsi unhook, kaitkan sendiri dengan mods jika perlu);
kasus biasa: plugin antrean CSS secara langsung. Lihat Bagaimana cara membuat skrip? (berlaku untuk gaya juga). Versi singkat - akan ada fungsi dequeue dalam rilis WP di masa depan, untuk saat ini dapat diselesaikanwp_deregister_*
kasus buruk: plugin menggemakan CSS di antara banyak hal lainnya. Kasus per kasus...

Secara keseluruhan, menurut pendapat saya, lebih baik dan lebih mudah untuk menonaktifkan stylesheet yang terpisah dan menggabungkannya di Anda sendiri untuk meminimalkan masalah dan meningkatkan kinerja (lebih sedikit file untuk diambil).

— Jarang
sumber

Bagaimana saya tahu yang mana itu?

— IanEdington

1

Dengan melihat kode sebagian besar. :)

— Rarst

2

Cara lain yang cukup elegan adalah dengan menggunakan kekhususan CSS.

Jadi jika CSS plugin mengatakan:

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

Anda mendefinisikan di css Anda:

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

Lihat juga jawaban Michael Rader untuk pertanyaan serupa.

— Andreas
sumber

OK, terima kasih banyak. Ini akan menjadi jawaban yang diterima untuk saya. Cukup gunakan style.css umum dan karya spesifik seperti bersinar!

— Luca Reghellin

1

Saya menyimpan salinan CSS plugin "tidak mau" ke folder tema dan mengimpornya ke theme css dengan menambahkan

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

untuk itu (mengganti, tentu saja, nama .css dengan yang saya suntikkan). Kemudian saya memodifikasi salinan css di folder tema dan menyimpannya ke server seperti yang saya lakukan untuk file lain. Oh, ya, kadang-kadang mungkin perlu untuk "memaku" ID atau kelas yang diubah dengan menugaskan mereka "! Penting".

Saya tidak tahu apakah ini canggih, tetapi tidak ada salahnya dan berfungsi dengan baik.

— Sven Knoch
sumber

0

Untuk mengganti css plugin, yang sudah menggunakan spesifisitas dan! Penting, saya menggunakan id untuk mengganti kelas. Ini memang sedikit membersihkan kode saya. Tentu saja, itu juga bukan solusi sempurna karena hanya berfungsi ketika jika ada id yang ditugaskan untuk elemen dan juga kelas.

Anda juga bisa menggunakan penyeleksi atribut dalam teori. Namun, saya belum menguji teori itu.

— Sean H. Smith
sumber

0

Saya akhirnya menggunakan! Penting untuk custom css saya dan mengganti style untuk plugin yang saya punya masalah dengannya. Pengembang plugin menggunakan! Penting di seluruh plugin css dan itulah sebabnya saya tidak bisa menimpanya tanpa! Penting.

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

— Randy D
sumber

-1

Untuk mengganti css plugin, yang sudah menggunakan spesifisitas dan! Penting, saya menggunakan id untuk mengganti kelas. Ini memang sedikit membersihkan kode saya. Tentu saja, itu juga bukan solusi sempurna karena hanya berfungsi ketika jika ada id yang ditugaskan untuk elemen dan juga kelas.

Anda juga bisa menggunakan penyeleksi atribut dalam teori. Namun, saya belum menguji teori itu.

— dsdsd
sumber