WordPress: Добавление информационных блоков

За основу я взял часть кода с этого блога.

Информация для справки:
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок…

Код блока:

<div class="info"><strong>Информация для справки:</strong>
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок...</div>
Внимание!
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок…

Код блока:

<div class="warning"><strong>Внимание!</strong>
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок...</div>
Ошибка!!!
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок…

Код блока:

<div class="error"><strong>Ошибка!!!</strong>
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок...</div>
Полезная информация!!!
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок…

Код блока:

<div class="checked"><strong>Полезная информация!!!</strong>
1. Далее идёт длинный текст на несколько строчек
2. Вторая строка
3. Ещё одна очень длинная строка, для того, чтобы проверить, как именно будет размещён этот блок...</div>

Код, который необходимо добавить в файл style.css дочерней темы:

.info,
.checked,
.warning,
.error {
position: relative;
padding: 20px 10px 20px 70px;
border: 1px solid #ccc;
border-radius: 6px;
}
.info:before,
.checked:before,
.warning:before,
.error:before {
position: absolute;
top: 50%;
width: 70px;
margin-left: -70px;
line-height: 0!important;
font-family: dashicons;
font-size: 40px;
text-align: center;
}
.info {color: #00284b; background: #c0d1d9;}
.info:before {content: "\f348";}
.checked {color: #1e300a; background: #d5d9d0;}
.checked:before {content: "\f12a";}
.warning {color: #1f1302; background: #c1c3ad;}
.warning:before {content: '\f534';}
.error {color: #4d1200; background: #d2c2bc61;}
.error:before {content: "\f153";}

На том сайте, для отображения значков, автор использует Font Awesome, но, поскольку почти всё необходимое уже встроенно в движок WordPress, я использовал его набор шрифтов. Сам шрифт подключается с помощью такой строчки:

font-family: dashicons;

Все встроенные в WordPress иконки (значки) можно посмотреть и выбрать отсюда:
Developer Resources: Dashicons

Для удобства использования блоков, я создал в Классическом редакторе WordPress кнопки с помощью плагина «Easy Tinymce Editor Add Button«:

Сами кнопки добавляются так:

Update

Если в браузере включено блокирование загрузки шрифтов с сайтов, то вместо иконок будут отображаться как минимум квадратики:

А в худшем случае будут подставляться символы из доступного шрифта:

Таким образом, жертвуя «красотой», я решил не использовать сторонние шрифты, а добавить информационные знаки из таблицы символов Unicode. Получились такие значения:

.info:before
{
 content: "\24D8";
}

.checked:before
{
 content: "\2611";
}

.warning:before
{
 content: '\26A0';
}

.error:before
{
 content: "\2612";
}


Запись опубликована автором в рубрике Software с метками , .
Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments