Домой Флудилка Сайтостроение и веб-дизайн Верстка под контент выводимый плагином или дополнением в вордпресс.
12 ответ(ов) в теме
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
1
13:16

Тему обозначу так: речь идет не про интерфейс плагина или дополнения под свой шаблон. Не под единичный случай с своим сайтом или сайтом друга/подруги/клиента. Именно про массовый плагин или дополнение. Потому что этот плагин или дополнение будут ставить на тысячи разных 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!

Есть такие? Присоединяйтесь к обсуждению

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

2
garry
На сайте с 04.01.2014
Участник
Тем 100
Сообщения 1784
2
13:29

Взял на вооружение, спасибо за подробности и решение!

0
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
3
13:39

Игорь - хорошо что ты в эту тему зашел - знал что тебе пригодится.
Просто хочу в одном месте (пока на форуме - как накопится выделю в запись в группе) собрать все эти решения чтобы верстая с ноля уже в голове держать эти моменты.

Сталкивался я с кучей ньюансов на разных ВП шаблонах. Визуальное тестирование на 14-ти темах конечно убивает по времени это. Но оно того стоит. Приятно же когда диз смотрится именно таким каким задумывался авторм плагина или дополнения, а не шел на поводу у ВП шаблона.

Если есть какие моменты из опыта - скидывай сюда.

1
garry
На сайте с 04.01.2014
Участник
Тем 100
Сообщения 1784
4
13:47

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

0
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
5
14:05

Пример №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 многие темы пишут. Но капс тут лишний.

Верстая используя эти заголовки - помните эти моменты

0
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
6
14:26

Что еще добавить хочу - не все ВП шаблоны вы должны рассматривать как действие к фиксам. Например в ВП теме Point встречалось у тега img такое

Вы не можете просматривать опубликованные ссылки

на 960 пикселях в ширину они почему-то решили за всех что все изображения в высоту должны быть auto:

height: auto!important;
. Ну бред. На этот случай я забил и фикс не вносил. Изображение вроде по высоте не ушло на этом шаблоне и хорошо.

Но обратите на это, если у вас некоторым изображениям задается высота в пикселях или %. Тут надо смотреть и думать по факту.

Вообще старайтесь избегать !important. Помните - вы делаете дизайн для массового пользователя. И он возможно захочет кастомизировать что-то. Бездумный !important - это дурной тон. !important - только в крайнем случае нужен.

Ниже я добавлю, с другой темы с этого сайта, информацию по весу селекторов и как можно работать с этим.

1
Андрей CS
не в сети 13 часов
На сайте с 30.11.-0001
Администратор
Тем 71
Сообщения 12220
7
14:34

хорошая тема, думаю, стоит упомянуть z-index)

1
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
8
14:50

Точно Андрей!
Не идите на поводу у z-index!

1. Все что внутри контента сайта не должно быть более 1-10 пунктов.
2. Фиксированные панели (реколлбар у WP-Recall) и меню - 99-100 пунктов. Ну максимум 1000. Не задирайте их до 10000-ч. Это перебор.
Задрав до 10000 вы можете перекрыть например всплывающую форму другого плагина, галерею или модальное окно.

3. Модальное окно 1500-1600 - т.к. вам нужно перекрыть все. Этот элемент за пределами сайта и значит не должен отвлекать внимание. Если в модальном окне за ним надо сделать затемненный полупрозрачный фон (оверлей) дайте оверлею 1499, а модальному окну 1500. Достаточно единицы чтобы браузер понял какой слой выше

не нужно задирать слишком высокие значения оси z. Но ВП шаблоны задирают. Это не профессионально и думаю это ошибка по неопытности - не стоит забывать что ВП шаблоны пишут люди. Что премиум шаблоны пишут они же и слово Premium !== Profi

1
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
9
15:20

В 6-м комментарии я упомянул - а что если вам нужно перебить существующий класс, вводите такой же - а он не работает. Не применяйте !important. Можно обойтись малой кровью.

Тут играет роль порядок загрузки css файла. Вот почему рекомендуют все изменения по кастомизации стилей вносить в конец стилевого файла. Самое нижнее правило заменяет вышестоящие.

Но как быть если css файлов несколько и тот, в котором вы вносите изменения, грузится раньше? Все просто - перебить его "весом"
Подробней в этом большом сообщении

Вы не можете просматривать опубликованные ссылки

Прочитали?

Теперь как это применить для нашего дополнения или плагина:
Я всегда стараюсь самый первый блок обернуть в ID:

<div id="prefix_general_block" class="prefix_some_class">

- таким образом я в конфликтной ситуации могу зацепиться за 100% существующий id и перебить что-то "весом", ведь идентификатор "весит" больше.

Но не стоит забывать что по спецификации w3.org ID с таким названием на странице должен присутствовать один раз. Пока есть старые браузеры.

1
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
10
16:32

С этой картинки мне и стоило начать:

Вы не можете просматривать опубликованные ссылки

Самый геморрой это input-ы
На картинке выше это

<input type="submit">

И мое дополнение (оно для админа сайта и писал его по сути для себя)

Итак - мы видим - я разрабатывал этот доп и он хорошо отображается в моем рабочем ВП шаблоне. Но я не посмотрел - а что будет с контентом что он выводит в других ВП шаблонах. Теперь мы видим. Только 3 из 14-ти только что протестированных шаблона (переключал пока делал скрины) показываю контент именно так как я хотел. Это плохо.

Фикс с инпутами продолжу позже. На сегодня от меня пока всё. Рассказать еще много нужно, но уже не сегодня.

Так вы все еще не тестируете ваши плагины и дополнения с другими ВП шаблонами? Подумайте еще разок. Вы хотите чтобы ваш товар установили включили и удалили? Или вы заинтересованы продвигать свои товары и свое имя?

1
garry
На сайте с 04.01.2014
Участник
Тем 100
Сообщения 1784
11
16:45

Да, я как раз буквально вчера мучился с импутами в одной задумке и отложил пока, просто пипец как их не просто сделать для "всех".
Особенно платные темы, ну уж настолько уникализируют, прям деваться некуда, везде свое я присутствует. 🙂

1
Otshelnik-Fm
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14122
12
16:58

Да Игорь, с ними веселье. Особенно гемор возникает когда специфичность усложняют вписывая в стили вп шаблонов

input[type="radio"] 
или 
input:not([type="submit"])

тут вроде все просто - в первом случае стиль конкретно к радиокнопке, во втором ко всем, кроме кнопки отправки. Но на деле перебить подобное элегантно и не повторяясь - веселая задача.

Честно сказать стилизацию этого чуда я не освоил на 100% постоянно какие-то подводные камни возникают.

Как хорошо разработчикам вп шаблонов у них reset.css есть - для сброса в единый вид. А вот для разработки плагинов и дополнений после ВП шаблонов подобного я не видел

1
Вы не имеете права на публикацию сообщений в этой теме