Специальные блоки в постах с помощью плагина Special Text Boxes
На блогах и сайтах вы замечали такие блоки, как на картинке выше, но не каждый вникал в суть как это работает и как сделать такие красивые блоки у себя на сайте. Я подготовил этот материал, чтобы вы сделали все правильно и настроили с первого раза.
Содержимое статьи:
1. Примеры красивых блоков с помощью special textboxes
2. Почему не плагин WP Note, а именно STB?
3. Как установить и где скачать?
4. Настройка плагина STB
5. Как вставить блоки в статью / заметку?
Давайте перейдем к делу. У нас есть два пути реализации стильных информационных блоков:
1. Чистый html + css
2. Плагин special text boxes
Первый вариант нужно долго настраивать, верстать блоки и каждый раз вставлять в редактор, что типа этого:
1 |
<div class="donwload_source_code"><a href="http://wp-pack.ru/wp-content/*"><i class="icon-cloud-download"></i> Скачать НАЗВАНИЕ ПЛАГИНА</a></div> |
Естественно для каждого блока/кнопки нужны свои стили, классы… Вставлять такие блоки вручную не вариант, хотя можно их добавить в сам редактор, но при смене шаблона, приодеться переносить много функций с functions.php.
Второй вариант установить плагин, настроить его и не париться.
Выбор очевиден! Приступаем!
Примеры красивых блоков с помощью special textboxes
Вот примеры, которые изначально идут с темой Metro, забегая наперед скажу что их можно будет отредактировать через панель управления. А пока посмотрите на них, поклацайте спойлер и если все устраивает, то переходите к следующему шагу.

Думаю теперь вопросов не должно быть, для чего этот плагин служит. Естественно иконки, цвет, шрифты, размеры все можно изменить и подогнать под общий дизайн сайта.
Почему именно STB, а не плагин WP Note?
Был хороший плагин WP Note в 2010 году, примерно с такими блоками:
Вроде бы все не плохо, но тот факт что последнее обновление было в июне 2010 года, настораживает. Да и сколько воды уже утекло и вышло с десяток обновлений ядра.
Лучше использовать свежие решения, чем юзать старый хлам.
Как установить и где скачать?
Информация о версии плагина special text boxes рассматриваемого в этой статье:
Рассматриваемая версия: 5.3.96 от 21.04.2015
Совместимость с версией WordPress: 3.9 и выше.
Скачать плагин special text boxes
Если у вас версия WordPress ниже рекомендуемой, советуем скачать нашу сборку в которую входит необходимый начальный набор плагинов.
Для установки выполните следующие шаги:
1. После скачивания, разархивируем архив
2. Заливаем папку /wp-special-textboxes/ по FTP в папку wp-content / plugins /
3. Заходим в админ-панель и Переходим на вкладку “Плагины” (site.ru/wp-admin/plugins.php) и активируем плагин.
Переходим к следующему этапу!
Настройка плагина STB
Первоначально нужно потратить 10 минут времени, чтобы настроить все под ваши нужды, в противном случаи при вставке кода в редакторе придется КАЖДЫЙ РАЗ УКАЗЫВАТЬ необходимые функции блоков.
Я специально сделал множество скриншотов с пошаговой настройкой плагина, чтобы сэкономить ваше время. Уделите настройки 10 минут и все будет работать как часы.
1 шаг. С правой стороны появится пункт STB (http:/site.ru/wp-admin/admin.php?page=stb-settings) , переходит туда и выбираем режим CSS, так как он поддерживается везде, а вот JS иногда отключают.
2 шаг. Можете поменять сразу пиктограммы, указать время анимации и т.д. Тут все банально и зависит от ваших нужд.
3 шаг. Укажите нужны ли тени у блоков, я их убрал.
4 шаг. Укажите режим загрузки CSS – статический, ведь нам не нужно лишняя нагрузка. На крайний случай если стили будут работать криво, поставьте права chmod 666 на файлы стилей в директории с плагином.
5 шаг. Укажите тему на выбор, мне больше понравилась Метро в flat стиле. На выбор доступно 3 темы.
6 шаг. После выбора темы, заходим в меню “Стили” и можем изменить каждому блоку CSS, иконки, тени и т.д. Не поленитесь настройте все сразу под стиль сайта.
7 шаг. После перехода в “стили” в самом вверху будут Параметры режима JavaScript, но мы то выбрали в самом начале работу на CSS, без JS. Так что все настройки в этом блоке не будут применяться, просто пропускаем этот блок и ничего в нем не трогаем.
8 шаг. А чуть ниже видим настройки CSS, вот их и редактируем, указываем новые иконки, цвета, градиенты и целую кучу других настроек. Когда выполните настройку для всех блоков, можно переходить к самому интересному пункту ниже.
Как вставить блоки в статью / заметку?
Для того чтобы начать пользоваться плагином special text boxes, не нужно запоминать short-коды и держать все в памяти.
Плагин автоматически будет добавлен в редактор:
1. Выделяем текст который нужно поместить в специальную вставку.
2. Кликаем на иконку
3. Во всплывающем окне настраиваем блок, указываем тип, разрешаем сворачивание блока, указываем обтекаемость (float), удаляем/добавляем тени и т.д.
Все настройки на русском языке, так что ничего страшного в них нет, методом ТЫКА получите нужный вариант.
На всякий случай дублирую ссылку на скачивание, вдруг кто не заметит )
Если есть вопросы, пишите в комментариях. Всегда готовы помочь и подсказать, что да как.