Найкращий спосіб перекрити плагін CSS?


36

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

Було б добре, якби мій аркуш стилів завантажився після плагінів, так що я повинен бути максимально конкретним, а не більше. Це зробить мої таблиці стилів набагато красивішими.


1
нагорода за навчання мене про специфіку CSS, ніколи не чула про це перед вашим запитанням, і це допомогло мені купу!
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 серед багатьох інших речей. Від випадку до випадку...

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


Як я можу знати, що це таке?
IanEdington

1
В основному дивлячись на код. :)
Рарст

2

Ще один досить елегантний спосіб - використовувати специфіку CSS.

Отже, якщо в css плагіна написано:

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

Ви визначаєте у своєму css:

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

Також дивіться відповідь Майкла Редера на подібне запитання.


Добре, дуже дякую. Це була б прийнята відповідь для мене. Просто використовуйте загальний 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 плагіна, який вже використовував специфіку і! Важливо, я використовував ідентифікатор для зміни класів. Це трохи очистило мій код. Звичайно, він теж не є ідеальним рішенням, оскільки він працює лише тоді, коли ідентифікаторам призначені елементи, а також класи.

Ви також можете теоретично використовувати селектори атрибутів. Однак я ще маю цю теорію випробувати.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.