Тему обозначу так: речь идет не про интерфейс плагина или дополнения под свой шаблон. Не под единичный случай с своим сайтом или сайтом друга/подруги/клиента. Именно про массовый плагин или дополнение. Потому что этот плагин или дополнение будут ставить на тысячи разных WordPress шаблонов. Но не все шаблоны одинаково полезны... И внешний вид который вы заложили может быть сломан.
Интересная тема и очень много боли когда ты разрабатываешь интерфейсы для своих плагинов или дополнений. Для плагинов и дополнений которые рассчитаны на массового пользователя.
Ведь там есть подводные камни. Внешний вид держать таким как ты задумал - сложней. Почему? Почему именно сложно поддерживать интерфейс для всех ВП шаблонов.
Как пример №1 - ссылки заключенные в тег
<a
Что с ними не так? Да с ними вообще весело. Креативщики которые верстают ВП шаблоны они такие. Кто-то их подчеркивает css свойством text-decoration, кто-то border-bottom, особые креативные парни box-shadow (hover-эффект).
А вы каким свойством хотите их выделять? Никаким? 🙂
Все еще веселей когда внутри тега
<aу нас иконка. Например в плагине WP-Recall fontawesome используется.
Вы не поверите - но крупные проекты встречаются с таким багом. Пример: официальный форум поддержки вордпресса
А теперь представьте что на разных ВП шаблонах эта иконка будет иметь разные ховер эффекты. Где подчеркивание - это ужасно.
Какой выход? Всегда, повторю ВСЕГДА писать это для ссылок:
#rcl-office a:link {
border: none; /*++Twenty15++*/
box-shadow: none; /*++Twenty16++*/
text-decoration: none;
}
- видите? указаны виновники которые по разному вносят свои прелести туда, где не ожидается. "Радует" что это команда ВП
Поэтому когда я верстаю новый плагин или дополнение - я провожу тесты на внешний вид в 14-ти популярных ВП темах (свои все дочерние и 4-ре родные ВП шаблона 2014-2017-е которые twenty). Я не говорю что вначале я прогоняю в популярных браузерах - это правило все мы знаем.
Ну так вы сейчас давайте - свой плагин или дополнение прогоните на разных ВП шаблонах - для вас это будет открытие.
Пример номер два:
В сообщении ниже.
Итак - предлагаю здесь обсуждать свои массовые продукты под различные ВП шаблоны.
Сверстать ВП шаблон - плевое дело. А сверстать плагин или дополнение под тысячи и десятки тысяч ВП шаблонов - вот это LVL 90!
Есть такие? Присоединяйтесь к обсуждению
А ниже я пройду по тегам, по известным багам с классами их весом и каскадностью.
Игорь - хорошо что ты в эту тему зашел - знал что тебе пригодится.
Просто хочу в одном месте (пока на форуме - как накопится выделю в запись в группе) собрать все эти решения чтобы верстая с ноля уже в голове держать эти моменты.
Сталкивался я с кучей ньюансов на разных ВП шаблонах. Визуальное тестирование на 14-ти темах конечно убивает по времени это. Но оно того стоит. Приятно же когда диз смотрится именно таким каким задумывался авторм плагина или дополнения, а не шел на поводу у ВП шаблона.
Если есть какие моменты из опыта - скидывай сюда.
Пример №2
Тоже самый популярный кандидат это любимые у СЕО теги:
<h1><h2><h3>и т.д.
Чаще всего "попадосов" при переключении на ВП шаблон у тегов с цифрой 2 и 3
Разные WordPress темы по всякому его уродуют - от величины шрифта - я аж очки снимаю - как мне хорошо становится его видно...
До финтов с капсом, болдом и прочее. Не могу отметить нижний margin который добавляют разные вп шаблоны. У некоторый нижний отступ от 30 пикселей. Я очень не люблю этот тег и если в контенте он не важен заменяю его на span или div
Фикс который я применяю может быть таким:
#rcl-office h2 {
font-size: 22px;
font-weight: bold;
line-height: 1;
margin: 0;
text-transform: none;
}
(первые 2 примера как раз из ядра плагина WP-Recall - т.к. много времени было уделено именно ему. Это плагин номер один и нам важно чтобы он визуально был ровным везде)
- живой пример - первая строка - фиксим шрифт. Тут темы тихий ужас творят все
вторая строка - именно тут нам нужно чтоб он был жирным
3 - высота строки - все темы по своему - кто в пикселях, кто normal, кто 1.6! вставляет. Я люблю normal или 1.4. Но в этом контексте нужна 1.
4 строка - глупый отступ. Как уже писал выше - некоторые темы его на 30 пикселей вверх отводят.
5. Трансформация текста uppercase многие темы пишут. Но капс тут лишний.
Верстая используя эти заголовки - помните эти моменты
Что еще добавить хочу - не все ВП шаблоны вы должны рассматривать как действие к фиксам. Например в ВП теме Point встречалось у тега img такое
на 960 пикселях в ширину они почему-то решили за всех что все изображения в высоту должны быть auto:
height: auto!important;. Ну бред. На этот случай я забил и фикс не вносил. Изображение вроде по высоте не ушло на этом шаблоне и хорошо.
Но обратите на это, если у вас некоторым изображениям задается высота в пикселях или %. Тут надо смотреть и думать по факту.
Вообще старайтесь избегать !important. Помните - вы делаете дизайн для массового пользователя. И он возможно захочет кастомизировать что-то. Бездумный !important - это дурной тон. !important - только в крайнем случае нужен.
Ниже я добавлю, с другой темы с этого сайта, информацию по весу селекторов и как можно работать с этим.
Точно Андрей!
Не идите на поводу у z-index!
1. Все что внутри контента сайта не должно быть более 1-10 пунктов.
2. Фиксированные панели (реколлбар у WP-Recall) и меню - 99-100 пунктов. Ну максимум 1000. Не задирайте их до 10000-ч. Это перебор.
Задрав до 10000 вы можете перекрыть например всплывающую форму другого плагина, галерею или модальное окно.
3. Модальное окно 1500-1600 - т.к. вам нужно перекрыть все. Этот элемент за пределами сайта и значит не должен отвлекать внимание. Если в модальном окне за ним надо сделать затемненный полупрозрачный фон (оверлей) дайте оверлею 1499, а модальному окну 1500. Достаточно единицы чтобы браузер понял какой слой выше
не нужно задирать слишком высокие значения оси z. Но ВП шаблоны задирают. Это не профессионально и думаю это ошибка по неопытности - не стоит забывать что ВП шаблоны пишут люди. Что премиум шаблоны пишут они же и слово Premium !== Profi
В 6-м комментарии я упомянул - а что если вам нужно перебить существующий класс, вводите такой же - а он не работает. Не применяйте !important. Можно обойтись малой кровью.
Тут играет роль порядок загрузки css файла. Вот почему рекомендуют все изменения по кастомизации стилей вносить в конец стилевого файла. Самое нижнее правило заменяет вышестоящие.
Но как быть если css файлов несколько и тот, в котором вы вносите изменения, грузится раньше? Все просто - перебить его "весом"
Подробней в этом большом сообщении
Прочитали?
Теперь как это применить для нашего дополнения или плагина:
Я всегда стараюсь самый первый блок обернуть в ID:
<div id="prefix_general_block" class="prefix_some_class">
- таким образом я в конфликтной ситуации могу зацепиться за 100% существующий id и перебить что-то "весом", ведь идентификатор "весит" больше.
Но не стоит забывать что по спецификации w3.org ID с таким названием на странице должен присутствовать один раз. Пока есть старые браузеры.
С этой картинки мне и стоило начать:
Самый геморрой это input-ы
На картинке выше это
<input type="submit">
И мое дополнение (оно для админа сайта и писал его по сути для себя)
Итак - мы видим - я разрабатывал этот доп и он хорошо отображается в моем рабочем ВП шаблоне. Но я не посмотрел - а что будет с контентом что он выводит в других ВП шаблонах. Теперь мы видим. Только 3 из 14-ти только что протестированных шаблона (переключал пока делал скрины) показываю контент именно так как я хотел. Это плохо.
Фикс с инпутами продолжу позже. На сегодня от меня пока всё. Рассказать еще много нужно, но уже не сегодня.
Так вы все еще не тестируете ваши плагины и дополнения с другими ВП шаблонами? Подумайте еще разок. Вы хотите чтобы ваш товар установили включили и удалили? Или вы заинтересованы продвигать свои товары и свое имя?
Да Игорь, с ними веселье. Особенно гемор возникает когда специфичность усложняют вписывая в стили вп шаблонов
input[type="radio"] или input:not([type="submit"])
тут вроде все просто - в первом случае стиль конкретно к радиокнопке, во втором ко всем, кроме кнопки отправки. Но на деле перебить подобное элегантно и не повторяясь - веселая задача.
Честно сказать стилизацию этого чуда я не освоил на 100% постоянно какие-то подводные камни возникают.
Как хорошо разработчикам вп шаблонов у них reset.css есть - для сброса в единый вид. А вот для разработки плагинов и дополнений после ВП шаблонов подобного я не видел
