WordPress плагин Special Text Boxes

stb

Довольно часто блоггеру требуется каким-либо образом выделить в статье важный текст. Это может быть предупреждение, важная информация, предостережение и т.п. Разумеется, можно использовать для подсветки текста стили, добавляя их прямо в текст статьи, или, на худой конец, использовать стиль цитаты. Но не все умеют пользоваться стилями, а цитата не подходит на все случаи жизни. Чтобы упростить себе (и не только себе) жизнь, я написал небольшой плагин для подсветки текста в статьях.

(This post is available on english language.)

Плагин добавляет в WordPress небольшой файл таблицы стилей и/или файл javascript и короткие коды (short codes) для подсветки текста. Выглядит это так:

Режим CSS

Это пример подсветки текста-предостережения. Вывод производится спомощью ID “alert”. Длина подсвечиваемого текста не имеет значения.
Это пример подсвеченного текста для вывода линка скачивания. Вывод производится с помощью ID “download”.
Информация
Это пример информационного блока с заголовком. Вывод производится посредством ID “info”.

Режим Javascript

Это пример подсветки предупреждающего текста. Выводится при использовании ID “warning”. Использование короткого кода без ID даст такой-же эффект. 😉
Черная цитата
Это пример чёрного блока с заданным по умолчанию заголовком. Как его использовать я ещё не придумал.
Пользовательский стиль
Это пример пользовательского блока.

Поддерживаемые языки

Админ-панель плагина доступна на следующих языках:

Установка

  • Распаковать файл архива плагина
  • Поместить папку плагина в папку WordPress
    wp-content/plugins
  • Активировать плагин на странице плагинов
  • Настроить внешний вид блоков по вкусу 😉

Плагин готов к использованию!

Использование

Для подсветки текста, используйте следующий короткий код:

Подсвечиваемый текст и/или короткие коды

или (только для версии 0.1.2+)

Подсвечиваемый текст и/или короткие коды

НУЖНЫЙ_ID может принимать следующие значения системных (заданных плагином) стилей:

  • alert – красный блок. Предостережение, опасность.
  • download – синий блок. Скачивания.
  • info – зелёный блок. Информация.
  • warning – жёлтый блок. Предупреждение.
  • black – чёрный блок. (???)
  • grey – серый блок. Введён для возможности демонстрации коротких кодов используемых в WordPress.

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

ЗАГОЛОВОК – любой нужный Вам заголовок для подсвечиваемого текста.

Внимание
Не используйте id “grey” для демонстрации коротких кодов wp-special-textboxes. Это приведёт к ошибке парсера WordPress. Ничего страшного не случится, но нужного результата Вы не добьётесь.
Вы можете использовать короткие коды других плагинов внутри короткого кода wp-special-textboxes. Например:
Скачать

  wp-special-textboxes-101 (232,2 КиБ, 292 скачиваний)
Wordpress плагин wp-special-textboxes. Версия 1.0.1

Это пример использования “короткого кода” плагина Download Manager внутри “короткого кода” плагина wp-special-textboxes. Результат вывода этой конструкции можно увидеть в разделе “Скачать” этой статьи.

Короткие коды можно вставлять в текст статьи с помощью диалога вставки:

Настройка “на лету”

Это пример настроенного “на лету” блока-предостережения (alert).
Пример настройки на лету
Это пример настроенного “на лету” блока-предостережения. Вывод произвёлся с помощью id alert, и параметров коротких кодов.

Параметры настройки “на лету”:

  • color – цвет текста
  • ccolor – цвет текста заголовка
  • bcolor – цвет окантовки
  • bgcolor – цвет фона (режим CSS), начальный цвет градиента (режим Javascript)
  • bgcolorto – конечный цвет градиента (режим Javascript)
  • cbgcolor – цвет фона заголовка (режим CSS), начальный цвет градиента заголовка (режим Javascript)
  • cbgcolorto – конечный цвет градиента заголовка (режим Javascript)
  • image – полный URL изображения. Для вывода блока без иконки, используйте значение null
  • big – используйте этот параметр для принудительной установки размера изображения. Может быть true или false. Только для режима CSS.
  • mode – режим отображения (css|js)
  • float – включение режима обтекания текста (true, false), по умолчанию false
  • align – выравнивание блока специального текста в режиме обтекания текста (left, right), по умолчанию left
  • width – ширина блока в пикселах в режиме обтекания текста (только цифры, без px), по умолчанию 200
  • collapsed – показывает блок при загрузке в свёрнутом виде, если сворачивание/разворачивание разрешено в параметрах
  • mleft – левый отступ в пикселах.
  • mright – правый отступ в пикселах.
  • mtop – верхний отступ в пикселах.
  • mbottom – нижний отступ в пикселах.
  • collapsing – разрешить/запретить сворачивание/разворачивание блока
  • defcaption – использовать заданный по умолчанию заголовок блока
Код блока из примера настройки на лету
[stextbox id="alert" caption="Пример настройки на лету" color="000000" ccolor="ffffff" bgcolor="f7cdf5" cbgcolor="f844ee" bcolor="f844ee" image="//blogcoding.ru/wp-content/plugins/special-text-boxes-pro/images/heart-b.png"]Это пример настроенного “на лету” блока-предостережения. Вывод произвёлся с помощью id alert, и параметров коротких кодов.[/stextbox]

Настройка

C осторожностью используйте дополнительные параметры режима CSS. Стандарт CSS3, на сегодняшний день, не является официальным стандартом (бета). Браузер не убьёт, но могут проявиться неприятные, с точки зрения эстетики восприятия, эффекты …

Репозитарий стилей

Начиная с версии 4.0.65 плагин позволяет иметь столько стилей, сколько нужно владельцу блога. Все стили хранятся в репозитарии стилей (таблице базы данных) и могут быть настроены на любой вкус. Стили делятся на две категории: предустановленные (системные и специальные) и пользовательские. Параметры всех стилей могут быть изменены администратором блога. Отличие заключается в том, что ярлыки (уникальные имена) можно задавать только для пользовательских стилей. Ярлыки для предустановленных стилей изменить невозможно.

Используйте репозитарий для настройки существующих и создания новых стилей внешнего вида блоков.

Блок в любом месте блога

Если Вы хотите разместить блок подсвеченного текста где-то вне статьи, Вы можете воспользоваться функцией stbHighlightText. Например:

Функция stbHighlightText определена как

где

  • $content – текст блока (string)
  • $id – ID блока (string)
  • $caption – заголовок блока, если требуется (string)
  • $atts – дополнительные параметры блока (array)

Массив дополнительных параметров определён как:

где

  • color – Цвет шрифта блока (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • ccolor – Цвет шрифта заголовка блока (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • bcolor – Цвет окантовки блока (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • bgcolor – Цвет фона (режим CSS), начальный цвет градиента (режим Javascript) (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • bgcolorto – Конечный цвет градиента (режим Javascript) (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • cbgcolor – Цвет фона заголовка (режим CSS), начальный цвет градиента заголовка (режим Javascript) (шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • cbgcolorto – конечный цвет градиента заголовка (режим Javascript)(шесть шестнадцатиричных цифр цвета без символа #, определённых как строка (string))
  • image – полный URL иконки (рекомендуется изображение PNG с прозрачным фоном, 25х25 пиксел для малой иконки и 50х50 для большой). Используйте значение null для вывода блока без иконки (string)
  • big – Используйте этот параметр для определения размера заданной иконки (большая, малая). Может быть true или false (boolean as string).
  • mode – режим отображения (css|js)
  • float – включение режима обтекания текста (true, false), по умолчанию false
  • align – выравнивание блока специального текста в режиме обтекания текста (left, right), по умолчанию left
  • width – ширина блока в пикселах в режиме обтекания текста (только цифры, без px), по умолчанию 200
  • collapsed – показывает блок при загрузке в свёрнутом виде, если сворачивание/разворачивание разрешено в параметрах (true|false)
  • mleft – левый отступ в пикселах.
  • mright – правый отступ в пикселах.
  • mtop – верхний отступ в пикселах.
  • mbottom – нижний отступ в пикселах.
  • collapsing – разрешить/запретить сворачивание/разворачивание блока (true|false)
  • defcaption – использовать заданный по умолчанию заголовок блока (true|false)
  • direction – направление языка, для вставок цитат с иным направлением языка (ltr|rtl)
  • level – уровень вложения блока. Только для режима Javascript. Позволяет отложить прорисовку внутреннего блока до тех пор, пока не будет прорисован внешний блок. (0|1)

Начиная с версии 2.0.22 полностью определять массив не требуется, достаточно определить лишь необходимые параметры:

или

Блок в блоке

Если Вы хотите вставить один блок в другой, используйте короткий код “stb“. Например:

Инфо
Некоторый текст
Скачать
Некоторый текст во внутреннем блоке

Режим CSS

Инфо
Некоторый текст
Скачать
Некоторый текст во внутреннем блоке

Режим Javascript

Инфо
Некоторый текст
Скачать
Некоторый текст во внутреннем блоке

Виджет

В Special Text Boxes 3 добавлена возможность вывода блока специального текста в сайдбар в виде виджета текста.

Виджет Специальный Текст

Текст может содержать HTML теги, а в режиме эмуляции PHP, и PHP-коды.

В режиме эмуляции PHP обязательно используйте PHP-теги даже, если Вы используете только PHP код и более ничего!

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

Скачать

Special Text Boxes
Плагин подсвечивает выводимый текст в виде цветного блока

Автор: minimus, версия: 6.2.1, обновлён: 16.11.2023,
Требуется версия WP: 5.6 или выше, протестирован до версии: 6.4.3.
Скачать ( раз) (19 голосов)

Тестирование

Тестирование
Тестирование плагина проводилось на следующих браузерах:

1. Internet Explorer 7..9

2. Mozilla FireFox 3..9

3. Opera 10.0..11.52

4. Google Chrome 11.0.154.53..15.0.874.121

5. Apple Safari 3.1.2..5.1.1 (for Windows)

© 2009 – 2018, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.

Поделитесь статьёй

Об авторе

Lead Frontend Developer (ReactJS, NodeJS)

Комментарии (202)

  1. Вадим :

    Блин… кое как нашел этот сайт и эту тему )))) можно на будущее в плагин вставить прямую ссылку на сайт и эту тему.
    Вы не поверите как я искал этот сайт! Скопировал название плагина “Special Text Boxes” и вставил в яндекс )))))))))))))))))))))))))

    • minimus :

      Можно 😉

  2. kibastos :

    подскажите как задать ширину в пикселях? Пробовал указать в основных параметрах с помощью диалога вставки – не получилось…

    • minimus :

      Ширина блока задаётся только для режима обтекания текстом. Если Вы хотите изменить ширину блока в стандартном режиме, поэкспериментируйте с отступами (настройки плагина).

  3. Wower :

    Спасибо за плагин, но у меня проблема. Во всех браузерах съехала кнопка открытьзакрыть, где нужно отредактировать стиль должным образом, чтобы точно изменить ее положение для блоков? Пример косяка в ссылке “Сайт”.
     
    Заранее спасибо.

  4. Ginom :

    Добрый день, нужна помощь в решении проблемы, жду дельных советов, а не переустанови или смени тему и т.д, уже пробовал
    Описание: При установки некоторых плагинов например Special Text Boxes Версия 3.5.45 в визуальный редактор добавляются кнопки быстрой вставки с ними и проблемы. Нажимаю на кнопку появляется всплывающее окошко но пустое, в нем нет не полей ничего.
    Даная проблема присутствует во всех браузерах, что у меня установлены IE, Opera, Firefox. Я переключался на стандартную тему получил тот же результат, отключал другие плагины, не помогает, делал чистую установку бес толку WordPress 3.0.

    • minimus :

      Проверьте вспомогательные файлы в папке js … У Вас сервер очень туго работает, могло что-нибуть плохо выгрузиться на сервер …

      • Ginom :

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

  5. Ginom :

    Добрый день.
    Установил simple-view последнею версию, та же проблема, при вызове окна быстрого ввода оно появляется пустым без полей. Мне кажется я нашел причину но не знаю как ее исправить.. По моему причина в том, что кнопки встраиваются при активации не в то поле, то есть если бы они разместились там же где кнопки вставить изображение, видео файл и тд, то есть над редактором, то все бы работало. Думаю такое должно происходить у каждого кто делает чистую установку вордпресса и плагинов simple на последних версиях вордпресс, по крайней мере я нашел в гугле обсуждение такой же проблемы, но не решение.
    minimus может посмотрите верна ли мысль? Просто кнопки вставить изображение, те что над редактором из коробки нормально открываются.

    • minimus :

      Было бы неплохо перенести обсуждение этого вопроса на форум. Там же я постарался ответить на Ваш вопрос (в общих чертах). 😉

      • Ginom :

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

        • minimus :

          Не всё и не всегда работает на локальном сервере, особенно js на денвере. Именно поэтому локальными серваками не пользуюсь, хотя XAMPP был очень даже неплох. Проблема в том, что то, что работает на локали, может не заработать в сети и наоборот. Я поставил чистый WP 3.0 на тестовый блог – всё работает. Проверьте сколько у Вас выделено памяти … Кстати, Ваш блог грузится больше пяти минут и половина файлов не грузится вовсе …

          • Ginom :

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

            • Ginom :

              Нашел я причину, все до смешного просто.) Банерарезка в касперском почему то воспринимала именно окна этих плагинов как рекламные банеры, не знаю, чем они отличаются от окон других плагинов и самого вордпресса.

              • minimus :

                Касперский – паникёр! 😉 Впрочем … может оно так и надо 🙂
                Большинство окон делается как HTML, у меня PHP

  6. SnoUweR :

    Поменял тему. Плагин начал странно работать :(. Спойлеры в записях теперь не открываются. И оформления у спойлеров нету. Просто тупо текст и стрелочка V. Что могло случиться?
     
    Сайт указал. Надеюсь на вашу помощь
    WP 3.0.1

    • minimus :

      Попробуйте переустановить плагин – у Вас вообще ничего не грузится (из файлов плагина) – ни CSS, ни скрипты. 🙁

  7. SnoUweR :

    Деактивировал плагин, удалил его из папки plugins, опять установил, активировал. Всё так же ( Только настройки сбросились. Самое интересное, что в админке всё нормально. Похоже с темой что-то не то. Но вот что?

    • minimus :

      Ваша тема использует Cufon – с ним всегда какие-то проблемы …

      • SnoUweR :

        Странно. Без Cufon’a всё также

        • minimus :

          Проверьте, есть ли в файле head.php код wp_head();

          • SnoUweR :

            Не было. Добавил. Всё заработало. Спасибо за помощь 🙂

            • minimus :

              Пожалуйста! 😉

  8. тестор :

    Уважаемый minimus Прекрасный плагин – огромное спасибо за проделанную работу.
    Пожелания:
    сделать возможным настраивать несколько блоков: castom1, castom2, castom3…
    настройки в блоке:
    настройка  отступов отдельно для каждого элемента (текст заголовка, спец текст,пиктограмма) – padding-left ….
    настройка тени блока
    настройка тени текста отдельно для заголовка и специального текста
    в качестве фона заголовка использовать картинку, градиентную заливку
    в качестве фона текста использовать градиентную заливку
     
     
    Проблемка:
    плагин не работает в визуальном режиме, окно настроек есть, жму на “insert” – не применяется.
    Проверил кодировку скаченных с офф сайта файлов плагина- все файлы в ANSI, хотя по умолчанию движок WordPress использует UTF8.
    Преобразовал кодировку  файлов в UTF8 без BOM –  не помогло (виз редактор).
     
     
     

    • minimus :

      Большинство Ваших пожеланий уже учтено в pre-alpha релизе 4-ой версии плагина. Всё, что Вы перечислили, планируется включить в окончательную версию.

      Ищите конфликтный плагин. UTF8 и ANSI при использовании загружаемого TEXT DOMAIN роли не играют …

      • SnoUweR :

        Скорей бы релиз 4-ой версии

        • minimus :

          Работаю … 😉

      • тестор :

        Спасибо, с нетерпением ждем
        Еще пожелания:
        Добавить возможность использования спец текста в качестве всплывающей подсказки для текст заголовка или пиктограммы заголовка
        Добавить возможность показа блока таким образом – //icebeat.bitacoras.com/mootools/growl/
        Добавить возможность использовать заголовок, пиктограммы в качестве ссылок
        Для заголовков блока – добавление дополнительных ссылок-пиктограмм(padding-right), такие как в плагине WP-SynHighlight v2.2.2, используемого на вашем сайте в качестве описания кода.
         
         

        • minimus :

          Попробую … Но не всё сразу …
          Что касается подсказок, то об этом я уже давно думаю …

  9. niroln :

    Хех, тоже самое и у меня, что-то с кодировкой окна диалога вставки, весть текст иероглифами какими-то. Пробовал переустановить – не помогло. Жаль, красивый плагин.

  10. Ginom :

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

    • minimus :

      1. Файл стилей плагина – php-файл. Объединить будет трудно, в смысле, нет смысла (количество файлов не уменьшится). Пардон за тафтологию …
      2. Я в изображении даю прозрачный отступ. В STB4 будут изменения … 😉

  11. wtfowned :

    Пролистал весь пост и комменты, не нашел такой проблемы как у меня.
     
    Поставил плагин, настроил кастом блок. Появилась кнопка при публикации поста, но она не активна, не могу нажать. Через код каждый раз вставлять блок это неудобно. Файлы перезаливал на хостинг – не помогло. Стоит последняя версия – ставил сегодня. Подскажите с чем может быть связано?

    • minimus :

      Рассуждаем логически:
      1. Мы хотим поместить некий текст в блок
      2. Этот текст надо как-то определить
      Просто выделите необходимый текст!

  12. Artur :

    А как реализовать совместимость этого плагина с FCKeditor? Этот редактор нагло игнорит плагин

    • minimus :

      Боюсь, что никак! Этот плагин вставляет собственные кнопки именно в MCE …

    • Artur :

      да я и кодом бы обошёлся. проблема в том, что сам редактор не инициализирует боксы. в тексте просто вприсываются слова сайтбокс. может быть есть возможность прицепить инициализацию функционально к ФСК?

      • minimus :

        Надо подумать … Позже … Сейчас пишу новый плагин – нет времени … 🙁

  13. Елена :

    Вы супер!!! Обожаю вас и то что вы делаете. Давно хотела что-то подобное.
     
    Спасибо вам БОЛЬШОЕ!!!!

    • minimus :

      И Вам спасибо! 😉

  14. skforussia.ru :

    отличный плагин, выделение очень пригодится

  15. Satori :

    Плагин работает. Очень нравится 🙂 Даже нашла применение чёрному блоку 🙂 Спасибо!

  16. Алексей :

    После установки вот такая ерор: Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 491520 bytes) in /home/dostato1/public_html/wp-admin/menu.php on line 235


    Будьте добры, дайте совет, что делать?!

    • minimus :

      Памяти мало … Удалите что-нибудь ненужное (из плагинов) …

  17. Олег :

    В версии WP 3.1.2 плагин работает лишь частично.
    При выезжающих блоках кнопка, расположенная наряду с названием блока работает только 1 раз, после чего просто отказывается работать (нажал – выехала, нажал снова – не заехала и наоборот 🙂 )

    • minimus :

      Поскольку из 20 000 пользователей эта проблема возникла только у Вас, ищите конфликт плагинов. Вероятнее всего, это конфликт версий jQuery UI

    • Кукуринс :

      Wp 3.12 У уменя вообще не работает разворачивание блока и даже кнопочка не отображается справа как на скринах.

  18. ERSEO.RU :

    Спасибо за плагин. Пойду устанавливать

  19. wtfowned :

    Писал когда-то со своей проблемой, что кнопка появилась, а блок не получается вставить 🙂 Теперь диаметрально противоположная – блоки вставлять приходится каждый раз в ручную, имея под рукой документацию и формируя “на лету”, а вот кнопки при публикации нет. Может быть при обновлении WP слетела? Я как-то не обратил внимание, а сейчас нужно много разных блоков делать – невозможно все руками 🙁

    Переустановить плагин или где-то можно просто поправить строку?

    • minimus :

      Думаю – лучше переустановить …