Лучший способ переопределить плагин CSS?

36

В настоящее время я использую специфику CSS для переопределения стилей плагинов. Я предпочитаю это для редактирования плагина, так как он уменьшает головную боль при обновлении.

Было бы неплохо, если бы моя таблица стилей загружалась после плагинов, так что я должен был быть только конкретным, а не более. Это сделало бы мои таблицы стилей намного красивее.

plugins css

— Мягкий пух
источник

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 в вашу таблицу стилей и будьте счастливы);
хороший пример: функция перехвата плагинов, которая ставит в очередь стиль (отцепите функцию, при необходимости зацепите свои моды);
обычный случай: плагин очередей CSS напрямую. Смотрите Как снять сценарий с очереди? (относится и к стилям). Короткая версия - в следующем выпуске WP будет функция dequeue, сейчас можно обойтиwp_deregister_*
плохой случай: плагин повторяет CSS среди множества других вещей. От случая к случаю...

В целом, на мой взгляд, лучше и проще отключить отдельные таблицы стилей и включить их в свои собственные, чтобы минимизировать проблемы и повысить производительность (меньше файлов для извлечения).

— Rarst
источник

Откуда мне знать, какой это?

— ЯнЭдингтон

1

Глядя на код в основном. :)

— Rarst

2

Еще один довольно элегантный способ - использовать специфику CSS.

Так что, если CSS плагина говорит:

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

Вы определяете в своем CSS:

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

Также см. Ответ Майкла Рэйдера на аналогичный вопрос.

— Andreas
источник

Хорошо, большое спасибо. Это был бы принятый ответ для меня. Просто используйте общий стиль style.css и специфичность работает как блеск!

— Лука Регеллин

1

Я сохраняю копию плагина «не готов» CSS в папку темы и импортирую ее в css темы, добавляя

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

к нему (заменив, конечно, имя .css на имя, которое я вводю). Затем я изменяю копию css в папке темы и сохраняю ее на сервере, как и для других файлов. О, да, иногда может понадобиться «прибить» идентификаторы или измененные классы, назначив им «! Важно».

Я не знаю, является ли это современным, но это не вредит и работает просто отлично.

— Свен Ноч
источник

0

Чтобы переопределить CSS плагина, который уже использовал специфичность и! Важно, я использовал идентификатор для переопределения классов. Это немного очистило мой код. Конечно, это тоже не идеальное решение в том смысле, что оно работает только тогда, когда есть идентификаторы, присвоенные элементам и классам.

Вы также можете использовать атрибуты селекторов в теории. Однако мне еще предстоит проверить эту теорию.

— Шон Х. Смит
источник

0

В конечном итоге я использовал! Важный для моей пользовательской CSS и это переопределило стиль для плагина, с которым у меня были проблемы. Разработчик плагина использовал! Важный во всем плагине CSS, и поэтому я не мог перезаписать его без! Важным.

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

— Рэнди Д
источник

-1

Чтобы переопределить CSS плагина, который уже использовал специфичность и! Важно, я использовал идентификатор для переопределения классов. Это немного очистило мой код. Конечно, это тоже не идеальное решение в том смысле, что оно работает только тогда, когда есть идентификаторы, присвоенные элементам и классам.

Вы также можете использовать атрибуты селекторов в теории. Однако мне еще предстоит проверить эту теорию.

— dsdsd
источник