Блоговод | WordPress плагин Special Text Boxes

WordPress плагин Special Text Boxes

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

(This post is available on english language.)

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

Режим CSS

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

Это пример подсвеченного текста для вывода линка скачивания. Вывод производится с помощью ID “download”.

Информация

Это пример информационного блока с заголовком. Вывод производится посредством ID “info”.

Режим Javascript

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

Черная цитата

Это пример чёрного блока с заданным по умолчанию заголовком. Как его использовать я ещё не придумал.

Пользовательский стиль

Это пример пользовательского блока.

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

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

Английский
Русский
Итальянский (перевод Gianni Diurno)
Белорусский (перевод Fat Cower)
Узбекский (перевод Алишер Сафаров)
Польский (перевод Daniel Fruzynski)
Арабский (перевод مدونة رسين)
Голландский (перевод Rene)
Украинский (перевод Официальная команда локализации)
Немецкий (перевод Renate)

Установка

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

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

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

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

[stextbox id="НУЖНЫЙ_ID"]Подсвечиваемый текст и/или короткие коды[/stextbox]

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

[stextbox id="НУЖНЫЙ_ID" caption="Заголовок"]Подсвечиваемый текст и/или короткие коды[/stextbox]

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

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

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

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

Внимание

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

Вы можете использовать короткие коды других плагинов внутри короткого кода wp-special-textboxes. Например:

[stextbox id="download" caption="Скачать"][download id="48"][/stextbox]

Это пример использования “короткого кода” плагина 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 определена как

function stbHighlightText( $content = null, $id = 'warning', $caption = '', $atts = null )

1	function stbHighlightText( $content = null, $id = 'warning', $caption = '', $atts = null )

где

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

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

atts = array(
	'id' => 'warning',
	'mode' => '',
	'level' => 0,
	'caption' => '',
	'defcaption' => '',
	'color' => '',
	'ccolor' => '',
	'bcolor' => '',
	'bgcolor' => '',
	'bgcolorto' => '',
	'cbgcolor' => '',
	'cbgcolorto' => '',
	'bwidth' => '',
	'image' => '',
	'big' => '',
	'float' => 'false',
	'align' => 'left',
	'width' => '200',
	'collapsed' => '',
	'mtop' => '',
	'mleft' => '',
	'mbottom' => '',
	'mright' => '',
	'direction' => '',
	'collapsing' => 'default',
	'shadow' => ''
);

atts = array(

'id' => 'warning',

'mode' => '',

'level' => 0,

'caption' => '',

'defcaption' => '',

'color' => '',

'ccolor' => '',

'bcolor' => '',

'bgcolor' => '',

'bgcolorto' => '',

'cbgcolor' => '',

'cbgcolorto' => '',

'bwidth' => '',

'image' => '',

'big' => '',

'float' => 'false',

'align' => 'left',

'width' => '200',

'collapsed' => '',

'mtop' => '',

'mleft' => '',

'mbottom' => '',

'mright' => '',

'direction' => '',

'collapsing' => 'default',

'shadow' => ''

);

где

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 полностью определять массив не требуется, достаточно определить лишь необходимые параметры:

<?php stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); ?>

1	<?php stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); ?>

или

<?php 
if(class_exists('StbBlock')) {
	$block = new StbBlock('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true"));
	echo $block->block;
} 
?>

<?php

if(class_exists('StbBlock')) {

$block = new StbBlock('This is content', 'warning', 'This is caption', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true"));

echo $block->block;

}

Блок в блоке

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

[stextbox id="info" defcaption="true"]Некоторый текст[stb id="download" defcaption="true" collapsed="false" collapsing="false"]Некоторый текст во внутреннем блоке[/stb][/stextbox]

Режим 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.4.
Скачать ( раз) (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)

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

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

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

Vaiva Arend – 15.10.2011 - 21:03:

Я просто в восторге от плагина-как раз то ,что мне требовалось!Но вот такой вопрос-если в настройках указать свернутый блок,т.е. при загрузке страницы открывается свернутый текст ,то не будет ли это восприниматься поисковиками как скрытый текст на странице?
- minimus – 16.10.2011 - 11:00:
  
  Будет!
Пьяный калдырь – 08.11.2011 - 18:46:

Попробуйте прописать в .htaccess
AddDefaultCharset utf-8

и все зарабоатет
Vadim – 18.11.2011 - 08:45:

прикольный плагин, спасибо. Пошел использовать
Elvis – 01.01.2012 - 18:21:

Не могу понять почему не отображается блок на странице //device-news.ru/samye-luchshie-naushniki-v-mire/ (да и на других). Плагин удалялустанавливал снова. На блоге используется CDN (через WP Super Cache) и Scripts Gzip (с отключенным таже история)…
Boris – 09.01.2012 - 19:58:

Очень хороший плагин но он очень тормозит загрузку блога(((
время ответа от трех секунд время запроса 0,3 секунд
при повторной загрузке от 1,2 секунды. время запроса 0,3 секунд

в чем может быть проблема
Загружается файл wp-content/plugins/wp-special-textboxes/css/wp-special-textboxes.css.php?ver=4.0.65

Очень прошу подсказать выход из данной проблемы, не очень хочется менять плагин
- minimus – 13.01.2012 - 15:51:
  
  Файл стилей создается динамически … Надо что-то придумать …
igbur – 24.01.2012 - 11:58:

Здравствуйте, как у сделать вывод информации о любом плагине с сайта WordPress.org как у Вас:

Special Text Boxes
Плагин подсвечивает выводимый текст в виде цветного блока
Автор: minimus, версия: 4.2.70, обновлён: 16.12.2011,
Требуется версия WP: 3.0 или выше, протестирован до версии: 3.3.1.
Скачать (40 930 раз) (25 голосов)

Спасибо.
- igbur – 24.01.2012 - 15:32:
  
  Всё нашел сам, по поиском Яндекс он привел меня обратно на Ваш сайт, этот плагин (My WP Plugin Info) тоже Ваш оказывается)) Спасибо за полезные плагины.
igbur – 24.01.2012 - 12:10:

Подскажите, пожалуйста. У меня не прорисовываются блоки в Режиме CSS, начиная по-моему с 3 версии (точно не помню). В чем может быть проблема? Сайт эмейле.
Макс – 03.04.2012 - 06:47:

Подскажите пожалуйста как кнопку добавить на страницу добавления поста? Каждый раз приходится руками код вставлять, что очень трудоемко!
- minimus – 04.04.2012 - 08:50:
  
  Там есть кнопка …

Алексей – 11.05.2012 - 13:00:

Подскажите. Каким образом можно встроить такой плагин в сам шаблон темы. Просто не хочется каждый раз писать один и тот же код. Хочу встроить окошко с подпиской на новости под каждую запись, т.е. надо как то прописать в single.php , но как не могу понять

minimus – 11.05.2012 - 14:39:

Читайте про функцию stbHighlightText…

Алексей – 11.05.2012 - 14:45:

я читал,но не совсем понял… как только вставляю этот кусок кода (function stbHighlightText( $content = null, $id = ‘warning’, $caption = ”, $atts = null ))в шаблон, у меня намертво пропадает всё,даже админка. Я вставлял в functions.php . Расскажите пож.подробнее,я пока тока начинающий не всегда понимаю… Какой именно код вставить в single.php ?

minimus – 13.05.2012 - 11:35:

То, что Вы пытаетесь использовать – кусок кода из плагина, т.е. для посвящённых. Вам надо вставлять другой код, например:

<?php stbHighlightText('Подсвечиваемый текст', 'warning', 'Текст заголовка', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); ?>

1	<?php stbHighlightText('Подсвечиваемый текст', 'warning', 'Текст заголовка', array('image' => "//www.simplelib.com/images/wp-b.png", "big" => "true")); ?>

Александр – 05.09.2012 - 10:55:

Ребят кто знает в чем проблема хочу добавить Special Text Boxes на страницу, сохраняю, а

Special Text Boxes нет. Причем на другом шаблоне все норм а на том на котором нужно не работает.
Мб кто знает как поправить ситуацию
Константин – 10.09.2012 - 20:23:

Очень красивый плагин! Спасибо! Но есть проблема: в виджеты вставляется все отлично, да и в статью блок встает, но в диалоге вставки крякозябры. Переустановка плагина не помогла. Ваш совет по поводу корректировки .htaccess этой проблемы касается? Но, стесняюсь спросить, где это .htaccess?
- Елена – 26.02.2013 - 13:34:
  
  Константин, подскажите, пожалуйста, как вы вставили этот плагин в виджет?
  
  Очень нужно вывести кусок статьи или целиком статью с картинкой именно в виджете.
  
  Спасибо
  - minimus – 26.02.2013 - 14:17:
    
    Там виджет есть – “Специальный текст”, он от этого плагина.
Санчез – 13.10.2012 - 14:13:

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

Скачать фыайл такайта

вав

Скачать фыайл такайта

Как видите 2 стекстбокса появляется ??? почему??
- minimus – 14.10.2012 - 13:43:
  
  Такой глюк бывает у Opera …
Санчез – 15.10.2012 - 02:59:

Очень странно , но у меня при ставлке стразу 2 тега ставряется ..
stextbox /stextbox и за ним следом пустой но с заголовком stextbox /stextbox
Санчез – 15.10.2012 - 03:17:

Почему добавляется сразу 2 болка в запись ?? я его только один раз вставляю т.е. 1 раз жму создать настраиваю все и жму ок. Но как не пичально появляется 2 бокса , из который один пустой но с таким же заголовком
Витек – 21.03.2013 - 10:36:

Кто знает, подскажите пожалуйста, как сделать чтобы данный плагин не сильно затормаживал загрузку страничек, а у меня на блоге он очень долго грузится. Заранее спасибо за ответы.
Victor – 13.09.2013 - 06:02:

Подскажите как изменить размер и вид шрифта в заголовке и блоке. Нигде не нашел.
- minimus – 13.09.2013 - 08:52:
  
  Для режима javascript: Параметры -> Вкладка “Javascript” -> Размер шрифта текста заголовка, Семейство шрифтов текста заголовка
  Для режима CSS: Параметры -> Вкладка “CSS” -> Размер шрифта заголовка. Выбор семейства шрифтов для режима CSS не предусмотрен …

WordPress плагин Special Text Boxes

Режим CSS

Режим Javascript

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

Установка

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

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

Настройка

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

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

Блок в блоке

Режим CSS

Режим Javascript

Виджет

Скачать

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

Похожие статьи:

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

Об авторе

minimus

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