Буквица в тексте или как сделать красивую заглавную букву в статье на WordPress

Буквица - красивая заглавная букваЗдравствуйте друзья!

Каждый блогер пытается отличиться от других блогеров своим стилем, характером и уникальным оформлением статей. В этой статье я покажу вам, как можно оформить красиво текст на блоге созданном на WordPress, с помощью лёгкого плагина Simple Drop Cap.

Благодаря плагину Simple Drop Cap, вы можете очень просто сделать красивую заглавную букву в первых абзацах статьи. Такая буква ещё называется буквица.

Буквицы вы можете встретить в печатных журналах, газетах и книгах со сказками. На мой взгляд такие буквы выглядят очень эффектно и украшают текст, делая его особенным.

Если вы внимательные, то должны были давно заметить в моих статьях такие заглавные буквы, так как я использую плагин Simple Drop Cap уже несколько месяцев.

Впервые я увидел такое красивое оформление статей на блоге Юрия Дуболазова. Меня так впечатлили эти буквицы, что я сразу побежал во всемирную сеть искать способ внедрения таких букв в сайт, созданном на WordPress. И я нашёл.

 Красивая заглавная буква в статье

Итак, как же будет выглядеть эта заглавная буква в статье при использовании плагина Simple Drop Cap?

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

* Обыкновенный вывод красивой заглавной буквы в начале текста:

Обычный вывод красивой заглавной буквы в тексте

* Плавающий вывод красивой заглавной буквы в тексте статьи:

Плавающий вывод красивой заглавной буквы в тексте

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

Плагин Simple Drop Cap или красивое оформление текста

Плагин Simple Drop Cap вы можете скачать по этой ссылке, или найти его через поиск плагинов в админке.

Устанавливаем, активируем и переходим к настройкам.

Настройки плагина simple drop cap

У вас откроется страница с настройками. Давайте разберём каждый пункт.

Плагин Simple drop cap все настройки

* Display Mode — Под этим разделом вы должны выбрать режим отображения заглавной буквы.

1) Normal Mode — В данном случае, заглавная буква будет выглядеть как на моём первом скрине, то есть обычный режим. Поднимитесь выше по статье и посмотрите.

2) Float Mode — В данном случае, заглавная буква будет выглядеть как на втором скрине, то есть плавающий режим.

Кстати, почитайте эту статью тоже:   Как сделать необычный анимированный текст на Wordpress, чтобы у всех раскрылся рот от удивления

3) Custom Mode — В данном случае, заглавная буква будет выглядеть, в зависимости от ваших персональных настроек стилей CSS. Персональные настройки стилей вы можете прописать в пятом пункте Custom CSS Style. 

4) Drop Cap Color — Здесь вы можете выбрать любой цвет буквицы, в зависимости от стиля вашего шаблона.

5) Custom CSS Style — И так, здесь вы можете настроить свои персональные стили для буквицы с помощью CSS.

Заранее хочу отблагодарить Алексея Кобзарева за то, что он помог мне реализовать красивую заглавную букву с помощью CSS. Он предоставил мне уже готовый код стилей и сейчас я поделюсь им с вами. Кстати, та буквица, которую вы видите сейчас в моих статьях, как раз и реализована благодарю этому коду.

И так, в этом окошке вы должны прописать этот стиль:

font-family:Georgia, serif;
color: #000000;
font-size: 46px;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Для тех, кто не разбирается в кодах, я коротко объясню каждую строку, чтобы он смог сам его изменить на свой вкус:

font-family: шрифт
color: цвет
font-size: размер
text-shadow: тень

Так это должно выглядеть:

Стили CSS

6) Drop Cap Automation — Если вы поставите галочку в этом разделе, то буквица преобразится во всех абзацах статьи автоматически. Лично я вам не советую этого делать, так как такое оформление текста выглядит не красиво. Но можете попробовать.

Вот и все. Ничего сложного нет. В конце не забываем сохранить все настройки, нажав на кнопку «Сохранить изменения«

Как вывести буквицу в тексте

Вывести буквицу в тексте статьи очень просто.

Обратите внимание на то, что в редакторе появилась новая кнопка.

Кнопка simple drop cap в редакторе wordpress

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

Шорткод плагина Simple drop cap

А сейчас переходим на просмотр статьи в браузере и любуемся красивыми заглавными буквами.

Вот и всё!

Теперь вы знаете ещё один способ, красивого оформления статьи, с помощью внедрения буквицы, наподобие книг со сказками smile

Если вы хотите сделать ваш текст ещё более уникальным и впечатляющим, то почитайте мою статью об анимированном тексте.

А я с вами прощаюсь и до новых встреч. Пока-пока.

С уважением, Игорь Черноморец

Подпишитесь на обновления блога!

Введите свой e-mail адрес

К записи "Буквица в тексте или как сделать красивую заглавную букву в статье на WordPress" оставлено 45 коммент.
  1. Привет, Игорь.
    Тоже до недавнего времени пользовался буквицами, правда с помощью плагина Olevmedia Shortcodes. Сейчас не так часто вставляю — статьи короткие — нечего разбавлять smile

    • Привет Юра! Так я же именно из-за тебя и решил использовать эти буквицы! Мне так они понравились у тебя, что я не выдержал! Странно только, что я не обратился к тебе и не спросил каким образом ты это делаешь. Возможно, если бы я спросил тебя, то пользовался бы плагином как и у тебя.

      • Мой плагин поддерживает так называемые шорткоды один из которых и реализует буквицу. Есть там и другие интересные штуки типа таблицы, вставки медиа, блоков, кнопок…

        • Да Юра, я уже почитал об этом плагине. Надо будет поэкспериментировать с ним. Мне кажется, что благодаря ему можно сделать прикольные штучки на блоге. Спасибо

  2. Здорово! Игорь, нагрузку плагин дает большую?

    • Приветик Галя! Нагрузку этот плагин вообще не создает!!! Что с ним, что без него, блог грузится одинаково. Я также проверил нагрузку с помощью специального плагина, так этот грузит меньше 1%
      Так что давай, попробуй

  3. Андрей Косолапов:

    Класс! Интересный плагин, надо будет как нибудь попробовать, вдруг и мне понравится08

    • Привет Андрей.
      У всех разный вкус конечно,но мне оооочень нравится такое оформление текста. Прямо аж душа радуется при виде красивой заглавной буквы.
      Интересно  посмотреть на твоем блоге, как это будет выглядеть.

      • Андрей Косолапов:

        Как нибудь посмотришь, всему свое время07 А ты чего вчера не зашел?

        • Почему не зашёл? Да потому что у меня трое детей, одна из которых может неожиданно заплакать и устроить истерику по ерунде 11  Именно это и произошло!
          Главное, что я сейчас зашёл 07

  4. Красивая штука! Но опять эти плагины, еще начнет с чем-то конфликтовать и все нужно будет восстанавливать. Можно придумать при помощи CSS, но это тоже нужно постоянно париться с этим выделением. Может есть какое-то решение, чтобы сделать один раз и все заглавные буквы были, как у тебя в начале статьи?

    • Алексей, нужели ты так боишься плагинов? Так еще таких простых? Будут проблемы, так удали его!
      С помощью CSS  конечно же можно настроить такие буквицы, но я не спец, поэтому без понятия как это делать.
      Решение для автоматической настройки всех заглавных букв есть!!! Это и есть этот плагин. А если без плагина, то по любому надо будет прописывать функции и коды и скорей всего в файл function.php. Так какая разница? В любом случае, автоматическое внедрение буквиц во все абзацы, это не красиво. Я это пробовал с помощью плагина. Лучше всего самим выбирать тот абзац, где хочешь видеть красивую заглавную букву.

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

    • Алексей, а я когда мысленно представляю буквицу на твоем блоге, то мне очень нравится! Ты ее просто должен оформить так, чтобы подошла к дизайну блога. Ведь в настройках плагина можно выбрать цвет. Кроме того, ты же специалист по CSS…пропиши стили на твой вкус и воображение и будет супер! Я бы с радостью это сделал у себя, если бы умел 

      • Все таки я поставил себе этот плагин и по твоему совету сделал небольшие изменения в стилях. Зайди ко мне когда будет свободная минута, посмотри.

        • Алексей, я посмотрел и…великолепно 03
          Очень красиво!!! Я так понял, что ты решил внедрить красивую заглавную букву только в первом абзаце…А других абзацах тебе не нравится? В любом случае, даже только в первом, твоя буква выглядит превосходно.

          • Спасибо Игорь за рекомендации классного плагина. В других абзацах я ставить не хочу, потому что будет наляписто.

            • Кстати, вот тебе идея для новой статьи…

              Сделай тоже мини обзор этого плагина, только в твоём случае расскажи как сделать изменения в стилях для оригинальных заглавных букв. Лично мне будет очень интересно и познавательно почитать.

  6. Если хочешь, я тебе просто скину стили на почту.

    • Я понимаю…не хочешь похожую статью писать. Я буду очень признателен, если скинешь стили на почту. Только объясни где их прописывать. В настройках плагина (в поле) или в файле style CSS?
      Заранее спасибо

  7. Не то чтобы не хочу такую-же, просто у меня и так тем очень много, которые нужно вывести в свет, но за идею спасибо!07 

  8. Плагин конечно это хорошо) Но я все равно сторонник кода smile Тем более букву через css легко прописать)

    • Владимир, через CSS можно очень многое сделать, это понятное дело, но не все же разбираются в этом. А даже те, кто немного разбирается, не всегда нужно так боятся плагинов. Иногда плагин окажется намного удобней и проще, чем самый простой код CSS. И в конце концов, надоело, не понравилось, глючит, несовместим…взял и удалил.

      • Александр Каратаев:

        Плагин-то удалил, а вот шорткоды потом из статей выковыривать… 01

        • Хммм 08 А об этом то я и не подумал 11
          По моему, где-то я слышал о плагине, который удаляет все неиспользованные шорткоды в статьях. Не слышали о таком?
          Я точно где-то видел статью на эту тему. Позже поищу

  9. Александр Каратаев:

    Хм… Интересный плагин. Надо будет попробовать у себя… 24

    • Попробуйте Александр. Мне интересно будет посмотреть на буквицы на вашем блоге. Мне кажется, что будет красиво

      • Александр Каратаев:

        Подумал, подумал и решил не использовать это. Дело не в плагине или в шорткодах. В конце концов шорткоды можно удалить. Тут дело в другом. На мой взгляд, буквица будет красиво смотреться на сайте, оформленном, например, под какой-нибудь исторический стиль, ближе к летописи… Там — да, буквице самое место. Но вот на блогах, посвящённых больше техническим моментам, как мой, например, это мне кажется просто излишним…

        • Знаете Александр, я думаю, что это зависит не только в подходящем оформлении блога и его специфики!  Конечно же на сайте, который оформлен под исторический стиль, это буквица будет смотреться более эффектно, но лично мне очень нравится подобное оформление на абсолютно всех сайтах! Может быть у меня со вкусом что-то не то, но это факт. Разве на моём блоге она выглядит нелепо? Только честно!

          • Александр Каратаев:

             Разве на моём блоге она выглядит нелепо? Только честно!

             
            Ну я-бы сказал так: сама по себе буквица у тебя красиво оформлена, с тенью и т.д… Но в целом, смотрится как-то не к месту…
            Игорь, это только моё личное мнение…

            • Ну….ладно. я уважаю ваше мнение, но мне всё равно нравится. Пока мне не надоела это буква, будет она виднеться в первом абзаце всех статей. Но с остальных абзацев я её убрал.

      •  Мне интересно будет посмотреть на буквицы на вашем блоге

         Ну вот, кстати, можешь посмотреть и на моём блоге… Как тебе такая реализация?
        07

  10. orenkomp.ru:

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

  11. Все, уже использую! Получилось красиво, очень нравятся мне буквицы.

  12. Отличный плагин. Благодаря ему статьи можно сделать красивыми и незабываемыми.  good 

Оставить свой комментарий

Поиск по сайту
Следите за новостями блога

Подпишитесь на обновление блогa и получайте первыми на ваш Email, новые статьи!


Реклама
© 2018    Блог Игоря Черноморца    //    Войти   //    Вверх
Яндекс.Метрика