Блоговод | 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)

Эдуард Отечественный – 10.10.2009 - 01:04:

Интересная фича с открытием/закрытием блока текста. В технических моментах я не силён, но было, мне кажется, очень прогрессивно, если при вставке каждого блока можно было выбирать (например, в диалоге вставки) отображать по умолчанию блок закрытым или открытым.
- minimus – 13.10.2009 - 22:00:
  
  На моём международном блоге этот вопрос тоже был поднят 😉 . В следующей версии обязательно.
redfox – 15.10.2009 - 09:00:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; zolotoy; zolotoy)
Timestamp: Thu, 15 Oct 2009 06:56:04 UTC

Message: Function expected
Line: 2
Char: 1
Code: 0
URI: //***.***/wp-content/plugins/wp-special-textboxes/js/wstb.js.php?ver=abc

вот такая вот петрушка.. это нормальное явление?
- minimus – 15.10.2009 - 16:28:
  
  Это, разумеется, не нормально. Однако, поскольку плагин после последнего обновления скачали около 700 раз и претензий пока не поступало (скорее наоборот), можно сделать вывод, что у Вас “особый” случай. У меня есть два предположения-объяснения данного “феномена”:
  1. Криво загрузился файл wstb.js.php. Проверьте содержимое файла через клиент FTP. А лучше просто повторно загрузите плагин.
  2. Какой-то из других установленных у Вас плагинов “обгадил всю малину”. Ищите плагин, который напрямую, без использования механизмов безопасной загрузки, грузит какую-либо библиотеку javascript (Например Tabbed Widget).
oyua – 26.10.2009 - 15:52:

Добрый день!

Плагин мне нравится, но после последнего обновления в IE6 заметил выдачу ошибки:

Строка 3
Символ 1
Ошибка Предполагается наличие функции
Код 0

В других браузерах вроде такой ошибки нет.
Можно ли что-нибудь сделать по устранению выдачи данной ошибки в IE6?
Или уж смириться с этим? Хотя еще достаточно большое количество пользователей “гуляют” по Интернету, используя IE6.
- minimus – 26.10.2009 - 22:57:
  
  Если при этом всё работает, то это реакция IE6..8 на jQuery 😉
  - oyua – 27.10.2009 - 06:48:
    
    И что Вы посоветуете?
    - minimus – 27.10.2009 - 22:18:
      
      Если плагин работает (блоки сворачиваются и разворачиваются), то ничего, это реакция IE на использование анонимных функций. Как сказал один умный человек: “Ну что ж тут поделать. Если в МС написали кривой браузер, в котором течёт память при использовании анонимных функций, то это не повод для веб-разработчиков не пользоваться анонимными функциями.“
      - oyua – 28.10.2009 - 07:01:
        
        ——————————–
        «Ну что ж тут поделать. Если в МС написали кривой браузер, в котором течёт память при использовании анонимных функций, то это не повод для веб-разработчиков не пользоваться анонимными функциями.«
        ——————————-
        
        Конечно не повод, если не обращать внимания на совместимость наших продуктов с браузерами IE.
        Но ведь, мы все вынуждены подстраивать свои продукты под IE, а не наоборот (не смотря на все его недостатки).
        Вы предлагаете пользователям Вашего продукта смириться с частичной несовместимостью Вашего продукта с IE.
        Интересный подход…
        Правда, он несколько противоречит тому, что Вы написали в разделе “Тестирование”:
        —————–
        Тестирование плагина проводилось на следующих браузерах:
        
        1. Internet Explorer 7
        2. Mozilla FireFox 3.0.8
        3. Opera 10.0 alpha
        4. Google Chrome 1.0.154.53
        5. Apple Safari 3.1.2 (for Windows)
        —————-
        Вами проделана большая, отличная работа (мне она очень нравится).
        Я, конечно, буду пользоваться вашим продуктом, как пользуюсь IE, каждый раз огорчаясь, когда проявляются те или иные его “особенности”.
        
        Удачи Вам!
        С уважением,
        oyua
oyua – 27.10.2009 - 06:31:

Добрый день!

Прошу прощения, но подобная ошибка возникает и в IE8.
Правда, в IE8 выдается немного иное сообщение:

Сообщение: Предполагается наличие функции
wstb.js.php          Строка: 2
Код: 0                   Символ: 1
URI-код: //www.1cguru.ru/wp-content/plugins/wp-special-textboxes/js/wstb.js.php?ver=2.8.5
Перезаливка файла wstb.js.php  по ftp – не помогает.
Более того, на локальной копии сайта данная ошибка тоже наблюдается.

Можно ли это исправить?

С уважением,

oyua
oyua – 05.11.2009 - 08:34:

Добрый день!
Сегодня обновил Ваш плагин (до версии 3.3.35).
В баузерах IE сообщения об ошибках не выдаются.
Все работает нормально.
Спасибо!
Удачи!
- minimus – 05.11.2009 - 17:33:
  
  😉
Ван – 26.11.2009 - 01:54:

класс! вот как раз для цитат очень хорошо подходит!
nethead – 10.12.2009 - 08:38:

1) Установил себе плагин, почему то он на английском языке…
2) Не появляется иконка редактирования текста…Что делать?
nethead – 10.12.2009 - 08:47:

3) При нажатии иконки редактирования текста, появляютя ироглифы
- minimus – 10.12.2009 - 15:12:
  
  Видимо что-то с кодировкой – должна быть UTF-8 …
Perri Mason – 15.01.2010 - 10:24:

У меня такой вопрос, хоть убей, отображается заголовок и сам блок с текстом раздельно…
- minimus – 15.01.2010 - 14:20:
  
  Хотелось бы увидеть собственными глазами … 😉 URL?
Георгий – 22.01.2010 - 21:00:

Скачал, все вроде бы нормально, а вот поля текста внутри рамки не могу отрегулировать (хочеться увлеличить поля текста). И еще: рамка заглавия низкая
- minimus – 24.01.2010 - 16:35:
  
  Насчёт заголовка работа идёт. С текстом тоже что-нибудь придумаю …

Joker – 15.02.2010 - 18:40:

Как в шаблоне single.php после записи вставить блок, там должен быть яваскрипт. У мя выбивает ошибку.

minimus – 15.02.2010 - 19:30:

Попробуйте так:

<?php $myScript = '<script src="'.get_bloginfo('template_url')."/javascript/date.js".'" type="text/javascript"></script>';
  if(function_exists('stbHighlightText')) stbHighlightText('Тест функции stbHighlightText '.$myScript, 'warning', '', array ('big' => 'false')); ?>

1 2	<?php $myScript = '<script src="'.get_bloginfo('template_url')."/javascript/date.js".'" type="text/javascript"></script>'; if(function_exists('stbHighlightText')) stbHighlightText('Тест функции stbHighlightText '.$myScript, 'warning', '', array ('big' => 'false')); ?>

armo – 01.03.2010 - 09:01:

У меня не работает, выводится только текст, а подсветки нет
- minimus – 01.03.2010 - 10:40:
  
  URL страницы, где не показывается?
  - armo – 01.03.2010 - 12:06:
    
    //www.intidea.ru/2010/03/01/nastrojka-flash-video-player-dlya-wordpress/
    Фраза “Настройка цветов доступна только в том случае, если тема поддерживает смену цветов”.
    В записи вот так
    
    Настройка цветов доступна только в том случае, если тема поддерживает смену цветов
    - minimus – 01.03.2010 - 15:58:
      
      Такое ощущение, что у Вас пропали shortcodes при сохранении поста … Проверьте …
      - armo – 01.03.2010 - 16:52:
        
        Спасибо, заработало, виной тому, скорей всего, был Dean’s FCE Editor
armo – 01.03.2010 - 18:37:

Плагин вообще не дружис Dean’s FCKEditor, как это можно исправить?
- minimus – 01.03.2010 - 20:44:
  
  Надо смотреть, перерабатывать плагин … Чуть позже – сейчас переустанавливаю винду … 🙁
  - armo3000 – 23.04.2010 - 17:30:
    
    Здравствуйте, просмотрев сохраненный с помощью Dean FCKEditor пост с помощью стандартного редактора стало ясно, что FCKEditor превращает кавычки в ". Следовательно, в плагин нужно добавить поддержку " вместо кавычек. Вот пример: . Заранее благодарен 🙂
    - minimus – 23.04.2010 - 18:38:
      
      Вообще-то кавычки можно совсем не ставить … 😉
Mamont – 13.04.2010 - 22:01:

Хочу выразить свою признательность автору за плагин. Огромное спасибо.
И вопрос. Или пожелание. Есть необходимость создать несколько “настраиваемых” блоков-заготовок. Как можно это сделать? Если нет – примите, как предложение для следующей версии.
Андрей – 22.05.2010 - 17:13:

Плагин поставил давно, но пользоваться стал недавно. Сейчас ещё раз перечитал настройки. Вот только про закруглённые углы я что-то не нашёл, где ставится.. Точнее, почему не закругляется 🙂
- minimus – 22.05.2010 - 20:34:
  
  Устанавливается в параметрах (Дополнительные параметры -> Разрешить использование закруглённых углов?).
  Не закругляется в Opera, IE6..8
  Закругляется в Safari, Chrome, Firefox, IE9.
Александр – 26.06.2010 - 11:09:

Установил плагин, но когда в текстовом редакторе выделяю текст, открывается окошечко с настройками – так вот в нем сплошные кракозябры, а не текст. Пользоваться не возможно. У меня вордпресс 2.9.2. Что делать?
Вадим – 05.07.2010 - 02:30:

Что нужно прописать чтобы настроить “на лету” свернутость или развернутость в заголовок?
- minimus – 13.07.2010 - 18:40:
  
  collapsed=true – свёрнут
  collapsed=false – развёрнут

WordPress плагин Special Text Boxes

Режим CSS

Режим Javascript

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

Установка

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

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

Настройка

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

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

Блок в блоке

Режим CSS

Режим Javascript

Виджет

Скачать

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

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

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

Об авторе

minimus

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