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

Special Text BoxesCегодня я познакомлю с замечательным плагином, способным выводить красивые текстовые блоки, украшенные соответствующей раской и фоном, а так же имеющий характерную для блока картинку. Плагин позволяет провести тонкую настройку, благодаря чему данные блоки гармонично впишутся в дизайн любого сайта. При помощи 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]
 
<em>где ID может быть: </em>
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.

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

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

<?php stbHighlightText( $content = "Это блок, выводимый 
через вызов функции в шаблоне.", $id = 'warning', 
$caption = 'Special Text Boxes', $atts = null ) ?>

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

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

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

Требуемая версия WP:  2.6 или выше
Рассмотренная версия плагина:  4.0
Скачать плагин

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

Считаете себя фанатом Day Z? Тогда советую посетить сайта minibuc.ru, где найдете полезный материал и гайды.

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 24 комментария
  1. Ирина says:
    http://beginway.com

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

    • mojvit says:

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

  2. Oksana says:
    http://internet.degavo.ru

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

    • Виталий says:

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

  3. Oksana says:
    http://internet.degavo.ru

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

  4. Станислав Степанов says:
    http://www.najdisebja.com/

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

    • Виталий says:

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

      • Станислав Степанов says:
        http://www.najdisebja.com/

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

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

        • Виталий says:

          вот здесь полная инструкция 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

      • Станислав Степанов says:
        http://www.najdisebja.com/

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

        • Виталий says:

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

          • Станислав Степанов says:
            http://www.najdisebja.com/

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

  5. Александр says:
    http://www.maslovavto.ru/

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

    • Виталий says:

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

      • Александр says:
        http://www.maslovavto.ru/

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

        • Виталий says:

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

  6. Cергей says:

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

    • Виталий says:
      http://mojWP.ru/

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

  7. Петр says:

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

    • Виталий says:
      http://mojWP.ru/

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

  8. Serg says:
    http://vsevologsk.com/board/index.php

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

  9. Андрей Косолапов says:
    http://telets.com.zp.ua

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

  10. Компьютерная помощь says:
    http://ssecond-life.ru

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

  11. Людмила says:
    http://babushkinsunduchok.ru

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.12MB | MySQL:106 | 0,290sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html
Друг, не уходи!