Hobo
В этой заметке напишем код, который позволит выводить на WordPress-сайте блоки внимания в тексте на чистом CSS. Чтобы создать такие блоки внимания, потребуется выполнить несколько шагов:
- Создать HTML-структуру для блоков внимания.
- Добавить CSS-стили для этих блоков.
- Вставить HTML и CSS в нужное место в WordPress.
Блок внимания при помощи CSS
Шаг 1: Создание HTML-структуры.
Мы можем добавить HTML-структуру для блоков внимания в редакторе блоков (Gutenberg) или в классическом редакторе (если используем его). Вот пример HTML для блока внимания:
|
1 2 3 4 |
<div class="attention-block"> <h2>Заголовок блока внимания</h2> <p>Это важное сообщение, на которое стоит обратить внимание.</p> </div> |
Шаг 2: Добавление CSS-стилей.
Теперь нужно добавить CSS, чтобы стилизовать блоки внимания. CSS можно добавить в раздел «Дополнительные CSS» в настройках темы (Внешний вид > Настроить > Дополнительные CSS) или в файл стилей темы (style.css).
Вот пример CSS для блока внимания:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.attention-block { border: 2px solid #f00; /* Красная рамка */ background-color: #ffebeb; /* Светло-красный фон */ padding: 20px; /* Отступы внутри блока */ margin: 20px 0; /* Отступы снаружи блока */ border-radius: 10px; /* Скругленные углы */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень */ } .attention-block h2 { margin-top: 0; /* Убираем верхний отступ у заголовка */ color: #d00; /* Цвет заголовка */ } .attention-block p { margin-bottom: 0; /* Убираем нижний отступ у параграфа */ color: #333; /* Цвет текста */ } |
Шаг 3: Вставка HTML и CSS в WordPress.
Выполнить:
- Вставить HTML-код в нужное место на странице или в записи.
- Добавить CSS-код в разделе «Дополнительные CSS» в настройках темы или в файле style.css рабочей темы.
Пример вставки в редактор блоков (Gutenberg):
- Открыть запись или страницу для редактирования.
- Добавить блок «HTML-код».
- Вставить в него HTML-код:
1234<div class="attention-block"><h2>Заголовок блока внимания</h2><p>Это важное сообщение, на которое стоит обратить внимание.</p></div>
Добавление CSS через панель управления WordPress:
- Перейти в «Внешний вид» > «Настроить».
- Выбрать «Дополнительные CSS».
- Вставить CSS-код и нажать «Опубликовать».
Теперь блоки внимания будут отображаться с заданными стилями на сайте WordPress. Вот так это выглядит:
See the Pen
Untitled by Artem (@HoboBo)
on CodePen.
Блок внимания с иконкой
Для добавления иконки в левую часть блока внимания, можно использовать Font Awesome или любой другой набор иконок. В данном примере я использую Font Awesome, который легко интегрируется в WordPress.
Шаг 1: Подключение Font Awesome.
Если у тебя ещё не подключён Font Awesome, ты можешь сделать это, добавив следующий код в файл functions.php темы:
|
1 2 3 4 |
function enqueue_font_awesome() { wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); } add_action('wp_enqueue_scripts', 'enqueue_font_awesome'); |
Шаг 2: Обновление HTML-структуры.
Добавим HTML-код для иконки в блок внимания:
|
1 2 3 4 5 6 7 |
<div class="attention-block"> <i class="fas fa-exclamation-circle"></i> <div class="attention-content"> <h2>Заголовок блока внимания</h2> <p>Это важное сообщение, на которое стоит обратить внимание.</p> </div> </div> |
Шаг 3: Обновление CSS-стилей.
Добавим CSS, чтобы стилизовать иконку и блок внимания:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.attention-block { display: flex; align-items: center; /* Выравнивание элементов по вертикали */ border: 2px solid #f00; /* Красная рамка */ background-color: #ffebeb; /* Светло-красный фон */ padding: 20px; /* Отступы внутри блока */ margin: 20px 0; /* Отступы снаружи блока */ border-radius: 10px; /* Скругленные углы */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень */ } .attention-block i { font-size: 2em; /* Размер иконки */ color: #d00; /* Цвет иконки */ margin-right: 15px; /* Отступ справа от иконки */ } .attention-content { flex: 1; /* Занимает оставшееся пространство */ } .attention-block h2 { margin-top: 0; /* Убираем верхний отступ у заголовка */ color: #d00; /* Цвет заголовка */ } .attention-block p { margin-bottom: 0; /* Убираем нижний отступ у параграфа */ color: #333; /* Цвет текста */ } |
Шаг 4: Вставка обновлённого HTML и CSS в WordPress.
Вставь обновлённый HTML-код в нужное место на странице или в записи.
|
1 2 3 4 5 6 7 |
<div class="attention-block"> <i class="fas fa-exclamation-circle"></i> <div class="attention-content"> <h2>Заголовок блока внимания</h2> <p>Это важное сообщение, на которое стоит обратить внимание.</p> </div> </div> |
Добавь обновлённый CSS-код в разделе «Дополнительные CSS» в настройках темы или в файл style.css твоей темы.
Теперь твой блок внимания будет включать иконку слева, что поможет привлечь больше внимания.
Использование шорткода для блока внимания
Для того чтобы создать блок внимания, который можно вставлять с помощью шорткода, тебе нужно добавить функцию в файл functions.php рабочей темы. Эта функция будет генерировать HTML-структуру для блока внимания, когда шорткод используется.
Шаг 1: Добавление функции для шорткода.
Добавь следующий код в файл functions.php твоей темы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function attention_block_shortcode($atts, $content = null) { // Установим атрибуты по умолчанию $atts = shortcode_atts( array( 'title' => 'Заголовок блока внимания', // Заголовок по умолчанию 'icon' => 'fa-exclamation-circle', // Иконка по умолчанию ), $atts, 'attention_block' ); // Возвращаем HTML-код блока внимания return '<div class="attention-block">' . '<i class="fas ' . esc_attr($atts['icon']) . '"></i>' . '<div class="attention-content">' . '<h2>' . esc_html($atts['title']) . '</h2>' . '<p>' . do_shortcode($content) . '</p>' . '</div>' . '</div>'; } // Регистрируем шорткод add_shortcode('attention_block', 'attention_block_shortcode'); // Подключаем Font Awesome function enqueue_font_awesome() { wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); } add_action('wp_enqueue_scripts', 'enqueue_font_awesome'); |
Шаг 2: Использование шорткода в записях и страницах.
Теперь ты можешь использовать шорткод [attention_block] в записях и страницах WordPress. Вот пример использования:
|
1 2 3 |
[attention_block title="Важное уведомление" icon="fa-exclamation-circle"] Это важное сообщение, на которое стоит обратить внимание. [/attention_block] |
Шаг 3: CSS для стилизации блока внимания.
Добавь CSS-стили в разделе «Дополнительные CSS» в настройках темы или в файл style.css твоей темы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.attention-block { display: flex; align-items: center; /* Выравнивание элементов по вертикали */ border: 2px solid #f00; /* Красная рамка */ background-color: #ffebeb; /* Светло-красный фон */ padding: 20px; /* Отступы внутри блока */ margin: 20px 0; /* Отступы снаружи блока */ border-radius: 10px; /* Скругленные углы */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень */ } .attention-block i { font-size: 2em; /* Размер иконки */ color: #d00; /* Цвет иконки */ margin-right: 15px; /* Отступ справа от иконки */ } .attention-content { flex: 1; /* Занимает оставшееся пространство */ } .attention-block h2 { margin-top: 0; /* Убираем верхний отступ у заголовка */ color: #d00; /* Цвет заголовка */ } .attention-block p { margin-bottom: 0; /* Убираем нижний отступ у параграфа */ color: #333; /* Цвет текста */ } |
Теперь блоки внимания можно добавлять с помощью шорткода, указав заголовок и иконку через атрибуты шорткода.
Всем WEB!
