Najlepszy sposób na ominięcie wtyczki CSS?

36

Obecnie używam specyfiki CSS do zastępowania stylów wtyczek. Wolę to do edycji wtyczki, ponieważ sprawia ona mniej problemów podczas aktualizacji.

Byłoby miło, gdyby mój arkusz stylów ładował się po wtyczkach, tak że muszę tylko być tak konkretny, a nie więcej. Dzięki temu moje arkusze stylów byłyby ładniejsze.

plugins css Łagodny Fuzz
źródło
1
głosowanie za nauczenie mnie o Specyfiki CSS, nigdy nie słyszałem o tym przed twoim pytaniem i pomogło mi to!
luke_mclachlan

Odpowiedzi:

21

Jak sugerujesz, najbardziej eleganckim rozwiązaniem jest ładowanie zastąpień CSS po wprowadzeniu CSS przez wtyczki. Jest to dość łatwe do osiągnięcia - musisz tylko upewnić się, że header.phppołączenia, wp_head()zanim odniosą się do arkusza stylów:

<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
źródło
A jeśli używam motywu podrzędnego? Nie lubię przesłonić header.php mojego motywu nadrzędnego.
Jules
19

Wtyczki mogą obsługiwać CSS na kilka sposobów.

  • najlepszy przypadek: wtyczka ustawia w kolejce CSS i zapewnia opcję wyłączenia (wyłącz, skopiuj kod CSS do arkusza stylów i ciesz się);
  • dobry przypadek: wtyczki przechwytują funkcję, która ustawia się w stylu kolejki (funkcja odblokowania, w razie potrzeby podłącz własne mody);
  • zwykły przypadek: wtyczka ustawia w kolejce CSS bezpośrednio. Zobacz Jak usunąć kolejkę skryptu? (dotyczy również stylów). Wersja skrócona - w przyszłej wersji WP pojawi się funkcja usuwania kolejki, na razie można ją obejśćwp_deregister_*
  • zły przypadek: wtyczka echa CSS wśród wielu innych rzeczy. Od przypadku do przypadku...

Ogólnie moim zdaniem lepiej i łatwiej jest wyłączyć osobne arkusze stylów i włączyć je do własnych, aby zminimalizować problemy i poprawić wydajność (mniej plików do pobrania).

Rarst
źródło
Skąd mam wiedzieć, który to jest?
IanEdington
1
Patrząc głównie na kod. :)
Rarst
2

Innym dość eleganckim sposobem jest użycie specyficzności CSS.

Więc jeśli css wtyczki mówi:

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

definiujesz w swoim css:

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

Zobacz także odpowiedź Michaela Radera na podobne pytanie.

Andreas
źródło
Ok, bardzo dziękuję. To byłaby dla mnie zaakceptowana odpowiedź. Wystarczy użyć ogólnego style.css, a specyfika działa jak błysk!
Luca Reghellin
1

Zapisuję kopię CSS wtyczki „niechętna” do folderu motywu i importuję ją do css motywu, dodając

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

do niego (oczywiście zastępując nazwę .css nazwą, którą wstrzykuję). Następnie modyfikuję kopię css w folderze motywu i zapisuję ją na serwerze, tak jak robię to dla innych plików. Och, tak, czasami może być konieczne „przybicie” identyfikatorów lub klas zmienionych przez przypisanie im „! Ważnych”.

Nie wiem, czy to jest stan techniki, ale nie szkodzi i działa dobrze.

Sven Knoch
źródło
0

Aby przesłonić css wtyczki, która już używała specyficzności i! Ważne, użyłem id do przesłonięcia klas. To trochę oczyściło mój kod. Oczywiście również nie jest to idealne rozwiązanie, ponieważ działa tylko wtedy, gdy id jest przypisany do elementów, a także klas.

Można również użyć selektorów atrybutów w teorii. Jednak muszę jeszcze przetestować tę teorię.

Sean H. Smith
źródło
0

Skończyło się na użyciu! Ważne dla mojego niestandardowego css i to zastępuje styl wtyczki, z którą miałem problemy. Twórca wtyczki używał! Ważne w css wtyczki i dlatego nie mogłem go zastąpić bez! Ważne.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}
Randy D.
źródło
-1

Aby przesłonić css wtyczki, która już używała specyficzności i! Ważne, użyłem id do przesłonięcia klas. To trochę oczyściło mój kod. Oczywiście również nie jest to idealne rozwiązanie, ponieważ działa tylko wtedy, gdy id jest przypisany do elementów, a także klas.

Można również użyć selektorów atrybutów w teorii. Jednak muszę jeszcze przetestować tę teorię.

dsdsd
źródło