Как сделать блоки внимания на сайте при помощи плагина

Как использовать
Как создать новый блок
Настройка внешнего вида
Настройка размеров и отступов
Разбор кода CSS
Типы блоков

В этой небольшой заметке остановлюсь на том, как сделать блоки внимания для сайта на WordPress. Для этого напишем плагин. Можно использовать вот такой код плагина (смотри ниже), который реализует данную возможность.

<?php
/*
Plugin Name: Блоки внимания
Plugin URI: https://hoboweb.ru
Description: Плагин для создания блоков внимания на сайте WordPress.
Version: 1.0
Author: HoboWEB
Author URI: https://hoboweb.ru
*/

// Создание пользовательского типа записи для блоков внимания
function create_attention_block_post_type() {
    $labels = array(
        'name'                  => 'Блоки внимания',
        'singular_name'         => 'Блок внимания',
        'menu_name'             => 'Блоки внимания',
        'name_admin_bar'        => 'Блок внимания',
        'archives'              => 'Архив блоков внимания',
        'attributes'            => 'Атрибуты блока внимания',
        'parent_item_colon'     => 'Родительский блок:',
        'all_items'             => 'Все блоки',
        'add_new_item'          => 'Добавить новый блок',
        'add_new'               => 'Добавить новый',
        'new_item'              => 'Новый блок',
        'edit_item'             => 'Редактировать блок',
        'update_item'           => 'Обновить блок',
        'view_item'             => 'Просмотреть блок',
        'view_items'            => 'Просмотреть блоки',
        'search_items'          => 'Найти блоки',
        'not_found'             => 'Не найдено',
        'not_found_in_trash'    => 'Не найдено в корзине'
    );

    $args = array(
        'label'                 => 'Блоки внимания',
        'description'           => 'Пользовательский тип записи для блоков внимания',
        'labels'                => $labels,
        'supports'              => array('title', 'editor', 'thumbnail'),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => false,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'page'
    );

    register_post_type('attention_block', $args);
}
add_action('init', 'create_attention_block_post_type');

// Добавляем шорткод для вывода блока внимания
function attention_block_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'id' => ''
    ), $atts);

    $post = get_post($atts['id']);
    if ($post) {
        $output = '<div class="attention-block">';
        $output .= '<h3>' . $post->post_title . '</h3>';
        $output .= '<div class="attention-block-content">' . apply_filters('the_content', $post->post_content) . '</div>';
        if (has_post_thumbnail($post->ID)) {
            $output .= '<div class="attention-block-thumbnail">' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</div>';
        }
        $output .= '</div>';
        return $output;
    }
    return '';
}
add_shortcode('attention_block', 'attention_block_shortcode');

// Добавляем стили для блоков внимания
function attention_block_styles() {
    wp_enqueue_style('attention-block-styles', plugins_url('css/attention-block.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'attention_block_styles');

<?php

Plugin Name: Блоки внимания

Plugin URI: https://hoboweb.ru

Description: Плагин для создания блоков внимания на сайте WordPress.

Version: 1.0

Author: HoboWEB

Author URI: https://hoboweb.ru

// Создание пользовательского типа записи для блоков внимания

function create_attention_block_post_type() {

$labels = array(

'name' => 'Блоки внимания',

'singular_name' => 'Блок внимания',

'menu_name' => 'Блоки внимания',

'name_admin_bar' => 'Блок внимания',

'archives' => 'Архив блоков внимания',

'attributes' => 'Атрибуты блока внимания',

'parent_item_colon' => 'Родительский блок:',

'all_items' => 'Все блоки',

'add_new_item' => 'Добавить новый блок',

'add_new' => 'Добавить новый',

'new_item' => 'Новый блок',

'edit_item' => 'Редактировать блок',

'update_item' => 'Обновить блок',

'view_item' => 'Просмотреть блок',

'view_items' => 'Просмотреть блоки',

'search_items' => 'Найти блоки',

'not_found' => 'Не найдено',

'not_found_in_trash' => 'Не найдено в корзине'

);

$args = array(

'label' => 'Блоки внимания',

'description' => 'Пользовательский тип записи для блоков внимания',

'labels' => $labels,

'supports' => array('title', 'editor', 'thumbnail'),

'hierarchical' => false,

'public' => true,

'show_ui' => true,

'show_in_menu' => true,

'menu_position' => 5,

'show_in_admin_bar' => true,

'show_in_nav_menus' => true,

'can_export' => true,

'has_archive' => false,

'exclude_from_search' => false,

'publicly_queryable' => true,

'capability_type' => 'page'

);

register_post_type('attention_block', $args);

}

add_action('init', 'create_attention_block_post_type');

// Добавляем шорткод для вывода блока внимания

function attention_block_shortcode($atts, $content = null) {

$atts = shortcode_atts(array(

'id' => ''

), $atts);

$post = get_post($atts['id']);

if ($post) {

$output = '<div class="attention-block">';

$output .= '<h3>' . $post->post_title . '</h3>';

$output .= '<div class="attention-block-content">' . apply_filters('the_content', $post->post_content) . '</div>';

if (has_post_thumbnail($post->ID)) {

$output .= '<div class="attention-block-thumbnail">' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</div>';

}

$output .= '</div>';

return $output;

}

return '';

}

add_shortcode('attention_block', 'attention_block_shortcode');

// Добавляем стили для блоков внимания

function attention_block_styles() {

wp_enqueue_style('attention-block-styles', plugins_url('css/attention-block.css', __FILE__));

}

add_action('wp_enqueue_scripts', 'attention_block_styles');

Содержание:

Как использовать.
Как создать новый блок.
Настройка внешнего вида.
Настройка размеров и отступов.
Разбор кода CSS.
Типы блоков.

Этот плагин создает пользовательский тип записи «Блоки внимания», который позволяет создавать и управлять блоками внимания на сайте WordPress. Также он добавляет шорткод [attention_block id=»123″], где 123 — ID блока, который вы хотите вывести на странице.

Плагин также подключает пользовательские CSS-стили для блоков внимания, которые вы можете настроить в файле attention-block.css.

Как использовать

Чтобы использовать плагин, необходимо выполнить следущее:

Установить и активировать плагин в вашем WordPress.
Создать новые блоки внимания в разделе «Блоки внимания» в админ-панели.
Использовать шорткод [attention_block id=»123″] на страницах или в постах, где вы хотите вывести блок.

Чтобы разместить этот плагин на WordPress-сайте, нужно выполнить несколько простых шагов:

Создайте новый файл с именем «attention-block.php» в папке «wp-content/plugins/» вашего WordPress-сайта.
Скопируйте весь код, который я предоставил, и вставьте его в файл «attention-block.php».
Сохраните файл.
Перейдите в административную панель WordPress, затем перейдите в раздел «Плагины» и найдите плагин «Блоки внимания» в списке.
Активируйте плагин, нажав на ссылку «Активировать».

После этого плагин будет установлен и активирован на вашем WordPress-сайте. Теперь вы можете начать создавать и использовать блоки внимания на страницах и в постах.

Чтобы создать новый блок внимания, перейдите в раздел «Блоки внимания» в панели администратора WordPress. Здесь вы сможете добавлять новые блоки, редактировать существующие и управлять ими.

Для вывода блока внимания на странице или в посте, используйте шорткод [attention_block id=»123″], где «123» — это ID блока, который вы хотите отобразить.

Как узнать ID блока? Для получения ID блока внимания, который вы хотите отобразить на странице или в посте, вы можете выполнить следующие действия:

Перейдите в раздел «Блоки внимания» в панели администратора WordPress.
Найдите блок, который вы хотите вывести, и наведите на него курсор. Вы увидите, что в строке состояния браузера отображается ссылка вида «?post=123&action=edit», где «123» — это ID блока.
Скопируйте число «123» из ссылки. Это и есть ID блока, который вам нужно использовать в шорткоде.

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

Например, список блоков может выглядеть так:

| ID | Заголовок |
|—-|————|
| 123 | Важная информация |
| 456 | Новое предложение |
| 789 | Акция этой недели |

В этом случае, чтобы вывести блок «Важная информация», вы должны использовать шорткод [attention_block id=»123″]. Помните, что ID блока уникален для каждого конкретного блока, поэтому вам нужно получать ID именно того блока, который вы хотите отобразить.

Как создать новый блок

Как создавать новый блок внимания? Давайте подробнее разберем, как создавать новые блоки внимания в WordPress-сайте с помощью этого плагина.

Вот пошаговая инструкция:

Войдите в административную панель вашего WordPress-сайта.
В левом меню найдите раздел «Блоки внимания» и перейдите в него.
Вы увидите страницу со списком всех существующих блоков внимания. Чтобы создать новый блок, нажмите на кнопку «Добавить новый» в верхней части экрана.
На странице создания нового блока заполните следующие поля:
- Заголовок — укажите название вашего блока внимания.
- Содержимое — введите текст, который будет отображаться в блоке.
- Миниатюра — загрузите изображение, которое будет использоваться в качестве миниатюры блока.
После заполнения всех необходимых полей, нажмите на кнопку «Опубликовать» в правой части экрана, чтобы сохранить новый блок.

Теперь ваш новый блок внимания создан и сохранен. Чтобы отобразить его на странице или в посте, вам нужно будет использовать шорткод [attention_block id=»123″], где «123» — это ID только что созданного блока.

Вы можете найти ID блока, наведя курсор на него в списке блоков. ID будет отображаться в URL-адресе страницы редактирования блока.

Настройка внешнего вида

Как настраивать внешний вид и расположение блоков внимания на странице? Для настройки внешнего вида и расположения блоков внимания на странице вам нужно будет работать с CSS-стилями плагина. Вот несколько рекомендаций:

Создайте файл attention-block.css в папке wp-content/plugins/attention-block/css/ вашего WordPress-сайта.

Добавьте следующие базовые стили в этот файл:

css
.attention-block {
    background-color: #f8f8f8;
    border: 1px solid #e6e6e6;
    padding: 20px;
    margin-bottom: 20px;
}

.attention-block h3 {
    margin-top: 0;
}

.attention-block-content {
    margin-bottom: 10px;
}

.attention-block-thumbnail {
    float: right;
    margin-left: 20px;
    max-width: 150px;
}

css

.attention-block {

background-color: #f8f8f8;

border: 1px solid #e6e6e6;

padding: 20px;

margin-bottom: 20px;

}

.attention-block h3 {

margin-top: 0;

}

.attention-block-content {

margin-bottom: 10px;

}

.attention-block-thumbnail {

float: right;

margin-left: 20px;

max-width: 150px;

}

Эти стили создадут блок с фоновым цветом, границей, отступами и будут выравнивать миниатюру (если она есть) справа.

Чтобы изменить расположение блоков, вы можете добавить дополнительные стили. Например, чтобы отобразить блоки в две колонки, вы можете использовать следующие стили:

css
.attention-block {
    width: 48%;
    float: left;
    margin-right: 4%;
}

.attention-block:nth-child(2n) {
    margin-right: 0;
}

.attention-block:nth-child(2n+1) {
    clear: left;
}

css

.attention-block {

width: 48%;

float: left;

margin-right: 4%;

}

.attention-block:nth-child(2n) {

margin-right: 0;

}

.attention-block:nth-child(2n+1) {

clear: left;

}

Эти стили будут размещать блоки в две колонки, очищая каждый второй блок.

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

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

Настройка размеров и отступов

Как настроить размер и отступы блоков внимания? Для настройки размера и отступов блоков внимания вы можете добавить следующие CSS-стили в файл attention-block.css:

/* Размер блока */
.attention-block {
    width: 100%;
    max-width: 800px; /* Ограничение максимальной ширины блока */
    margin: 0 auto; /* Центрирование блока по горизонтали */
}

/* Отступы блока */
.attention-block {
    padding: 30px; /* Внутренние отступы */
    margin-bottom: 40px; /* Внешний нижний отступ между блоками */
}

/* Размер и отступы заголовка */
.attention-block h3 {
    font-size: 24px; /* Размер шрифта заголовка */
    margin-top: 0; /* Убираем верхний отступ заголовка */
    margin-bottom: 20px; /* Нижний отступ заголовка */
}

/* Размер и отступы содержимого */
.attention-block-content {
    font-size: 16px; /* Размер шрифта содержимого */
    line-height: 1.5; /* Межстрочный интервал */
    margin-bottom: 20px; /* Нижний отступ содержимого */
}

/* Размер и отступы миниатюры */
.attention-block-thumbnail {
    max-width: 200px; /* Максимальная ширина миниатюры */
    margin-left: 30px; /* Горизонтальный отступ миниатюры */
    margin-bottom: 10px; /* Нижний отступ миниатюры */
}

/* Размер блока */

.attention-block {

width: 100%;

max-width: 800px; /* Ограничение максимальной ширины блока */

margin: 0 auto; /* Центрирование блока по горизонтали */

}

/* Отступы блока */

.attention-block {

padding: 30px; /* Внутренние отступы */

margin-bottom: 40px; /* Внешний нижний отступ между блоками */

}

/* Размер и отступы заголовка */

.attention-block h3 {

font-size: 24px; /* Размер шрифта заголовка */

margin-top: 0; /* Убираем верхний отступ заголовка */

margin-bottom: 20px; /* Нижний отступ заголовка */

}

/* Размер и отступы содержимого */

.attention-block-content {

font-size: 16px; /* Размер шрифта содержимого */

line-height: 1.5; /* Межстрочный интервал */

margin-bottom: 20px; /* Нижний отступ содержимого */

}

/* Размер и отступы миниатюры */

.attention-block-thumbnail {

max-width: 200px; /* Максимальная ширина миниатюры */

margin-left: 30px; /* Горизонтальный отступ миниатюры */

margin-bottom: 10px; /* Нижний отступ миниатюры */

}

Разбор кода CSS

Давайте разберем, что делает каждый из этих CSS-стилей:

Размер блока:

width: 100%; — устанавливает ширину блока на 100% от доступного пространства.
max-width: 800px; — ограничивает максимальную ширину блока до 800 пикселей.
margin: 0 auto; — центрирует блок по горизонтали.

Отступы блока:

padding: 30px; — устанавливает внутренние отступы блока в 30 пикселей.
margin-bottom: 40px; — добавляет нижний внешний отступ между блоками в 40 пикселей.

Размер и отступы заголовка:

font-size: 24px; — устанавливает размер шрифта заголовка в 24 пикселя.
margin-top: 0; — убирает верхний отступ заголовка.
margin-bottom: 20px; — добавляет нижний отступ заголовка в 20 пикселей.

Размер и отступы содержимого:

font-size: 16px; — устанавливает размер шрифта содержимого в 16 пикселей.
line-height: 1.5; — добавляет межстрочный интервал в 1.5 раза.
margin-bottom: 20px; — добавляет нижний отступ содержимого в 20 пикселей.

Размер и отступы миниатюры:

max-width: 200px; — ограничивает максимальную ширину миниатюры в 200 пикселей.
margin-left: 30px; — добавляет горизонтальный отступ миниатюры в 30 пикселей.
margin-bottom: 10px; — добавляет нижний отступ миниатюры в 10 пикселей.

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

Типы блоков

Какие типы блоков внимания можно использовать на веб-странице? В плагине Attention Blocks для WordPress предусмотрено несколько типов блоков внимания, которые можно использовать на веб-странице. Вот основные типы:

Стандартный блок внимания:

Это базовый тип блока, включающий заголовок, содержимое и, опционально, миниатюру.
Можно использовать для привлечения внимания к важной информации, предложениям или объявлениям.

Блок выделенной информации:

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

Блок с кнопкой действия:

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

Блок-предупреждение:

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

Блок с формой обратной связи:

Позволяет встроить в блок простую форму обратной связи для сбора сообщений или отзывов от посетителей.
Удобен для организации обращений или сбора отзывов непосредственно на странице.

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

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

Всем WEB!

Как сделать блоки внимания

Оглавление

Как использовать

Как создать новый блок

Настройка внешнего вида

Настройка размеров и отступов

Разбор кода CSS

Типы блоков

Об авторе: Hobo

Добавить комментарий Отменить ответ

Оглавление

Как использовать

Как создать новый блок

Настройка внешнего вида

Настройка размеров и отступов

Разбор кода CSS

Типы блоков

Почитайте похожие материалы

Оглавление с подпунктами на сайте

Топ комментаторов

Об авторе: Hobo

Добавить комментарий Отменить ответ