mojwp.ru
Назад

Красивый текстовый блок. Плагин Special Text Boxes

Опубликовано: 17.08.2011
25
2250

Cегодня я познакомлю с замечательным плагином, способным выводить красивые текстовые блоки, украшенные соответствующей раской и фоном, а так же имеющий характерную для блока картинку. Плагин позволяет провести тонкую настройку, благодаря чему данные блоки гармонично впишутся в дизайн любого сайта. При помощи Special Text Boxes Вы сможете придать своему блогу индивидуальность, украсить его и сделать более "читабельным".

Special Text Boxes напоминает другой плагин, а именно WP-Note. Однако существенным отличием Special Text Boxes является его гибкость и простота настройки. Для того же, кто не хочет залезать в "дебри" индивидуальной настройки под каждый пост, есть возможность выбора из готового шаблона оформления текстового блока табличкой.

Вот так выглядит один из шаблонных блоков:

текстовые блоки

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

настройка special text box

Ссылку на последнюю версию плагина Вы найдете в конце статьи. Если не знаете как устанавливать плагины Вордпресс, то Инструкция по установке плагина WordPress будет кстати.

Прежде чем активировать плагин и настраивать его, убедитесь, что в файле .htaccess на первой строке находится следующий код:

AddDefaultCharset UTF-8

Именно этот код в нужном месте позволяет избежать проблем с "кракозяблами" на некоторых серверах.

Установив плагин можно и приступать к его настройкам. Идем "Параметры/Подсветка текста" либо "Параметры/Special Text Boxes". Все на русском, поэтому проблем с настройкой не должно возникнуть. Если же будут вопросы, то задавайте их в комментариях к статье. По возможности отвечаю оперативно.

Помимо всего прочего, Вы можете настроить блок таким образом, что он приобретет эффект сворачивания, который называется "спойлер" (такое обычно используют на разнообразных форумах). Правда, такого эффекта можно добиться при использовании других плагинов, к примеру wpSpoiler, либо Advanced Spoiler. Возвращаясь к Special Text Boxes, скажу, что за подобный эффект отвечает установка галочки в настройках плагина. Так же можно вручную указать данный эффект, когда будете очередной раз добавлять блок в статье (об этом ниже).

Как установить красивый текстовый блок

Способ №1. При помощи визуального редактора. После активации плагина у вас появится дополнительная кнопка в панели редактирования статьи (обязательно заметите, ибо она розового цвета), нажав на которую Вы сможете настроить блок под свой стиль. Примерно так:

Special Text Boxes

Не обращайте внимание на то, что у меня на английском - просто я привык пользоваться плагинами на английском языке.

Способ №2. Данный же способ добавления блока выполняется в режиме HTML-разметки. Запоминайте синтаксис тега для вставки блока:

[stextbox id="ID"]текст блока[/stextbox]
 
где ID может быть: 
alert - опасность (красный блок)
download - скачивание (синий блок)
info - информация (зеленый блок)
warning - предупреждение (желтый блок)
black - просто черный блок
grey - серый блок (в котором не работают теги плагина)
custom - настраиваемый вами блок

Помимо ID, подразумевающего под собой стандартные заготовки, Вы можете индивидуально настроить под свои нужды любой текстовый блок. Вот дополнительные параметры:

caption - текст заголовка.
collapsed - вывод свернутого (true) или развернутого (false) блока.
color – цвет текста.
ccolor – цвет текста заголовка.
bcolor – цвет бордюра.
bgcolor – цвет фона.
cbgcolor – цвет фона заголовка.
image – URL иконки. null чтобы вывести блок без нее.
big – принудительная установка размера изображения. true или false.
float – обтекание текста. true или false (по умолчанию).
align – выравнивание блока в режиме обтекания текста. left (по умолчанию) или right.
width – ширина блока в пикселах в режиме обтекания текста, по умолчанию 200.

Как видно из этих параметров, блок может обтекаться текстом, что будет выглядеть довольно стильно.
Помимо всего прочего, зайдя в "Внешний Вид\Виджеты" Вы увидете виджет данного плагина. Т.е. красивые блоки можно применять и в сайдбарах. Достаточно один раз настроить.

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

Через массив $atts можно задать следующие параметры:

atts = array(
  'color' => '',
  'ccolor' => '',
  'bcolor' => '',
  'bgcolor' => '',
  'cbgcolor' => '',
  'image' => '',
  'big' => '' );

Настраивать блоки текста (фото) выводимые с помощью данного плагина можно до бесконечности. Думаю, что на любом сайте найдется место для данного плагина.
[downpg wp="2.6 или выше" vp="4.0" href="http://wordpress.org/extend/plugins/wp-special-textboxes/"]Скачать плагин Special Text Boxes[/downpg]

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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Ирина
    Опубликовано: 05.01.2012 Ответить на сообщение

    В Interpnet Explorer - углы не закругляет.

    • mojvit
      Опубликовано: 05.01.2012 Ответить на сообщение

      и не будет, пока полуфабрикаты microsoft не начнут поддерживать CSS3, как все остальные браузеры

  • Oksana
    Опубликовано: 07.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 07.02.2013 Ответить на сообщение

      это не плагин. вручную исправлены некоторые файлы движка WordPress

  • Oksana
    Опубликовано: 08.02.2013 Ответить на сообщение

    Можно спросить какие именно? Очень круто сделано, Вы не публикуете линки на комментаторов и вместе с тем, прописываются названия сайтов. Умно очень.

  • Станислав Степанов
    Опубликовано: 11.02.2013 Ответить на сообщение

    Здравствуйте,Виталий!
    Поддался вашим убедительным доводам,- не стал писать через "Обратку".
    У меня на блоге после активации плагина он выдает "..." Хвостом чую, дело в .htaccess.
    В этом файле понимаю еще меньше, чем в кодах.
    Вопрос Классический: "Что делать?!

    • Виталий
      Опубликовано: 11.02.2013 Ответить на сообщение

      не понял проблемы

      • Станислав Степанов
        Опубликовано: 11.02.2013 Ответить на сообщение

        Спасибо,Виталий!
        Проблема БЫЛА в том, что после выделения текста в окне редактирования статьи ( и нажатия на кнопку) выскакивало окно с "Ерезью".
        Объяснюсь. Строку в файл .htaccess я не прописывал. Потому что, этого файла БОЮСЬ.
        После "пошаривания по блогу" нашел другую вашу статью с этим файлом.
        В общем, долгая история. Сейчас строку кодировки вставил( интуитивно) - все начало работать.
        Такому Людю,далекому от HTML ни рожна в файле не понятно.

        P.S. Не затруднит скинуть ссылку на "наиболее полную" литературу об .htaccess?
        Или, хотя бы "начальную": как он выглядит,сколько там строк прописано.
        СПАСИБО

        • Виталий
          Опубликовано: 12.02.2013 Ответить на сообщение

          вот здесь полная инструкция http://lmgtfy.com/?q=htaccess+%D0%B4%D0%BB%D1%8F+%D0%BD%D0%B0%D1%87%D0%B8%D0%BD%D0%B0%D1%8E%D1%89%D0%B8%D1%85

      • Станислав Степанов
        Опубликовано: 11.02.2013 Ответить на сообщение

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

        • Виталий
          Опубликовано: 12.02.2013 Ответить на сообщение

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

          • Станислав Степанов
            Опубликовано: 12.02.2013 Ответить на сообщение

            За инструкцию спасибо.А с виджетом, там другие мысли.И все равно, спасибо.

  • Александр
    Опубликовано: 25.02.2013 Ответить на сообщение

    Всем - привет.
    Хорошая статейка, полезная. Есть вопрос: "Возможно-ли с помощью плагина Special Text Boxes вывести блоки в списке анонсов, например, в рубриках или на главной определяя его место (что-то вроде: после 2-го поста, перед пятым или между 6-м и 7-м)?"
    На Вашем блоге встречал аналогичный хак. Соответственно. еще вопрос: "Хак или плагин?" Ну, и "(что-то вроде: после 2-го поста, перед пятым или между 6-м и 7-м)?" только с помощью хака.

    • Виталий
      Опубликовано: 25.02.2013 Ответить на сообщение

      Сделать все можно.
      Вопрос в другом состоит: "готовы ли вы заплатить программисту, чтобы он реализовал подобную невостребованную функцию?"

      • Александр
        Опубликовано: 25.02.2013 Ответить на сообщение

        И хау мач? Решение этого вопроса + Ваш хак про блоки в статьях = WhyDoWork AdSensе. Или как?

        • Виталий
          Опубликовано: 25.02.2013 Ответить на сообщение

          Пишите ТЗ и на почту.
          Передам кодеру, который по объему работ скажет сумму.
          Подобный вопросы в каментах не обсуждаются.

  • Cергей
    Опубликовано: 27.08.2013 Ответить на сообщение

    Установил плагин на своем сайте http://healthy-zhyzni.com/ но появляется одна лишняя рамочка не знаю что делать. Если кто знает помогите.

    • Виталий
      Опубликовано: 28.08.2013 Ответить на сообщение

      Я так понимаю, мешает красная прерывистая?
      Если так, то посмотрите в настройках своего произвольного бокса.
      Либо принудительно можно удалить:
      http://healthy-zhyzni.com/wp-content/plugins/wp-special-textboxes/css/wp-special-textboxes.css.php и здесь в строке 564 находим такую запись
      border: 1px dashed #F844EE;
      Вот ее полностью удаляем.

  • Петр
    Опубликовано: 10.09.2013 Ответить на сообщение

    Очень хорошая статья, но, неожиданно:) меня даже больше привлек блок в самом конце, а именно - "услуги" - не подскажете, Виталий, что это за плагин такой? Спасибо!

    • Виталий
      Опубликовано: 10.09.2013 Ответить на сообщение

      Это не плагин. Сделано мной в ручную: html+css

  • Serg
    Опубликовано: 28.12.2013 Ответить на сообщение

    А у меня почему-то розовая кнопка в визуальном редакторе так и не появилась

  • Андрей Косолапов
    Опубликовано: 21.03.2014 Ответить на сообщение

    Да интересный плагин, надо будет попробовать. Пока пользуюсь плагином WP-Note, но по моему этот круче. Спасибо, попробую.

  • Компьютерная помощь
    Опубликовано: 07.05.2014 Ответить на сообщение

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

  • Людмила
    Опубликовано: 17.11.2015 Ответить на сообщение

    установила на сайт плагин по ссылкес тренинга а через несколько часов слетели все настройкии вместо 3-х страниц осталась всего одна а все виджеты рухнули в подвал.настроить не могу тк в настройках дизайна не работает шкала где выбирать формат и отсутствует линека.из-за чего такая ерунда получается?

  • topfuns
    Опубликовано: 27.06.2018 Ответить на сообщение

    Огромное спасибо, отличная статья

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.