WordPress плагин Special Text Boxes

12.03.2009 автор: minimus 183 комментария

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

(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="http://blogcoding.ru/wp-content/plugins/wp-special-textboxes/images/heart.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' => "http://www.simplelib.com/images/wp-b.png", "big" => "true")); ?>

1	<?php stbHighlightText('This is content', 'warning', 'This is caption', array('image' => "http://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' => "http://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' => "http://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, версия: 4.3.72, обновлён: 13.02.2012,
Требуется версия WP: 3.0 или выше, протестирован до версии: 3.3.1.
Скачать (44 284 раза) (25 голосов)