Специальные блоки в постах с помощью плагина Special Text Boxes

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

Содержимое статьи:

1. Примеры красивых блоков с помощью special textboxes
2. Почему не плагин WP Note, а именно STB?
3. Как установить и где скачать?
4. Настройка плагина STB
5. Как вставить блоки в статью / заметку?

Давайте перейдем к делу. У нас есть два пути реализации стильных информационных блоков:

1. Чистый html + css
2. Плагин special text boxes

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

Естественно для каждого блока/кнопки нужны свои стили, классы… Вставлять такие блоки вручную не вариант, хотя можно их добавить в сам редактор, но при смене шаблона, приодеться переносить много функций с functions.php.

Второй вариант установить плагин, настроить его и не париться.

Выбор очевиден! Приступаем!

Примеры красивых блоков с помощью special textboxes

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

Со спойлером, кликните сюда!

Внимание + спойлер

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

Почему именно STB, а не плагин WP Note?

Был хороший плагин WP Note в 2010 году, примерно с такими блоками:

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

Лучше использовать свежие решения, чем юзать старый хлам.

Как установить и где скачать?

Информация о версии плагина 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), удаляем/добавляем тени и т.д.

Все настройки на русском языке, так что ничего страшного в них нет, методом ТЫКА получите нужный вариант.

На всякий случай дублирую ссылку на скачивание, вдруг кто не заметит )

Если есть вопросы, пишите в комментариях. Всегда готовы помочь и подсказать, что да как.